Tuesday, July 28, 2009

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, ...):

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?

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>

<ul id="wall">

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">
$("form#submit_wall").submit(function() {

var message_wall = $('#message_wall').attr('value');

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;

.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:

/* Connection to Database */
/* Remove HTML tag to prevent query injection */
$message = strip_tags($_POST['message_wall']);

$sql = 'INSERT INTO WALL (message) VALUES( "'.$message.'")';
echo $message;
} else { echo '0'; }

That's all! Download the source code ready to use in your web projects.

Add a comment for questions or suggestions, thanks!

Bookmark and Share
Digg this

No comments: