PHP Ajax Cookbook

Table of Contents

PHP Ajax Cookbook

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. AJAX Libraries

Designing simple navigation using jQuery

Getting ready

How to do it...

How it works...

There's more...

See also

Creating tab navigation

Getting ready

How to do it...

How it works...

There's more...

See also

Designing components using Ext JS

Getting ready

How to do it...

How it works...

There's more...

Event handling in MochiKit

Getting ready

How to do it...

How it works...

There's more...

Building a tab navigation using Dojo

Getting ready

How to do it...

How it works...

Building a chart application using YUI library

Getting ready

How to do it...

How it works...

There's more...

Loading dynamic content using jQuery slider

Getting ready

How to do it...

How it works...

There's more...

See also

Creating an AJAX shopping cart using MooTools

Getting ready

How to do it...

How it works...

There's more...

Building an AJAX login form using prototype.js

Getting ready

How to do it...

How it works...

There's more...

2. Basic Utilities

Validating a form using Ajax

Getting ready

How to do it...

How it works...

There's more...

See also

Creating an autosuggest control

Getting ready

How to do it...

How it works...

There's more...

Making Form Wizards

Getting ready

How to do it...

How it works...

There's more...

Uploading a file using Ajax

Getting ready

How to do it...

How it works...

There's more...

Uploading multiple files using Ajax

Getting ready

How to do it...

How it works...

There's more...

Creating a five-star rating system

Getting ready

How to do it...

How it works...

There's more...

Building a PHP Ajax contact form with validation

How to do it...

How it works...

There's more...

Displaying a table in Ajax

Getting ready

How to do it...

How it works...

There's more...

Building Pagination using PHP and Ajax

How to do it...

How it works...

There's more...

3. Useful Tools Using jQuery

Making tool tips using Ajax

Getting ready

How to do it...

How it works...

There's more...

Creating Autocomplete from a database

Getting ready

How to do it...

How it works...

There's more...

Building a tab navigation using jQuery

Getting ready

How to do it...

How it works...

There's more...

See also

Rotating content

Getting ready

How to do it...

How it works...

There's more...

Creating an image slider

Getting ready

How to do it...

How it works...

There's more...

Creating pageless pagination

Getting ready

How to do it...

How it works...

There's more...

Loading images using Lightbox

Getting ready

How to do it...

How it works...

There's more...

Growing textarea using the jGrow plugin

Getting ready

How to do it...

How it works...

There's more...

HTML replacement of the select dropdown

Getting ready

How to do it...

How it works...

There's more...

Improving date selection with Datepicker

Getting ready

How to do it...

How it works...

There's more...

Drag-and-drop functionality

Getting ready

How to do it...

How it works...

There's more...

Ajax shopping cart

Getting ready

How to do it...

How it works...

There's more...

Sorting and filtering data

Getting ready

How to do it...

How it works...

There's more...

Adding visual effects and animations

Getting ready

How to do it...

How it works...

There's more...

4. Advanced Utilities

Building an Ajax chat system using the Comet technique

Getting ready

How to do it...

How it works...

Charting with JavaScript

Getting ready

How it works...

Drawing a line chart

Drawing a bar chart

Drawing a 3D pie chart

Decoding CAPTCHA through canvas

Getting ready

How to do it...

How it works...

There's more...

Displaying data in a grid

Getting ready

How to do it...

How it works...

There's more...

Other data grid plugins

Displaying millions of data items

5. Debugging and Troubleshooting

Debugging with Firebug and FirePHP

Debugging with Firebug

How to do it...

How it works...

There's more...

Debugging with FirePHP

Getting ready

How it works...

There's more...

Debugging with the IE developer toolbar

Getting ready

How to do it...

Avoiding the framework $ conflict

Getting ready

How to do it...

How it works...

Using the anonymous function of JavaScript

How to do it...

How it works...

There's more...

Fixing memory leaks in JavaScript

What is a memory leak?

What might cause a memory leak?

Fixing memory leaks

How to do it...

How it works...

There's more...

Sequencing Ajax Requests

How to do it ...

How it works...

Cross Browser and Ajax

Beautifying JavaScript

6. Optimization

