Dette er en meget enkel og hurtig vejledning om, hvordan man opretter stjernebedømmelser meget nemt ved hjælp af jquery. Og butiksbesøgende stemmer i databasen for at vise produktpopularitet. Dette er et eksempelscript, her brugte jeg ikke særlig god brugergrænseflade, jeg fokuserer bare på at skabe dynamisk stjernebedømmelsesfunktion ved hjælp af PHP og Mysql.
Jeg har oprettet en prøvedatabase, hvor besøgende stemmer vil blive lagret, og ved hjælp af disse stemmer vil jeg vise gennemsnitlig vurdering af produktet, script oprettet i Core PHP og Mysql, så du nemt kan integrere i dit webbaserede projekt.
Eksempel på struktur for vurderingstabel.
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 |
I denne tutorial brugte jeg et jquery-stjernerating-plugin til at vise stjerneklassificering som UI-del, du kan udforske flere UI-vurderingsfunktioner med dette officielle rating-plugin. Det understøtter også bootstrap-responsive funktion.
http://www.jqueryrain.com/?d8VUtmAN
Opret prøve-UI-fil med nogle demoprodukter, og dens vurdering.
<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> |
Herefter skal du inkludere de nødvendige vurderingsbiblioteker (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> |
Anvend jquery-kode, når en bruger giver bedømmelse til produktet, så vil en ajax-anmodning gå til serveren med produkt-id og givet stemme, og du skal gemme disse værdier i din database.
<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> |
Opret serverfil rating.php , Hvor du vil skrive funktionen Gem og hent vurdering.
<?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;
}
}
?> |
Se live demo og download kildekode.
DEMO
| DOWNLOAD
|
Håber denne tutorial vil være nyttig til at lave et ratingsystem til dine webbaserede projekter.