How To Make Status System Like Facebook
Greetings our readers today I decided to make tutorial on status system like Facebook or posting system because when you learning PHP you need projects to make or learn about it, making posting, status system is very easy with PHP, PDO, OOP, and little bit JQUERY, and JAVASCRIPT. Best practices for beginner lets starts
 |
| How To Make Posting or Status System Like Facebook in php |
First create database and name it posting-system
CREATE TABLE IF NOT EXISTS `users` (
`user_id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(60) NOT NULL,
`password` varchar(255) NOT NULL,
`first_name` varchar(40) NOT NULL,
`last_name` varchar(55) NOT NULL,
`profile_image` varchar(255) NOT NULL,
PRIMARY KEY (`user_id`)
);
CREATE TABLE IF NOT EXISTS `posts` (
`post_id` int(11) NOT NULL AUTO_INCREMENT,
`user_id_p` int(11) NOT NULL,
`status` text NOT NULL,
`status_image` varchar(255) NOT NULL,
`status_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`post_id`)
);
INSERT INTO `users` (`user_id`, `username`, `password`, `first_name`, `last_name`, `profile_image`) VALUES
(1, 'aizaz.dinho', '098f6bcd4621d373cade4e832627b4f6', 'aizaz', 'dinho', 'images/profile.jpg');
your username is aizaz.dinho and password is test
<?php
try {
$pdo = new PDO('mysql:host=localhost;dbname=posting-system', 'root', '');
} catch (PDOException $e) {
print "Connetion Error!: " . $e->getMessage() . "<br/>";
die();
}
?>
<?php
session_start();
include 'class/functions.php';
include 'connection.php';
?>
<?php
class Main{
//login function
public function login($username,$password){
global $pdo;
$query = $pdo->prepare("SELECT * from users WHERE username = ? and password = ?");
$query->bindValue(1,$username);
$query->bindValue(2,$password);
$query->execute();
$rows = $query->fetch(PDO::FETCH_NUM);
if($rows > 0){
$_SESSION['user_id'] = $rows[0];
header('Location: index.php');
exit();
}else{
echo 'Username or Password is incorrect ';
}
}
//check user is logged in or not
public function logged_in(){
return (isset($_SESSION['user_id'])) ? true : false;
}
//fetching posts from database
public function posts(){
global $pdo;
$query = $pdo->prepare("SELECT * FROM `posts`,`users` WHERE user_id = user_id_p ORDER BY `post_id` DESC");
$query->execute();
return $query->fetchAll();
}
//add new post if user post
public function add_post($user_id,$status,$file_parh){
global $pdo;
if(empty($file_parh)){
$file_parh = 'NULL';
}
$query = $pdo->prepare('INSERT INTO `posts` (`post_id`, `user_id_p`, `status`, `status_image`, `status_time`) VALUES (NULL, ?, ?,?, CURRENT_TIMESTAMP)');
$query->bindValue(1,$user_id);
$query->bindValue(2,$status);
$query->bindValue(3,$file_parh);
$query->execute();
header('Location: index.php');
}
//fetch user data by user id
public function user_data($user_id){
global $pdo;
$query = $pdo->prepare('SELECT * FROM users WHERE user_id = ?');
$query->bindvalue(1,$user_id);
$query->execute();
return $query->fetch();
}
//timeAgo Function
public function timeAgo($time_ago){
$time_ago = strtotime($time_ago);
$cur_time = time();
$time_elapsed = $cur_time - $time_ago;
$seconds = $time_elapsed ;
$minutes = round($time_elapsed / 60 );
$hours = round($time_elapsed / 3600);
$days = round($time_elapsed / 86400 );
$weeks = round($time_elapsed / 604800);
$months = round($time_elapsed / 2600640 );
$years = round($time_elapsed / 31207680 );
// Seconds
if($seconds <= 60){
return "just now";
}
//Minutes
else if($minutes <=60){
if($minutes==1){
return "one minute ago";
}
else{
return "$minutes minutes ago";
}
}
//Hours
else if($hours <=24){
if($hours==1){
return "an hour ago";
}else{
return "$hours hrs ago";
}
}
//Days
else if($days <= 7){
if($days==1){
return "yesterday";
}else{
return "$days days ago";
}
}
//Weeks
else if($weeks <= 4.3){
if($weeks==1){
return "a week ago";
}else{
return "$weeks weeks ago";
}
}
//Months
else if($months <=12){
if($months==1){
return "a month ago";
}else{
return "$months months ago";
}
}
//Years
else{
if($years==1){
return "one year ago";
}else{
return "$years years ago";
}
}
}
}
?>
<?php
$check = new Main;
if(isset($_POST['username'],$_POST['password'])){
@$username = $_POST['username'];
@$password = $_POST['password'];
if(empty($username) or empty($password)){
echo "
Enter a Username and Password
";
} else{
$password = md5($password);
$check->login($username,$password);
}
}
?>
<div class="right">
<form action="" method="post"/>
<div class="right-email">
<ul>
<li class="white">Username</li>
<li><input type="text" name="username"/></li>
</ul>
</div>
<div class="right-pass">
<ul>
<li><span class="white">Password</span></li>
<li><input type="Password" name="password"/></li>
<li><span>Forgot your Password?</span></li>
</ul>
</div>
<div class="right-btn">
<input class="btn" type="submit" value="Login" />
</div>
</form>
</div>
<?php
include 'core/main.php';
$check = new Main;
$get = new Main;
$send = new Main;
@$user_id = $_SESSION['user_id'];
//fetching user data by user_id
$data = $get->user_data($user_id);
// fetching posts from database
$post = $get->posts();
//check user submit data
if(isset($_POST['submit'])){
$status = $_POST['status'];
//checking image if isset
if (isset($_FILES['post_image'])===true) {
//if image is not empty
if (empty($_FILES['post_image']['name']) ===true) {
if(!empty($status)===true){
$send->add_post($user_id,$status);
}
}else {
//checking image format
$allowed = array('jpg','jpeg','gif','png');
$file_name = $_FILES['post_image']['name'];
$file_extn = strtolower(end(explode('.', $file_name)));
$file_temp = $_FILES['post_image']['tmp_name'];
if (in_array($file_extn, $allowed)===true) {
$file_parh = 'images/posts/' . substr(md5(time()), 0, 10).'.'.$file_extn;
move_uploaded_file($file_temp, $file_parh);
$send->add_post($user_id,$status,$file_parh);
}else{
echo 'incorrect File only Allowed with less then 1mb ';
echo implode(', ', $allowed);
}
}
}
}
?>
<html>
<head>
<title>Posting System like Facebook</title>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<!-----------Head-------->
<div class="head">
<div class="head-in">
<diV class="head-logo">
<h1 class="h-1">MeriBook</h1>
</div><?php //check user is logged in or not
if($check->logged_in() === false){
include 'login.php';
}
?></div>
</div>
<div class="wrapper">
<!--content -->
<div class="content">
<!--left-content-->
<div class="center">
<div class="posts">
<div class="create-posts">
<form action="" method="post" enctype="multipart/form-data">
<div class="c-header">
<div class="c-h-inner">
<ul>
<li style="border-right:none;"><img src="img/icon3.png"></img><a href="#">Update Status</a></li>
<li><input type="file" onchange="readURL(this);" style="display:none;" name="post_image" id="uploadFile"></li>
<li><img src="img/icon1.png"></img><a href="#" id="uploadTrigger" name="post_image">Add Photos/Video</a></li>
<li style="border: none;"><img src="img/icon2.png"></img><a href="#">Create Photo Album</a></li>
</ul>
</div>
</div>
<div class="c-body">
<div class="body-left">
<div class="img-box">
<img src="<?php echo $data['profile_image'];?>"></img>
</div>
</div>
<div class="body-right">
<textarea class="text-type" name="status" placeholder="What's on your mind?"></textarea>
</div>
<div id="body-bottom">
<img src="#" id="preview"/>
</div>
</div>
<div class="c-footer">
<div class="right-box">
<ul>
<li><button class="btn1"><img class="iconw-margin" src="img/iconw.png"></img>Public<img class="iconp-margin" src="img/iconp.png"></img></button></li>
<li><input type="submit" name="submit" value="Post" class="btn2"/></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//Image Preview Function
$("#uploadTrigger").click(function(){
$("#uploadFile").click();
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#body-bottom').show();
$('#preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<?php foreach($post as $row){
//fetching all posts
$time_ago = $row['status_time'];
echo '
<div class="post-show">
<div class="post-show-inner">
<div class="post-header">
<div class="post-left-box">
<div class="id-img-box"><img src="'.$row['profile_image'].'"></img></div>
<div class="id-name">
<ul>
<li><a href="#">'.$row['username'].'</a></li>
<li><small>'.$get->timeAgo($time_ago).'</small></li>
</ul>
</div>
</div>
<div class="post-right-box"></div>
</div>
<div class="post-body">
<div class="post-header-text">
'.$row['status'].'
</div>'.( ($row['status_image'] != 'NULL') ? '<div class="post-img">
<img src="'.$row['status_image'].'"></img></div>' : '').'
<div class="post-footer">
<div class="post-footer-inner">
<ul>
<li><a href="#">Like</a></li>
<li><a href="#">Comment</a></li>
<li><a href="#">Share</a></li>
</ul>
</div>
</div>
</div>
</div>
</div><br> ';
}
?>
</div>
</form>
</div>
</div>
</body>
</html>
<?php
session_start();
session_destroy();
header('Location: index.php');
?>
/* Design By Meezan Ud Din
*/
*{
margin:0px;
padding:0px;
width:auto;
height:auto;
font-family:helvetica,arial,sans-serif;
}
body{
background-color:#E9EAED;
}
/*--------top head start--------*/
.head{
height:100px;
width:100%;
background:#83c400;
}
.head-in{
width:850px;
margin:0px auto;
}
.head-logo{
width:400px;
height:auto;
float:left;
margin: 40px 0px 0px 0px;
}
.h-1{
color: white;
font-size: 44px;
}
.right{
float:right;
width:430px;
height:auto;
margin: 10px 0px;
font-size:13px;
}
.right ul{
list-style:none;
}
.right ul li{
margin:5px 5px;
}
.right ul li input{
padding: 4px;
}
.right-email{
float:left;
}
.right-pass{
float:left;
}
.btn{
margin: 25px 1px;
padding:0px;
border:none;
background:#8fc400;
color:white;
border: 1px solid rgb(40, 77, 39);
padding: 2px 3px;
}
.right-btn{
line-height: 6;}
.white{
color:white;
}
/*--------header Start--------*/
.header{
width:851px;
height:315px;
border:1px solid #ccc;
margin:0px auto;
}
#login{
float: right;
}
#login >#logout li {
list-style: none;
}
#login >#logout li a {
color: #fff;
font-weight: bolder;
text-decoration: none;
}
#logout{
position: absolute;
margin-top: 40px;
}
.center{
width:600px;
margin:0px auto;
}
.posts{
width:600px;
height:auto;
}
.create-posts{
width: 490px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 2px;
border: 1px solid #E1E0E0;
margin-bottom:10px;
}
.c-header{
width:100%;
height:auto;
padding-top:5px;
}
.c-h-inner{
width:95%;
height:25px;
margin:0px 15px;
border-bottom:1px solid #E5E5E5;
font-size:12px;
font-weight:bold;
}
.c-h-inner ul{
list-style:none;
margin-top:2px;
}
.c-h-inner ul li{
display:inline;
border-right: 1px solid #E9E3E3;
padding-right:10px;
}
.c-h-inner ul li a{
color: rgb(59, 89, 152);
text-decoration: none;
}
.c-h-inner ul li a:hover{
text-decoration:underline;
}
.c-h-inner ul li img{
margin: -2px 3px;
}
.c-body{
width:100%;
height:auto;
border-bottom:1px solid #E5E5E5;
overflow: auto;
}
#body-bottom{
border-top: 1px solid #8fc400;
margin: 10px;
display: none;
}
#body-bottom img{
margin: 10px;
height: 95px;
width: 95px;
}
.iconw-margin{
margin: -2px 4px;
}
.iconp-margin{
margin: -3px 1px;
}
.body-left{
width:62px;
height:auto;
float:left;
margin-left:15px;
}
.img-box {
width:50px;
height:50px;
margin: 10px 0px;
border: 1px solid #F5F1F1;
}
.img-box img{
width:100%;
height:100%;
}
.body-right{
width:
}
.text-type{
width: 400px;
height: auto;
resize: none;
margin: 23px 0px;
font-size: 14px;
color: #959698;
border:none;
overflow:hidden;
}
.c-footer{
overflow:auto;
}
.right-box{
float:right;
}
.right-box ul {
list-style:none;
}
.right-box ul li{
display:inline;
}
.btn1{
width: 88px;
border:1px solid #ccc ;
background: white none repeat scroll 0% 0%;
font-weight: bolder;
color: rgb(87, 87, 87);
border-radius: 2px;
margin: 10px 0px;
height: 25px;
font-size:12px;
}
.btn1:active{
bordeR:1px solid rgb(71, 100, 159);
}
.btn2{
background: rgb(71, 100, 159) none repeat scroll 0% 0%;
color: white;
font-weight: bolder;
font-size: 12px;
margin: 0px 7px;
width: 65px;
height: 25px;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
}
.btn2:active{
border:2px solid rgba(71, 100, 159, 0.55);
}
.btn2:hoveR{
cursor:pointer;
}
.btn1:hoveR{
cursor:pointer;
}
.post-show{
width: 490px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 2px;
border: 1px solid #E1E0E0;
}
.post-show-inner{
width:95%;
margin:10px auto;
}
.post-header{
width:100%;
height:60px;
}
.post-header a:hover{
text-decoration:underline;
}
.post-header-text{
margin:8px 0px;
}
.post-img{
width:100%;
height:auto;
max-height:400px;
}
.post-img img{
max-width:470px;
max-height:394px;
}
.post-img-footer{
border: 1px solid #CCC;
margin: -5px 0px 10px auto;
}
.post-footer-text{
padding:10px;
}
.post-footer-text h3{
color: rgb(20, 24, 76);
font-weight: normal;
font-size: 18px;
}
.post-footer-text p{
font-size: 13px;
color: #333;
}
.post-footer-text small{
color: rgb(204, 204, 204);
font-family: sans-serif;
font-size: 11px;
}
.post-footer-text ul{ list-style:none;}
.post-footer-text ul li{
}
.post-left-box{
width:80%;
height:auto;
}
.post-left-box ul{list-style:none;}
.post-left-box ul li{
display:block;
}
.post-left-box ul li a{
text-decoration: none;
font-size: 15px;
font-weight: bold;
color: #3F66B7;
}
.post-left-box ul li small{
font-size: 12px;
color: #D2D1D1;
}
.id-img-box{
width:50px;
height:50px;
float:left;
}
.id-img-box img{
width:100%;
height:100%;
}
.id-name{
padding: 8px 55px;
}
.post-footer{
width:100%;
height:20px;
margin-top:5px;
}
.post-footer ul {list-style:none}
.post-footer ul li{display:inline; margin:0px 4px;}
.post-footer a{text-decoration:none; font-size:13px; color:#3F66B7;}
.post-footer a:hover{text-decoration:underline;}
