Ini adalah tutorial yang sangat sederhana dan cepat tentang cara membuat peringkat bintang dengan sangat mudah menggunakan jquery Dan menyimpan suara pengunjung di database untuk menampilkan popularitas produk. Ini adalah contoh skrip, Di sini saya tidak menggunakan UI yang sangat bagus, saya hanya fokus membuat dinamis fitur rating bintang menggunakan PHP dan MySQL.
Saya membuat database sampel di mana suara pengunjung akan disimpan dan Menggunakan suara itu saya akan menampilkan peringkat rata-rata produk, Script dibuat di Core PHP dan Mysql sehingga Anda dapat dengan mudah mengintegrasikan dalam proyek berbasis web Anda.
Contoh struktur tabel peringkat.
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 |
Dalam tutorial ini saya menggunakan plugin peringkat bintang jquery untuk menampilkan peringkat bintang sebagai bagian UI Anda dapat menjelajahi lebih banyak fitur peringkat UI dengan plugin peringkat resmi ini. Ini juga mendukung fitur responsif bootstrap.
http://www.jqueryrain.com/?d8VUtmAN
Buat contoh file UI dengan beberapa produk demo dan ratingnya.
<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> |
Setelah itu sertakan perpustakaan peringkat yang diperlukan (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> |
Terapkan kode jquery setiap kali pengguna memberi peringkat pada produk maka satu permintaan ajax akan masuk ke server dengan productId dan diberikan suara dan Anda perlu menyimpan nilai-nilai ini di database Anda.
<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> |
Buat file server rating.php , Di mana Anda akan menulis fungsi simpan dan ambil peringkat.
<?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;
}
}
?> |
Lihat demo langsung dan unduh kode sumber.
DEMO
UNDUH
Semoga tutorial ini bermanfaat untuk membuat sistem penilaian untuk proyek berbasis web Anda.
