Rating bintang sering kali kita jumpai pada berbagai website, biasa nya rating tersebut digunakan untuk mengetahui respon user / pengunjung web tersebut terhadapa produk/ jasa dari website tersebut, bagaimana membuat sebuah rating bintang tersebut berikut ini saya akan memberikan contoh bagaimana membuat rating bintang
1.Pertama kita buat terlebih dahulu database rating kemudian create table vote seperti langkah berikut ini
CREATE TABLE IF NOT EXISTS `vote` (
`id_app` int(5) NOT NULL AUTO_INCREMENT,
`counter` int(10) NOT NULL,
`value` int(10) NOT NULL,
`satu` int(1) NOT NULL,
`dua` int(10) NOT NULL,
`tiga` int(10) NOT NULL,
`empat` int(10) NOT NULL,
`lima` int(10) NOT NULL,
PRIMARY KEY (`id_app`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
2.Langkah berikutnya yaitu kita buat file index.php dengan struktur seperti berikut ini
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Coba Rating</title>
<meta name="Keywords" content="Star rating, jQuery, ajax">
<meta name="Description" content="jQuery Tutorial : Simple ajax star rating">
<meta http-equiv="Content-Language" content="en">
<meta name="robots" content="index,follow">
<style>
body{
font:10px Arial, Helvetica, sans-serif;
padding:40px;
}
</style>
<script src="rating/jquery.min.js" type="text/javascript"></script>
<script src="rating/starrating.js" type="text/javascript"></script>
<link href="rating/starrating.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<h2>Star Rater</h2>
<ul class='star-rating'>
<li class="current-rating" id="current-rating"><!-- will show current rating --></li>
<span id="ratelinks">
<li><a href="javascript:void(0)" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="javascript:void(0)" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="javascript:void(0)" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="javascript:void(0)" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="javascript:void(0)" title="5 stars out of 5" class="five-stars">5</a></li>
</span>
</ul>
</body>
</html>
3.Langkah berikutnya yaitu kita buat file update.php dengan struktur sebagai berikut
<?php
// connect to database
$dbh=mysql_connect ("localhost", "root", "") or die ('Cannot connect to the database');
mysql_select_db ("rating",$dbh);
if($_GET['do']=='rate'){
// do rate
rate();
}else if($_GET['do']=='getrate'){
// get rating
getRating();
}
// function to retrieve
function getRating(){
$sql= "select * from vote";
$result=@mysql_query($sql);
$rs=@mysql_fetch_array($result);
// set width of star
$rating = (@round($rs[value] / $rs[counter],1)) * 20;
echo $rating;
}
// function to insert rating
function rate(){
$text = strip_tags($_GET['rating']);
$update = "update vote set counter = counter + 1, value = value + ".$_GET['rating']."";
if ($text=="1"){
$bintang = "update vote set satu = satu + 1";
}
if ($text=="2"){
$bintang = "update vote set dua = dua + 1";
}
if ($text=="3"){
$bintang = "update vote set tiga = tiga + 1";
}
if ($text=="4"){
$bintang = "update vote set empat = empat + 1";
}
if ($text=="5"){
$bintang = "update vote set lima = lima + 1";
}
$result = @mysql_query($update);
$result = @mysql_query($bintang);
if(@mysql_affected_rows() == 0){
if ($text=="1"){
$insert = "insert into vote (counter,value,satu) values ('1','".$_GET['rating']."','1')";
$result = @mysql_query($insert);
}
if ($text=="2"){
$insert = "insert into vote (counter,value,dua) values ('1','".$_GET['rating']."','1')";
$result = @mysql_query($insert);
}
if ($text=="3"){
$insert = "insert into vote (counter,value,tiga) values ('1','".$_GET['rating']."','1')";
$result = @mysql_query($insert);
}
if ($text=="4"){
$insert = "insert into vote (counter,value,empat) values ('1','".$_GET['rating']."','1')";
$result = @mysql_query($insert);
}
if ($text=="5"){
$insert = "insert into vote (counter,value,lima) values ('1','".$_GET['rating']."','1')";
$result = @mysql_query($insert);
}
}
}
?>
hasil dari script diatas adalah seperti pada gambar berikut ini
jangan lupa file gambar star.gif juga simpan ke dalam satu folder dengan file index.php dan update.php
file lengkap bisa di download pada LINK berikut ini.untuk pertanyaan silahkan berikan pada kolom komentar.Semoga Bermanfaat.
Komentar ini telah dihapus oleh pengarang.
BalasHapus