In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs). Existing document object model (DOM) interfaces are extended and de facto features documented.

What is DOM Storage?

DOM Storage is a way to store meaningful amounts of client-side data in a persistent and secure manner. It is a W3C draft which covers exactly how saving information on the client-side should be done. It was initially part of the HTML 5 specification, but was then taken out to be independent. Web Storage, or the somewhat confusing popular name DOM Storage, is a great way to save information for the current session and window, or for returning users.

The DOM Storage provides mechanism to securely store data in the form of key/value pairs and later retrieve to use. The main goal of this feature is to provide a comprehensive means through which interactive applications can be built (including advanced abilities, such as being able to work “offline” for extended periods of time).

DOM Storage provides a powerful way of storing and retrieving data at client side using JavaScript like APIs which are easy to use.

Scope of DOM Storage

DOM Storage provides different mechanism to store the client data using in-built storage objects which provides wide range of scope. For example, using DOM Storage it is possible to store data for a Session of user request, or for all the pages of a website.

DOMStorage storage mechanism is accessed by global variables of window object. Following are the objects available which provides different scope of data storage.

sessionStorage

The sessionStorage object can be accessed by directly referencing it by name of through window.sessionStorage. This is a global object (sessionStorage) that maintains a storage area that’s available for the duration of the page session. A page session lasts for as long as the browser is open. Opening a page in a new tab or window will cause a new session to be initiated. Note that sessionStorage can survive browser restart thus it is most useful for hanging on to temporary data that should be saved and restored if the browser is accidentally refreshed.

Example: Save a string value “Hello, World” and display it on browser refresh.

//Store the data in sessionStorage object
 sessionStorage.hello = “Hello, World!”; 

 //Retrieve the data from sessionStorage object on
 //browser refresh and display it
 window.onload = function() {
     if(sessionStorage.hello)
         alert(sessionStorage.hello);
 }

localStorage

The localStorage object is useful when one wants to store data that spans multiple windows and persists beyond the current session. The localStorage provides persistent storage area for domains.

For example: data stored at localStorage['viralpatel.net'] can be retrieved by any script hosted at level Viralpatel.net. Similarly data stored at localStorage['net'] can be accessed by scripts at any .net TLD level websites. Data stored as localStorage[''] can be accessed by all the pages on all sites.

Example: Following script will store a value hello at Viralpatel.net level. Thus all the scripts hosted at Viralpatel.net and its sub-domain level can both read and write the values.

 //Store the data in localStorage object
 localStorage['viralpatel.net'].hello = "Hello, World!";

DOM Storage API

DOM Storage objects sessionStorage and localStorage provides certain useful properties and methods API. Following are the list of such APIs.

• getItem() Method – Get the value of item passed as key to the method
• length Property – Returns the length of number of items
• remainingSpace Property – Return the remaining storage space in bytes, for the storage object
• clear() Method – Remove all the key/value pairs from DOM Storage
• key() Method – Retrieves the key at specified index
• removeItem() Method – Remove the key/value pair from DOM Storage
• setItem() Method – Sets a key/value pair

Comparing HTTP Cookies with DOM Storage

Following are few comparison points between HTTP Cookies and DOM Storage.

• HTTP Cookies can store limited amount of user data (e.g. 4KB) where as modern browser such as IE 8 supports up to 10MB of data being stored with DOM Storage
• Cookies limits the accessibility of data to a certain domain name or a URL path where as DOM Storage can limit the access to a certain domain name, or to domain TLD (like .org) or for given user session.
• The keys stored with HTTP Cookies can be retrieved by using APIs. It is possible to iterate through all the key/value pairs in HTTP Cookies. Whereas in DOM Storage it is not possible to iterate through keys. Data cannot be retrieved unless key is known.
• Data stored as HTTP Cookies can be retrieved at Server as this data is passed with request. Whereas the DOMStorage is more of client data and is not possible to retrieve it directly at server side.

Web Browser Support

Currently modern browsers such as Firefox 3.5, Internet Explorer 8 and Safari 4 fully support the DOM Storage specification. Following are the list of browsers and their corresponding values such as Storage size, Support, Survive Browser Restart.

Demo Application

Let us demonstrate the use of DOMStorage API and create a demo application.

Application Requirement

