Il s'agit d'un didacticiel très simple et rapide sur la façon de créer très facilement des classements par étoiles à l'aide de jquery Et les visiteurs du magasin votent dans la base de données pour afficher la popularité du produit. fonction d'évaluation par étoiles utilisant PHP et Mysql.
J'ai créé un exemple de base de données où le vote des visiteurs sera stocké et à l'aide de ces votes, j'afficherai la note moyenne du produit, un script créé en Core PHP et Mysql afin que vous puissiez facilement l'intégrer dans votre projet Web.
Exemple de structure de tableau d'évaluation.
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 |
Dans ce tutoriel, j'ai utilisé un plugin de classement par étoiles jquery pour afficher le classement par étoiles en tant que partie de l'interface utilisateur, vous pouvez explorer plus de fonctionnalités de classement de l'interface utilisateur par ce plugin de classement officiel. Il prend également en charge la fonction réactive d'amorçage.
http://www.jqueryrain.com/?d8VUtmAN
Créez un exemple de fichier d'interface utilisateur avec certains produits de démonstration et sa note.
<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> |
Après cela, incluez les bibliothèques de notation requises (css et 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> |
Appliquez le code jquery chaque fois que l'utilisateur attribue une note au produit, une requête ajax sera envoyée au serveur avec l'ID de produit et un vote donné et vous devrez stocker ces valeurs dans votre base de données.
<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> |
Créer le fichier serveur rating.php , Où vous écrivez la fonction de sauvegarde et de récupération des notes.
<?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;
}
}
?> |
Voir la démo en direct et télécharger le code source.
DÉMO
| TÉLÉCHARGER
|
J'espère que ce tutoriel vous sera utile pour créer un système de notation pour vos projets Web.
