Thursday, October 20, 2011

Facebook, Twitter like JSON feeds with PHP, JavaScript, Ajax, jQuery,MySQL


When you go to Facebook or Twitter, The first thing you notice is that the page is loaded and within seconds the status feeds will be displayed. That is because the page is loaded first and after that it sends an ajax request to another page and gets back the feeds in the JSON format and display it using JavaScript & jQuery.

We will demonstrate this with a simple posts from mysql table using PHP and JavaScript...

1 ) Create a mysql database and table 'posts' with the following schema.




CREATE TABLE IF NOT EXISTS `posts` (
`post_id` int(5) NOT NULL AUTO_INCREMENT,
`user_id` int(5) NOT NULL,
`user_name` varchar(50) NOT NULL,
`post` varchar(500) NOT NULL,
`time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`post_id`)

And insert some rows in the table 'posts'



2 ) create a php page 'json-posts.php' that fetches data from database and display it in the JSON format.

json-posts.php

<?php
//database connection
$dbHost='localhost';
$dbUserName='root';
$dbPassWord='';
$dbName = 'twinfo_demos';
$dbLinkConnection = mysql_connect($dbHost,$dbUserName,$dbPassWord) or die("Couldn't make connection.");
$dbSelected = mysql_select_db($dbName, $dbLinkConnection) or die("Couldn't select database");

//select posts from database
$query="select * from posts order by post_id desc";
$result=mysql_query($query) or die("couldn't select data from table");

//create json format text from posts
$json=array();
while($row=mysql_fetch_array($result)){
$from=array('id'=>$row['user_id'],'name'=>$row['user_name']);
$post=array('post_id'=>$row['post_id'],'from'=>$from,'post'=>$row['post'],'time'=>$row['time']);
array_push($json,$post);
}

//display it to the user
header('Content-type: application/json');
echo "{"posts":".json_encode($json)."}";
?>

The above code will fetch the data from database and gives it in the following JSON format...

{
"posts":[
{
"post_id":"3",
"from":{
"id":"103",
"name":"AshokRaj"
},
"post":"Third Post. Third Post. Third Post.",
"time":"2011-10-18 08:37:53"
},
{
"post_id":"2",
"from":{
"id":"102",
"name":"MohanKumar"
},
"post":"Second Post. Second Post. Second Post.",
"time":"2011-10-18 08:37:23"
},
{
"post_id":"1",
"from":{
"id":"101",
"name":"ArunDavid"
},
"post":"First Post. First Post. First Post.",
"time":"2011-10-18 08:37:23"
}
]

3 ) create anothe page 'posts.php' to fetch the posts in JSON format and display it to the user. In that page add the following code to send the ajax request for json data using jquery and display the posts for the user.

<html>
<head>
<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
$.getJSON('json-posts.php', function(json) {//to send a ajax request for json data
var output="";
for(var i=0;i<json.posts.length;i++){//for each posts in the json response
output+="<div>";
output+="<b>"+json.posts[i].from.name+"</b><br/>";
output+=json.posts[i].post+"<br/>";
output+="<small>posted on "+json.posts[i].time+"</small>";
output+="</div>";
}
$('#posts').html(output);
});
});
</script>
</head>
<body>
<div id="posts"></div>
</body>

This will display the json posts in user readable format and also useful for giving API to others through JSON. Make use of my previous post to display the time in friendly readable format.

Live Demo | Download Code

6 comments:

  1. Similarly single line comments should always start with a double slash. To include comments in a JavaScript you can place the lines anywhere within a line.
    learn web design

    ReplyDelete
  2. Socialkik provides an easy way to get a great number of Facebook likes and followers which is today's best method to increase popularity, visibility and market share in the increasingly competitive world of marketing where every company is determined to beat the other out at obtaining a competitive edge and hence retaining, attracting and maintaining their share of likes and followers on Facebook!buy twitter followers

    ReplyDelete