Application has a form called Client Form with some input elements. The requirement is to persist the values of the form in case the page is accidentally refreshed and restore the values back.

User Interface

Demo application will have a simple input form to enter Client information. The form will have few input fields to capture user input. In case of accidental refresh of the webpage the values should be persevered in the form.

Source Code

Following is the HTML Source code of web page containing Client Form:

<HTML>
  <HEAD>
    <TITLE>DOMStorage - Sample Application
    </TITLE>
  </HEAD>
  <BODY>
    <H2>Client Form
    </H2>
    <br/>
    <form name="clientForm" id="clientForm">
      <table>
        <tr>
          <td>First Name
          </td>
          <td>
            <input type="text" name="firstname"/>
          </td>
        </tr>
        <tr>
          <td>Last Name
          </td>
          <td>
            <input type="text" name="lastname"/>
          </td>
        </tr>
        <tr>
          <td>Date of Birth
          </td>
          <td>
            <input type="text" name="dob"/>
          </td>
        </tr>
        <tr>
          <td>Gender
          </td>
          <td>
            <input name="gender" type="radio" value="M">Male
          </input>
          <input name="gender" type="radio" value="F">Female
        </input>
          </td>
        </tr>
        <tr>
          <td>Designation
          </td>
          <td>
            <select name="designation">
              <option value="0">Software Engineer
              </option>
              <option value="1">Sr. Software Engineer
              </option>
              <option value="2">Technical Architect
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <br/>
            <input name="submit" type="button" value="Submit"/>
            <input name="reset" type="reset" value="Reset"/>
          </td>
        </tr>
      </table>
    </form>

<script type="text/javascript" src="domstorage-persist.js"></script>

  </BODY>
</HTML>

Following is JavaScript code (content of domstorage-persist.js)

/**
 * Filename: domstorage-persist.js
 * Author: viralpatel.net
 * Description: HTML code independent form persistent
 * Usage:  persist(<form object>);
 */

function persist(form) {

/*
   * In case of page refresh,
   * store the values of form to DOMStorage
   */
    window.onbeforeunload = function () {
        var str = serialize(form);

        try {
            sessionStorage[form.name] = str;
        } catch (e) {}
    }

/*
   * If the form was refreshed and old values are available,
   * restore the old values in form
   */
    window.onload = function () {
        try {
            if (sessionStorage[form.name]) {
                var obj = eval("(" + sessionStorage[form.name] + ")");
                for (var i = 0; i < obj.elements.length - 1; i++) {
                    var elementName = obj.elements[i].name;
                    document.forms[obj.formName].elements[obj.elements[i].name].value = obj.elements[i].value;
                }

            }
        } catch (e) {}
    }
}

/*
 * Convert form elements into JSON String
 */

function serialize(form) {
    var serialized = '{ "formName":"' + form.name + '", "elements": [';
    for (var i = 0; i < form.elements.length; i++) {

        serialized += '{';
        serialized += '"name":"' + form[i].name + '",';
        serialized += '"value":"' + form[i].value + '"';
        serialized += '},';
    }
    serialized += '{"name":0, "value":0}';
    serialized += '] }';
    return serialized;
}

/*
 * Make the Client Form persistable.
 * i.e. Persist its values in case of page refresh
 */
persist(document.clientForm);

References

