Dit is een heel eenvoudige en snelle tutorial over hoe je heel gemakkelijk sterbeoordelingen kunt maken met jQuery En bezoekers kunnen stemmen in de database om de productpopulariteit weer te geven. Dit is een voorbeeldscript. sterbeoordelingsfunctie met behulp van PHP en Mysql.
Ik heb een voorbeelddatabase gemaakt waarin de stemmen van bezoekers worden opgeslagen en met behulp van die stemmen zal ik de gemiddelde beoordeling van het product weergeven, een script gemaakt in Core PHP en Mysql, zodat u deze eenvoudig kunt integreren in uw webgebaseerde project.
Voorbeeld van de structuur van de beoordelingstabel.
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 |
In deze tutorial heb ik een jQuery-sterbeoordelingsplug-in gebruikt om sterbeoordeling weer te geven als UI-onderdeel. Je kunt meer UI-beoordelingsfuncties verkennen met deze officiële beoordelingsplug-in. Het ondersteunt ook de bootstrap-responsieve functie.
http://www.jqueryrain.com/?d8VUtmAN
Maak een voorbeeld-UI-bestand met enkele demoproducten en de beoordeling ervan.
<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> |
Voeg daarna de vereiste beoordelingsbibliotheken toe (css &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> |
Pas jQuery-code toe wanneer een gebruiker ooit een beoordeling aan het product geeft, dan zal één ajax-verzoek naar de server gaan met product-ID en een stem krijgen en u moet deze waarden in uw database opslaan.
<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> |
Maak serverbestand rating.php , Waar u de functie voor het opslaan en ophalen van beoordelingen schrijft.
<?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;
}
}
?> |
Bekijk live demo en download broncode.
DEMO
| DOWNLOAD
|
Ik hoop dat deze tutorial nuttig zal zijn om een beoordelingssysteem voor je webgebaseerde projecten te maken.