12 min read

 

PHP jQuery Cookbook

PHP jQuery Cookbook Over 60 simple but highly effective recipes to create interactive web applications using PHP with jQuery

  • Create rich and interactive web applications with PHP and jQuery
  • Debug and execute jQuery code on a live site
  • Design interactive forms and menus
  • Another title in the Packt Cookbook range, which will help you get to grips with PHP as well as jQuery
        Read more about this book      

(For more resources on this subject, see here.)

Introduction

In this article, we will look at some advanced techniques that can be used to enhance the functionality of web applications.

We will create a few examples where we will search for images the from Flickr and videos from YouTube using their respective APIs. We will parse a RSS feed XML using jQuery and learn to create an endless scrolling page like Google reader or the new interface of Twitter.

Besides this, you will also learn to create a jQuery plugin, which you can use independently in your applications.

Sending cross-domain requests using server proxy

Browsers do not allow scripts to send cross-domain requests due to security reasons. This means a script at domain http://www.abc.com cannot send AJAX requests to http://www.xyz.com.

This recipe will show how you can overcome this limitation by using a PHP script on the server side. We will create an example that will search Flickr for images. Flickr will return a JSON, which will be parsed by jQuery and images will be displayed on the page. The following screenshot shows a JSON response from Flickr:

Getting ready

Create a directory for this article and name it as Article9. In this directory, create a folder named Recipe1.

Also get an API key from Flickr by signing up at http://www.flickr.com/services/api/keys/.

