vijayjoshi.org » JSON

PHP class for expanding and shortening URLs using Google URL shortener API

Vijay Joshi — Thu, 20 Jan 2011 19:55:14 +0000

I have combined the 2 previous posts for expanding and shortening goo.gl URLs and have created a small class for it. Below is the download link for the class.

Expanding a URL

expand('http://goo.gl/WlFX');
if(FALSE === $result)
{
	echo $objAPI->error;
}
else
{
	echo 'Long URL:'.$result;
}
?>

Shorten A URL

shorten('https://www.packtpub.com/php-jquery-cookbook-to-create-interactive-web-applications/book');

if(FALSE === $result)
{
	echo $objAPI->error;
}
else
{
	echo 'Short URL:'.$result;
}
?>

As I have mentioned earlier that Google recommends an API key. The class has a flag variable called keyWarning. By default it is true and it will show the following warning message if you do not pass an API key while instantiating the class:

Currently you are not using an API key. It is recommended that you use one. Click here to learn more about the API key

To turn this notification off, just use this line:

$objAPI->keyWarning = false;

PHP: Shorten URLs using Google URL shortener API

Vijay Joshi — Wed, 12 Jan 2011 06:27:42 +0000

In past 2 posts you saw how short URLs can be expanded using the Google URL shortener API. This post shows how URLs can be shortened using this API.

API key is not mandatory for test purpose. Use this link to get an API key.

For shortening URLs, 2 points must be noted. First, a HTTP POST is required and the post data should be in JSON format. Here is the code:

//This is the URL you want to shorten
$longUrl = 'https://www.packtpub.com/php-jquery-cookbook-to-create-interactive-web-applications/book';
$apiKey = 'your_api_key_here';
//Get API key from : http://code.google.com/apis/console/

$postData = array('longUrl' => $longUrl, 'key' => $apiKey);
$jsonData = json_encode($postData);

$curlObj = curl_init();

