Cara Membuat Rating Bintang Menggunakan PHP dan jQuery

Dalam tutorial PHP ini,kita akan membuat sebuah rating atau catatan rating secara dinamis yang tersimpan di database. Dalam tutorial ini kita akan menggunakan PHP dan jQuery. Saya akan membuat deret bintang untuk menilai setiap artikel yang akan saya bikin. Ketika saya menambahkan peringkat ke catatan, panggilan AJAX akan dikirim menyimpan peringkat saat ini ke database.

Menampilkan Rating Bintang dari Database

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

<?php
require_once("Rate.php");
$rate = new Rate();
$result = $rate->getAllPost();
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 }} ?>

<?php

require_once("Rate.php");

$rate = new Rate();

$result = $rate->getAllPost();

if(!empty($result)) {

foreach ($result as $tutorial) {

<tr>

<?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>

</td>

</tr>

<?php }} ?>

Fungsi jQuery untuk Menyimpan Peringkat

Dalam kode contoh ini, saya memiliki empat fungsi jQuery yang sama. Namun, saya telah menambahkan script tambahan untuk memanggil PHP melalui AJAX pada saat mengklik peringkat bintang. Dan juga, saya telah menambahkan referensi id baris database ke selector “li” untuk identifikasi peringkat yang unik.

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;	
			}
		});
	}
}

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;

}

});

}

Script Update Peringkat PHP MySQLÂ melalui AJAX

Script PHP ini akan dieksekusi melalui permintaan AJAX. Script ini menjalankan kueri pembaruan dengan menerima id dan peringkat saat ini dari AJAX.

<?php
if(!empty($_POST["rating"]) && !empty($_POST["id"])) {
    require_once ("Rate.php");
    $rate = new Rate();
    $rate->updateRatingCount($_POST["rating"], $_POST["id"]);
}
?>

<?php

if(!empty($_POST["rating"]) && !empty($_POST["id"])) {

require_once ("Rate.php");

$rate = new Rate();

$rate->updateRatingCount($_POST["rating"], $_POST["id"]);

}

Output dari script di atas,

Oke itulah tadi pembahasan saya tentang Cara Membuat Rating Bintang Menggunakan PHP dan jQuery, semoga bermanfaat.

Cara Membuat Rating Bintang Menggunakan PHP dan jQuery

Facebook DUMET School

Konsultasi Gratis

Categories