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)How the Wall works?
- index.php
- insert.php
- jquery.js
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">
<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>
<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(){
$(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>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;
});
});
.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'; }
?>
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.
Add a comment for questions or suggestions, thanks!
No comments:
Post a Comment