Membuat Rating Star Dinamis dengan PHP dan jQuery

4 325

Dalam tutorial PHP ini, kita akan membuat daftar catatan database dan menambahkan rating bintang dinamis ke catatan tersebut dengan menggunakan skrip rating jQuery star. Kami memiliki sekelompok bintang untuk setiap catatan database. Ketika kita menambahkan rating ke record, sebuah panggilan AJAX akan dikirim untuk menyimpan nilai sekarang ke database.

Tampilkan Star Rating untuk Hasil Database

Kode PHP ini untuk membaca hasil Database dan menambahkan bintang untuk masing-masing.

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$query ="SELECT * FROM tutorial";
$result = $db_handle->runQuery($query);
if(!empty($result)) {
foreach ($result as $tutorial) {
?>
<tr>
<td valign="top">
<div class="feed_title"><?php echo $tutorial["title"]; ?></div>
<div id="tutorial-<?php echo $tutorial["id"]; ?>">
<input type="hidden" name="rating" id="rating" value="<?php echo $tutorial["rating"]; ?>" />
<ul onMouseOut="resetRating(<?php echo $tutorial["id"]; ?>);">
  <?php
  for($i=1;$i<=5;$i++) {
  $selected = "";
  if(!empty($tutorial["rating"]) && $i<=$tutorial["rating"]) {
	$selected = "selected";
  }
  ?>
  <li class='<?php echo $selected; ?>' onmouseover="highlightStar(this,<?php echo $tutorial["id"]; ?>);" onmouseout="removeHighlight(<?php echo $tutorial["id"]; ?>);" onClick="addRating(this,<?php echo $tutorial["id"]; ?>);">★</li>  
  <?php }  ?>
<ul>
</div>
<div><?php echo $tutorial["description"]; ?></div>
</td>
</tr>
<?php }} ?>

Fungsi jQuery ke Store Rating

Dalam contoh kode ini, kita memiliki empat fungsi jQuery yang sama. Tapi, kami telah menambahkan kode tambahan untuk memanggil PHP melalui AJAX saat mengklik bintang bintang. Dan juga, kami telah menambahkan referensi id baris database ke pemilih “li” untuk identifikasi unik dari peringkat. Fungsinya adalah,

function highlightStar(obj,id) {
	removeHighlight(id);		
	$('.demo-table #tutorial-'+id+' li').each(function(index) {
		$(this).addClass('highlight');
		if(index == $('.demo-table #tutorial-'+id+' li').index(obj)) {
			return false;	
		}
	});
}

function removeHighlight(id) {
	$('.demo-table #tutorial-'+id+' li').removeClass('selected');
	$('.demo-table #tutorial-'+id+' li').removeClass('highlight');
}

function addRating(obj,id) {
	$('.demo-table #tutorial-'+id+' li').each(function(index) {
		$(this).addClass('selected');
		$('#tutorial-'+id+' #rating').val((index+1));
		if(index == $('.demo-table #tutorial-'+id+' li').index(obj)) {
			return false;	
		}
	});
	$.ajax({
	url: "add_rating.php",
	data:'id='+id+'&rating='+$('#tutorial-'+id+' #rating').val(),
	type: "POST"
	});
}

function resetRating(id) {
	if($('#tutorial-'+id+' #rating').val() != 0) {
		$('.demo-table #tutorial-'+id+' li').each(function(index) {
			$(this).addClass('selected');
			if((index+1) == $('#tutorial-'+id+' #rating').val()) {
				return false;	
			}
		});
	}
}

PHP MySQL Star Rating Update via AJAX

Kode PHP ini akan dieksekusi melalui permintaan AJAX. Kode ini menjalankan kueri pembaruan dengan menerima id dan nilai sekarang dari AJAX.

<?php
if(!empty($_POST["rating"]) && !empty($_POST["id"])) {
	require_once("dbcontroller.php");
	$db_handle = new DBController();
	$query ="UPDATE tutorial SET rating='" . $_POST["rating"] . "' WHERE id='" . $_POST["id"] . "'";
	$result = $db_handle->updateQuery($query);
}
?>

kamu juga bisa mempelajari cara Membuat Polling PHP Sederhana

Demo

Get real time updates directly on you device, subscribe now.

4 Comments
  1. Masdi a.k.a Zacky says

    klo kita mau membuat rating per artikel gmana caranya admin?
    terus per artikel di tampilkan jumlah rating yang diberikan pengguna.

    tolong balasanya ya, utk fitur di website utk skipsi saya min

  2. […] membuat script polling untuk penilaian menggunakan PHP. Dalam tutorial sebelumnya, kita telah membuat rating PHP menggunakan jQuery. Dalam contoh skrip polling ini, ada beberapa pertanyaan dengan beberapa opsi untuk menambahkan […]

  3. arda says

    Mau tanya min, apakah ini bisa di terapkan di semua jenis website

    1. Infokoding says

      halo arda,
      selama jenis website itu menggunakan PHP dan Jquery pasti bisa diterapkan

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.