How to do it…

  1. Create a file inside the Recipe1 folder and name it as index.html. Write the HTML code to create a form with three fields: tag, number of images, and image size. Also create an ul element inside which the results will be displayed.

    <html>
    <head>
    <title>Flickr Image Search</title>
    <style type=”text/css”>
    body { font-family:”Trebuchet MS”,verdana,arial;width:900px;
    }
    fieldset { width:333px; }
    ul{ margin:0;padding:0;list-style:none; }
    li{ padding:5px; }
    span{ display:block;float:left;width:150px; }
    #results li{ float:left; }
    .error{ font-weight:bold; color:#ff0000; }
    </style>
    </head>
    <body>
    <form id=”searchForm”>
    <fieldset>
    <legend>Search Criteria</legend>
    <ul>
    <li>
    <span>Tag</span>
    <input type=”text” name=”tag” id=”tag”/>
    </li>
    <li>
    <span>Number of images</span>
    <select name=”numImages” id=”numImages”>
    <option value=”20″>20</option>
    <option value=”30″>30</option>
    <option value=”40″>40</option>
    <option value=”50″>50</option>
    </select>
    </li>
    <li>
    <span>Select a size</span>
    <select id=”size”>
    <option value=”s”>Small</option>
    <option value=”t”>Thumbnail</option>
    <option value=”-“>Medium</option>
    <option value=”b”>Large</option>
    <option value=”o”>Original</option>
    </select>
    </li>
    <li>
    <input type=”button” value=”Search” id=”search”/>
    </li>
    </ul>
    </fieldset>
    </form>
    <ul id=”results”>
    </ul>
    </body>
    </html>

    
    

    The following screenshot shows the form created:

  2. Include the jquery.js file. Then, enter the jQuery code that will send the AJAX request to a PHP file search.php. Values of form elements will be posted with an AJAX request. A callback function showImages is also defined that actually reads the JSON response and displays the images on the page.

    <script type=”text/javascript” src=”../jquery.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function()
    {
    $(‘#search’).click(function()
    {
    if($.trim($(‘#tag’).val()) == ”)
    {
    $(‘#results’).html(‘<li class=”error”>Please provide
    search criteria</li>’);
    return;
    }
    $.post(
    ‘search.php’,
    $(‘#searchForm’).serialize(),
    showImages,
    ‘json’
    );
    });

    function showImages(response)
    {
    if(response[‘stat’] == ‘ok’)
    {
    var photos = response.photos.photo;
    var str= ”;
    $.each(photos, function(index,value)
    {
    var farmId = value.farm;
    var serverId = value.server;
    var id = value.id;
    var secret = value.secret;
    var size = $(‘#size’).val();
    var title = value.title;

    var imageUrl = ‘http://farm’ + farmId +
    ‘.static.flickr.com/’ + serverId + ‘/’ + id + ‘_’ +
    secret + ‘_’ + size + ‘.jpg’;
    str+= ‘<li>’;
    str+= ‘<img src=”‘ + imageUrl + ‘” alt=”‘
    + title + ‘” />’;
    str+= ‘</li>’;
    });

    $(‘#results’).html(str);
    }
    else
    {
    $(‘#results’).html(‘<li class=”error”>an error
    occured</li>’);
    }
    }
    });
    </script>

    
    
  3. Create another file named search.php. The PHP code in this file will contact the Flickr API with specified search criteria. Flickr will return a JSON that will be sent back to the browser where jQuery will display it on the page.

    <?php

    define(‘API_KEY’, ‘your-API-key-here’);
    $url = ‘http://api.flickr.com/services/rest/?method=flickr.
    photos.search’;
    $url.= ‘&api_key=’.API_KEY;
    $url.= ‘&tags=’.$_POST[‘tag’];
    $url.= ‘&per_page=’.$_POST[‘numImages’];
    $url.= ‘&format=json’;
    $url.= ‘&nojsoncallback=1’;

    header(‘Content-Type:text/json;’);
    echo file_get_contents($url);
    ?>

    
    
  4. Now, run the index.html file in your browser, enter a tag to search in the form, and select the number of images to be retrieved and image size. Click on the Search button. A few seconds later you will see the images from Flickr displayed on the page:

    <html>
    <head>
    <title>Youtube Video Search</title>
    <style type=”text/css”>
    body { font-family:”Trebuchet MS”,verdana,arial;width:900px;
    }
    fieldset { width:333px; }
    ul{ margin:0;padding:0;list-style:none; }
    li{ padding:5px; }
    span{ display:block;float:left;width:150px; }
    #results ul li{ float:left; background-color:#483D8B;
    color:#fff;margin:5px; width:120px; }
    .error{ font-weight:bold; color:#ff0000; }
    img{ border:0}
    </style>
    </head>
    <body>
    <form id=”searchForm”>
    <fieldset>
    <legend>Search Criteria</legend>
    <ul>
    <li>
    <span>Enter query</span>
    <input type=”text” id=”query”/>
    </li>
    <li>
    <input type=”button” value=”Search” id=”search”/>
    </li>
    </ul>
    </fieldset>
    </form>
    <div id=”results”>
    </div>
    </body>
    </html>

    
    

How it works…

On clicking the Search button, form values are sent to the PHP file search.php. Now, we have to contact Flickr and search for images. Flickr API provides several methods for accessing images. We will use the method flickr.photos.search to search by tag name. Along with method name we will have to send the following parameters in the URL:

    • api_key: An API key is mandatory. You can get one from:

http://www.flickr.com/services/api/keys/.

  • tags: The tags to search for. These can be comma-separated. This value will be the value of textbox tag.
  • per_page: Number of images in a page. This can be a maximum of 99. Its value will be the value of select box numImages.
  • format: It can be JSON, XML, and so on. For this example, we will use JSON.
  • nojsoncallback: Its value will be set to 1 if we don’t want Flickr to wrap the JSON in a function wrapper.

Once the URL is complete we can contact Flickr to get results. To get the results’ we will use the PHP function file_get_contents, which will get the results JSON from the specified URL. This JSON will be echoed to the browser.

jQuery will receive the JSON in callback function showImages. This function first checks the status of the response. If the response is OK, we get the photo elements from the response and we can iterate over them using jQuery’s $.each method. To display an image, we will have to get its URL first, which will be created by combining different values of the photo object. According to Flickr API specification, an image URL can be constructed in the following manner:

http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[size].jpg

So we get the farmId, serverId, id, and secret from the photo element. The size can be one of the following:

  • s (small square)
  • t (thumbnail)
  • (medium)
  • b (large)
  • o (original image)

We have already selected the image size from the select box in the form. By combining all these values, we now have the Flickr image URL. We wrap it in a li element and repeat the process for all images. Finally, we insert the constructed images into the results li.

Making cross-domain requests with jQuery

The previous recipe demonstrated the use of a PHP file as a proxy for querying cross-domain URLs. This recipe will show the use of JSONP to query cross-domain URLs from jQuery itself.

We will create an example that will search for the videos from YouTube and will display them in a list. Clicking on a video thumbnail will open a new window that will take the user to the YouTube website to show that video.

The following screenshot shows a sample JSON response from YouTube:

Getting ready

Create a folder named Recipe2 inside the Article9 directory.

How to do it…

  1. Create a file inside the Recipe2 folder and name it as index.html. Write the HTML code to create a form with a single field query and a DIV with results ID inside which the search results will be displayed.

    <script type=”text/javascript” src=”../jquery.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function()
    {
    $(‘#search’).click(function()
    {
    var query = $.trim($(‘#query’).val());
    if(query == ”)
    {
    $(‘#results’).html(‘<li class=”error”>Please enter
    a query.</li>’);
    return;
    }
    $.get(
    ‘http://gdata.youtube.com/feeds/api/videos?q=’ + query +
    ‘&alt=json-in-script’,
    {},
    showVideoList,
    ‘jsonp’
    );
    });
    });
    function showVideoList(response)
    {
    var totalResults =
    response[‘feed’][‘openSearch$totalResults’][‘$t’];
    if(parseInt(totalResults,10) > 0)
    {
    var entries = response.feed.entry;
    var str = ‘<ul>’;
    for(var i=1; i< entries.length; i++)
    {
    var value = entries[i];
    var title = value[‘title’][‘$t’];
    var mediaGroup = value[‘media$group’];
    var videoURL = mediaGroup[‘media$player’][0][‘url’];

    var thumbnail = mediaGroup[‘media$thumbnail’][0][‘url’];
    var thumbnailWidth =
    mediaGroup[‘media$thumbnail’][0][‘width’];
    var thumbnailHeight =
    mediaGroup[‘media$thumbnail’][0][‘height’];
    var numComments =
    value[‘gd$comments’][‘gd$feedLink’][‘countHint’];
    var rating =
    parseFloat(value[‘gd$rating’][‘average’]).toFixed(2);
    str+= ‘<li>’;
    str+= ‘<a href=”‘ + videoURL + ‘” target=”_blank”>’;
    str+= ‘<img src=”‘+thumbNail+'” width=”‘+thumbNailWidth+'”
    height=”‘+thumbNailWidth+'” title=”‘ + title + ‘” />’;
    str+= ‘</a>’;
    str+= ‘<hr>’;
    str+= ‘<p style=”width: 120px; font-size: 12px;”>Comments:
    ‘ + numComments + ”;
    str+= ‘<br/>’;
    str+= ‘Rating: ‘ + rating;
    str+= ‘</p>’;

    str+= ‘</li>’;
    }
    str+= ‘</ul>’;
    $(‘#results’).html(str);
    }
    else
    {
    $(‘#results’).html(‘<li class=”error”>No results.</li>’);
    }
    }
    </script>

    
    

  2. Include the jquery.js file before closing the &ltbody> tag. Now, write the jQuery code that will take the search query from the textbox and will try to retrieve the results from YouTube. A callback function called showVideoList will get the response and will create a list of videos from the response.

    http://gdata.youtube.com/feeds/api/videos?q=’ + query +
    ‘&alt=json-in-script

    
    
  3. All done, and we are now ready to search YouTube. Run the index.html file in your browser and enter a search query. Click on the Search button and you will see a list of videos with a number of comments and a rating for each video.

How it works…

script tags are an exception to cross-browser origin policy. We can take advantage of this by requesting the URL from the src attribute of a script tag and by wrapping the raw response in a callback function. In this way the response becomes JavaScript code instead of data. This code can now be executed on the browser.

The URL for YouTube video search is as follows:

http://gdata.youtube.com/feeds/api/videos?q=’ + query + ‘&alt=json-in-script

Parameter q is the query that we entered in the textbox and alt is the type of response we want. Since we are using JSONP instead of JSON, the value for alt is defined as json-in-script as per YouTube API specification. On getting the response, the callback function showVideoList executes. It checks whether any results are available or not. If none are found, an error message is displayed. Otherwise, we get all the entry elements and iterate over them using a for loop. For each video entry, we get the videoURL, thumbnail, thumbnailWidth, thumbnailHeight, numComments, and rating. Then we create the HTML from these variables with a list item for each video. For each video an anchor is created with href set to videoURL. The video thumbnail is put inside the anchor and a p tag is created where we display the number of comments and rating for a particular video. After the HTML has been created, it is inserted in the DIV with ID results.

There’s more…

About JSONP

You can read more about JSONP at the following websites:

LEAVE A REPLY

Please enter your comment!
Please enter your name here