User Guide > Tutorials > Developing in Zend Studio Using jQuery Support

Developing in Zend Studio Using jQuery Support

In this tutorial you will learn how to use jQuery support in Zend Studio to develop your application.

Tutorial Content

In this tutorial you will learn:

To create a new local project
To configure your project's JavaScript settings and add jQuery
To consume JSON by using jQuery

Provided Items

Throughout the tutorial, you will be provided with code snippets to insert in your project.

Prerequisites

Zend Studio 9.0 or above which can be downloaded from the Zend Studio Downloads page. For information on installation see the Zend Studio Installation Guide.
Installed jQuery Support plugin.

How do I install the jQuery plugin?

Related Media

To better understand the procedures described in this tutorial, watch this video:

Step 2: Configuring JavaScript Settings and Adding jQuery

In the following procedure you will first convert your project to JavaScript, and then add jQuery support.

Instructions on how to complete a procedure

To convert your project to JavaScript:

Right-click your project and select Configure | Convert to JavaScript Project.
The Properties dialog is displayed.

Click Add JavaScript Library.
The Add JavaScript dialog is displayed.

Select jQuery Library, and click Next.
The jQuery Library dialog is displayed.

Make sure all check-boxes are marked, and click Finish.
The 'Sample' and 'lib' folders are added to your project and their 'jquery.js' and 'sample.html' files are displayed.
Right-click anywhere in the open 'sample.html' file, and select Open with | Browser.
The file is displayed in a Browser.

Step 3: Consuming JSON Using jQuery

In this step you consume the JSON API using jQuery Library support. Zend Studio's Content Assist for jQuery helps you with the application development.

Instructions on how to complete a procedure

To consume API using jQuery:

In the PHP Explorer, right-click the sample folder and select New | File.

We will now simulate an existing back-end API architecture by using a ready JSON reply. In the New File dialog, select the sample folder, name the file 'result.json' and click Finish.
The file is added to your project under the sample folder.
Copy and paste the following code into the 'result.json' file:

{

"completed_in":0.031,

"max_id":122078461840982016,

"max_id_str":"122078461840982016",

"next_page":"?page=2&max_id=122078461840982016&q=blue%20angels&rpp=5",

"page":1,

"query":"blue+angels",

"refresh_url":"?since_id=122078461840982016&q=blue%20angels",

"results":[

{

"created_at":"Thu, 06 Oct 2011 19:36:17 +0000",

"entities":{

"urls":[

{

"url":"http://t.co/L9JXJ2ee",

"expanded_url":"http://bit.ly/q9fyz9",

"display_url":"bit.ly/q9fyz9",

"indices":[37,57]

}

]

"from_user":"SFist",

"from_user_id":14093707,

"from_user_id_str":"14093707",

"geo":null,

"id":122032448266698752,

"id_str":"122032448266698752",

"iso_language_code":"en",

"metadata":{

"recent_retweets":3,

"result_type":"popular"

"profile_image_url":"http://a3.twimg.com/profile_images/51584619/SFist07_normal.jpg",

"source":"<a href="http://twitter.com/tweetbutton" rel="nofollow">Tweet Button</a>",

"text":"Reminder: Blue Angels practice today http://t.co/L9JXJ2ee",

"to_user_id":null,

"to_user_id_str":null

"results_per_page":1,

"since_id":0,

"since_id_str":"0"

}

In the 'sample.html' file, delete the code from lines 7-13.
In line 7, type $(docu), and press Ctrl+Space to open Content Assist.

Double-click 'document HTMLDocument', type .re, and press Ctrl+Space to open Content Assist.

Double-click ready(fn) jQuery', type fn in the brackets, and press Ctrl+Space to open Content Assist.

Double-click 'fn-anonymous' and press Enter.

In line 8, enter the following code.

var url = 'result.json';

In line 9, type $. and press Ctrl+Space to open Content Assist.

Select 'getJSON', and complete the code in the file so it appears as follows:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script src="../lib/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
		$.getJSON('result.json',function(data){
			var items = [];
 
			$.each(data.results[0], function(key, val) {
			items.push('<li id="' + key + '">' + val + '</li>');
			});
 
			$('<ul/>', {
			'class' : 'my-new-list',
			html : items.join('')
			}).appendTo('body');
			});
		});
	</script>
</head>
<body>
<h1>Classic jQuery example</h1>
See more examples at jQuery home page: <a href="http://jquery.com/">jQuery</a>.
</body>
</html>

Save the file.
Right-click the file and select Open With | Browser.
The file is displayed in a Browser.