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 :
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;}
can you give the DAtabase of this? thanks
Here you go https://drive.google.com/file/d/0B4q4IW6m2bK9amxKelZQX0U0djQ/view?usp=sharing and replace posting-system with posting_system in connection.php
Hi in this tutorial how to set user to post author
good tutorial i will try it tnx for giving also login 😀
posts of all the users are shown in a single profile
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
i just updated the index.php file, You just need to copy and replace with yours.
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
looking at the core/class/function.php file and the variable being carried over for both user and password shows ?. is this correct.
Hello Chris maybe you misplace the code, try to download fresh copy of codes and also download the database from here https://drive.google.com/file/d/0B4q4IW6m2bK9amxKelZQX0U0djQ/ and replace posting-system with posting_system in connection.php
How can i change the password (and how the new password can be encoded just like you did with 'test' ) ?
Go to the database (phpmyadmin) and edit the users table and on the password field choose MD5 encryption that's it
hey, the code is not downloading, please do provide the source from where i can download it.
the downloading link is working fine, Here's another link for you https://www.dropbox.com/s/qh476474luoc59d/fb-posting-system.rar?dl=0
hi . i just want to ask if the time will update ? i tried it in localhost but the "time ago" is not updating . please help
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
adada
than you for this. can I have also the code for adding a comment.
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!
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
in users table, (click on SQL tab in users table then execute the code)
hello!time is not showing its just showing just now on every post.bt in database the time is updated
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.
how to set plain text password for new users
any example for comment section ?
Hi, Great tutorial. Any info for the commenting part? Cheers!
Really helped me alot and made my work easy . Thank you very much. i'm developing Tuting system in .net if anyone wants to contribute in my work … contact me on sarmad.fici@gmail.com
good comments!
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????
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!!
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
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
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.
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!!
we will update this posting system to new posting system like facebook with like and comments features
facing this problem…"Fatal error: Class 'main' not found in C:xampphtdocsposting-systemindex.php on line 4 …what can i do now?
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
solved it =D
i want to enable the comment section..how can i do it?
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
and i already have an existing database and login system and it is work well
hi , i already have a forum system that support comments , messages , so can i link this posting system with it ?
hey, can you please share the source codes for the comment system
we will update this posting system to new posting system like facebook with like and comments features
we will update this posting system to new posting system like facebook with like and comments features
please update this posting system to new posting system like facebook with like and comments features
hello aizaz i need to talk to you about this code and need some help
Yes?
hi
Hi, can i kindly get user registration code for this system. Thanks
i need the update for Like and Comment features. Thanks
thank you very much it works 🙂