• W3C: Web Storage draft standard (http://dev.w3.org/html5/webstorage/)
• Mozilla Developer Center: DOM Storage (https://developer.mozilla.org/En/DOM:Storage#Description)
• MSDN: Introduction to DOM Storage ( http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx#_dom)

Further Reading

The given article focuses on the latest mechanism of DOMStorage being standardized by World Wide Web Consortium (W3C) as part of HTML5. There are few other similar technologies available which can be leveraged to store offline data in browser. Users who are interested in browser based storage are highly advisable to read about following technologies.

• HTTP Cookies (http://www.microsoft.com/info/cookies.mspx)
• DOMCached – A memcached like caching system for JavaScript using DOM storage (http://www.domcached.com)
• Google Gears (http://gears.google.com/)
• Adobe Flash – Local Shared Objects (http://www.adobe.com/products/flashplayer/articles/lso/)

oEmbed addresses the important task of sharing and embedding information anywhere on internet. It allows developers to build applications that can easily access data from vast number of websites like youtube, flickr, google video, wordpress, wikipedia and many many more.

So what’s oEmbed? Well if you go by the definition on oEmbed’s official website:

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

The best example of oEmbed can be Facebook’s status update feature. When you paste a youtube movie link in Facebook’s status bar, it automatically identify the link content as youtube movie and embed it in the status. Similarly you can paste any kind of content link: Flickr, Wikipedia etc.

Basics of oEmbed

In this document I will use two terms very often, consumer and provider. Consumer is the client who wants to convert a link into embedded content. And Provider is one who get the request and send the oembed response. For example, if you paste a youtube URL in Facebook’s status update, Facebook will be the consumer and Youtube will be the provider.

A consumer who wants to convert a link into content will make an HTTP request like:

http://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/bees/2341623661/

and the provider, in this case Flickr will send response in JSON format:

{
	"version": "1.0",
	"type": "photo",
	"width": 240,
	"height": 160,
	"title": "ZB8T0193",
	"url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",
	"author_name": "Bees",
	"author_url": "http://www.flickr.com/photos/bees/",
	"provider_name": "Flickr",
	"provider_url": "http://www.flickr.com/"
}

Youtube example:
Request URL:

http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json

Response:

{
	"version": "1.0",
	"type": "video",
	"provider_name": "YouTube",
	"provider_url": "http://youtube.com/",
	"width": 425,
	"height": 344,
	"title": "Amazing Nintendo Facts",
	"author_name": "ZackScott",
	"author_url": "http://www.youtube.com/user/ZackScott",
	"html":
		"<object width=\"425\" height=\"344\">
			<param name=\"movie\" value=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"></param>
			<param name=\"allowFullScreen\" value=\"true\"></param>
			<param name=\"allowscriptaccess\" value=\"always\"></param>
			<embed src=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"
				type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
				allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
		</object>",
}

Once the consumer get the response, all it has to do is to utilize the content and embed it in the page.

Request Format

The consumer who is requesting for the embed content must follow some basic rules while sending request. Requests sent to the API must be HTTP GET requests, with all arguments sent as query parameters. All arguments must be urlencoded.
Following are the request parameters:

• url (required): This is the URL for which embedded content is requested
• maxwidth (optional): An optional parameter for maxwidth can be passed. Some of the content provider who support this param will send the response content accordingly. For example, Flickr may set the maxwidth of image.
• maxheight (optional): Similar to maxwidth, maxheight is an optional param.
• format (optional): By default the content provider’s response is in JSON. But consumer may want the response in other formats like XML. This parameter will determine is response format

Response Format

The provider who sends the response back to consumer may send it with following parameters.

• type (required): The resource type. Valid values, along with value-specific parameters, are described below.
• version (required): The oEmbed version number. This must be 1.0.
• title (optional): A text title, describing the resource.
• author_name (optional): The name of the author/owner of the resource.
• author_url (optional): A URL for the author/owner of the resource.
• provider_name (optional): The name of the resource provider.
• provider_url (optional): The url of the resource provider.
• cache_age (optional): The suggested cache lifetime for this resource, in seconds. Consumers may choose to use this value or not.
• thumbnail_url (optional): A URL to a thumbnail image representing the resource. The thumbnail must respect any maxwidth and maxheight parameters. If this paramater is present, thumbnail_width and thumbnail_height must also be present.
• thumbnail_width (optional): The width of the optional thumbnail. If this paramater is present, thumbnail_url and thumbnail_height must also be present.
• thumbnail_height (optional): The height of the optional thumbnail. If this paramater is present, thumbnail_url and thumbnail_width must also be present.

The provider may wants to add more attributes to the response.

Letting People Know You Support oEmbed

The oEmbed providers can make their service discoverable by adding following element in HEAD for the HTML document.

<link rel="alternate" type="application/json+oembed"
	href="http://flickr.com/services/oembed?url=http%3A//flickr.com/photos/bees/2362225867/&format=json"
	title="Bacon Lollys oEmbed Profile" />
<link rel="alternate" type="text/xml+oembed"
	href="http://flickr.com/services/oembed?url=http%3A//flickr.com/photos/bees/2362225867/&format=xml"
	title="Bacon Lollys oEmbed Profile" />

The URLs contained within the href attribute should be the full oEmebed endpoint plus URL and any needed format parameter. No other request parameters should be included in this URL.

The type attribute must contain either application/json+oembed for JSON responses, or text/xml+oembed for XML.

oEmbed Demo with jQuery

Integrating oEmbed support in your application using jQuery is very easy using jQuery oEmbed plugin. Following is the source code the of demo.
The HTML Code

Content URL:
<input type="text" id="update"/><button id="btn">Get</button>
<div id="embed"></div>

The jQuery Code

$(function(){
	$('#btn').click(function() {
		$("#embed").oembed($('#update').val());
	});
});

Don’t forget to include jquery library and jquery oembed javascript in the demo.
The Demo
Enter any oEmbed supporting URL (Youtube video link or Flickr link http://www.flickr.com/photos/stuckincustoms/2035748576/) in below textbox and press Get.

(demo link)

oEmbed in PHP

There is a small PHP library that can be used to integrate oEmbed support in PHP. oEmbed-PHP is a library that provides OEmbed compatible interface for javascript and PHP clients to consume. It can deal with OEmbed providers by acting as a proxy, and it has a plugin system where you can add your own embed-providers.
Import this small PHP library and directly use it in your application.

  $manager = ProviderManager::getInstance();
  $obj=$manager->provide("http://www.youtube.com/watch? v=EQqJSAOOmGI","object");
  $html=$obj->renderClass();

oEmbed for other languages

Perl
Web-oEmbed (http://search.cpan.org/~miyagawa/Web-oEmbed/)

Ruby
oembed_links (http://github.com/netshade/oembed_links)

Python
Python oEmbed (http://code.google.com/p/python-oembed/)

I have created a Real Time Search engine (I call it real time as it search as you type). I am really impressed by the speed/response of Google Search API.

The Code

I will show the code for one of the search api that I implemented in demo page. Let us see how to implement Web Search API.

Step 1: Generate Google Search API Key and Include JavaScript

In order to use Google Search API, you have to first generate a Key for you. Go to following page and signup your self for the Key.
Sign up for Google API Key

Next step is to include the Google Search API javascript. Don’t forget to mention your key in the below code.

<script src="http://www.google.com/jsapi?key=YOURKEY" type="text/javascript"></script>
<script type="text/javascript">
	google.load('search', '1');
</script>

Step 2: Add HTML Container for Web Search

We will create a textbox and a button that will take input for search. And a DIV that will be populated by results:

<input type="text" title="Real Time Search" name="searchbox"/>
<input type="button" id="searchbtn" value="Search" onclick="search(searchbox.value)"/>

<div class="data" id="web-content"></div>

When user will write a query and push Search button, a request will be made to Google Search using Custom Search API and the results are fetched. These results are then copied into the DIV.

Step 3: JavaScript to call Google Search API

We will use following JavaScript to call the Google Search API and copy the results in our container DIV.
The code in plain english is:
1. Create an object to connect Google Web search using class google.search.WebSearch.
2. Set a callback function that will get call once the results for the search are fetched.
3. Call the execute() method with search query as argument.
4. In callback function, iterate through the results and copy it to container DIV.

var webSearch;
webSearch = new google.search.WebSearch();
webSearch.setSearchCompleteCallback(this, webSearchComplete, [webSearch]);

function webSearchComplete (searcher, searchNum) {
	var contentDiv = document.getElementById('web-content');
	contentDiv.innerHTML = '';
    var results = searcher.results;

    var newResultsDiv = document.createElement('div');
    newResultsDiv.id = 'web-content';
    for (var i = 0; i < results.length; i++) {
      var result = results[i];

	  var resultHTML = '<div>';
      resultHTML += '<a href="' + result.unescapedUrl + '" target="_blank"><b>' +
                        result.titleNoFormatting + '</b></a><br/>' +
                        result.content +
                        '<div/>';
      newResultsDiv.innerHTML += resultHTML;
    }
    contentDiv.appendChild(newResultsDiv);
}

function search(query) {
	webSearch.execute(query);
}

Click for Online Demo

Facebook as 4th largest country in world in terms of population

Top five countries with most facebook users

Facebook as terms of % of populations

Image Courtesy: Techcrunch

So how can I display the Twitter User Image on my Blog in 2 minutes??? All you have to do is to add following IMAGE tag where you want to display Twitter’s User Image and that’s it.

<img src="http://viralpatel.net/blogs/demo/twitter-image.php?user=<TWITTER_USER>" />

In above code, just put the TWITTER_USER name of person whos image you want to display.
For example, for me the above URL will be:

<img src="http://viralpatel.net/blogs/demo/twitter-image.php?user=virp" />

One of the use of this tool is to display user image of people in your blog/website’s comment section. You can have a textbox where users can enter their twitter username and from this you can display their twitter avatar

Code behind this simple tool

We are using cURL to fetch the user details from Twitter. For this we are using the Twitter PHP library that we used in our previous Twitter Client tutorial.

Following is the PHP source code of the Twitter User Image fetcher.

<?php
include("Twitter.class.php");
$twitter = new Twitter();

$username = $_REQUEST["user"];

$json = $twitter->show('json', $username);
$user = json_decode($json);

$image_url = $user->profile_image_url;
header("Location: ".$image_url);
?>

First we use cURL to fetch the user details using twitter API. The response that we get is in JSON format. Hence we use PHP JSON method, json_decode() to convert the JSON into PHP object.

But guess what, Chicago-based Twitter user @craftsquatch has created series of pillows hand decorated to represent your favorite social networking sites, might be what you need. , the pillows produced include Flickr, Reddit, Digg (Digg), the Twitter “t”, the Fail Whale, the Twitter bird, FriendFeed (FriendFeed), Tumblr (Tumblr), Facebook (Facebook), MySpace (MySpace) and more.

The pillows are available for $18 each in the Craftsquatch Etsy store.

Social Media Pillows: Photo Gallery

Photo courtesy: Mashable

Twitter has provided lots of API that can be used to Get the latest tweets / Add tweets / Search the tweets / Get the trends etc.. These APIs are REST APIs that can be called by using any scripting language and getting the result back. You can read full specifications of API at Twitter’s API site.

Let us first see the small demo that I have created. This demo page will read latest public tweets every 10 second and update it on screen with some animation effect.

Click here to view the demo.

We will use a PHP library to call the Twitter APIs and get the result. Following is the code of library. Just copy paste it in a file called Twitter.class.php.

<?php

	/* This program is free software: you can redistribute it and/or modify
     * it under the terms of the GNU General Public License as published by
     * the Free Software Foundation, either version 3 of the License, or
     * (at your option) any later version.

     * This program is distributed in the hope that it will be useful,
     * but WITHOUT ANY WARRANTY; without even the implied warranty of
     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     * GNU General Public License for more details.

     * You should have received a copy of the GNU General Public License
     * along with this program.  If not, see <http://www.gnu.org/licenses/>.
     *
     * File:    Twitter.class.php
	 * Author:  Brandon Trebitowski
	 * Created: 02/26/2009
	 * Updated  06/24/09
	 * Version: 1.1
	 *
     */

	class Twitter {

		var $username='';
		var $password='';
		var $responseInfo=array(); 

		// Status Methods
		/*
		 * Returns the 20 most recent statuses from non-protected users
		 * who have set a custom user icon.  Does not require authentication.
		 * Note that the public timeline is cached for 60 seconds so requesting
		 * it more often than that is a waste of resources.
		 */
		function public_timeline($format) {
			$request = 'http://twitter.com/statuses/public_timeline.'.$format;
			return $this->process($request);
		 }

		 /* Returns the 20 most recent statuses posted by the authenticating
		  * user and that user's friends. This is the equivalent of /home on the Web.
		  */
		function friends_timeline($format='xml',$count=20) {
			$request = 'http://twitter.com/statuses/friends_timeline.'.$format;
			$postargs = "count=$count";
			return $this->process($request,$postargs);
		}

		/* Returns the 20 most recent statuses posted from the authenticating user.
		 * It's also possible to request another user's timeline via the id parameter
		 * below. This is the equivalent of the Web /archive page for your own user,
		 * or the profile page for a third party.
		 */
		function user_timeline($format='xml',$id=null) {
			$request = 'http://twitter.com/statuses/user_timeline.'.$format;
			if($id) {
				$postargs = "id=$id";
				return $this->process($request,$postargs);
			}
			return $this->process($request);
		}

		/* Updates the authenticating user's status.  Requires the status parameter
		 * specified below.  Request must be a POST.  A status update with text identical
		 * to the authenticating user's current status will be ignored.
		 */
		function update($format = 'xml',$status){
			$request = 'http://twitter.com/statuses/update.'.$format;
			$postargs = 'status='.urlencode($status);
			return $this->process($request,$postargs);
		} 

		/* Returns the 20 most recent @replies (status updates prefixed with @username)
		 * for the authenticating user.
		 */
		function replies($format='xml') {
			$request = 'http://twitter.com/statuses/replies.'.$format;
			return $this->process($request);
		}

		// User Methods
		/* Returns the authenticating user's friends, each with current status inline.
		 * They are ordered by the order in which they were added as friends. It's also
		 * possible to request another user's recent friends list via the id parameter below.
		 */
		function friends($format='xml',$id=null,$page=1) {
			$request = 'http://twitter.com/statuses/friends.'.$format;
			$postargs = "page=$page";
			if($id) {
				$postargs .= "&amp;id=$id";
			}
			return $this->process($request,$postargs);
		}

		/* Returns the authenticating user's followers, each with current status inline.
		 * They are ordered by the order in which they joined Twitter (this is going to be changed).
		 */
		function followers($format='xml',$id=null,$page=1) {
			$request = 'http://twitter.com/statuses/followers.'.$format;
			$postargs = "page=$page";
			if($id) {
				$postargs .= "&amp;id=$id";
			}
			return $this->process($request,$postargs);
		}

		/* Returns extended information of a given user, specified by ID or screen name
		 * as per the required id parameter below.  This information includes design settings,
		 * so third party developers can theme their widgets according to a given user's preferences.
		 * You must be properly authenticated to request the page of a protected user.
		 */
		function show($format='xml',$id) {
			$postargs = "";

			$request = 'http://twitter.com/users/show/'.$id.".$format";

			return $this->process($request);
		}

		// Friendship Methods

		/* Befriends the user specified in the ID parameter as the authenticating user.
		 * Returns the befriended user in the requested format when successful.  Returns
		 * a string describing the failure condition when unsuccessful.
		 */
		function create($format='xml',$user_ID) {
			$request = "http://twitter.com/friendships/create/$user_ID.$format";
			return $this->process($request);
		}

		/* Discontinues friendship with the user specified in the ID parameter as the
		 * authenticating user.  Returns the un-friended user in the requested format
		 * when successful.  Returns a string describing the failure condition when unsuccessful.
		 */
		function destroy($format='xml',$user_ID) {
			$request = "http://twitter.com/friendships/destroy/$user_ID.$format";
			return $this->process($request);
		}

		/* Tests if a friendship exists between two users.
		 */
		function exists($format='xml',$user_ID_a,$user_ID_b) {
			$request = "http://twitter.com/friendships/exists.$format?user_a=$user_ID_a&amp;user_b=$user_ID_b";
			return $this->process($request);
		}

		/* Processes a Twitter Request using cURL */
		function process($url,$postargs=false){ 

			$curl_conn = curl_init();
			curl_setopt($curl_conn, CURLOPT_URL, $url); //URL to connect to
			//curl_setopt($curl_conn, CURLOPT_POST, 1); //Use GET method
			curl_setopt($curl_conn, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); //Use basic authentication
			curl_setopt($curl_conn, CURLOPT_USERPWD, $this->username.":".$this->password); //Set u/p
			curl_setopt($curl_conn, CURLOPT_SSL_VERIFYPEER, false); //Do not check SSL certificate (but use SSL of course), live dangerously!
			curl_setopt($curl_conn, CURLOPT_RETURNTRANSFER, 1); //Return the result as string

			// Result from querying URL. Will parse as xml
			$output = curl_exec($curl_conn);

			// close cURL resource. It's like shutting down the water when you're brushing your teeth.

			$this->responseInfo=curl_getinfo($curl_conn);
			curl_close($curl_conn);

			if(intval($this->responseInfo['http_code'])==200){
				// Display the response from Twitter
				return $output;
			}else{
				// Something went wrong
				return "Error: " . $this->responseInfo['http_code'];
			}

		}
	}
?>

Now create a file called twitter-reader.php in the same folder as of Twitter.class.php and copy following content in it.

<html>
<head>
<title>Twitter Client example using PHP library - viralpatel.net</title>
	<style>
		body {
			font-family: sans-serif;
			font-size: 13px;
		}
		#update {
			height: 65px;
			width: 500px;
			background-color: #EFEFEF;
			margin-bottom: 5px;
			padding: 5 5 5 5;
		}
		#update #left {
			float:left;
			display: inline;
			padding-right: 7px;
		}
		#update .user {
			font-weight: bold;
			color: #0383FF;
		}
	</style>
	<script src="jquery-1.3.1.min.js" language="javascript"></script>
</head>
<body>

	<div id="updates">

<?php
include("Twitter.class.php");
$twitter = new Twitter();

$json = $twitter->public_timeline('json');
$updates = json_decode($json);

foreach ($updates  as $update) {
//   echo $update->text;
//   echo $update->user->name . "<br>";
?>

		<div id="update">
			<div id="left"><img width="48px" height="48px" src="<?=$update->user->profile_image_url?>"/></div>
			<div id="right">
				<div class="user"><?=$update->user->name?></div>
				<div class="detail">
				<?=$update->text?>
				</div>
			</div>
		</div>
<?php
}
?>
	</div>

<script>
$(document).ready(function(){
getlatest();
});
function getlatest() {

$.ajax({
	type: "GET",
	url: "latest-tweet.php",
	cache: false,
	success: function(html){
			$("div#updates").prepend(html);
			$("#update").slideDown("400");
		}
});

 setTimeout("getlatest();", 10000);
}
</script>
</body>
</html>

That’s it. Your simple twitter reader (client) that reads public tweets is ready. I have used some jQuery code to pull latest tweets every 10 seconds and display them on screen. For that we are using a php file latest-tweet.php which calls our PHP library and gets the latest tweet. Following is the content of latest-tweet.php

<?php
include("Twitter.class.php");
$twitter = new Twitter();

$json = $twitter->public_timeline('json');
$updates = json_decode($json);
$update = $updates[0];
?>

<div id="update" style="display:none">
	<div id="left"><img width="48px" height="48px" src="<?=$update->user->profile_image_url?>"/></div>
	<div id="right">
		<div class="user"><?=$update->user->name?></div>
		<div class="detail">
		<?=$update->text?>
		</div>
	</div>
</div>

Thus, all we need is three php files Twitter.class.php, twitter-reader.php and latest-tweet.php and that’s it.

There are different API functions available in Tweeter.class.php that can be used to do lot of things around twitter. Functions are pretty much self explanatory. Give it a try and let me know.

Google Maps API provides a wonderful API called Geocoding API that enables you to fetch any location and pin point it on Google Map. GClientGeocoder is the class that we use to get the geocoder that get us the location. We will use getLatLng() method to get latitude/longitude of any location.
Check the following code.

var place =  "New York";
geocoder = new GClientGeocoder();
geocoder.getLatLng(place, function(point) {
	if (!point) {
		alert(place + " not found");
	} else {
		var info = "<h3>"+place+"</h3>Latitude: "+point.y+"  Longitude:"+point.x;
		var marker = new GMarker(point);
		map.addOverlay(marker);
		marker.openInfoWindowHtml(info);
	}
});

In above code snippet we passed string “New York” and a handler function to getLatLng() method of GClientGeocoder. GClientGeocoder class will call google server for the location and when it gets the result, it pass the result to the handler function that we specified. Thus handler function will get point (GPoint) object from which we can get the latitude and longitude of location. In above code we have created a marker and placed it on the map.

Online Demo

Google Map Reverse Geocode Example

• Client-Server: A clear separation concerns is the reason behind this constraint. Separating concerns between the Client and Server helps improve portability in the Client and Scalability of the server components.
• Stateless: All REST resources are required to be stateless. The idea is that the application would be resilient enough to work between server restarts. However, it is not uncommon to see some RESTful web services save states between requests.
• Caching: Caching is allowed, however it is required that “response to a request be implicitly or explicitly labeled as cacheable or non-cacheable”
• As there is no interface definition (like in SOAP), it becomes mandatory for a Client and Server to have a mutual understanding of the messages being transmitted between them.

Given that every resource in a RESTful service is represented by a URL, it is easy to write a client for such a web service.

A lot of companies these days (including Amazon and Yahoo!) are exposing their web services in the form of REST resources. At a high level REST is pretty easy to understand, all you’re doing is exposing a web service in the form of a URL. Users can then query this URL, through HTTP methods like GET and POST. REST calls generally return some type of XML or Object Encoding like JSON.

REST in PHP

An example would be Yahoo!’s Geocoding API, with the following URL:

http://api.local.yahoo.com/MapsService/V1/geocode?appid=YahooDemo&street=701+First+Street&city=Sunnyvale&state=CA

You will get:

<Result precision="address">
   <Latitude>37.416384</Latitude>
   <Longitude>-122.024853</Longitude>
   <Address>701 FIRST AVE</Address>
   <City>SUNNYVALE</City>
   <State>CA</State>
   <Zip>94089-1019</Zip>
   <Country>US</Country>
</Result>

So Yahoo! exposes the Geocode URL and allows you to query this resource using URL parameters like appid and street. Dynamically building your URL to query a given resource is OK, generally that’s what people do, like the following:

$base = 'http://xml.amazon.com/onca/xml3';
$query_string = "";

$params = array( 'ManufacturerSearch' => "O'Reilly",
    'mode'  => 'books',
    'sort'  => '+salesrank',
    'page'  => 1,
    'type'  => 'lite',
    'f'     => 'xml',
    't'     => 'trachtenberg-20' ,
    'dev-t' => 'XXXXXXXXXXXXXX' ,
);

foreach ($params as $key => $value) {
    $query_string .= "$key=" . urlencode($value) . "&";
}

$url = "$base?$query_string";
$output = file_get_contents($url);

You may want to see the pear package HTTP Request for making REST calls, which among many things supports GET/POST/HEAD/TRACE/PUT/DELETE, basic authentication, proxy, proxy authentication, SSL, file uploads and more. Using this package, I got started on a simple wrapper class called RESTclient, which gives intuitive support for making REST resource calls.

So if we are going to use RESTclient to call the Geocode API above, following will be the source code:

<?php

require_once "RESTclient.php";

$rest = new RESTclient();

$inputs = array();
$inputs["appid"] = "YahooDemo";
$inputs["street"] = "701 First Street";
$inputs["city"] = "Sunnyvale";
$inputs["state"] = "CA";

$url = "http://api.local.yahoo.com/MapsService/V1/geocode/"
$rest->createRequest("$url","POST",$inputs);
$rest->sendRequest();
$output = $rest->getResponse();
echo $output;

?>

REST in Java

You may want to call the REST web service from Java. Following is the code for a simple Web Service client for the flickr web services interface.

package net.viralpatel.rest;

import java.net.HttpURLConnection;
import java.net.InetSocketAddress;
import java.net.Proxy;
import java.net.SocketAddress;
import java.net.URL;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;

import org.w3c.dom.Document;

public class FlickrClient {
	public static void main(String[] args) {
		String flickrURL = "http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value&api_key=[yourflickrkey]";

		try {
			SocketAddress addr = new InetSocketAddress("[proxy]", 9090);
			Proxy proxy = new Proxy(Proxy.Type.HTTP, addr);
			URL u = new URL("http://api.flickr.com/services/rest/?method=flickr.test.echo&name=value&api_key=[yourflickrkey]");
			HttpURLConnection uc = (HttpURLConnection) u.openConnection(proxy);
			uc.setRequestProperty("Accept", "*/*");
			uc.setRequestProperty("Accept-Charset", "ISO-8859-1,utf-8;q=0.7,*;q=0.7");
			uc.setRequestProperty("Accept-Language", "en-us,en;q=0.5");
			uc.setRequestProperty("Keep-Alive", "300");
			uc.setRequestProperty("ucection", "keep-alive");
			String proxyUser = "[netUserId]";
			String proxyPassword = "[netPassword]";
			uc.setRequestProperty("Proxy-Authorization", "NTLM " + new sun.misc.BASE64Encoder().encode((proxyUser + ":" + proxyPassword).getBytes()));

			DocumentBuilder docBuilder = DocumentBuilderFactory.newInstance().newDocumentBuilder();
			Document doc = docBuilder.parse(uc.getInputStream());

			System.out.println(doc.getDocumentElement().getTagName());

			System.out.println();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}