Tuesday, 8 April 2014

Membuat Rating Menggunakan PHP, AJAX dan My SQL

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 :