Det här är en mycket enkel och snabb handledning om hur man skapar stjärnbetyg väldigt enkelt med jquery Och butiksbesökare röstar i databasen för att visa produktens popularitet. Det här är ett exempelskript, här använde jag inte särskilt bra användargränssnitt, jag fokuserar bara på att skapa dynamiskt stjärnklassificeringsfunktion med PHP och Mysql.
Jag skapade en exempeldatabas där besökarnas röst kommer att lagras och med hjälp av dessa röster kommer jag att visa genomsnittliga betyg för produkten, skript skapade i Core PHP och Mysql så att du enkelt kan integrera i ditt webbaserade projekt.
Exempel på klassificeringstabellstruktur.
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 den här handledningen använde jag ett jquery-stjärnklassificeringsplugin för att visa stjärnbetyg som UI-del. Du kan utforska fler UI-betygsfunktioner med detta officiella betygsplugin. Den stöder också bootstrap-responsiv funktion.
http://www.jqueryrain.com/?d8VUtmAN
Skapa exempel på användargränssnittsfilen med några demoprodukter och dess betyg.
<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> |
Inkludera sedan obligatoriska klassificeringsbibliotek (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> |
Använd jquery-kod när någon gång användaren ger betyg till produkten så kommer en ajax-begäran att gå till servern med produkt-ID och ges röst och du måste lagra dessa värden i din databas.
<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> |
Skapa serverfil rating.php , Där du skriver funktionen för att spara och hämta betyg.
<?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 livedemo och ladda ner källkod.
DEMO
| LADDA NED
|
Hoppas den här handledningen kommer att vara till hjälp för att skapa ett betygssystem för dina webbaserade projekt.