Dies ist ein sehr einfaches und schnelles Tutorial zum Erstellen von Sternebewertungen mit jquery. Und zum Speichern von Besucherstimmen in der Datenbank, um die Produktpopularität anzuzeigen. Dies ist ein Beispielskript. Hier habe ich keine sehr gute Benutzeroberfläche verwendet, ich konzentriere mich nur auf das Erstellen von Dynamik Sternbewertungsfunktion mit PHP und Mysql.
Ich habe eine Beispieldatenbank erstellt, in der die Besucherstimmen gespeichert werden, und unter Verwendung dieser Stimmen zeige ich die durchschnittliche Bewertung des Produkts an, ein Skript, das in Core PHP und Mysql erstellt wurde, damit Sie es einfach in Ihr webbasiertes Projekt integrieren können.
Musterstruktur einer Bewertungstabelle.
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 diesem Tutorial habe ich ein Jquery-Sternebewertungs-Plugin verwendet, um die Sternebewertung als UI-Teil anzuzeigen. Sie können weitere UI-Bewertungsfunktionen durch dieses offizielle Bewertungs-Plugin erkunden. Es unterstützt auch die Bootstrap-Responsive-Funktion.
http://www.jqueryrain.com/?d8VUtmAN
Erstellen Sie eine Beispiel-UI-Datei mit einigen Demoprodukten und deren Bewertung.
<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> |
Fügen Sie danach die erforderlichen Bewertungsbibliotheken (css &js) hinzu.
<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> |
Wenden Sie den JQuery-Code an, wenn ein Benutzer dem Produkt eine Bewertung gibt. Dann wird eine Ajax-Anfrage mit der Produkt-ID und der abgegebenen Stimme an den Server gesendet, und Sie müssen diese Werte in Ihrer Datenbank speichern.
<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> |
Erstellen Sie die Serverdatei rating.php , Wo Sie die Funktion zum Speichern und Abrufen von Bewertungen schreiben.
<?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;
}
}
?> |
Sehen Sie sich die Live-Demo an und laden Sie den Quellcode herunter.
DEMO
| HERUNTERLADEN
|
Ich hoffe, dass dieses Tutorial hilfreich ist, um ein Bewertungssystem für Ihre webbasierten Projekte zu erstellen.
