Đây là một hướng dẫn rất đơn giản và nhanh chóng về cách tạo xếp hạng sao rất dễ dàng bằng cách sử dụng jquery Và khách truy cập cửa hàng bỏ phiếu trong cơ sở dữ liệu để hiển thị mức độ phổ biến của sản phẩm. tính năng xếp hạng sao bằng PHP và Mysql.
Tôi đã tạo một cơ sở dữ liệu mẫu nơi khách truy cập bình chọn sẽ được lưu trữ và Sử dụng những phiếu bầu đó, tôi sẽ hiển thị xếp hạng trung bình của sản phẩm, Tập lệnh được tạo trong Core PHP và Mysql để bạn có thể dễ dàng tích hợp vào dự án dựa trên web của mình.
Cấu trúc bảng xếp hạng mẫu.
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 |
Trong hướng dẫn này, tôi đã sử dụng plugin xếp hạng sao jquery để hiển thị xếp hạng sao dưới dạng phần giao diện người dùng, bạn có thể khám phá thêm tính năng xếp hạng giao diện người dùng bằng plugin xếp hạng chính thức này. Nó cũng hỗ trợ tính năng đáp ứng bootstrap.
http://www.jqueryrain.com/?d8VUtmAN
Tạo tệp giao diện người dùng mẫu với một số sản phẩm demo và nó được xếp hạng.
<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> |
Sau đó, bao gồm các thư viện xếp hạng bắt buộc (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> |
Áp dụng mã jquery khi người dùng đưa ra xếp hạng cho sản phẩm thì một yêu cầu ajax sẽ được chuyển đến máy chủ với productId và phiếu bầu đã cho và bạn cần lưu trữ các giá trị này trong cơ sở dữ liệu của mình.
<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> |
Tạo tệp máy chủ rating.php , Nơi bạn sẽ viết hàm lưu và tìm nạp xếp hạng.
<?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;
}
}
?> |
Xem bản trình diễn trực tiếp và tải xuống mã nguồn.
DEMO
| TẢI XUỐNG
|
Hy vọng hướng dẫn này sẽ hữu ích để tạo hệ thống xếp hạng cho các dự án dựa trên web của bạn.
