Това е много прост и бърз урок за това как да създавате оценки със звезди много лесно с помощта на jquery и посетителите на магазина гласуват в базата данни, за да покажат популярността на продукта. Това е примерен скрипт, тук не използвах много добър потребителски интерфейс, просто се фокусирам върху създаването на динамичен функция за оценка със звезди с помощта на PHP и Mysql.
Създадох примерна база данни, където гласуването на посетителите ще се съхранява и като използвам тези гласове, ще покажа среден рейтинг на продукта, скрипт, създаден в Core PHP и Mysql, така че можете лесно да се интегрирате във вашия уеб базиран проект.
Примерна структура на таблицата с рейтинги.
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 |
В този урок използвах jquery плъгин за оценка със звезди, за да покажа оценка със звезди като част от потребителския интерфейс, можете да разгледате повече функция за оценка на потребителския интерфейс от този официален плъгин за оценка. Той също така поддържа функция за реакция на стартиране.
http://www.jqueryrain.com/?d8VUtmAN
Създайте примерен UI файл с някои демонстрационни продукти и оценка.
<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> |
След това включете необходимите библиотеки за оценки (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> |
Прилагайте jquery код, когато някой потребител даде оценка на продукт, след което една ajax заявка ще отиде на сървъра с productId и даде глас и трябва да съхраните тези стойности във вашата база данни.
<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> |
Създайте сървърен файл rating.php , където ще пишете функция за запазване и извличане на оценка.
<?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;
}
}
?> |
Вижте демонстрация на живо и изтеглете изходния код.
ДЕМО
| ИЗТЕГЛЯНЕ
|
Надяваме се, че този урок ще ви бъде полезен за създаване на рейтингова система за вашите уеб базирани проекти.
