Twitter is a Social networking website and microblogging platform which allows their user to post ,like, comment and share,it’s users post called “tweets”.
But you are not here to read about twitter you already know it. You are only here because you wanted to learn to build a system or social networking site like twitter or perhaps something else which twitter already has.
We will learn How to Create a Follow and Unfollow System like Twitter using PHP,Jquery through a script which is given below it will help you to understand the concept of Follow and Unfollow System.
Before getting started
Do you ever want to build a social networking website like facebook or twitter, Then click the link down below.
or you wanted to learn How to Build Complete Blogger Blog CMS In PHP,JavaScript,MySQL then click here!
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>
/*
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;
}
Hello please make how to make user profile system like fb Twitter in php pdo
ReplyDeleteI really like the post.
ReplyDeleteUnable to fetch the data
ReplyDeleteHi, 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.
ReplyDeletesuch a helpfull jquery thanks Aizaz for too much efforts for making and then sharing
ReplyDeletethank you aizaz. may God bless you and i wish for your success
ReplyDeleteThank 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?
ReplyDeleteHello 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
Deletepls can you send the source code file
ReplyDelete