Technology Blog

Partners

WhichIsBest

Ads

ads
WhichIsBest

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

1 comment:

  1. You can also set Facebook up to require approval of a log in. When someone (hopefully you) attempts to log in a text message with a verification code is sent to you. hackear cuenta de facebook

    ReplyDelete

WhichIsBest
WhichIsBest