Jest to bardzo prosty i szybki samouczek dotyczący tego, jak bardzo łatwo tworzyć oceny gwiazdkowe za pomocą jquery, a odwiedzający sklep głosują w bazie danych, aby wyświetlić popularność produktu. To jest przykładowy skrypt, tutaj nie korzystałem z bardzo dobrego interfejsu użytkownika, skupiam się tylko na tworzeniu dynamicznych funkcja oceny gwiazdek przy użyciu PHP i Mysql.
Stworzyłem przykładową bazę danych, w której będą przechowywane głosy odwiedzających i korzystając z tych głosów pokażę średnią ocenę produktu, Skrypt stworzony w Core PHP i Mysql, abyś mógł łatwo zintegrować się z Twoim projektem internetowym.
Przykładowa struktura tabeli ocen.
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 |
W tym samouczku użyłem wtyczki oceny gwiazdek jquery, aby wyświetlić ocenę gwiazdkową jako część interfejsu użytkownika, dzięki czemu możesz odkryć więcej funkcji oceny interfejsu użytkownika za pomocą tej oficjalnej wtyczki oceny. Obsługuje również funkcję responsywną ładowania początkowego.
http://www.jqueryrain.com/?d8VUtmAN
Utwórz przykładowy plik interfejsu użytkownika z niektórymi produktami demonstracyjnymi i jego oceną.
<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> |
Następnie dołącz wymagane biblioteki ocen (css i 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> |
Zastosuj kod jquery za każdym razem, gdy użytkownik oceni produkt, wtedy jedno żądanie ajax zostanie skierowane do serwera z identyfikatorem produktu i oddanym głosem i musisz zapisać te wartości w swojej bazie danych.
<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> |
Utwórz plik serwera rating.php , Gdzie napiszesz ocenę, funkcję zapisywania i pobierania.
<?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;
}
}
?> |
Zobacz demo na żywo i pobierz kod źródłowy.
DEMO
| POBIERZ
|
Mam nadzieję, że ten samouczek będzie pomocny w tworzeniu systemu ocen dla twoich projektów internetowych.