Caching of objects

Getting ready

How to do it...

How it works...

Getting optimization tips with YSlow

Getting ready

How to do it...

How it works...

There's more...

Speeding up JavaScript delivery through automatic compression and browser caching

Getting ready

How to do it...

How it works...

There's more...

Comparing JavaScript minification tools

Automatic speed up tools

Triggering JavaScript early/on DOM load

Getting ready

How to do it...

How it works...

DOMContentLoaded and workarounds

There's more...

Lazy-loading of images

Getting ready

How to do it...

Pure JavaScript approach

Mangled HTML markup

How it works...

There's more...

Lazy-loading plugins

Lazy/deferred script loading

Optimizing Ajax applications automagically through Apache modules/Google mod_pagespeed

Getting ready

How to do it...

How it works...

There's more...

Testing HTTP headers

Testing mod_pagespeed without installing

Page Speed Service

7. Implementing Best Practices to Build Ajax Websites

Avoiding HTML markup-specific coding

Getting ready

How to do it...

How it works...

Introducing protocols through naming conventions:

Approaching the problem statement:

There's more...

console.warn()

Building secure Ajax websites

Getting ready

How to do it...

Common mistakes on Ajax applications

How it works...

There's more...

Exploit-Me

WebInspect

Resources

Building SEO-friendly Ajax websites

Getting ready

How to do it...

How it works...

Google's proposal

Preserving browser history or un-breaking the browser's back button

Getting ready

How to do it...

How it works...

Implementing comet PHP and Ajax

Getting ready

How to do it...

How it works...

8. Ajax Mashups

Web services

SOAP

REST

XML-RPC

Creating and consuming web services using PHP

Getting ready

How to do it...

Example of a Wikipedia API call using PHP

How it works...

Using Flickr API with Ajax

Getting ready

How to do it...

How it works...

There's more...

Using Twitter API with Ajax

Getting ready

How to do it...

How it works...

Translating text using Google Ajax API

Getting ready

How to do it...

How it works...

Using Google Maps

Getting ready

How to do it...

How it works...

Searching a location within a Google Map

Getting ready

How to do it...

How it works...

Searching within XX km. radius of Google Maps with markers and Info window

Getting ready

Haversine formula for calculating circular distance

Creating the table

How to do it...

How it works...

Finding a city/country using IP address

Getting ready

How to do it...

How it works...

Converting currencies using Ajax and PHP

Getting started

How to do it...

How it works...

9. iPhone and Ajax

Building a touch version of a website (with jQTouch)

Getting ready

How to do it...

How it works...

There's more...

Online iPhone icon generator

Leveraging HTML5 features in iPhone Ajax

Getting ready

How to do it...

How it works...

There's more...

HTML5 demos

Persist JS

Building native apps with PhoneGap

Getting ready

How to do it...

How it works...

There's more...

Getting Started Guide/Help Wizard

Speeding up a PhoneGap project

Getting ready

How to do it...

How it works...

There's more...

Building a currency conversion hybrid app

Getting ready

How to do it...

How it works...

There's more...

Mustache

drink, jQuery micro template

Index

PHP Ajax Cookbook

PHP Ajax Cookbook

Copyright © 2011 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: December 2011

Production Reference: 1021211

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84951-308-1

www.packtpub.com

Cover Image by Asher Wishkerman (<wishkerman@hotmail.com>)

Credits

Authors

R. Rajesh Jeba Anbiah

Roshan Bhattarai

Milan Sedliak

Reviewers

Raymond Irving

Vijay Joshi

Kae Verens

Acquisition Editor

Chaitanya Apte

Development Editor

Swapna Verlekar

Technical Editors

Arun Nadar

Priyanka Shah

Naheed Shaikh

Ajay Shanker

Project Coordinator

Joel Goveya

Proofreader

Chris Smith

Copy Editor

Brandt D'Mello

Indexer

Monica Ajmera Mehta

Graphics

Valentina Joseph D'silva

Production Coordinator

Shantanu Zagade

Cover Work

Shantanu Zagade

About the Authors

