Home > Programming > How to implement a Post-to-Wall Facebook-like using PHP and jQuery

How to implement a Post-to-Wall Facebook-like using PHP and jQuery

In the past months I received a lot of request to write a tutorial for beginners in order to explain how to implement a Post-to-Wall Facebook-like. So, I prepared this very simple example which helps everyone understand how to implement this feature in a website using just some lines of PHP and JavaScript code.

Take a mind, every post in the Facebook Wall contains a lot of information (user, sender, message content, date, number of comments, …):

facebook(1)

But how I said, this tutorial is for Ajax/jQuery/PHP beginners. So I decided to simplify the original Wall using just a single information: the message content.

In this tutorial we have these files:

– confing.php (database connection parameters)
– index.php
– insert.php
– jquery.js

How the Wall works?

 

facebook(2)

index.php contains a form with id "submit_form" with an input text with id "message_wall". When an user submits a new message. Then the new message is appends to top of the ul list with id "wall" with a nice fade-in effect (with jQuery). Ok, now take a look at the code.
1. index.php
index.php is very simple and contains just simple HTML code:

<form id="submit_wall"&gt;
<label for="message_wall">Share your message on the Wall</label>
<input type="text" id="message_wall" />
<button type="submit">Post to wall</button>
</form>
<ul id="wall">
</ul>

The <ul> list with id "wall" is the "container" of messages which are posted into the wall.

2. JavaScript Code
Open index.php and include jQuery in the <head> tag of the page:

<script type="text/javascript" src="jquery/jquery.js"> </script>

…then add this simple function to enable Ajax functionalities to insert the message posted from the user into a database table without reload the page:

<script type="text/javascript">
$(document).ready(function(){

$("form#submit_wall").submit(function() {
var message_wall = $(‘#message_wall’).attr(‘value’);
$.ajax({
type: "POST",
url: "insert.php",
data:"message_wall="+ message_wall,
success: function(){
$("ul#wall").prepend("<li style="display: none;">"+message_wall+"</li>");
$("ul#wall li:first").fadeIn();
}
});
return false;
});
});

</script>

.prepend(…) is a jQuery function to insert elements inside, at the beginning, of a specific element (in this case UL list with id wall –>$("ul#wall")). When the new message is added into the list is hidden (display:none). Then it appears with a fade-in effect:

$("ul#wall li:first").fadeIn();

ul#wall:first: gets the first li element (the last added) into the ul list with id "#wall".

3. insert.php
insert.php contains some lines of PHP code to insert the new message into a database table. In this example I created a table WALL with just one attribute "message". PHP code is very simple:

<?php
if(isset($_POST[‘message_wall’])){
/* Connection to Database */
include(‘config.php’);
/* Remove HTML tag to prevent query injection */
$message = strip_tags($_POST[‘message_wall’]);
$sql = ‘INSERT INTO WALL (message) VALUES( "’.$message.’")’;
mysql_query($sql);
echo $message;
} else { echo ‘0’; }
?>

Categories: Programming Tags: , ,
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.