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:

Provided Items

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

Prerequisites

How do I install the jQuery plugin?

Related Media

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

ClosedStep 1: Creating a New Local Project

You will first create a new local project to work with in this tutorial.

 

 

Instructions on how to complete a procedure

To create a new local project:

  1. Open Zend Studio.

  2. Go to File | New | Local PHP Project.

  1. Name your project, select Basic as your content choice, and click Finish.
    Your new project is created and appears in the PHP Explorer view.
 
ClosedStep 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:

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

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

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

  1. 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.

  2. Right-click anywhere in the open 'sample.html' file, and select Open with | Browser.
    The file is displayed in a Browser.

 
ClosedStep 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:

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

 

  1. 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.

  2. 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"
}

  1. In the 'sample.html' file, delete the code from lines 7-13.

  2. In line 7, type $(docu), and press Ctrl+Space to open Content Assist.
     

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

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

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

  1. In line 8, enter the following code.

var url = 'result.json';

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

  1. 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>

  1. Save the file.

  2. Right-click the file and select Open With | Browser.
    The file is displayed in a Browser.
 
VideosGet StartedTutorialsTips and TricksSupport

Copyright © 2016 Zend Technologies