Creating Twitter Like Follow System Using PHP And JQuery

Mera Lesson
February 06, 2016
PHP, Twitter
comments {8}
Tweet

AOA, Hello readers today i have special post for you guys recently we created twitter like follow button with pure css and now we created working follow/unfollow system like twitter with PHP and jQuery so you will learn how to make follow system like twitter exact same with PHP, jQuery

Twitter Like Follow Button Using PHP And JQuery,follow button with jquery and php,php easy button,jquery button

Download Demo

First create database name it "follow-system" and table


CREATE TABLE IF NOT EXISTS `follow` (
  `follow_id` int(11) PRIMARY KEY AUTO_INCREMENT,
  `sender` int(11) NOT NULL,
  `receiver` int(11) NOT NULL,
  `status` int(11) NOT NULL DEFAULT '0'
) ENGINE=InnoDB AUTO_INCREMENT=93 DEFAULT CHARSET=latin1;

And now create users table


CREATE TABLE IF NOT EXISTS `users` (
  `user_id` int(11) PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(40) NOT NULL,
  `password` varchar(255) NOT NULL,
  `followers_count` int(11) NOT NULL,
  `first_name` varchar(40) NOT NULL,
  `last_name` varchar(40) NOT NULL,
  `profile_image` varchar(255) NOT NULL,
  `profile_cover` varchar(255) NOT NULL,
  `profile_bio` text NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
//And Add same users to show
INSERT INTO `users` (`user_id`, `username`, `password`, `followers_count`, `first_name`, `last_name`, `profile_image`, `profile_cover`, `profile_bio`) VALUES
(1, 'Aizaz.dinho', '098f6bcd4621d373cade4e832627b4f6', 8, 'Aizaz', 'Dinho', 'images/aizaz.dinho_profile.jpg', 'images/aizaz.dinho_cover.jpg', 'Php developer, Programer, Entrepreneur. And i loved to do impossible things'),
(2, 'Meezan', '098f6bcd4621d373cade4e832627b4f6', 30, 'Meezan', 'Ud Din', 'https://pbs.twimg.com/profile_images/509167722542813184/k4L4NgNi_bigger.jpeg', 'https://pbs.twimg.com/profile_banners/2797852412/1410230307/600x200', 'Internet hippie, #web #Designer, #web #Developer ,#Entrepreneur ,#Coder , #Founder,I love the internet'),
(4, 'Meralesson', '098f6bcd4621d373cade4e832627b4f6', 5, 'Mera', 'Lesson', 'https://pbs.twimg.com/profile_images/633960213205270528/ybmYuOZe_bigger.png', 'https://pbs.twimg.com/profile_banners/3319874382/1443704977/600x200', 'A blog is about #web #designing & #web #development, SEO tricks and for bloggers who love to learn');

This is our main class that hold our all functions


<?php 
class Main{
//get all users from database where user_id not = your id
 public function users($user_id){
 global $pdo;
 $query = $pdo->prepare("SELECT * FROM `users` U LEFT JOIN `follow` F on `f`.`receiver` = `U`.`user_id` AND CASE WHEN `F`.`sender` = ? THEN `F`.`receiver` = `U`.`user_id` END where `U`.`user_id` != ?");
 $query->bindValue(1,$user_id);
 $query->bindValue(2,$user_id);
  $query->execute();
 return $query->fetchAll(PDO::FETCH_ASSOC);
 }
 //this is our login 
 public function login($username,$password){
 global $pdo;
 $query = $pdo->prepare("SELECT user_id FROM users where username = ? and password = ?");
 $query->bindValue(1,$username);
 $query->bindValue(2,md5($password));
 $query->execute();
 $row = $query->fetch();
 if($row >0){
    $_SESSION['user_id'] = $row[0];
    header('Location: index.php');
 }else{
  echo 'Username Or Password is incorret';
 }
 }
//this is our follow method
 public function follow($user_id,$follow_id){
 global $pdo;
 //insert into follow where user_id = you and follow_id is = follower
 $query = $pdo->prepare("INSERT INTO `follow` (`sender`, `receiver`) VALUES (?, ?) ");
 //bind $user_id
 $query->bindValue(1,$user_id);
 //bind $follow_id
 $query->bindValue(2,$follow_id);
 //run query
 $query->execute();
 //add 1+ to follower profile
 $this->addNum($follow_id);

 }
 

 public function unFollow($user_id,$follow_id){
 global $pdo;
 //delete user_id and follow_id from follow 
 $query = $pdo->prepare("DELETE FROM `follow` WHERE `sender` = ? and `receiver` = ?");
 //bind user_id
 $query->bindValue(1,$user_id);
 //bind follow_id
 $query->bindValue(2,$follow_id);
  //run query
  $query->execute();
  //add -1 to follower_count
  $this->removeNum($follow_id);

 }

 public function addNum($follow_id){
 global $pdo;
 //add 1 more num to follow_counter
 $query = $pdo->prepare("UPDATE `users` SET `followers_count` = `followers_count` +1 WHERE `user_id` = ? ");
 //bind follow_id
 $query->bindValue(1,$follow_id);
 //run query
 $query->execute();
 }

 public function removeNum($follow_id){
 global $pdo;
 //remove 1 num from follow_counter
 $query = $pdo->prepare("UPDATE `users` SET `followers_count` = `followers_count` -1 WHERE `user_id` = ? ");
 //bind follow_id
 $query->bindValue(1,$follow_id);
 //run query
 $query->execute();
 }


}
?>

this is our jquery function that show follow/unfollow button


//if follow button click run function
$('.follow').click( function(e){
e.preventDefault();
//Make variable for this button
$button = $(this);
//Get follow_id from follow button rel tag
 var follow_id = $(this).attr("rel");
//if button has class following
    if($button.hasClass('following')){
    //send ajax request to ajax.php for unfollow
    $.post('ajax/ajax.php',{Unfollow:follow_id}); 
    //Remove button class Following
    $button.removeClass('following');
    //Remove button class unfollow
    $button.removeClass('unfollow');
    //Add text to follow button after unfollow
    $button.html(' Follow');
} else {
    //else send ajax request for follow
     $.post('ajax/ajax.php',{follow:follow_id});  
    //And remove class follow 
    $button.removeClass('follow');
    //And add class following
    $button.addClass('following');
    //All text to follow button
    $button.text('Following');         
    }
});
//run a function on hover on follow button 
$('.follow').hover(function(){
 //Make variable for button
     $button = $(this);
     //if button have class following
    if($button.hasClass('following')){
     //then add class unfollow
        $button.addClass('unfollow');
        //and add text unfollow so 
        //when you hover on follow button you'll see unfollow button
        $button.text('Unfollow');
    }
}, function(){
  //if button have class following
    if($button.hasClass('following')){
      //if remove class unfollow
        $button.removeClass('unfollow');
        //add text following
        $button.text('Following');
    }
});

This is our ajax.php that will handle our all ajax requets


<?php 
include '../core/database/connection.php';
include('../core/classes/main.php'); 
//Instantiating  claass
$get = new Main;
$submit = new Main;
$user_id = $_SESSION['user_id'];
//if user submit follow 
if(isset($_POST['follow'])){
 $follow_id = $_POST['follow'];
    //run function from main class
 $submit->follow($user_id,$follow_id);   
}
//if user submit unfollow
if(isset($_POST['Unfollow'])){
    $follow_id = $_POST['Unfollow'];
    //run function from main class
 $submit->unFollow($user_id,$follow_id);     
}
?>

we use ternary operator in foreach loop which acts as a shortened IF/Else statement so when user_id is follower and then show unfollow button else show follow button


(($row['receiver'] === $row['user_id'] && $row['sender'] === $user_id) ? '<button class="btn follow following" rel="'.$row['user_id'].'">Following</button>':' <button class="btn follow" rel="'.$row['user_id'].'"><i class="fa fa-user-plus"></i> Follow </button>')

And here is our index.php


<?php
include('core/database/connection.php'); 
include('core/class/main.php'); 
//Instantiating  classes
$get = new Main;
@$user_id = $_SESSION['user_id'];
$users = $get->users($user_id);
$submit = new Main;   
?>
<!DOCTYPE html>
<html>
<head>
 <title>Follow System Like Twitter</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 <script type="text/javascript" src="js/jquery.js"></script>
 </head>
<body>
<div id="header">
<?php
 //check if user logged in or not 
  if(isset($_SESSION['user_id']) === false){
    include('includes/login.php');
  }else{
   echo 'Logout';
  } 
 ?>
</div>
<div class="content">
<div class="content-inner">
<?php 
foreach ($users as $row) {
     echo '<div class="div-box">
  <div class="div-body">
   <div class="body-inner">
    <img src="'.$row['profile_cover'].'"/>
   </div>
   <div class="div-icon">
   <div class="body-left">
    <div class="head-img">
     <img src="'.$row['profile_image'].'"/>
    </div>
   </div>
   <div class="body-right">
     <ul>
       <li><i><i class="fa fa-cog"></i></i></li>
       <li>
      '.(($row['receiver'] === $row['user_id'] && $row['sender'] === $user_id) 
        ? '<button class="btn follow following" rel="'.$row['user_id'].'">Following</button>'
        :' <button class="btn follow" rel="'.$row['user_id'].'">
           <i class="fa fa-user-plus"></i> Follow </button>').'
       </li> 
     </ul>
   </div> 
  </div>
   </div>
   <div class="body-footer">
    <div class="title">
    <h3>
     <a href="#">
      '.$row['username'].'
     </a>
    </h3>
    </div>
    <div class="link">
     @<a href="#">'.$row['username'].'</a>
    </div>
    <div class="dis">
     '.$row['profile_bio'].'
    </div>
   </div>
  </div>   
 </div>';
  } 
 ?>
<!-- This is our jquery function file--> 
  <script type="text/javascript" src="js/functions.js"></script>
 </div>
 </div>
</body>
</html>

And this is our css style


/*
    Author's: Aizaz.dinho, Meezi (geeks of meralesson.com)
    Website: Meralesson.com
*/
*{
    margin: 0px;
    padding: 0px;
    height: auto;
    width: auto;
    font-family:Helvetica, Neue ;
    color: #292F33;
    line-height: 1.4em;
}
body{
    background:#F5F8FA; }
ul{
    list-style: none;
}
a{
    color: #1A1F2;
    text-decoration: none;
}
.content{
    width: 1000px;
    margin: 10px auto;

}
.content-inner{
    width: 100%;
    margin: 40px auto;
}

.div-box{
    width: 300px;
    height: 280px;
    border-radius: 4px;
    background: white;
    float: left;
    margin: 5px;
}

.div-body{
    width: 100%;
    height: 140px;
}
.body-inner{
    height: 95px;
    background: #ccc;
    border-radius: 4px;

}
.body-inner img{
    width: 100%;
    height: 100%;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom: 1px solid rgba(245, 248, 250, 0.79);
}
.body-left{
    width: auto;
    float: left;
    position: absolute;
    margin: -30px 0px 0px 10px;
}
.body-right{
    width: 40%;
    float: right;
    margin: 10px 10px;
}
.body-right ul li{
    display: inline-block;
}
.btn{
    border: 1px solid #ededed;
    color: #292F33;
    background-color: #fff;
    font-weight: bold;
    font-family: sans-serif;
    background-image: linear-gradient(#fff,#f5f8fa);
    padding: 3px 13px;
    font-size: 13px;
    border-radius: 2px;
    cursor: pointer;
}
 

.follow.:active{
background-image: linear-gradient(#fff,#f5f8fa);
    cursor: pointer;
}
.follow:hover{
    background-image: linear-gradient(#fff,#f5f8fa);
    cursor: pointer;
}
.head-img{
    width: 70px;
    height: 60px;
    border-radius: 4px;
    background: white;
    padding: 3px;
}
.head-img:hover{
    cursor: pointer;
}
.head-img img{
    width: 100%;
}
.body-footer{
    width: 280px;
    margin: 0px auto;
    padding: 3px;

}

.title a,.link a{
    text-decoration: none;
}
.title a:hover, .link a:hover,.title a:active ,.link a:active{
    text-decoration:underline;
}

.fa-cog{
    color: #8899A6;
}
.fa-cog:hover, .fa-cog:active{
    color: #1DA1F2;
    cursor:pointer;
}
.fa-user-plus{color: #1DA1F2;}
.dis{
    color: #5A6063;

}
.link{
    color: #5A6063;
}
.dis a{
    color: rgb(29, 161, 242);
}
.dis a:hover{
    text-decoration: underline;
}

button.btn.following{
    color: #fff;
    background-color: #1da1f2;
    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.05));
    border: 1px solid #3FAFF4;
    box-shadow: inset 0 2px 0 rgba(206, 181, 181, 0.2);
    font-weight: bold;
    padding: 3px 13px;
    border-radius: 4px;
    cursor: pointer;
}
button.btn.unfollow{
    color: #fff;
    background-color: #f9331c;
    background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.05));
    border: 1px solid #C87979;
    box-shadow: inset 0 2px 0 rgba(206, 181, 181, 0.2);
    font-weight: bold;
    padding: 3px 13px;
    border-radius: 4px;
    cursor: pointer
}


body {
    background: #fafafa;
}

#header{
    height: 70px;
    width: 100%;
    background: rgb(255, 255, 255) none repeat scroll 0% 0%;
}

#login{
    float: right;
    margin:10px 5px;
}

