Like/Dislike Button (PHP/Ajax/Javascript/jQuery)
By | Thursday, December 1, 2011


Hide Comments
53 likes and 47 dislikes for this demo.




PHP:
Make a MySQL table for both the content and the ratings.
CREATE TABLE `your_database`.`content` (
`id` INT NOT NULL ,
`content` TEXT NOT NULL
) ENGINE = MYISAM ;
CREATE TABLE `your_database`.`ratings` (
`rating` VARCHAR( 7 ) NOT NULL ,
`id` INT NOT NULL,
`ip` VARCHAR( 50 ) NOT NULL
) ENGINE = MYISAM ;
view.php, the main file where the ratings will be displayed based the content, which is referenced by the $id variable
<?php

$id = $_GET['id']; //CONNECTS WITH THE CONTENT
$ip = $_SERVER['REMOTE_ADDR']; //IP ADDRESS
mysql_connect("server", "username", "password"); //CONNECT TO SERVER
$db = 'your_database';

$q = mysql_query("SELECT * FROM $db.content WHERE id='$id'"); //GET THE CONTENT ID
$r = mysql_fetch_assoc($q);
$id = $r['id'];

//IF $id EXISTS, THEN COUNT LIKES & DISLIKES
if($id){
$q = mysql_query("SELECT * FROM $db.ratings WHERE id='$id' AND rating='like'");
$likes = mysql_num_rows($q);
$q = mysql_query("SELECT * FROM $db.ratings WHERE id='$id' AND rating='dislike'");
$dislikes = mysql_num_rows($q);

//CHECKS IF EACH EQUALS 1 OR MORE, SINGULAR/PLURAL
$l = 'likes';
if($likes==1){
$l = 'like';
}
$d = 'dislikes';
if($dislikes==1){
$d = 'dislike';
}

//LIKE & DISLIKE IMAGES
$ll = 'http://img.wcetdns.com/btns/l.png';
$dd = 'http://img.wcetdns.com/btns/d.png';

//FORM & THE NUMBER OF LIKES & DISLIKES
$m = '<img id="like" onClick="rate($(this).attr(\'id\'))" src="'.$ll.'"> <img id="dislike" onClick="rate($(this).attr(\'id\'))" src="'.$dd.'"><input id="id" type="hidden" value="'.$id.'">';
$m .= $likes.' '.$l.' and '.$dislikes.' '.$d.' for this demo.<br>';

//CHECKS IF USER HAS ALREADY RATED CONTENT
$q = mysql_query("SELECT * FROM $db.ratings WHERE id='$id' AND ip='$ip'");
$r = mysql_fetch_assoc($q); //CHECKS IF USER HAS ALREADY RATED THIS ITEM

//CANCEL BUTTON
if($r['rating']){
$m .= 'You '.$r['rating'].' this. <span id="cancel" onClick="rate($(this).attr(\'id\'))">Cancel</span><input id="id" type="hidden" value="'.$id.'">';
}

//ELEMENT FOR AJAX
echo '<div id="ratings">'.$m.'</div>';

}
else
{
echo 'Invalid ID';
}

?>
rate.php, the AJAX file the rating process takes place.
<?php

$id = $_POST['id'];
$ip = $_SERVER['REMOTE_ADDR'];
$rating = $_POST['rating'];
$rating_type = array("like", "dislike", "cancel");

if(in_array($rating, $rating_type)){
mysql_connect("server", "username", "password");
$db = 'your_database';

//CHECKS IF $id EXISTS
$q = mysql_query("SELECT * FROM $db.content WHERE id='$id'");
$r = mysql_fetch_assoc($q); $id = $r['id'];

//IF $id EXISTS, THEN COUNT LIKES & DISLIKES
if($id)
{
//CHECKS IF USER HAS ALREADY RATED CONTENT
$q = mysql_query("SELECT * FROM $db.ratings WHERE id='$id' AND ip='$ip'");
$r = mysql_fetch_assoc($q); //CHECKS IF USER HAS ALREADY RATED THIS ITEM

//IF USER HAS ALREADY RATED, BUT WANTS TO EITHER CANCEL OR CHANGE RATING...
if($r['rating']){
if($rating=='cancel'){
mysql_query("DELETE FROM $db.ratings WHERE id='$id' AND ip='$ip'");
} elseif($r['rating']!=$rating) {
mysql_query("UPDATE $db.ratings SET rating='$rating' WHERE id='$id' AND ip='$ip'");
}
}
else
{
//INSERTS INITIAL RATING
mysql_query("INSERT INTO $db.ratings VALUES('$rating','$id','$ip')");
}

//COUNT LIKES & DISLIKES
$q = mysql_query("SELECT * FROM $db.ratings WHERE id='$id' AND rating='like'");
$likes = mysql_num_rows($q);
$q = mysql_query("SELECT * FROM $db.ratings WHERE id='$id' AND rating='dislike'");
$dislikes = mysql_num_rows($q);

//CHECKS IF EACH EQUALS 1 OR MORE, SINGULAR/PLURAL
$l = 'likes';
if($likes==1){
$l = 'like';
}
$d = 'dislikes';
if($dislikes==1){
$d = 'dislike';
}

//LIKE & DISLIKE IMAGES
$ll = 'http://img.wcetdns.com/btns/l.png';
$dd = 'http://img.wcetdns.com/btns/d.png';

//FORM & THE NUMBER OF LIKES & DISLIKES
$m = '<img id="like" onClick="rate($(this).attr(\'id\'))" src="'.$ll.'"> <img id="dislike" onClick="rate($(this).attr(\'id\'))" src="'.$dd.'"><input id="id" type="hidden" value="'.$id.'">';
$m .= $likes.' '.$l.' and '.$dislikes.' '.$d.' for this demo.<br>';

//AFTER RATING OR CANCEL, ONE OR BOTH NUMBERS UPDATE & WILL SHOW IN view.php
$q = mysql_query("SELECT * FROM $db.ratings WHERE id='$id' AND ip='$ip'");
$r = mysql_fetch_assoc($q);

if($r['rating']){
$m .= 'You '.$r['rating'].' this. <span id="cancel" onClick="rate($(this).attr(\'id\'))">Cancel</span><input id="id" type="hidden" value="'.$id.'">';
}

echo $m;
}
else
{
echo 'Invalid ID';
}
}

?>
jQuery:
Embed this into the view.php file.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function rate(rating){ //'rating' VARIABLE FROM THE FORM in view.php
var the_id = $("#id").val(); //'id' OF THE CONTENT BEING RATED
var data = 'rating='+rating+'&id='+the_id;

$.ajax({
type: 'POST',
url: 'rate.php', //POSTS FORM TO THIS FILE
data: data,
success: function(e){
$("#ratings").html(e); //REPLACES THE TEXT OF view.php
}
});
}
</script>