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>

&nbsp;

<button type="button" class="dislike_button" onclick=";return
false;" id="dislike" >
<img src="pixel-vfl73.gif" alt="">
</button>

&nbsp;
<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">&nbsp;</div>
<div class="redbar" style="width:<?php echo $dislikes?>px">&nbsp;</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.

 

Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Address

PT. Proweb Indonesia

 

Please visit: www.proweb.co.id