curl_setopt($curlObj, CURLOPT_URL, 'https://www.googleapis.com/urlshortener/v1/url');
curl_setopt($curlObj, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curlObj, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($curlObj, CURLOPT_HEADER, 0);
curl_setopt($curlObj, CURLOPT_HTTPHEADER, array('Content-type:application/json'));
curl_setopt($curlObj, CURLOPT_POST, 1);
curl_setopt($curlObj, CURLOPT_POSTFIELDS, $jsonData);

$response = curl_exec($curlObj);

//change the response json string to object
$json = json_decode($response);

curl_close($curlObj);

echo 'Shortened URL is: '.$json->id;

Here is the JSON response from Google:

{
 "kind": "urlshortener#url",
 "id": "http://goo.gl/lBfOH",
 "longUrl": "https://www.packtpub.com/php-jquery-cookbook-to-create-interactive-web-applications/book"
}

You can also read these:

Using Twitter API and jQuery to display recent tweets

Vijay Joshi — Fri, 24 Dec 2010 06:52:13 +0000

In this article I will show you how you can display your (or any other user’s) recent tweets with some jQuery magic. We will create a widget (sort of) that will fetch n number of latest tweets from public timeline of a user using Twitter API and then we will display them in a nice list.

End result will look like the following.

Have a look at a live example.

Let us start creating it now. First write some HTML. Define some css styles in the head section which will control the display of list. In the body section, there is a select box with id layout which will be used to select either a wide or a narrow layout for displaying the tweets. Then create a div with id tweets. We will create a ul inside this div which will have tweets as list items.



	
		Latest Tweets Widget - Vijay Joshi | http://vijayjoshi.org
		
	
	
		
			Select layout

jQuery Code

Just before the body tag closes, add path to jQuery library either from your local file system or the Google CDN.

With this we are ready to pull the tweets. Start by defining 2 variables userName and count. Inside document.ready add a change event handler to select box with id layout. It will change its width from 600px to 300px on selecting narrow and again back to 600px on selecting wide.

Now call a function getTweets and pass user name and number of tweets to it.

var userName = 'v08i';
var count = 8;
$(document).ready(function()
{
	$('#layout').change(function()
	{
		$('#container').css({ 'width' : $(this).val()+ 'px'});
	});
	getTweets(userName, count);

});

getTweets function will actually contact the Twitter API and will fetch tweets from there. We will request the response in JSON format from Twitter using jQuery’s getJSON method.

Before we proceed let us talk a bit technical. As you probably know, browsers do not allow cross-domain ajax requests due to security reasons. In this case the example we are creating is at domain vijayjoshi.org while the twitter domain is api.twitter.com. If both domains were same, a simple AJAX request would have sufficed. To overcome this problem JSONP aka “JSON with Padding” is used.

To use JSONP with jQuery, just change the dataType parameter from json to jsonp. Now you do not have to worry about cross domain restriction or anything else. Just define a callback function (showTweets in this example) and you will receive the JSON response there.

function getTweets(userName, count)
{
	$.getJSON(
		'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + userName + '&count='+ count +'&callback=?',
		{},
		showTweets,
		'jsonp'
	);
}

Now that we have the response, define showTweets function, iterate in the results and display them. Here is how.

function showTweets(tweets)
{
	var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
	var str = '';
	str+= 'Recent Tweets from ' + userName +'';
	var i = 0;
	$.each(tweets, function(index,value)
	{
		if(i == count)	return;
		var dt = new Date(value.created_at);
		str+= '';
		str+= value.text;
		str+= '';
		str+='';
		str+= dt.getDate() + '-' + months[dt.getMonth()] + '-' + dt.getFullYear();
		str+= ' at ' + dt.getHours() + ':' +dt.getMinutes();
		str+= ' From ' + value.source;
		str+= '';
		i++;
	});
	str+= '';
	$('#tweets').html(str);
	$('#tweets > ul > li:odd').addClass('odd');
	$('#tweets > ul > li:even').addClass('even');
}

I have used only some of the values from the JSON response. You can view the full response by typing the following into your browser.

http://api.twitter.com/1/statuses/user_timeline.json?screen_name=your_twitter_username&count=10

With this we are done. Have a look at the demo I have created.

For full source code, just view page source. It’s all happening on your browser after all.

If you have any questions, let me know in comments.

Working with XML Documents in PHP and jQuery

Vijay Joshi — Thu, 23 Dec 2010 10:17:15 +0000

Here is one more sample chapter from my book. It explains reading, writing and editing XML files with PHP and jQuery. Below are the chapter contents.

Loading XML from files and strings using SimpleXML

Accessing elements and attributes using SimpleXML

Searching elements using XPath

Reading an XML using DOM extension

Creating an XML using DOM extension

Modifying an XML using DOM extension

Parsing XML with jQuery

Loading XML from files and strings using SimpleXML
Accessing elements and attributes using SimpleXML
Searching elements using XPath
Reading an XML using DOM extension
Creating an XML using DOM extension
Modifying an XML using DOM extension
Parsing XML with jQuery

To read the full chapter follow this link - https://www.packtpub.com/article/working-with-xml-documents

You can also read the chapter on using JSON with PHP and jQuery.

Working with JSON in PHP and jQuery

Vijay Joshi — Mon, 20 Dec 2010 11:56:18 +0000

I mentioned in a previous post that I was writing a book on PHP and jQuery. Well, after a labor of around 7 months the book is out now. It is available on Packt website as well as Amazon.

Meanwhile, to help you make a decision, a sample chapter from the book is available on Packt website. The chapter is Working with JSON in PHP and jQuery and it contains 4 articles that explain creating, reading and writing JSON in PHP as well as jQuery.

Below are the topics that this chapter covers:

Creating JSON in PHP
Reading JSON in PHP
Catching JSON parsing errors
Accessing data from a JSON in jQuery

To read the full chapter, just follow this link http://www.packtpub.com/article/working-json-php-jquery

Guys, I am writing a book

Vijay Joshi — Mon, 22 Nov 2010 11:25:08 +0000

Yes that’s right and it is called PHP jQuery Cookbook. As the name suggests, it’s about creating rich internet applications using 2 of my favorite technologies – PHP and jQuery.

I love coding web apps and helping others find solutions. Perhaps that is the reason I agreed to write when the wonderful people at Packt Publishing contacted me. (Also, a book on resume isn’t that bad either )

Another reason is I love Open source. It is a lovely philosophy and I am a strong believer in it. Having learnt so much from the Open source community since I started coding, I have always wanted to return something back. Nothing could have been better then this. And did I mention, Packt pays direct royalty to a project if they sell a book written on the same.

Long story short, the book is cookbook with around 65 recipes covering PHP, jQuery, MySql and some API’s (Flickr, Youtube).

Structure wise, it has 10 chapters in all.

Handling Events
Combining PHP and jQuery
Working with XML documents
Working with JSON
Working with Forms
Adding Visual effects to forms
Creating cool Navigation Menus
Data binding with PHP and jQuery
Enhancing your site with PHP and jQuery
Appendix – FireBug

The book is available now will be available by 14th December ~~Christmas this year or January next year~~. You can have a look in detail about what it is all about on Packt Website. Order a copy in case you find it interesting

What is JSON? Definition and uses in JavaScript

Vijay Joshi — Wed, 20 Aug 2008 09:05:43 +0000

Recently JSON has become a very popular data interchange format with more and more developers and a large number of big players in the web arena opting for it over XML. In this article we will explore what json is all about and how we can use it. We will proceed in the following manner:

Definition, Characteristics and Structure of json
Example
Parsing json text
Reading values from json

Let’s go through each of these one by one.

Definition, Characteristics and Structure of json

JSON which stands for JavaScript Object Notation can be defined as a lightweight data interchange format. It is also said a fat-free lightweight alternative to xml. It is a text format which is programming language independent and is native data form of JavaScript. It is lighter and faster than xml. The credit to make json popular goes to Douglas Crockford.

Since JSON is the native data form of JavaScript, it can be used on the client side in an Ajax application more easily then XML. Implementations of JSON has been done in most of the languages (check here) we will stick to javascript as of now.

A JSON object starts with { and ends with }. In between you can have key value pairs which are enclosed with double quotes (“) and separated by a colon (:).

Keys are simple strings and values can be either array, string, number or Boolean. Values enclosed between { and } are objects and those between [ and ] are arrays.

Example

A JSON can be as simple as

{
“name”:”name1”, “age”:”25”, ”address”: "anywhere"
}

Example 1
An example using arrays

{
"name": "name1", "age":"25", "phoneNumbers": ["9999123456", "9999678900","1234567890" ]
}

Example 2
A more complex example which has values in objects and objects are array elements.

{
"results":
 {
   "students":
   [
     {
      "id" : "1",
      "name": "Ramu"
     },
     {
      "id": "2",
      "name": "Shyamu"
     },
     {
      "id" : "3",
      "name": "Damu"
     }
   ]
 }
}

Example 3

Those familiar with JavaScript will see that syntax is same we use while declaring objects in JavaScript.In the above example we have a json where results is the key and its value is an object.

The value for results again contains an object which has the value students. The value of students is an array ( note the [ ). This array contains 3 values which are again objects. The first one is

{
      "id" : "1",
      "name": "Ramu",
}

This object has 2 keys, id and name. The value for key id is 1 and the value for key name is Ramu.

Parsing json text

Now suppose you received a json string as responseText in an Ajax application. You will now want to read the values that this structure has brought with it and use them in your application. But wait - there is one more step in between and that is parsing of this text.

Why do I have to parse it ??

Since JSON is a text format, we will have to parse it to a format that JavaScript can recognize and read upon. We can use eval to parse it.

var myJsonObject = eval( ' ( ' + JsonString + ' ) ' );

This will convert the string JsonString to a javascript object. Now you have an object available in javascript. You are free to do whatever with its values.

One word of caution. Use of eval is not recommended since eval is considered evil. This is because eval can execute any javascript code that is passed to it. So better use a JSON parser. It will make sure that the json string passed to it is thoroughly checked and scripts are rejected. I personally use json.js ( now json2) by Douglas Crockford.

var myJsonObject = JsonString.parseJSON();

Reading values from json

After a json string is successfully parsed, you can use it like a normal javascript variable. Here we will try to read values from the structure in example 3. This structure holds the records of 3 students.

Suppose we have the parsed object in variable studentRecords.

studentRecords.results will give an object. studentRecords.results.students will give the array that has 3 records. Now we can iterate over this array and get values.

var rec = studentRecords.results.students;
for(var i=0; i
With this we come to the end of this article. If you have any queries or suggestions, do tell me.
You can see a complete working example with the json string of example 3 here.
--