How To Make Post Or Status System Like Facebook in php

 

Why learn to build a posting like Facebook ?

Facebook which has around 21.50 Billion (‘Monthly Visits’) and worldwide global rank #3.This is the website used by approximately each and every person who accesses the internet.

So why not?

Fields which are related to programming , developing or enhancing a skill set or even it can be learning a programming language and in the process of mastering anything ,The very first thing you have to do is you need to come out of your shell.

Which means learn!.

In this case we are learning PHP as well as PDO and OOP, a little bit of Jquery & of course Javascript ,By Creating a Posting System like Facebook.

So let's get started

Checkout our Online course: How to Create Social Network Clone Like Twitter using PHP & MySQL 

 

Do you know that you can build Multi Blogging platform like Blogger in PHP here is the Link :

”How to Build Complete Blogger Blog CMS In PHP,JavaScript,MySQL”

View Demo | Download Full Codes ("View-Demo is not working for now please try later!")

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`)
);

and add user to users table

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

Now make connection to the database

<?php
 try {
    $pdo = new PDO('mysql:host=localhost;dbname=posting-system', 'root', '');
     
} catch (PDOException $e) {
    print "Connetion Error!: " . $e->getMessage() . "<br/>";
    die();
}
?>

Make Main php in core folder

<?php 
 session_start();
 include 'class/functions.php';
 include 'connection.php';
?>

And make class folder in core folder and make clsss.php in core folder class.php will hanlde our functions

&lt?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";
       }
   }
  }
 }
?>

after you done with functions make login.php in site folder

&lt?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>

make index.php in site folder

 <?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>

create logout.php

<?php 
 session_start();
 session_destroy();
 header('Location: index.php');
?>

here is our style.css file

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