Style Rating/voting system using jquery, ajax and php
Pernahkah kita lihat situs-situs yang meyediakan system penilaian terhadap sesuatu, baik itu artikel maupun video, contohnya yakni ketika kita membuka situs youtube di bawah pemutar video tersebut ada gambar tangan, berikut gambarnya
Dari gambar di atas kita bisa simpulkan ketika di klik tombol tangan yang ada di sebelah kiri akan masuk kedalam sistem dan akan memberikan penilaian entah itu termasuk ke dalam status disukai ataupun tidak disukai, sekarang bagaimana cara membuat itu semua
pertama-tama
buat struktural data base nya
CREATE TABLE IF NOT EXISTS `youtube_ip` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userip` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) CREATE TABLE IF NOT EXISTS `youtube_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `liked` int(11) NOT NULL, `dislike` int(11) NOT NULL, PRIMARY KEY (`id`) ) INSERT INTO `youtube_rating` (`id`, `liked`, `dislike`) VALUES (1, 0, 0);
Kmudian scripts
index.php
<!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>Demos : 99Points.info : Youtube Style Rating/Voting System
using jQuery Ajax and PHP. Best Tutorial</title>
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.livequery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.like_button').mouseenter(function(e) {
$('.tooltip').show();
$('.ilikethis').fadeIn(200);
}).mouseleave(function(e) {
$('.ilikethis').fadeOut(200);
$('.tooltip').hide();
});
$('.dislike_button').mouseenter(function(e) {
$('.tooltip2').show();
$('.idislikethis').fadeIn(200);
}).mouseleave(function(e) {
$('.tooltip2').hide();
$('.idislikethis').fadeOut(200);
});
$('.totalstatsbutton').livequery("mouseenter", function(e){
$('.greenBar').css("background-color","#AADA37");
$('.redbar').css("background-color","#CF362F");
$('.tooltip3').show();
$('.totalstats').fadeIn(200);
}).livequery("mouseleave", function(e){
$('.tooltip3').hide();
$('.greenBar').css("background-color","#DDDDDD");
$('.redbar').css("background-color","#DDDDDD");
$('.totalstats').fadeOut(200);
});
});
$(document).ready(function(){
//$('#voting_result').fadeOut();
$('button').click(function(){
var a = $(this).attr("id");
$.post("voting.php?value="+a, {
}, function(response){
$('#voting_result').fadeIn();
$('#voting_result').html($(response).fadeIn('slow'));
// now update box bar
$.post("update_box.php", {
}, function(update){
$('#update_count').html(unescape(update));
});
////////////
// now update tooltip count
$.post("update_tooltip.php", {
}, function(updates){
$('.tooltip3').html(unescape(updates));
});
////////////
});
});
});
function hideMesg(){
$('.rating_message').fadeOut();
$.post("rating.php?show=1", {
}, function(response){
$('#inner').html(unescape(response));
$('#inner').fadeIn('slow');
});
}
</script>
</head>
<img src="images.jpg" alt="" style="float:left" /><h2 style="float:left;
margin-top:35px; margin-left:5px">Youtube Style Rating/Voting System
using jQuery Ajax and PHP. Ever BEST Tutorial</h2>
<br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
<div align="left" style="margin-left:20px;">
<div align="left" style="height:0px;">
<div class="tooltip">
<span class="ilikethis">
I like this
</span>
</div>
<div class="tooltip2">
<span class="idislikethis">
I dislike this
</span>
</div>
<div class="tooltip3">
<?php include ('update_tooltip.php')?>
</div>
</div>
<br clear="all" /><br clear="all" />
<button type="button" class="like_button" onclick=";return
false;" id="like" >
<img src="pixel-vfl73.gif" alt="">
<span>Like</span></button>
<button type="button" class="dislike_button" onclick=";return
false;" id="dislike" >
<img src="pixel-vfl73.gif" alt="">
</button>
<div id="update_count" style="float:left;">
<?php include ('update_box.php')?>
</div>
<br clear="all" />
<div id="voting_result">
</div>
</div>
<br clear="all" /><br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" /><br clear="all" />
<body>
</body>
</html>
update_box.php
<?php
include("dbcon.php");
$result=mysql_query("select * from youtube_rating");
$row=mysql_fetch_array($result);
//$gettotal = mysql_num_rows($result);
$gettotal = $row['dislike'] + $row['liked'];
$dislike=$row['dislike'];
$like=$row['liked'];
$likes=($like*20)/$gettotal;
$dislikes=($dislike*20)/$gettotal;?>
<button type="button" class="totalstatsbutton" onclick=";return false;" >
<img src="pixel-vfl73.gif" alt="">
<div class="greenBar" style="width:<?php echo $likes?>px"> </div>
<div class="redbar" style="width:<?php echo $dislikes?>px"> </div>
</button>
update_tooltip.php
<?php
include("dbcon.php");
$result=mysql_query("select * from youtube_rating");
$row=mysql_fetch_array($result);
$dislike=$row['dislike'];
$like=$row['liked'];
?>
<span class="totalstats">
<?php echo $dislike?> likes, <?php echo $like?> dislikes
</span>
Demikianlah yang penulis dapat terangkan semoga bermanfaat untuk pembaca, untuk dapat mengdownload versi lengkap dari source code yang di atas silahkan kunjungi halaman berikut ini.
Kunjungi www.prowebpro.com untuk menambah wawasan anda.
Portfolio
Livechat
-
Sonny
Marketing -
Aris G
Support -
Agus
Support -
Kurnianto
Support -
Eko P
Designer -
Andreas
Designer -
Address
PT. Proweb Indonesia
Perkantoran Duta Merlin No F4
Jl. Gadjah Mada 3-5
Jakarta Pusat
GPS: S 6o 09' 58.1", E 106o 49' 3.3"
| Phone | : | 021 - 2636 3170 |
| 021 - 3377 0050 | ||
| Mobile | : | 0856 - 9360 1378 |
| 0812 - 806 2772 | ||
| 0857 - 1586 8992 | ||
| 0816 - 180 8005 | ||
| Blackberry PIN | : | 23096502 |
| Fax | : | 021 - 633 5765 |
| Web | : | www.proweb.co.id |