Log In

Email:
Password:
Keep me logged in

Forgot Password

Email:

wcet, w.c.e.t., designs, william, thomas



Archives
Categories
Sponsored Links


Like/Dislike Button
PHP Ajax jQuery JavaScript
Thursday, December 1, 2011 | Browse Category |

A 'thumbs up, thumbs down' system in which users can rate content. Code: Uses PHP to store the rating, Ajax to rate without refreshing the page, and jQuery/JavaScript for the Ajax callback function.







Related tutorial: Rate more than one piece of content on one page.
Related tutorial: Get the percentage of ratings that consist of just likes.
Related tutorial: Get the like percentage rate for more than one piece of content on one page.
MySQL:
Make a MySQL table for both the content and the ratings.
CREATE TABLE `content` (
   `id` INT NOT NULL ,
   `content` TEXT NOT NULL
) ENGINE = MYISAM ;
CREATE TABLE `ratings` (
   `rating` VARCHAR ( 7 ) NOT NULL ,
   `id` INT NOT NULL ,
   `ip` VARCHAR ( 50 ) NOT NULL
) ENGINE = MYISAM ;
INSERT INTO content VALUES ('1', 'Demo'), ('2', 'wcetdesigns.com');
PHP:
settings.php, file where all the important settings will be located and embedded in the last two files.
<?php

//CONNECTS TO YOUR DATABASE (MODIFY TO YOUR OWN SETTINGS)
$c mysql_connect("server""username""password");
$db mysql_select_db("your_database"$c);

//TABLES FOR THE CONTENT AND THE RATINGS (MODIFY IF TABLE NAMES ARE DIFFERENT)
$content 'content';
$ratings 'ratings';

$ip $_SERVER["REMOTE_ADDR"]; //IP ADDRESS

?>
headers.php, the file with the number of likes & dislikes, button image URLs, and whether the user has already rated.
<?php

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

//LIKE & DISLIKE IMAGES
$l 'http://wcetdesigns.com/images/buttons/l_color.png';
$d 'http://wcetdesigns.com/images/buttons/d_color.png';

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

//IF SO, THE RATING WILL HAVE A SHADOW
if($r["rating"]=="like"){
    
$l 'http://wcetdesigns.com/images/buttons/l_color_shadow.png';
}
if(
$r["rating"]=="dislike"){
    
$d 'http://wcetdesigns.com/images/buttons/d_color_shadow.png';
}

//FORM & THE NUMBER OF LIKES & DISLIKES
$m '<img id="like" onClick="rate($(this).attr(\'id\'))" src="'.$l.'"> '.$likes.' &nbsp;&nbsp; <img id="dislike" onClick="rate($(this).attr(\'id\'))" src="'.$d.'"> '.$dislikes;
    
?>
jQuery/JavaScript:
view.php, the main file where the ratings will be displayed based on the content, which is referenced by the $id variable
<?php

//GOES TO ID 1 AUTOMATICALLY IF THERE'S NO ID IN THE URL
if(!$_GET["id"]){
    
header("Location: view.php?id=1");
} else {
    
$id $_GET["id"];
}

include(
"settings.php"); //INCLUDES THE IMPORTANT MySQL SETTINGS

$q mysql_query("SELECT * FROM $content WHERE id='$id'"); //GETS THE CONTENT ID
$r mysql_fetch_assoc($q);
$con $r["content"]; //CONTENT OF THE ID
$id $r["id"]; //NEW ID VARIABLE, USED TO CHECK IF IT'S IN THE DATABASE

?>

<script src="http://wcetdesigns.com/assets/javascript/jquery.js"></script>
<script>

function rate(rating){ //'rating' VARIABLE FROM THE FORM in view.php
   var data = 'rating='+rating+'&id=<?php echo $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>
<style>
/*GIVES THE POINTER TO THE BUTTONS ON MOUSEOVER*/
#like, #dislike {
   cursor: pointer;
}

</style>
<?php

//IF $id EXISTS, THEN COUNT LIKES & DISLIKES
if($id){
    include 
'headers.php'//FILE WITH THE NUMBER OF RATINGS, BUTTON IMAGE URLS, AND WHETHER USER HAS RATED
    
    //EVERYTHING HERE DISPLAYED IN HTML
    
echo $con.'<br><br><br><div id="ratings">'.$m.'</div>';
}
else
{
    echo 
"Invalid ID";
}

?>
Ajax:
rate.php, Ajax file where the rating process will take place.
<?php

$id 
$_POST["id"];
$rating $_POST["rating"];
$rating_type = array("like""dislike");

if(
in_array($rating$rating_type)){
    
    include(
"settings.php"); //INCLUDES THE IMPORTANT SETTINGS
    
    //CHECKS IF $id EXISTS
    
$q mysql_query("SELECT * FROM $content WHERE id='$id'");
    
$r mysql_fetch_assoc($q);
    
$id $r["id"]; //NEW ID VARIABLE, USED TO CHECK IF IT'S IN THE DATABASE
    
    //COUNTS LIKES & DISLIKES IF $id EXISTS
    
if($id)
    {
        
//CHECKS IF USER HAS ALREADY RATED CONTENT
        
$q mysql_query("SELECT * FROM $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
        
if($r["rating"]){
            if(
$r["rating"]==$rating){
                
mysql_query("DELETE FROM $ratings WHERE id='$id' AND ip='$ip'"); //DELETES RATING
            
} else {
                
mysql_query("UPDATE $ratings SET rating='$rating' WHERE id='$id' AND ip='$ip'"); //CHANGES RATING
            
}
        } else {
            
mysql_query("INSERT INTO $ratings VALUES('$rating', '$id', '$ip')"); //INSERTS INITIAL RATING
        
}
        
        include 
'headers.php'//FILE WITH THE NUMBER OF RATINGS, BUTTON IMAGE URLS, AND WHETHER USER HAS RATED
     
        //EVERYTHING HERE DISPLAYED IN HTML AND THE "ratings" ELEMENT FOR AJAX
        
echo $m;
    }
    else
    {
        echo 
"Invalid ID";
    }
}

?>

 2,029    1,136
46,290     5,279




(Optional)

(Optional in case you want a reply)



153 Comments
saqde
kkkkkasd dqa


Tuesday, February 25, 2014 at 5:59:21 AM
aaa
hello


Tuesday, February 25, 2014 at 5:22:08 AM
a
a


Monday, January 20, 2014 at 8:33:17 AM
sutharsan
This codes works perfect on local host ! but on linux server Ajax code won't support ! can you provide the function instead of ajax


Friday, December 27, 2013 at 8:32:55 PM
Julian
Very Thx!!!! It works wonderful


Sunday, December 22, 2013 at 5:49:24 PM
1 2 3 4 5 Next Last