How to make Like & Unlike System in PHP MySQL and jQuery

Today I am going to give a tutorial on like and unlike in PHP andMySQL its very use full for your websites to get users review on pages on stories any many more.

Database Details:

database name => likeunlike
table name => like

db.sql

Database file run in your MySQL to make database and add data into a table.

-- 
-- Table structure for table `like`
-- 
CREATE TABLE `like` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `status_id` int(10) NOT NULL,
  `like` int(10) NOT NULL,
  `un-like` int(10) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

db.php

Edit this file as per your database credentials.

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

index.php

Contains PHP code to update table records and show the current number in the file, in this file we used cookie to skip invalid likes and un-likes.

<?php
include('db.php');
$strSQL_Result  = mysqli_query($connection,"select `like`,`un-like` from `like` where id=1");
$row            = mysqli_fetch_array($strSQL_Result);
$like       = $row['like'];
$unlike     = $row['un-like'];
if($_POST)
{
    if(isset($_COOKIE["counter"]))
    {
        echo "-1";
        exit;
    }
    setcookie("counter", "liked", time()+3600*24, "/like-unlike-in-php-mysql/", "#"); 
    if(mysqli_real_escape_string($connection,$_POST['op']) == 'like')    {
        $update = "`like`=`like`+1";
    }
    if(mysqli_real_escape_string($connection,$_POST['op']) == 'un-like')
    {
        $update = "`un-like`=`un-like`+1";
    }
    mysqli_query($connection,"update `like` set $update where `id`=1");
    echo 1;
    exit;   
}
?>
<div class="grid">
<span id="status"></span><br>
<input type="button" value="<?php echo $like; ?>" class="button_like" id="linkeBtn" />
<input type="button" value="<?php echo $unlike; ?>" class="button_unlike" id="unlinkeBtn" />
</div> 

include db.php file and first run query in like to get number of like and un-like for a particular id here I have added static id you can make it for your dynamic system.

style.css

Contain styles of like and unlike buttons to make them look nicer on your UI.

.button_like {
    background-image: url(like.png);
    background-color: hsl(0, 0%, 97%);
    background-repeat: no-repeat; 
    background-position: 2px 0;
    border: none;           
    cursor: pointer;       
    height: 32px;          
    padding-left: 40px;    
    vertical-align: middle;
    color: hsl(0, 0%, 33%);
    border-color: hsl(0, 0%, 60%);
    -webkit-box-shadow: inset 0 1px 0 hsl(0, 100%, 100%),0 1px 0 hsla(0, 0%, 0%, .08);
    box-shadow: inset 0 1px 0 hsl(0, 100%, 100%),0 1px 0 hsla(0, 0%, 0%, .08);

}
.button_unlike {
    background-image: url(like.png);
    background-color: hsl(0, 0%, 97%);
    background-repeat: no-repeat; 
    background-position: 2px -31px;
    border: none;           
    cursor: pointer;       
    height: 32px;          
    padding-left: 40px;    
    vertical-align: middle;
    color: hsl(0, 0%, 33%);
    border-color: hsl(0, 0%, 60%);
    -webkit-box-shadow: inset 0 1px 0 hsl(0, 100%, 100%),0 1px 0 hsla(0, 0%, 0%, .08);
    box-shadow: inset 0 1px 0 hsl(0, 100%, 100%),0 1px 0 hsla(0, 0%, 0%, .08);

}
.grid
{
    height: 100px;
    width: 450px;
    margin: 0 auto;
    margin-top: 80px;
    text-align:middle;
}

script.js

Contain jQuery methods to handle like and unlike counts and disable and enable icons.

$(document).ready(function() {
$("#linkeBtn").removeAttr("disabled");
$("#unlinkeBtn").removeAttr("disabled");
$('#linkeBtn').click(function(e)
    {
        var val = parseInt($("#linkeBtn").val(), 10);
        $.post("index.php", {op:"like"},function(data)
        {
            if(data==1)
            {
                $("#status").html("Liked Sucessfully!!");
                val = val+1;
                $("#linkeBtn").val(val);
                $("#linkeBtn").attr("disabled", "disabled");
                $("#linkeBtn").css("background-image","url(likebw.png)");
            }
            else
            {
                $("#status").html("Already Liked!!");
            }
        })
    });
    $('#unlinkeBtn').click(function(e)
    {
        var val = parseInt($("#unlinkeBtn").val(), 10);
        $.post("index.php", {op:"un-like"},function(data)
        {
            if(data==1)
            {
                val = val+1;
                $("#unlinkeBtn").val(val);
                $("#unlinkeBtn").attr("disabled", "disabled");
                $("#unlinkeBtn").css("background-image","url(likebw.png)");
                $("#status").html("Un-liked Sucessfully!!");
            }
            else
            {
                $("#status").html("Already Un-liked!!");
            }
        })
    });            
});

In this js we have captured current like count and add one in that and update value of button val = val+1;

Demo Download

I hope you like this simple script to add like and un-like feature in your websites please update me with your feedback in comments below