Este es un tutorial muy simple y rápido sobre cómo crear calificaciones de estrellas muy fácilmente usando jquery y los visitantes de la tienda votan en la base de datos para mostrar la popularidad del producto. función de calificación de estrellas usando PHP y Mysql.
Creé una base de datos de muestra donde los votos de los visitantes se almacenarán y, al usar esos votos, mostraré la calificación promedio del producto, el script creado en Core PHP y Mysql para que pueda integrarlo fácilmente en su proyecto basado en la web.
Ejemplo de estructura de tabla de calificación.
CREATE TABLE IF NOT EXISTS `rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `product_id` int(11) NOT NULL, `vote` float NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 |
En este tutorial, utilicé un complemento de calificación de estrellas jquery para mostrar la calificación de estrellas como parte de la interfaz de usuario. Puede explorar más características de calificación de la interfaz de usuario con este complemento de calificación oficial. También es compatible con la función de respuesta de arranque.
http://www.jqueryrain.com/?d8VUtmAN
Cree un archivo de interfaz de usuario de muestra con algunos productos de demostración y su calificación.
<table border=1>
<tr><td >
<img src="img/p1.jpeg">
<h3>Product-1</h3>
<input value="0" type="number" class="rating" min=0 max=5 step=0.1 data-size="md" data-stars="5" productId=1>
</td>
<td>
<img src="img/p2.jpeg">
<h3>Product-2</h3>
<input value="0" type="number" class="rating" min=0 max=5 step=0.1 data-size="md" data-stars="5" productId=2>
</td>
</tr></table> |
Después de eso, incluya las bibliotecas de calificación requeridas (css y js).
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<link href="css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/star-rating.min.js" type="text/javascript"></script> |
Aplique el código jquery cada vez que el usuario dé una calificación al producto, luego una solicitud de ajax irá al servidor con productId y se le otorgará un voto y deberá almacenar estos valores en su base de datos.
<script type="text/javascript">
$(function(){
$('.rating').on('rating.change', function(event, value, caption) {
productId = $(this).attr('productId');
$.ajax({
url: "rating.php",
dataType: "json",
data: {vote:value, productId:productId, type:'save'},
success: function( data ) {
alert("rating saved");
},
error: function(e) {
// Handle error here
console.log(e);
},
timeout: 30000
});
});
});
</script> |
Crear archivo de servidor rating.php , donde escribirá la función de guardado y recuperación de calificaciones.
<?php
function connect() {
$hostname = "localhost";
$username = "root";
$password = "root";
$dbname = "test";
$con = mysqli_connect($hostname, $username, $password, $dbname);
return $con;
}
function getRatingByProductId($con, $productId) {
$query = "SELECT SUM(vote) as vote, COUNT(vote) as count from rating WHERE product_id = $productId";
$result = mysqli_query($con, $query);
$resultSet = mysqli_fetch_assoc($result);
if($resultSet['count']>0) {
$data['avg'] = $resultSet['vote']/$resultSet['count'];
$data['totalvote'] = $resultSet['count'];
} else {
$data['avg'] = 0;
$data['totalvote'] = $resultSet['count'];
}
return $data;
}
if(isset($_REQUEST['type'])) {
if($_REQUEST['type'] == 'save') {
$vote = $_REQUEST['vote'];
$productId = $_REQUEST['productId'];
$query = "INSERT INTO rating (product_id, vote) VALUES ('$productId', '$vote')";
// get connection
$con = connect();
$result = mysqli_query($con, $query);
echo 1; exit;
}
}
?> |
Vea la demostración en vivo y descargue el código fuente.
DEMOSTRACIÓN
| DESCARGAR
|
Espero que este tutorial sea útil para crear un sistema de calificación para sus proyectos basados en la web.
