Monday, April 7, 2014

Membuat Rating Menggunakan PHP, AJAX dan My SQL

9:48 PM Posted by Unknown , , , , No comments
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 :

<html>
<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 :
Membuat Rating Menggunakan PHP, AJAX dan My SQL
Hasil


Oke, sekian artikel saya kali ini dan semoga bermanfaat bagi sobat semua. Tunggu artikel-artikel selanjutnya ya . . . J

0 comments:

Post a Comment