R. Rajesh Jeba Anbiah is a very simple guy who first saw computers only in 1998. Since then he got addicted to programming and co-authored A to Z of C, a non-profit book on Turbo C/DOS programming, while pursuing Master of Computer Applications in The American College, Madurai. After graduation he joined Agriya http://www.agriya.com/, then a startup company, and coded in Perl, Visual Basic, Delphi, and heavily in PHP.

Currently he heads the projects division in Agriya, where he oversees challenging Web 2.0 site development, web software products, and labs initiatives. His goal at the workplace is to get big branding and coverage for his labs projects.

I thank the entire team of Packt, especially Chaitanya Apte, Pallavi M R, Joel Goveya, Poorvi Nair, Priyanka Shah, and Mary Nadar for their patience, suggestions and support throughout this project. This project wouldn't be a success without the co-operation from the other authors: Milan Sedliak and Roshan Bhattarai.

My thanks go to my boss N. Aravind Kumar for allowing me to take up this side project and my wonderful team at workplace for the everlasting spirit and trust.

On a personal note, I'd like to thank my wife T. Heleena Thanka Christlet, who is my secret mentor on algorithms and database queries, and my little daughter R. Rithika Sharon for keeping me engaged with this project.

Roshan Bhattarai holds an M. Sc. in IT degree and has previously worked in various IT companies in Nepal and India as a Web developer and Technical Lead. Currently, he co-owns and is working as a CTO at Proshore.

Roshan owns and authors a popular web development-related blog at http://roshanbh.com.np.

I would like to thank my father, mother, wife, brother, and his friends who helped me in writing this book. My special thanks goes to my father because he was the main person who believed in my potential and asked me to study IT rather than another faculty.

Milan Sedliak is a JavaScript specialist; jQuery and Cross-browser compatibility is one of his key strengths. He likes challenging tasks and he does everything he can to be at his best in this area.

