Creating Twitter Like Follow System Using PHP And JQuery

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



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;
}

Comments

  1. Hello please make how to make user profile system like fb Twitter in php pdo

    ReplyDelete
  2. Unable to fetch the data

    ReplyDelete
  3. 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
  4. such a helpfull jquery thanks Aizaz for too much efforts for making and then sharing

    ReplyDelete
  5. thank you aizaz. may God bless you and i wish for your success

    ReplyDelete
  6. 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
    1. Hello Cordell, Well, if you really want to learn how to do that then I would recommend you to take my course I have created entire twitter clone using PHP with PDO. or you need to create a method to display follower list, which grabs users from the users table and then left join follow table using WHEN THEN CASE. Well, they're still a long way to go. I still recommend you to take my, take course here is link: https://www.udemy.com/create-a-high-end-social-network-like-twitter-in-php-mysql/?couponCode=TWEETY-TWITTER

      Delete

Post a comment