Subin's Blog

Peace ☮️, Love 💙, Freedom 🕊 & Curiosity 👨‍💻

Create Facebook Like System With jQuery, MySQL, PDO In PHP

Facebook, MySQL, PHP, PhpMyAdmin, SQL
Like, Unlike

Read {count} times since 2020

Table of Contents

Facebook have it’s own like system which pretty good. This post will tell you how to create a "Like system" like that of Facebook. All you have to need is jQuery, MySQL Database and PDO PHP extension. This technic is partially used in my social network, Open. See the demo there in the social network. But you have to signup.

You should create a user table with users data including user id, username, password, email etc… 
<div>
  <span style="color: red; font-family: inherit;">The table should be like this:</span>
</div>
Let’s start by creating a likes table where we store the like actions by the user.

Here is the SQL code that create the likes table : 

CREATE TABLE `fdlikes` (
 `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
 `pid` int NOT NULL PRIMARY KEY ,
 `user` varchar(25) NOT NULL UNIQUE
);

The pid field is for the post id. The user field is for the user id.

Create a post table to insert posts created by users. 

CREATE TABLE `fdposts` (
 `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
 `user` varchar(25) NOT NULL,
 `message` varchar(200) NOT NULL,
 `likes` int(11) DEFAULT NULL,
 `posted` varchar(20) NOT NULL,
);

The id field is an auto increment field which decides the post id. User field is the user’s id and likes field contains number of users who liked the post. Posted field contains the date and time in which the post was created.

First of all create a config file that will connect to database. We are going to use PDO.

config.php

This file contains the $dbh variable which is the PDO object we’re going to use for executing SQL queries.

$dbh = new PDO('mysql:dbname=database;host=127.0.0.1', 'username', 'password');

Showing Like/Unlike Button 

<?php
require_once "config.php";
$pid='1'; //Post id - Post is "Hi everybody"
$uid='1'; //User id - User is "Subin Siby"
$sql=$dbh->prepare("SELECT * FROM fdlikes WHERE pid=? and user=?");
$sql->execute(array($pid, $uid));
if($sql->rowCount()==1){
 echo '<a href="#" class="like" id="'.$pid.'" title="Unlike">Unlike</a>';
}else{ 
 echo '<a href="#" class="like" id="'.$pid.'" title="Like">Like</a>';
}
?>

Place the above code anywhere you like.

jQuery code to post like/unlike action 

<span style="line-height: 16px;"><span style="font-family: inherit;">$(document).ready(function(){
 $(document).on('click', '.like', function(){</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;">if($(this).attr('title') == 'Like'){</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;"> $that = $(this);
   $.post('action.php', {pid:$(this).attr('id'), action:'like'},function(){</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;">  $that.text('Unlike');</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;">  $that.attr('title','Unlike');</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;"> });</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;">}else{</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;"> if($(this).attr('title') == 'Unlike'){</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;">  $that = $(this);
    $.post('action.php', {pid:$(this).attr('id'), action:'unlike'},function(){</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;">   $that.text('Like');</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;">   $that.attr('title','Like');</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;">  });</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;"> }</span></span>
  <span style="line-height: 16px;"><span style="font-family: inherit;">}</span></span>
<span style="line-height: 16px;"><span style="font-family: inherit;"> });
});</span></span>
<p>
  The above code can be placed inside <strong>script</strong> element or as an external file.
</p>

PHP code to like/unlike to which jQuery sends request

This file is action.php 

<?php
require_once "config.php";
$pid=$_POST['pid'];
$user=$_COOKIE['user'];
$action=$_POST['action'];
if ($action=='like'){
 $sql=$dbh->prepare("SELECT * FROM fdlikes WHERE pid=? and user=?");
 $sql->execute(array($pid,$user));
 $matches=$sql->rowCount();
 if($matches==0){
 $sql=$dbh->prepare("INSERT INTO fdlikes (pid, user) VALUES(?, ?)");
 $sql->execute(array($pid,$user));
 $sql=$dbh->prepare("UPDATE fdposts SET likes=likes+1 WHERE id=?");
 $sql->execute(array($pid));
 }else{
 die("There is No Post With That ID");
 }
}
if ($action=='unlike'){
 $sql = $dbh->prepare("SELECT 1 FROM `fdlikes` WHERE pid=? and user=?");
 $sql->execute(array($pid,$user));
 $matches = $sql->rowCount();
 if ($matches != 0){
 $sql=$dbh->prepare("DELETE FROM fdlikes WHERE pid=? AND user=?");
 $sql->execute(array($pid,$user));
 $sql=$dbh->prepare("UPDATE fdposts SET likes=likes-1 WHERE id=?");
 $sql->execute(array($pid));
 }
}
?>

That’s it. Try it out. If there’s any bugs, problems or questions feel free to comment below on Disqus.

Show Comments