How to Create Like & Unlike code like FB using PHP, MySQL and jQuery
In this tutorials we are going to learn How to Create Like & Unlike code using PHP, MySQL and jQuery.
Rating system is very useful for every web project. Through this system, web admin can track the visitors like and dislike. Also it will help webmaster to understand the visitors choices and make their website more interactive with the visitors.
Demo |
We have made the simple rating or like or unlike code system using PHP, MySQL, jQuery and Ajax. This rating system take the visitors like or dislike with jQuery and Ajax.
Step 1: Create database ‘like’ table using MySQL query.
CREATE TABLE `likes` ( `id` int(5) NOT NULL AUTO_INCREMENT, `pid` int(10) NOT NULL, `like` int(10) NOT NULL, `unlike` int(10) NOT NULL, `uid` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=1;
Step 2: Create database ‘products‘ table using MySQL query.
CREATE TABLE `products` ( `id` int(11) NOT NULL AUTO_INCREMENT, `product_name` varchar(255) NOT NULL, `price` double(10,2) NOT NULL DEFAULT '0.00', `status` int(2) NOT NULL DEFAULT '1', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=4; -- -- Dumping data for table `products` -- INSERT INTO `products` VALUES (1, 'developer desks design book', 20.00, 1); INSERT INTO `products` VALUES (2, 'Developer desks login tutorials', 10.00, , 1); INSERT INTO `products` VALUES (3, 'developer desks coding book', 100.00, 1);
Step 3: Connect DB function with db coding.
<?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);
?>
Step 4: Index.php files have Main file show products list and and like buttons:
<?php
session_start();
include("db.php");
if(!isset($_SESSION['user']))
{
$_SESSION['user'] = session_id();
}
$uid = $_SESSION['user']; // set your user id settings
if($_POST) // AJAX request received section
{
$pid = mysqli_real_escape_string($connection,$_POST['pid']); // product id
$op = mysqli_real_escape_string($connection,$_POST['op']); // like or unlike op
if($op == "like")
{
$gofor = "like";
}
elseif($op == "unlike")
{
$gofor = "unlike";
}
else
{
exit;
}
// check if alredy liked or not query
$query = mysqli_query($connection,"SELECT * from `likes` WHERE pid='".$pid."' and uid='".$uid."'");
$num_rows = mysqli_num_rows($query);
if($num_rows>0) // check if alredy liked or not condition
{
$likeORunlike = mysqli_fetch_array($query);
if($likeORunlike['like'] == 1) // if alredy liked set unlike for alredy liked product
{
mysqli_query($connection,"update `likes` set `unlike`=1,`like`=0 where id='".$likeORunlike['id']."' and uid='".$uid."'");
echo 2;
}
elseif($likeORunlike['unlike'] == 1) // if alredy unliked set like for alredy unliked product
{
mysqli_query($connection,"update `likes` set `like`=1,`unlike`=0 where id='".$likeORunlike['id']."' and uid='".$uid."'");
echo 2;
}
}
else // New Like
{
mysqli_query($connection,"INSERT INTO `likes` (`pid`,`uid`, `$gofor`) VALUES ('$pid','$uid','1')");
echo 1;
}
exit;
}
$query = "SELECT * FROM `products`"; // products list
$res = mysqli_query($connection,$query);
$HTML = "";
while($row=mysqli_fetch_array($res))
{
// get likes and dislikes of a product
$query = mysqli_query($connection,"select sum(`like`) as `like`,sum(`unlike`) as `unlike` from `likes` where pid = ".$row['id']);
$rowCount = mysqli_fetch_array($query);
if($rowCount['like'] == "")
$rowCount['like'] = 0;
if($rowCount['unlike'] == "")
$rowCount['unlike'] = 0;
if($uid == "") // if user not loggedin then show login link on like button click
{
$like = '
<input onclick="location.href = \'login.php\';" type="button" value="'.$rowCount['like'].'" rel="'.$row['id'].'" data-toggle="tooltip" data-placement="top" title="Login to Like" class="button_like" />
<input onclick="location.href = \'login.php\';" type="button" value="'.$rowCount['unlike'].'" rel="'.$row['id'].'" data-toggle="tooltip" data-placement="top" title="Login to Unlike" class="button_unlike" />';
}
else
{
$query = mysqli_query($connection,"SELECT * from `likes` WHERE pid='".$row['id']."' and uid='".$uid."'");
if(mysqli_num_rows($query)>0){ //if already liked od disliked a product
$likeORunlike = mysqli_fetch_array($query);
// clear values of variables
$liked = '';
$unliked = '';
$disable_like = '';
$disable_unlike = '';
if($likeORunlike['like'] == 1) // if alredy liked then disable like button
{
$liked = 'disabled="disabled"';
$disable_unlike = "button_disable";
}
elseif($likeORunlike['unlike'] == 1) // if alredy dislike the disable unlike button
{
$unliked = 'disabled="disabled"';
$disable_like = "button_disable";
}
$like = '
<input '.$liked.' type="button" value="'.$rowCount['like'].'" rel="'.$row['id'].'" data-toggle="tooltip" data-placement="top" title="Like" class="button_like '.$disable_like.'" id="linkeBtn_'.$row['id'].'" />
<input '.$unliked.' type="button" value="'.$rowCount['unlike'].'" rel="'.$row['id'].'" data-toggle="tooltip" data-placement="top" title="Un-Like" class="button_unlike '.$disable_unlike.'" id="unlinkeBtn_'.$row['id'].'" />
';
}
else{ //not liked and disliked product
$like = '
<input type="button" value="'.$rowCount['like'].'" rel="'.$row['id'].'" data-toggle="tooltip" data-placement="top" title="Like" class="button_like" id="linkeBtn_'.$row['id'].'" />
<input type="button" value="'.$rowCount['unlike'].'" rel="'.$row['id'].'" data-toggle="tooltip" data-placement="top" title="Un-Like" class="button_unlike" id="unlinkeBtn_'.$row['id'].'" />
';
}
}
$HTML.='
<li> <img src="images/'.$row['image'].'" class="">
<h4 class="">'.$row['product_name'].'</h4>
<div class="product-price">
<span class="normal-price">$'.$row['price'].'</span>
</div>
<a href="#" class="btn btn-default navbar-btn" >Buy Now</a>
<div class="grid">
'.$like.'
</div>
</li>';
}
?>
<!doctype html>
<head>
</head>
<body>
<div class="container">
<div class="row">
<h1>PHPGang Shopping store</h1>
<div class="col-sm-12 col-md-12">
<ul class="thumbnail-list">
<?php echo $HTML; ?>
</ul>
</div>
</div>
</div>
</body>
</html>
Step 5: Create style for css.
.button_like {
background-image: url(like.png);
background-color: #fff;
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%);
}
.button_unlike {
background-image: url(like.png);
background-color: #FFF;
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%);
}
.button_disable{
background-image: url("likebw.png");
}
.grid
{
width: 450px;
margin: 0 auto;
text-align:middle;
}
.thumbnail-list {
list-style:none;
margin:0;
padding:0;
font-size:0;
}
.thumbnail-list li {
display:inline-block;
vertical-align:top;
width:50%;
padding:2%;
font-size:12px;
}
.thumbnail-list img {
display:block;
width:100%;
}
.item { background:green; }
.cut-price {
text-decoration:line-through;
color:#ccc;
}
.product-price {
float:left;
width:100%;
color:#999;
}
.btn-slide { display:none; }
@media (min-width:640px) {
.thumbnail-list li { width:33.33333%; }
}
@media (max-width:767px) {
.btn-slide {
text-align:center;
width:100%;
padding:10px;
margin:0 auto;
display:block;
font:bold 120%/100% Arial,Helvetica,sans-serif;
color:#000;
text-decoration:none;
border:1px solid #ccc;
}
#panel { display:none; }
.thumbnail-list li { text-align:center; }
}
@media (max-width:320px) {
.thumbnail-list li { width: 100%}
}
Add jquery code and and css link for in the code.
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
This is the simple and easy code for like and unlike system I hope you guyz like this please share your feedback in comments. If you face any issue please fee free to comment below.
