How To Make Post Or Status System Like Facebook in php

Spread the love
facebook%2Bposting%2Bsystem%2Bcover

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

 
Do you know that you can build Multi Blogging platform like Blogger in PHP here is the Link :
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 class.php in core folder class.php will hanlde our functions

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

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

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

Enter a Username and Password

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

Editorial staff
Editorial staff
Articles: 7

52 Comments

  1. Hello for some not-known reason on my page was showed this under the post box and on the top of the post:
    < 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>
    From where can i remove or fix this, all work perfect wihout his running. Link: http://thejockersbase.pe.hu

  2. Hi Alzaz, Please help me. The password test does not work.

    I created this entry in the table aizaz.dinho as user and 098f6bcd4621d373cade4e832627b4f6 as password.

    Thanks you…chris

  3. in the database status_time is set ON UPDATE CURRENT_TIMESTAMP, so whenever you update your post it will update the time. make sure you didn't change anything in the class.php add_post prepare query

  4. Hi,
    thank you for the code.
    But can you please help me as when I copied it to my files and folders I received this message in the browser:
    Fatal error: Call to a member function prepare() on null in C:wamp64wwwpt1classfunctions.php on line 48.
    And line 48 is like it is on your file $query = $pdo->prepare('SELECT * FROM users WHERE user_id = ?');
    Thank you!

  5. Sir where should I insert this?
    "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

  6. problem solved!!use date_default_timezone_set('Asia/Kolkata') inside the time function.since i live in india i used this for other countries there is different id so they can use that.

  7. the posting system is work ! thanks for that ….so how about the like ,comment, and share .still not working …how can i download the latest code????

  8. hello sir, nice work with the source code.
    but i need you to help me with the time of each post. any time i upload any post, i do get "60 minutes ago" which is a wrong timing and any time i refresh the page, it jumps to "1 hour ago"
    !!please help!!

  9. Hello.. Amazing post it really worked without no problem.. Can you make the like and comment button work.. Would really appreciate that and also a code where the users can message their selfs within the site

  10. Hi, do i enter my login details when i code the function here ? class Main{
    //login function
    public function login($username,$password){
    global $pdo;
    $query = $pdo->prepare("SELECT * from users WHERE username = ? and password = ?");

    or i just leave it as it is. coz nothing happens when i punch in my login details. and i have done all the steps shown on the tutorial

  11. Leave it as it is, make sure you added the users in the users table and add the database name into your connection.php which will be in core folder. and also try to download the code again.

  12. hello sir, nice work with the source code.
    but i need you to help me with the time of each post. any time i upload any post, i do get "60 minutes ago" which is a wrong timing and any time i refresh the page, it jumps to "1 hour ago"
    !!please help!!

  13. ok thanks brother. it is working now but the only two things i dont get is when i click on login it pops up this

    "Warning: Cannot modify header information – headers already sent by (output started at /home/movingso/public_html/index.php:60) in /home/movingso/public_html/core/class/functions.php on line 14

    then i have to refresh the page again so that it passes that error.

    and again it is not allowing me to login with any other password unless i use "test" even on other users i have created

  14. Hi Aizaz

    So desperate to get the like and comment codes. when is it going to be available? you have help alot by taking us this far but now we are all stuck

  15. hi , i already have a forum system that support comments , messages , so can i link this posting system with it ?

Leave a Reply

Your email address will not be published. Required fields are marked *