He has experience with all kinds of websites and a lot of technologies (8+ years): Portfolios, company presentations, e-commerce, complicated reporting systems for telecommunication devices, PHP websites with MySQL or MS SQL, ASP.NET 3,5, and 4, (C#) with MS SQL, and so on.

Milan has a lot of experience in international environments and is currently employed by Skype as a software engineer specialized in front-end web technologies and cross-browser compatibility. In the past he has worked at Hewlett-Packard, Interoute, and Intertec Media Group.

I would like to thank my girlfriend, my family and friends for their support and believing in me, even in times when I didn't.

About the Reviewers

Raymond Irving is a trained Computer Technician, IT Consultant, and Software Developer. Since 2001, he has worked on a number of open source projects such as DynAPI, CLASP, and the MODx Content Management System where his roles include Project Administrator, Assistant Developer, and Project Co-Founder respectively. His latest project is called the Raxan Framework (www.raxanpdi.com) where he is the Founder and Lead Developer.

He currently designs, develops, and tests software applications in Jamaica with special interest in Mobile, PHP, and AJAX web development.

Vijay Joshi is a programmer with over six years of experience on various platforms. He discovered his passion for open source four years ago when he started playing with PHP on a hobby project after completing his Masters in Computer Applications.

Vijay now is a freelance web developer, independent consultant for few selected companies, and occasionally blogs at http://vijayjoshi.org. He specializes in developing custom web applications, mashups, creating apps using PHP frameworks, and enhancing existing web apps using PHP and front-end libraries like jQuery, jQUI, and so on.

Vijay is also the author of PHP jQuery Cookbook and a technical reviewer of jQuery UI 1.8: The User Interface Library for jQuery both of which are published by Packt.

Outside of work, he enjoys reading, trekking, and sometimes gets obsessed with fitness.

www.PacktPub.com

Support files, eBooks, discount offers, and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and, as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. 

Why Subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Preface

Ajax is the necessary paradigm in Web 2.0 sites. Most Web 2.0 sites are built with PHP and Ajax. Extending Ajax is about delivering front-end services for accessing back-end services in PHP in a quick and easy manner. With this book in hand, you will learn how to use the necessary tools for Ajaxification of websites and iPhones.

The PHP Ajax Cookbook will teach you how to use the combination of PHP and Ajax as a powerful platform for websites or web applications. Using Ajax for communication with the server leads to faster response with PHP at the back-end services. The combination of Ajax and PHP has many features such as speeding up the user experience, giving your web client much quicker response time, and letting the client browser retrieve data from the server without having to refresh the whole page. You will learn the nuances of optimization and debugging Ajax applications. Further, you will learn how to program Ajax on iPhone devices.

This book will teach you popular selector-based JavaScript followed by important concepts on debugging, optimization, and best practices. There is a collection of recipes focused on creating basic utilities such as validating forms using Ajax and creating a five-star rating system. As jQuery is quite popular, useful tools and jQuery plugins like Ajax tooltips, tab navigation, autocomplete, shopping cart, and Ajax chat are covered subsequently. By the end of Chapter 7 you will learn to visually speed up website responsiveness and build SEO-friendly Ajax websites. You will also get to know about all popular Ajax webservices and APIs like Twitter, Facebook and Google Maps, which are covered in Chapter 8, Ajax Mashups. Finally, step-by-step recipes are presented to build iPhone apps using basic libraries and everyday useful Ajax tools.

Build rich, interactive Web 2.0 sites with rich standards and Mashups around PHP Ajax.

What this book covers

Chapter 1, Ajax Libraries, teaches us how to work with the most famous JavaScript libraries and frameworks with capabilities of Ajax functionality. These libraries were selected by our subjective opinion and we are not trying to say which library/framework is better or worse. Each of them has its advantages and disadvantages.

Chapter 2 , Basic Utilities, focuses on basic Ajax operations that deal with forms, form controls, Ajax tables, and upload operations. Some best practices based on user experience and the performance of the specific system are explained.

Chapter 3, Useful Tools Using jQuery discusses jQuery plug-ins that are useful in transforming a normal website into an Ajaxified website with good looking tooltips, image galleries with a lighbox, selecting dates with datepicker, quick visual effects, and layout functionality.

Chapter 4, Advanced Utilities, teaches us how to build advanced features like chat, plotting charts, decoding Captcha using canvas, and displaying data in grid..

Chapter 5, Debugging and Troubleshooting, discusses JavaScript debugging techniques using browser plug-ins like Firebug.

Chapter 6, Optimization, teaches us how to speed up code execution through minification, triggering JavaScript early, object caching, and tips from YSlow and Google Page Speed tools.

Chapter 7, Implementing Best Practices to Build Ajax Websites, discusses best practices like avoiding markup-specific codes, building search-engine friendly Ajax websites, security considerations, and implementing Ajax Comet.

Chapter 8, Ajax Mashups, discusses how to make use of existing web services from JavaScript by utilizing Flickr, Picasa, Facebook, Twitter, Google Maps, and geocoding web services.

Chapter 9, iPhone & Ajax, teaches us how to build mobile friendly websites using mobile frameworks and build a native iPhone application using a PhoneGap framework.

What you need for this book

In this book you basically need Apache, MySQL, and PHP installed in your computer. If you don't have PHP, MySQL, or Apache installed in your computer, we would recommend you download the XAMPP package from its website: http://www.apachefriends.org/en/xampp.html. Furthermore, as the code editor you can use a simple editor like Notepad++ (Windows), IDE Netbeans, or Eclipse.

Who this book is for

This book is an ideal resource for people who like to add Ajax features to websites and who prefer standards and best practices for building SEO-friendly websites. As the book covers advanced topics, readers need to be aware of basic PHP, JavaScript, and XML features.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: We can include other contexts through the use of the include directive.

A block of code is set as follows:

if(isset($_GET[param])){

$result[status] = OK;

$result[message] = Input is valid!;

} else {

$result[status] = ERROR;

$result[message] = Input IS NOT valid!;

}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

$('#dob').datepicker({   numberOfMonths: 2

" });

Any command-line input or output is written as follows:

# cp /usr/src/asterisk-addons/configs/cdr_mysql.conf.sample

    /etc/asterisk/cdr_mysql.conf

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: clicking the Next button moves you to the next screen.

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <feedback@packtpub.com>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail .

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <copyright@packtpub.com> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <questions@packtpub.com> if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. AJAX Libraries

In