jQuery 1.3 with PHP

To read and work with this book's contents, it is expected that you are already a PHP developer with a basic understanding of JavaScript, and experience of HTML and CSS.

The book will not cover jQuery in depth—there are other books available that are dedicated to it. This book is designed to help a PHP developer write some immediately-useful client-side applications without needing weeks of study.

You need to understand how CSS selectors work. A CSS selector is the part of CSS that goes to the left of the { character. jQuery selects elements by using CSS selectors, and it's an extremely powerful way of choosing the elements that you wish to work on.

HTML is a must-have for every web developer. I think we can safely say that your HTML skills are not lacking, especially because that's the environment that PHP is usually working in.

Your PHP is expected to be good. You don't need to know everything about PHP, but it is beneficial if you have already written a few full PHP projects yourself and are comfortable with reading code and quickly understanding what it does.

You are not expected to be a good JavaScript writer. It will be useful, but the book is written such that beginners should not have a problem understanding how it all fits together. As a PHP developer, you will find that JavaScript is similar to PHP anyway, so you should not have a problem reading the examples and understanding them.

Syntactically, JavaScript and PHP are very similar. They're both loosely typed languages, and you can choose whether to write in an object-oriented or functional way.

However, there are some interesting differences, which a PHP developer may not have encountered before.

One example is asynchronous events. In PHP, everything happens linearly—when you call a function, the result is returned before the next line runs. However, in JavaScript, you can call some functions and have them return their results to a "callback" function a few seconds later.

The most obvious example is Ajax: when you request information from the server, it is bad design to have everything freeze while you're waiting for the data to return. Instead, you write your script such that the data is sent, and you carry on with other stuff. When the data returns, you handle it with another function.

This poses some interesting problems, such as race conditions, and how to pass variables through to remind the script what it was supposed to be doing when the Ajax request was fired.

A race condition occurs when one resource is accessed by two separate operations at the same time and one of them changes the value. This is because computers always do things one after the other; the change to the value will happen either before or after the other operation. This uncertainty means that in asynchronous systems, such as networks, care must be taken to make sure that things happen in the right order.

Race conditions are not a language-specific problem. They can happen anytime—say, when you open a file, work on it, and close it, only to find that at the time you were working on it, someone else came in and changed the name of the file. There are many ways of solving these problems depending on the nature of the case. The most common solution is to use a "lock", where if an operation is to write into a value, it will first "lock" it (usually by setting a flag variable or creating a .lock file) before it reads it, and then will "unlock" it (remove the file or unset the flag) after it has completed its work.

When an asynchronous function is called and its return value is sent to a callback function, that callback function must be reminded what the caller function was doing, so that it can carry on with it. This can be done using closures. With closures, the callback function is generated by the caller function, and has a copy of the caller's environment, including what variables were set, among other things. Later in the book, you will see some examples of this.

jQuery is a JavaScript library that makes it easy to work with the Document Object Model (DOM) of a website. jQuery is not a replacement for JavaScript. It is a JavaScript library, which gives some extra functionality that is not available natively in JavaScript itself.

jQuery is designed to make it easy to create, manipulate, or destroy elements in the document. Manipulation includes animation, CSS effects such as fades, resizes, and so on.

jQuery also makes it very easy to add behaviors to elements. So, you can do things like drag boxes around, have things happen when you hover a mouse cursor over something, have scripts run when a select box is changed, and so on.

All of this can be accomplished in plain JavaScript if you feel the need to write it yourself, but there is no point in re-inventing the wheel. If there is a tool available that makes things easier for you, then you should not do it the hard way.

Besides, handwritten JavaScript tends to be much more verbose than it could be if you used a library, such as jQuery.

As an example, let's say that you want to get all of the <span> elements in a page that are contained in an element with the testme class, and change their contents to the word hi!. Here is the HTML of the example:

<html>
  <head>
  </head>
  <body>
    <h1 class="testme"><span>this will change</span></h1>
    <p>this will not</p>
    <p class="testme">this will also not</p>
    <p class="testme"><span>this will change</span></p>
    <a href="javascript:run_test()">do it</a> 
  </body>
</html>

When displayed in a browser, it will look like the following:

When the do it link is clicked, we want the view to change to this:

For the first test, here is how to do it in plain JavaScript. Place this code in the <head> section of the previous HTML code.

<script> 
  function run_test(){ 
    var i,j,els,els2; 
    els=document.getElementsByTagName('*');
    for(i in els){
      if(!/(^| )testme( |$)/.test(els[i].className))continue;
      els2=els[i].getElementsByTagName('span'); 
      for(j in els2){ 
        els2[j].innerHTML='hi!';
      }
    }
  }
</script>

It would be difficult to write this more compactly in pure JavaScript, but it's still too complex to be maintainable. Really, if you saw that for the first time, would you know straight away what it was trying to do? And, can you be sure that it will work in all browsers?

With jQuery, you can write a much more readable piece of code. Replace the above JavaScript with this:

<script src="../jquery.min.js"></script> 
<script> 
  function run_test(){ 
    $('.testme span').html('hi!'); 
  } 
</script>

I know what you're thinking—where's the rest of it? Well, that's the whole thing. It very concisely strips away the confusion and all that you end up with is a very clear piece of code, which can be understood immediately. The problems of cross-browser compatibility are also solved by using the jQuery library. You can be sure that the new script will work as planned in all major browsers.

The example links to the jQuery library file, jquery.min.js, which you can download from http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js.

There are many libraries and frameworks available for JavaScript, including MooTools, Ext, Dojo, and Prototype. So, why use jQuery and not others? Here are some of the reasons:

jQuery is available at Google's Ajax Libs CDN (http://code.google.com/apis/ajaxlibs), so probably you already have it in your browser's cache.

There are benefits and detractors to everything. So in the end, it's a matter of taste.

In my case, I was using MooTools before I turned to jQuery, but MooTools' habit of extending every element it touches was interfering with my own code, so I had to replace it.

I chose jQuery because the body of knowledge on it was very large (every second article on JavaScript blogs appears to mention jQuery), it's impressively clean to work with, and there are a massive number of plugins available.

Also, because jQuery is used in so many large projects (a few of which are mentioned in the Projects that use PHP and jQuery section of this chapter). If you have ever worked on any of those projects, you will find that the skills you learned on them are transferable to other projects using jQuery.

Traditional network applications have both server and client side, each of which is a program in its own right.

As a very simple example, consider a networked game, where you are playing against a number of other people. The server holds a database of the present positions of everything, and decides if something is allowed or not. On each player's computer, there is a client, which gets data from the server and displays it in a user-friendly way, such as rendering a 3D world that you can move around in. The client is smart enough that if you try to do something that is obviously not allowed, such as run through a wall, then it won't let you.

It would be silly if a 3D screen was generated on the server and was sent to the client 24 times per second. And it would be awkward if you tried to do something like walk through a wall, and had to wait for the server to decide if it was allowed or not.

However, in a pure PHP environment, that's exactly what has been happening—the server generates absolutely everything that the client displays. If an element needs to be removed from a table, for example, then the server needs to be told, so that it can give the client the new view. If you try to do something illegal, such as submit a blank form where an email address is required, then pure PHP applications will let you do that, wasting time and server resources.

However, using JavaScript, and especially using Ajax, the client side is no longer a "dumb terminal" for the server. We can write applications fully on the client side, if we wish, using the server purely as a database. This book will demonstrate ways to work towards that.

Although Ajax stands for Asynchronous JavaScript And XML, it's a misnomer. This is because in most cases, no XML is involved (either plain HTML or data in JSON format is usually used). Ajax allows a client to open a data channel between itself and the server, allowing JavaScript to load new information from the server without needing to refresh the entire screen.

JSON stands for JavaScript Object Notation. It is a simple data storage format, which can be used to transfer information about strings, numbers, arrays, and associative arrays between various languages. It is much smaller than XML, and is much easier to transform because there is a direct relationship between the text format and the internal data format. It can be used in both PHP and JavaScript. It's based on how JavaScript is actually written, so it can be natively compiled into an object in JavaScript.

In JavaScript, you can create an actual data object from JSON by simply "eval"ing it (or using the new json.decode function in newer browsers). In PHP, you can use the json_decode and json_encode functions to convert from and to JSON.

With Ajax, we can provide a client-side experience, which had only been possible beforehand using external plugins, such as Java or Flash. It could not safely be assumed that these plugins were available on the client. Every major browser now supports Ajax, so there are much fewer reasons to rely on proprietary technology these days.

jQuery simplifies Ajax. With pure Ajax, you need to do low-level stuff like create an XMLHTTPRequest object (taking care of cross-browser incompatibilities), set callbacks, check response values, and so on. With jQuery, all you need to do is use $.get or one of the other jQuery JSON functions. These functions will take care of the low-level stuff for you.

In every chapter of this book, I will provide a few code examples. If you wish to try them out, you will need to replicate the test environment I'm using here.

On my test server, my directory layout (within the public_html directory) is like this:

./php_and_jquery
./php_and_jquery/jquery.min.js
./php_and_jquery/jquery-ui.css
./php_and_jquery/jquery-ui.min.js
./php_and_jquery/1-tests 
./php_and_jquery/2-contextual_help 
[... others from various chapters ...]
./php_and_jquery/ckeditor 
./php_and_jquery/images 
./php_and_jquery/jquery-validate 
[... other plugins ...]

You can see that there's a common theme—everything has its own subdirectory. The jQuery library is kept in the root directory, ./php_and_jquery/, along with the jQuery UI library (when we use it). We will discuss where to get these from in Chapter 2, Quick Tricks.

Here is the root directory of my own test server. It shows the libraries we will use throughout the book, and two test directories (9-5 and 9-4):

When creating your own test server, it should end up looking like this.

You can start out with the empty directories. Each chapter will explain what new files to download and where to get them from.

Each of the examples has a number of screenshots, so you can verify your own tests against what my tests display.

Here is a small list of projects that use jQuery along with PHP. This illustrates the variety of uses that jQuery is put to.

WordPress

WordPress (http://wordpress.org/) is probably the best-known blogging software on the net. Recently, the admin dashboard area was given a thorough going over, and is now extremely flexible with the areas you can move around or remove, a navigation menu you can hide at the click of a button, and other improvements. jQuery is used to handle autosaves, word counts, and much more.

RoundCube

RoundCube (http://roundcube.net/) allows you to read your emails online using an application designed to look similar to your normal email client. With jQuery, the engine allows emails to be removed, moved around, and so on, without reloading the whole page.

KFM

I'm proud to say that this is one of my own projects. KFM (http://kfm.verens.com/) is a file manager, which allows you to upload, sort, and rename (and more) your files online. You can even edit text files or play media files. The project is designed to look like a desktop file manager, complete with file icons, tree directory, and so on. jQuery is used for most of it.

Drupal

Drupal (http://drupal.org/) is a Content Management System. Since version 5, jQuery has been included as part of the core. It's more prominently used in some of the modules, but some core functionality, such as story creation is enhanced by allowing text boxes to be re-sized, optional sections to be hidden/shown, and so on.

Now, without further ado, let's get on with the fun stuff.

In this chapter, we discussed what jQuery is, why you would want to use it, and why is it useful to combine it with PHP.

We also saw a list of projects illustrating some uses for combining PHP and jQuery.

In the next chapter, we will look at a few examples of how you can use jQuery immediately to give your site a more "live" feel, without needing to know a lot of JavaScript.