Facebook Like Status Update in PHP and jQuery

Today, i am going to write a nice tutorial on creating Facebook like status update in jQuery and PHP. In this tutorial i will tell you how to create database and then PHP code and javascript code.

Demo Download

jQuery Code

This code will do all dynamic work of the code and dynamically submit status update to server.

$( function(){
$(".input_box").elastic().css("height","30px");
$(".input_box").focus(function(){
$(this).filter(function(){
return $(this).val() == "" || $(this).val() == "What's on your mind?"
}).val("").css("color","#000000");
});
$(".input_box").blur(function(){
$(this).filter(function(){
return $(this).val() == ""
}).val("What's on your mind?").css("color","#808080");
});

$("#share").click(function(){
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12){
a_p = "am";
}else{
a_p = "pm";
}
if (curr_hour == 0){
curr_hour = 12;
}
if (curr_hour > 12){
curr_hour = curr_hour - 12;
}
var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1){
curr_min = "0" + curr_min;
}
var m_names = new Array("Jan", "Feb", "Mar",
"Apr", "May", "Jun", "Jul", "Aug", "Sep",
"Oct", "Nov", "Dec");
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
var date = m_names[curr_month] +" "+ curr_date +" "+"at"+" "
+ curr_hour + ":" + curr_min + " " + a_p;

$(".loading").show();
var status=$(".input_box").val();
if(status == "What's on your mind?"){
$(".loading").hide();
}else{
var DATA = 'status=' + status + '&date=' +date;
$.ajax({
type: "POST",
url: "status_update.php",
data: DATA,
cache: false,
success: function(data){
$(".load_status_out").append(data);
$(".loading").hide();
$(".input_box").val("What's on your mind?")
.css("color","#808080").css("height","30px");
}
});
}
return false;
});
});

PHP Code

Index.php This is the main code with statu update form. It will have all the formatting.

<h1>Facebook status update</h1>
<div class="con">
<div class="pd">
<div class="share"></div>
<div class="status">Update Status</div>
<div class="loading"></div>
</div>
<br />
<div class="img_top"></div>
<div class="text_status">
<textarea class="input_box" />What's on your mind?
</textarea></div>
<div class="button_outside_border_blue" id="share">
<div class="button_inside_border_blue">
Share
</div>
</div>
<div class="clear"></div>
<div class="load_status_out"></div>
</div>

Status_update.php

This code will be called dynamically. It will store status to database and then dynamically update it to the page.

<?PHP
//Include connection to database
//include('connect.php');

//Get posted values from form
$status=$_POST['status'];
$date=$_POST['date'];

//Strip slashes
$status = stripslashes($status);
$date = stripslashes($date);

//Strip tags
$status = strip_tags($status);
$date = strip_tags($date);
/*

//Inset into database
$insert_status=mysql_query("INSERT INTO status ('status, date')
VALUES ('$status','$date')") or die (mysql_error());
while($row=mysql_fetch_array($insert_status)){
$status=$row['status'];
$date=$row['date'];
}

//Line break after every 80
$status = wordwrap($status, 80, "\n", true);

//Line breaks
$status=nl2br($status);
//Display status from data base
echo '<div class="load_status">
<div class="status_img"><img src="blankSilhouette.png" /></div>
<div class="status_text"><a href="#" class="blue">Deepanker</a>
<p class="text">'.$status.'</p>
<div class="date">'.$date.' &middot; <a href="#" class="light_blue">
Like</a> &middot;
<a href="#" class="light_blue">Comment</a></div>
</div>
<div class="clear"></div>
</div>';
?>

 CSS Code

body{
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size:12px;
margin-top:100px;
margin-left:300px;
}

a.blue:link {
color:#3b5998;
text-decoration:none;
}

a.blue:visited {
color:#3b5998;
text-decoration:none;
}

a.blue:hover {
color:#3b5998;
text-decoration:underline;
}

a.blue:active {
color:#3b5998;
}

a.light_blue:link {
color:#6d84b4;
text-decoration:none;
}

a.light_blue:visited {
color:#6d84b4;
text-decoration:none;
}

a.light_blue:hover {
color:#6d84b4;
text-decoration:underline;
}

a.light_blue:active {
color:#36d84b4;
}

.blue{
padding:0;
margin:0;
font-weight:bold;
}

.text{
padding:0;
margin:0;
clear:both;
overflow:hidden;
}

.clear{
clear:both;
}

.con{
width:495px;
border-top:solid #aaaaaa 1px;
}

.img_top{
position:relative;
left:12px;
width:11px;
height:7px;
background-image:url('top_arrow.png');
display:block;
clear:both;
z-index:2;
}

.input_box{
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
color:#808080;
width:495px;
height:30px;
padding:5px 0 0 5px;
border:solid #b4bbcd 1px;
outline:none;
resize:none;
}

.share{
color:#808080;
padding:0 12px 2px 0;
font-weight:bold;
float:left;
position:relative;
}

.status{
width:108px;
height:14px;
background-image:url('top_status.png');
background-repeat: no-repeat;
color:#000000;
text-align:right;
font-weight:bold;
float:left;
}

.pd{
padding:8px 0 4px 0;
}

.text_status{
position:relative;
top:-1px;
z-index:1;
}

.loading{
display:none;
width:16px;
height:11px;
background-image:url('loading.gif');
float:right;
}

.load_status_out{
padding-top:10px;
}

.load_status{
margin-top:10px;
padding-bottom:10px;
border-bottom:solid #aaaaaa 1px;
}

.status_img{
width:50px;
height:50px;
background:#eceff5;
float:left;
}

.status_text{
padding:0 10px 0 10px;
float:left;
}

.date{
padding-top:5px;
color:#999999;
}

/* button */

.button_outside_border_blue{
width:50px;
margin-top:5px;
border:solid #29447e 1px;
border-bottom:solid #1a356e 1px;
cursor:pointer;
float:right;
}

.button_inside_border_blue{
padding:4px 0 4px 0;
background-color:#5c75a9;
border-top:solid #8a9cc2 1px;
text-align:center;
font-weight:bold;
color:#ffffff;
}

div.button_inside_border_blue:active{
background-color:#4f6aa3;
}

Download the code for better understanding how this code works..