Halo sobat ketemu lagi di blog saya. Kali ini saya akan membehas mengenai cara membuat rating sederhana dengan menggunakan PHP, Ajax, dan My SQL. Silahkan disimak baik-baik ya . . . J
Pertama-tama kita siapkan yang kita butuhkan. Untuk rating biasanya menggunakan simbol bintang, maka sobat cari gambar bintang. Untuk gambar ini sobat cari 3 jenis, yang pertama untuk menampilkan jumlah rating, kemudian yang kedua untuk pemberian rating dan yang terakhir untuk pemberian rating ketika di-hover.
Yang kedua buat database dengan struktur tabel sebagai berikut :
CREATE DATABASE IF NOT EXISTS `aplikasi_rating`;
USE `aplikasi_rating`;
CREATE TABLE IF NOT EXISTS `rating` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) NOT NULL,
`rating` int(11) NOT NULL,
`voter` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;
Setelah itu buat file baru di editor sobat, beri nama rating.php atau terserah sobat. Kemudian masukkan script berikut :
<head>
<script type="text/javascript">
var xmlhttp;
function buatRq(){
if(window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xmlhttp = new XMLHttpRequest();
}
}
function tampilKan(){
buatRq();
xmlhttp.onreadystatechange = tanganiIni;
xmlhttp.open("GET","rating.php",true);
xmlhttp.send(null);
}
function beriRating(i,j){
xmlhttp.onreadystatechange = tanganiIni;
xmlhttp.open("GET","rating.php?rating="+i+"&id="+j,true);
xmlhttp.send(null);
alert("Terima Kasih");
}
function tanganiIni(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
document.getElementById("hasil").innerHTML = xmlhttp.responseText;
setTimeout('tampilKan()',1000);
}
}
}
function diatasRating(i,x){
var l;
for(l=1;l<=i;l++)
{
document.getElementById(x+"_"+l).src = "ratingisi.png";
}
}
function diatasRatin(i,x){
var l;
for(l=1;l<=i;l++)
{
document.getElementById(x+"_"+l).src = "rating.png";
}
}
</script>
<body onload="tampilKan();">
<div id="hasil"></div>
</body>
</html>
Script diatas befungsi untuk membuat request data ke server. Sekarang kita buat file untuk menampung request datanya. Scriptnya sebagai berikut :
<style>
.ratink{
width : 335px;
border : 1px solid black;
border-radius : 10px;
margin-bottom : 10px;
padding : 10px;
box-shadow : 0 0 4px 0;
}
.berirating{
overflow : hidden;
}
.tampil_rating{
overflow : hidden;
</style>
<?php
mysql_connect("localhost","root","");
mysql_select_db("aplikasi_rating");
if(isset($_GET['rating']) && isset($_GET['id']))
{
$rating = $_GET['rating'];
$id = $_GET['id'];
mysql_query("update rating set rating = rating + ".$rating.",voter = voter + 1 where id = '".$id."'");
}
$q = mysql_query("select * from rating");
while($d=mysql_fetch_array($q))
{
$id = $d['id'];
$nama = $d['nama'];
$rating = $d['rating'];
$voter = $d['voter'];
if($rating == 0 || $voter == 0)
{
$rate = 0;
}
else
{
$rata = $rating/$voter;
$rate = round($rata);
}
echo "<div class='ratink'>";
echo "<div class='tampil_rating'>";
echo "<b>".$nama."</b> mempunyai rating : ".$rate." ";
if($rate == 1)
{
echo "<img src='rating.jpg' width='25' />";
}
else if($rate == 2)
{
for($i=1;$i<=2;$i++)
echo "<img src='rating.jpg' width='25' />";
}
else if($rate == 3)
{
for($i=1;$i<=3;$i++)
echo "<img src='rating.jpg' width='25' />";
}
else if($rate == 4)
{
for($i=1;$i<=4;$i++)
echo "<img src='rating.jpg' width='25' />";
}
else if($rate == 5)
{
for($i=1;$i<=5;$i++)
echo "<img src='rating.jpg' width='25' />";
}
echo "</div>";
echo "<div class='berirating'>";
echo "Beri rating : ";
for($i=1;$i<=5;$i++)
{
?>
<img id="<?php echo $id."_".$i; ?>" src="rating.png" width="25" onmouseover="diatasRating('<?php echo $i; ?>','<?php echo $id; ?>');" onmouseout="diatasRatin('<?php echo $i; ?>','<?php echo $id; ?>');" onclick="beriRating('<?php echo $i; ?>','<?php echo $id; ?>');" />
<?php
}
echo "</div></div>";
}
?>
Script diatas digunakan untuk handler data. Beri nama file diatas rating.php. Kemudian untuk gambarnya silahkan sobat tempatkan satu folder dengan dua script diatas. Untuk menjalankannya tinggal jalankan script rating.html. Hasilnya :
 |
| Hasil |
Oke, sekian artikel saya kali ini dan semoga bermanfaat bagi sobat semua. Tunggu artikel-artikel selanjutnya ya . . . J