input[type="text"],input[type="password"]{
    padding:5px;
    border:1px solid #ededed;
    color:#333;
    margin:2px 2px;
}

input[type="submit"]{
    padding:5px;
    border:1px solid #ededed;
    color:#333;
    margin:2px 2px;
    background: #fff;
}

input[type="submit"]:hover,input[type="submit"]:active{
    border:1px solid #73c400;
    color:#73c400;
    cursor:pointer;
}

Author

I am Aizaz.Dinho and I loved to learn new things and teach to people like you, In my mind I'm the one who can do anything whatever I want, From my heart am still learner and loved to do impossible things, Web Development is my passion and I have PHP, MYSQL OOP PDO, Blogger WordPress also SEO experiences, You can say I'm the code ninja of meralesson

8 comments:

Naukri Points26 July 2016 at 08:33
Hello please make how to make user profile system like fb Twitter in php pdo
ReplyDelete
Godstime Ukado28 October 2016 at 01:02
I really like the post.
ReplyDelete
Salil Arabhavi4 November 2016 at 17:52
Unable to fetch the data
ReplyDelete
Nauman Malik5 May 2017 at 18:07
Hi, i am making app in ionic2 and using codeigniter in backend so can you provide me this thing functionality in codeigniter instead of plain php. Thanks.
ReplyDelete
inews venture15 July 2017 at 14:54
such a helpfull jquery thanks Aizaz for too much efforts for making and then sharing
ReplyDelete
Anonymous25 July 2017 at 08:37
thank you aizaz. may God bless you and i wish for your success
ReplyDelete
Cordell Carrier29 August 2017 at 07:07
Thank you Aizaz. This is very helpful for the site I am currently creating. I have a question I think you will able to help me with. How would I go about listing the followers that I have on my profile page by username?
ReplyDelete
Replies