Monday, 5 October 2009

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

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


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>
</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'; }
?>



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



Source:
http://woork.blogspot.com/2009/05/how-to-implement-post-to-wall-facebook.html

Comments :

1
Vladimir Brody said...
on 

Hey

Post a Comment

Blog Archive

 

Copyright © 2009 by System Information