-
Mera Lesson
- February 06, 2016
- PHP, Twitter
- comments {6}
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;
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');
<?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();
}
}
?>
//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');
}
});
<?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>')
<?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
ReplyDelete