AJAX and PHP Building Responsive Web Applications by Cristian Darie, Bogdan Brinzarea Chapter 10

AJAX Drag and Drop

When drag-and-drop capability was first introduced to websites, people looked at it with astonishment. This was really a great feature to provide via your website! Since then, JavaScript has evolved in people's eyes from a "check-out-that-snow-on-my-website" scripting language to a standardized and powerful "do-powerful-stuff-with-it" language.

Many frameworks and JavaScript toolkits have been developed, with new ones appearing frequently. script.aculo.us is one of the most popular JavaScript toolkits, and it allows implementing amazing effects in web pages—check out the examples on its official web page at http://script.aculo.us/. Script.aculo.us is an open-source JavaScript framework, distributed under an MIT-style license, so you can use it for anything you like, as long as you include the copyright notice. You can download script.aculo.us from http://script.aculo.us/downloads. Check out the documentation on http://wiki.script.aculo.us

In this chapter, you will learn how to integrate script.aculo.us features into your website, by building an AJAX database-enabled sortable list.

Using Drag and Drop on the Web
While exploring some existing web applications with drag-and-drop capability, we found out that there are at least two situations where drag and drop smoothes up the user interface and the interactivity between human and machine. Drag and drop can be successfully used in:

• Shopping carts
• Sortable lists

Shopping Carts
You're probably familiar with traditional e-commerce websites. In the light of the new AJAX boom, a new generation of shopping carts has appeared, where visitors have to use drag and drop to add products to their carts, instead of clicking an "Add to Cart" button. While one could argue
the real usefulness of this "feature" (my grandmother still prefers the button, she doesn't know how to drag and drop), the visual effect is pretty impressive.

A few websites have already put this into practice. One such example is Panic Goods—selling t-shirts! The URL for this is: http://www.panic.com/goods.

Notice the light blue bar on the bottom of the screen? That's the actual shopping cart. Just drag some t-shirts from the catalog, and drop them into the shopping cart, to see how the cart performs. Products are lined up in the cart and it's easy to see what you have chosen and for what amount. Drag items outside the light blue bar to remove them from the cart. Pretty impressive, isn't it?

Sortable Lists
There's a type of list we probably use daily, namely, a to-do list. We usually use yellow Post-its and some of us even use specialized software.

But with so many new web applications available out there, surely there must be a dozen to-do list applications! I'll just mention Ta-da Lists (http://www.tadalist.com), created by 37signals.
This company has actually reinvented the entire concept of web applications and has taken it to the next level. Ta-da Lists, one of its first products, is a tool that allows you to create several to-do
lists, each with its own items (things to do, that is). It's a really helpful tool and a lot of people use it, although most of them have upgraded to other 37signals products like Basecamp
(http://www.basecamphq.com) and Backpack (http://www.backpackit.com).

Despite its intuitive user interface and easy-to-use actions, Ta-da Lists lacks a very basic feature that would greatly increase its usability: dragging and dropping list items, thus reordering the list. To reorder a list in Ta-da Lists, you have to click on a link that will refresh the page and display four arrow buttons (bring to front, move up, move down, and send to back).

Although this implementation works well, a drag-and-drop system would make it faster and easier to use. 37signals have improved this functionality in Basecamp, though, and the to-do lists in there have draggable items—an upgrade that proves the usability of the drag-and-drop concept.

Building the AJAX Drag-and-Drop Sortable List
Application
One thing that sets this application apart from other applications we've built in this book is that in this case, we are going to use two external JavaScript frameworks: Prototype and script.aculo.us.

"Prototype is a JavaScript framework that aims to ease development of dynamic web applications." It was created by Sam Stephenson and is quickly becoming the JavaScript framework, because of its great functionality.

Prototype is distributed under an MIT-style license and it can be downloaded from
http://prototype.conio.net.

If you want to learn more about Prototype, check out the tutorial on
http://www.particletree.com/features/quick-guide-to-prototype.

The Prototype features are:

• Complete object-orientation
• Utility functions
• Form helper functions
• AJAX support
• Periodical executer

Another pioneer of JavaScript development is Thomas Fuchs, the man who built the great JavaScript library—script.aculo.us—a library that provides spectacular visual effects. We'll be using some of these features in our drag-and-drop application (more specifically, the dragging and dropping features). Script.aculo.us is built on top of Prototype, thus inheriting all Prototypes' features.

Features of Script.aculo.us are:

• Complete object-orientation
• Visual effects (fade in, fade out, grow, shrink, blind down, blind up, shake, etc.)
• Drag-and-drop support
• Autocompletion
• In-place editing
• Slider controls

The application we're about to build will be a small task management application and will allow us to create new tasks, reorder existing tasks, and delete tasks. Summarizing the features:

• Database back end
• Drag-and-drop items
• Add new tasks with AJAX
• Instant database update when drag and dropping
• Delete a task by dragging and dropping it into a special designated area

Let's take a look at how this is going to look:

Figure 10.1: Add, Reorder, and Delete Tasks, in a Simple Visual Interface

Dragging items around the screen makes the other items switch positions.

When dropping a task on the DROP HERE TO DELETE area, a confirmation is required before the application proceeds with the actual deletion; as shown in the following figure:

Figure 10.2: Confirmation Required Before Deleting a Task

Time for Action—Task Management Application with AJAX
1. Connect to the ajax database, and create a table named tasks with the following code:
CREATE TABLE tasks (
id INT UNSIGNED NOT NULL AUTO_INCREMENT,
order_no INT UNSIGNED NOT NULL default '0', description VARCHAR(100) NOT NULL default '', PRIMARY KEY (id)
);

2. In your ajax folder, create a new folder named drag-and-drop.
3. In the drag-and-drop folder, create a file named config.php, and add the database configuration code to it:
<?php
// defines database connection data
define('DB_HOST', 'localhost'); define('DB_USER', 'ajaxuser'); define('DB_PASSWORD', 'practical'); define('DB_DATABASE', 'ajax');
?>

4. Now add the standard error-handling file, error_handler.php. Feel free to copy this file from previous chapters. Anyway, here's the code for it:
<?php
// set the user error handler method to be error_handler
set_error_handler('error_handler', E_ALL);

// error handler function
function error_handler($errNo, $errStr, $errFile, $errLine)
{
// clear any output that has already been generated
if(ob_get_length()) ob_clean();
// output the error message
$error_message = 'ERRNO: ' . $errNo . chr(10) .
'TEXT: ' . $errStr . chr(10) .
'LOCATION: ' . $errFile .
', line ' . $errLine;
echo $error_message;
// prevent processing any more PHP scripts exit;
}
?>

5. Download the script.aculo.us library from http://script.aculo.us/downloads and unzip/untar the downloaded archive to your drag-and-drop folder. Change the script.aculo.us folder name from something like scriptaculous-js-x.y.z to simply scriptaculous.
6. Create a new file named index.php, and add this code to it:
<?php
require_once ('taskslist.class.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Drag and Drop Sortable List</title>
<link href="drag-and-drop.css" rel="stylesheet" type="text/css" />
<script src="drag-and-drop.js" type="text/javascript"></script>
<script src="scriptaculous/lib/prototype.js" type="text/javascript">
</script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript">
</script>
</head>
<body onload="startup()">
<h1>Task Management</h1>
<h2>Add a new task</h2>
<div>
<input type="text" id="txtNewTask" name="txtNewTask"
size="30" maxlength="100" onkeydown="handleKey(event)"/>
<input type="button" name="submit" value="Add this task" onclick="process('txtNewTask', 'addNewTask')" />
</div>
<br />
<h2>All tasks</h2>
<ul id="tasksList" onmouseup="process('tasksList', 'updateList')">
<?php
$myTasksList = new TasksList();
echo $myTasksList->BuildTasksList();
?>

</ul>
<br /><br />
<div id="trash">
DROP HERE TO DELETE
<br /><br />
</div>
</body>
</html>

7. Create a new file named taskslist.class.php, and add this code to it:
<?php
// load error handler and database configuration
require_once ('error_handler.php');
require_once ('config.php');

// This class builds a tasks list and
// performs add/delete/reorder actions on it class TasksList
{
// stored database connection private $mMysqli;

// constructor opens database connection function __construct()
{
// connect to the database
$this->mMysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD,
DB_DATABASE);
}

// destructor closes database connection public function __destruct()
{
$this->mMysqli->close();
}

// Builds the tasks list
public function BuildTasksList()
{
// initialize output
$myList = '';
// build query
$result = $this->mMysqli->query('SELECT * FROM tasks ' .
'ORDER BY order_no ASC');
// build task list as <li> elements
while ($row = $result->fetch_assoc())
{
$myList .= '<li id="' . htmlentities($row['id']) . '">' .
htmlentities($row['description']) . '</li>';
}
// return the list
return $myList;
}

// Handles the server-side data processing public function Process($content, $action)
{
// perform action requested by client switch($action)
{
// Reorder task list case 'updateList':
// retrieve update details
$new_order = explode('_', $content);
// update list

for ($i=0; $i < count($new_order); $i++)
{
// escape data received from client
$new_order[$i] =
$this->mMysqli->real_escape_string($new_order[$i]);
// update task
$result = $this->mMysqli->query('UPDATE tasks SET order_no="' .
$i . '" WHERE id="' . $new_order[$i] . '"');
}
$updatedList = $this->BuildTasksList();
return $updatedList;
break;

// Add a new task case 'addNewTask':
// escape input data
$task = trim($this->mMysqli->real_escape_string($content));
// continue only if task name is not null if ($task)
{
// obtain the highest order_no
$result = $this->mMysqli->query('SELECT (MAX(order_no) + 1) ' .
'AS order_no FROM tasks');
$row = $result->fetch_assoc();
// if the table is empty, order_no will be null
$order = $row['order_no'];
if (!$order) $order = 1;
// insert the new task as the bottom of the list
$result = $this->mMysqli->query
('INSERT INTO tasks (order_no, description) ' .
'VALUES ("' . $order . '", "' . $task . '")');
// return the updated tasks list
$updatedList = $this->BuildTasksList();
return $updatedList;
}
break;

// Delete task case 'delTask':
// escape input data
$content = trim($this->mMysqli->real_escape_string($content));
// delete the task
$result = $this->mMysqli->query('DELETE FROM tasks WHERE id="' .
$content . '"');
$updatedList = $this->BuildTasksList();
return $updatedList;
break;
}
}
}
?>

8. Create a new file named drag-and-drop.php, and add this code to it:
<?php
// load helper class
require_once ('taskslist.class.php');
// create TasksList object
$myTasksList = new TasksList();
// read parameters
$action = $_GET['action'];
$content = $_GET['content'];
// clear the output if(ob_get_length()) ob_clean();
// headers are sent to prevent browsers from caching

header('Expires: Fri, 25 Dec 1980 00:00:00 GMT'); // time in the past header('Last-Modified: ' . gmdate( 'D, d M Y H:i:s') . 'GMT'); header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
header('Content-Type: text/html');
// execute the client request and return the updated tasks list echo $myTasksList->Process($content, $action);
?>

9. Create a new file named drag-and-drop.js, and add this code to it:
// holds an instance of XMLHttpRequest
var xmlHttp = createXmlHttpRequestObject();
// when set to true, display detailed error messages var showErrors = true;
// initialize the requests cache
var cache = new Array();

// creates an XMLHttpRequest instance function createXmlHttpRequestObject()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// this should work for all browsers except IE6 and older try
{
// try to create XMLHttpRequest object xmlHttp = new XMLHttpRequest();
}
catch(e)
{
// assume IE6 or older
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP");
// try every prog id until one works
for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
{
try
{
// try to create XMLHttpRequest object
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
}
catch (e) {} // ignore potential error
}
}
// return the created object or display an error message if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}

// function that displays an error message function displayError($message)
{
// ignore errors if showErrors is false if (showErrors)
{
// turn error displaying Off showErrors = false;
// display error message
alert("Error encountered: \n" + $message);

}
}

// Scriptaculous-specific code to define a sortable list and a drop zone function startup()
{
// Transform an unordered list into a sortable list with draggable items
Sortable.create("tasksList", {tag:"li"});

// Define a drop zone used for deleting tasks
Droppables.add("trash",
{
onDrop: function(element)
{
var deleteTask =
confirm("Are you sure you want to delete this task?")
if (deleteTask)
{

}
}
});
}

Element.hide(element);
process(element.id, "delTask");

// Serialize the id values of list items (<li>s)
function serialize(listID)
{
// count the list's items
var length = document.getElementById(listID).childNodes.length;
var serialized = "";
// loop through each element
for (i = 0; i < length; i++)
{
// get current element
var li = document.getElementById(listID).childNodes[i];
// get current element's id without the text part var id = li.getAttribute("id");
// append only the number to the ids array serialized += encodeURIComponent(id) + "_";
}
// return the array with the trailing '_' cut off return serialized.substring(0, serialized.length - 1);
}

// Send request to server
function process(content, action)
{
// only continue if xmlHttp isn't void if (xmlHttp)
{
// initialize the request query string to empty string params = "";
// escape the values to be safely sent to the server content = encodeURIComponent(content);
// send different parameters depending on action
if (action == "updateList")
params = "?content=" + serialize(content) + "&action=updateList";
else if (action == "addNewTask")
{
// prepare the task for sending to the server var newTask =
trim(encodeURIComponent(document.getElementById(content).value));
// don't add void tasks if (newTask)
params = "?content=" + newTask + "&action=addNewTask";

}
else if (action =="delTask")
params = "?content=" + content + "&action=delTask";
// don't add null params to cache if (params) cache.push(params);

// try to connect to the server try
{
// only continue if the connection is clear and cache is not empty if ((xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
&& cache.length>0)
{
// get next set of values from cache
var cacheEntry = cache.shift();
// initiate the request
xmlHttp.open("GET", "drag-and-drop.php" + cacheEntry, true);
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
}
else
{
setTimeout("process();", 1000);
}
}
// display the error in case of failure catch (e)
{
displayError(e.toString());
}
}
}

// function that retrieves the HTTP response function handleRequestStateChange()
{
// when readyState is 4, we also read the server response if (xmlHttp.readyState == 4)
{
// continue only if HTTP status is "OK" if (xmlHttp.status == 200)
{
try
{
postUpdateProcess();
}
catch(e)
{
// display error message displayError(e.toString());
}
}
else
{
displayError(xmlHttp.statusText);
}
}
}
// Processes server's response function postUpdateProcess()
{
// read the response
var response = xmlHttp.responseText;
// server error?

if (response.indexOf("ERRNO") >= 0 || response.indexOf("error") >= 0)
alert(response);
// update the tasks list document.getElementById("tasksList").innerHTML = response; Sortable.create("tasksList"); document.getElementById("txtNewTask").value = ""; document.getElementById("txtNewTask").focus();
}
/* handles keydown to detect when enter is pressed */
function handleKey(e)
{
// get the event
e = (!e) ? window.event : e;
// get the code of the character that has been pressed
code = (e.charCode) ? e.charCode : ((e.keyCode) ? e.keyCode : ((e.which) ? e.which : 0));
// handle the keydown event if (e.type == "keydown")
{
// if enter (code 13) is pressed if(code == 13)
{
// send the current message process("txtNewTask", "addNewTask");
}
}
}

/* removes leading and trailing spaces from the string */
function trim(s)
{
return s.replace(/(^\s+)|(\s+$)/g, "")
}

10. Create a new file named drag-and-drop.css, and add this code to it:
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
ul.sortableList
{
list-style-type: none;
padding: 0px;
margin: 0px;
width: 300px;
}
ul.sortableList li
{
cursor: move;
padding: 2px 2px;
margin: 2px 0px;
border: 1px solid #00CC00;
background-color: #F4FFF5;
}
h1
{
border-bottom: 1px solid #cccccc;
}
#trash
{
border: 4px solid #ff0000;
width: 270px;
padding: 10px;
}

11. Load http://localhost/ajax/drag-and-drop in your web browser and test its functionality to make sure it works as expected (see Figures 10.1 and 10.2 for reference).

What Just Happened?
Adding a task is performed as mentioned in the following steps:
1. The user enters task.
2. When the user clicks on Add this task button or presses Enter, the data is sent to the server with an asynchronous HTTP request. The server script inserts the new task into the database, and returns the updated list, which is then injected into the code with JavaScript.

When reordering the list, this is what happens:
1. Every task is an XHTML list element: an <li>. The user begins dragging an item; on dropping it, an HTTP request is sent to the server. This request consists of a
serialized string of IDs, every list element's ID.
2. On the client you'll see the list reordered, while the server updates the order of each element in the database.

This is how deleting a task works:

1. The user drags an item and drops it on the DROP HERE TO DELETE area.
2. An HTTP request is sent to the server, which performs the task deletion from the database and the XHTML element is instantly destroyed.

We include in index.php the JavaScript libraries we'll be using:

<script src="drag-and-drop.js" type="text/javascript"></script>
<script src="scriptaculous/lib/prototype.js" type="text/javascript">
</script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript">
</script>

The first line includes our custom functions and AJAX-related tasks. The second line includes the
Prototype library, while the third line includes the script.aculo.us library.

The onload event inside the <body> tag calls the startup() function, which defines the unordered list with id="tasksList" as a sortable element (Sortable.create). This ensures drag-and-drop functionality for <li> elements inside the list. The startup() function also defines a droppable element Droppables.add; we use this as an area where we delete tasks.

Also, inside the startup() function, we define a behavior for dropping a list item on the drop zone:

onDrop: function(element)
{
var deleteTask = confirm("Are you sure you want to delete this task?")
if (deleteTask == true)
{
Element.hide(element);
process(element, "delTask");
}
}

This code asks the user for confirmation, and if this is received hides that element from the screen and calls process, which sends the HTTP request.

In index.php, there's a small block of code that dynamically creates the tasks list:

<ul id="tasksList" onmouseup="process('tasksList', 'updateList')">
<?php
$myTasksList = new TasksList();
echo $myTasksList->BuildTasksList();
?>
</ul>

A new task is added by clicking on the Add this task button or by pressing the Enter key.

The actual AJAX request is sent by the process function. This function handles the sending of requests for all three actions (reorder list / add task / delete task), by specifying the action to be performed as a parameter.

When adding a new task, the first parameter of the process function is the ID of the text field in which we've just typed a new task.

<input type="button" name="submit" value="Add this task" onclick="process('txtNewTask', 'addNewTask')" />

The database update after list reordering is triggered by an onmouseup event inside the unordered list with id="tasksList"—our sortable list. The event calls the process function, which takes as its first parameter the list's ID.

<ul id="tasksList" onmouseup="process('tasksList',
'updateList')">

Because we'll be sending an array of values to the server, we need to serialize that data and we do this through serialize, our home-made function. This function counts how many <li> elements we've got, then loops through each one of them and add its ID to the string. We also need to cut off the trailing '_' on the returned value.

function serialize(listID)
{
// count the list's items
var length = document.getElementById(listID).childNodes.length;
var serialized = "";
// loop through each element for (i = 0; i < length; i++)
{
// get current element
var li = document.getElementById(listID).childNodes[i];
// get current element's id without the text part
var id = li.getAttribute("id");
// append only the number to the ids array serialized += encodeURIComponent(id) + "_";
}
// return the array with the trailing '_' cut off return serialized.substring(0, serialized.length - 1);
}

Remember that XMLHttpRequest cannot make two HTTP requests at the same time, so if the object is busy processing a previous request, we save the details of the current request for later. This is particularly useful when the connection to the network or the Internet is slow. The request

details are saved using a cache system with the properties of a FIFO structure. Luckily, the JavaScript's Array class offers the exact functionality we need (through its push and shift methods), and hence we use it for caching purposes:

var cache = new Array();

So, in process(), before sending a new request to the server, we save the current request to the cache.
// only continue if xmlHttp isn't void if (xmlHttp)
{
if (action)
cache.push(content + "&" + action);

This adds a new element at the end of our cache array, an element that is created of two parts, a content (the ID of an HTML element) and an action to be performed by the server, separated by
'&'. Note that the new element is added only if action is not null, which happens when the
function is called not upon user's request, but to check if there are any pending actions to be made.

Afterwards, if the XMLHttpRequest object is free to start making other calls, we use shift() to get the last action from the cache and perform it. Note that, however, this value may not be the one
just added using push—in FIFO scenarios, the oldest record is processed first.

// try to connect to the server try
{
// continue only if the XMLHttpRequest object isn't busy
// and the cache is not empty
if ((xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
&& cache.length>0)
{
// get next set of values from cache
var cacheEntry = cache.shift();

If the HTTP status is 0 or 4 it means that there are no active requests and we can send a new request. To send a new request we first read the data back from the cache, and split the current entry into two variables:

// split the array element
var values = cacheEntry.split("&");
content = values[0];
action = values[1];

Depending on these variables, we'll be sending different values as parameters:

// send different parameters depending on action if (action == "updateList")
params = "content=" + serialize(content) + "&action=updateList";
else if (action == "addNewTask")

params = "content=" + document.getElementById(content).value + "&action=addNewTask";
else if (action =="delTask")
params = "content=" + content + "&action=delTask";

These pieces of data are then used to make the server request:

xmlHttp.open("POST", "drag-and-drop.php", true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(params);

The server's response is handled by the handleRequestStateChange function, which in turn calls postUpdateProcess(). Here we retrieve the server's response, which will either be an error message or a string containing HTML code for the updated list:

// read the response
var response = xmlHttp.responseText;
// server error?
if (response.indexOf("ERRNO") >= 0 || response.indexOf("error") >= 0)
alert(response);
// update the tasks list
document.getElementById("tasksList").innerHTML = response; Sortable.create("tasksList"); document.getElementById("txtNewTask").value = ""; document.getElementById("txtNewTask").focus();
The last two lines of code clear the "new task" text field and set the cursor focus on that field. The drag-and-drop.php script is really light. We include taskslist.class.php, initiate a new
TasksList object and return the updated list after we call the class method Process, which will
perform one of the three possible actions: add task, reorder list, or delete task.

The taskslist.class.php file is the class we're using to perform server-side actions on our tasks list. Its constructor creates a database connection. Then, we have other two public methods:

• BuildTasksList creates list items with each task;
• Process takes two parameters, $content and $action. The first parameter holds user data and depends on the other parameter, which tells the script what actions should be performed.

When updating the list (case 'updateList'), we extract the values from the $content array, which holds a serialized string of the new order of <li> elements—the tasks, that is. Next we loop through extracted values and update the database.

To add a new task, we first escape user input with the mysqli method real_escape_string. Next, we need to get from the database the greatest order number that exists and increment it. This will be our new task's order number. We then insert the task in the database and return a string containing the order number and the task's description. This is sent back to the client, which will build a new list element, based on the received data.

When deleting a task (case 'delTask') is required, the only thing we do is delete the task from the database.

Every method returns a string with the new task list, namely a string of <li> elements.

Always filter user data

If you want to save yourself from a lot of trouble you should always filter user input. We used JavaScript's encodeURIComponent function when sending data to the server. On the server, we used the real_escape_string method of the mysqli object, to prevent SQL injection. Also on the server, we used the htmlentities PHP function to prepare the text that we send back to the client.

Summary
This is it! You've now got a working task management application with drag-and-drop support—all this with writing only a small amount of code. The next step in developing this application would be to make each task editable by double-clicking on it. script.aculo.us provides a great way of doing this with Ajax.InPlaceEditor. Check out the documentation on http://wiki.script.aculo.us/ scriptaculous/show/Ajax.InPlaceEditor for more information on how to accomplish this.

Another practical application for sortable lists would be in a Content Management System (CMS)—to manage the order of pages, projects, products, news, etc. In the end, it all depends on your imagination and how far you are willing to go to create great user interfaces.

A
Preparing Your Working
Environment

In order to avoid any headaches while going through the case studies in this book, it's best to install the necessary software and configure your environment the right way from the start. Although we assume you already have some experience developing PHP applications, we'll quickly go through the steps to install your machine with the necessary software.

The good news is that all the required software is free, powerful, and (finally!) comes with installers that make the programs easy for anyone to set up and configure. The bad news is that there are many possible configurations, so the instructions written might not apply 100% to you (for example, if you are using Windows, you may prefer to use IIS instead of Apache, and so on).

We'll cover the installation instructions separately for Windows and *nix based machines. We'll also cover preparing the database that is used in many examples throughout the book; these instructions apply to both Windows and *nix users, so be sure not to miss this section at the end of the appendix.

To build websites with AJAX and PHP you will need (quite unsurprisingly) to install PHP. The preferred version is PHP 5, because we use some of its features in Chapter 11. You also need a web server. We will cover installing Apache, which is the web server preferred by most PHP developers and web hosting companies. Because we've tried to make the examples in this book as relevant as possible for real-world scenarios, many of them need a database. We cover installing MySQL, which is the most popular database server in the PHP world. Because we used simple SQL code, you can easily use another database server without major code changes, or older versions of MySQL.

At the end of this chapter, we'll cover installing phpMyAdmin, which is a very useful web tool for administering your databases. You'll then learn how to use this tool to create a new database, and then a database user with full privileges to this database.

In the following pages, you'll learn how to:

• Install Apache 2, PHP 5, and MySQL 5 on your Windows machine
• Install Apache 2, PHP 5, and MySQL 5 on your *nix machine
• Install phpMyAdmin
• Create a new database and then a database user using phpMyAdmin

TIP

Programmers who don't want to install the required software manually have the option of using a software package such as XAMPP, which bundles all of them (and many more) in a single installer file. XAMPP is packaged for Linux, Windows, Mac OS X, and Solaris, and is free of charge. You can get XAMPP from http://www.apachefriends.org/ en/xampp.html.

If you decide to use XAMPP, you can skip directly to setting up the ajax database, as shown at the end of this appendix.

Preparing Your Windows Playground
Here we cover installing these software products in your Windows machine:

• Apache 2
• PHP 5
• MySQL 5

Installing Apache
You can download the latest MSI Installer version of the Apache HTTP Server from http://httpd.apache.org/download.cgi. Download the latest Win32 Binary (MSI Installer), which should have a name like apache_2.x.y-win32-x86-no_ssl.msi, then execute it.

The default installation location of Apache 2 is C:\Program Files\Apache Group\Apache2\, but the installer allows you to specify a different path. You can choose a more convenient location (such as C:\Apache), which can make your life working with Apache easier.

During installation you'll be asked to enter your server's information:

Figure A.1: Installing Apache 2.0

If you're not sure about how to complete the form, just type localhost for the first two fields, and write your email address for the last. You can change this information later by editing the Apache configuration file. The default location of this file is C:\Program Files\Apache Group\Apache2\ conf\httpd.conf.

You can also choose to install Apache on Port 80, or on Port 8080. The default port is 80, but if you already have a web server (such as IIS) on your machine, you'll need to install Apache on a different port. If you choose to run Apache on Port 8080, you will need to start the Apache service manually by going to the Apache bin folder (by default C:\Program Files\Apache Group\ Apache2\bin), and typing

apache -k install

When the web server runs on a port different than 80, you need to specify the port manually when making HTTP requests, such as in http://localhost:8080/ajax/suggest.

In the next setup screens, you can safely use the default options.

Along with the Apache server the installer will also start the Apache Service Monitor program, which is available from the taskbar. The taskbar icon reflects the current state of the web server (stopped, running, etc.), and also allows you to start, stop, or restart the Apache service.

Keep in mind that you'll need to restart (or stop and then start) the Apache service after making any changes to the httpd.conf configuration file, in order for the changes to become effective.

After installing Apache 2, make sure it works OK. If you installed it on port 80, browse to http://localhost/. If you installed it on 8080, go to http://localhost:8080/. You should see an Apache welcome message similar to this:

Figure A.2: Apache Installed Successfully

Installing MySQL
The official website of MySQL is http://www.mysql.com. At the time of this writing the latest stable version is MySQL 5.0, and you can download it from http://dev.mysql.com/downloads/ mysql/5.0.html. However, it's good to know that we made our SQL queries compliant with the SQL 92 standard, so you should be able to reuse them with other database systems with minimum of translation effort.

In the Downloads page, scroll down to the Windows downloads section, and download the Windows Essentials file. You'll be asked to choose a mirror site, and the file will be named something like mysql-essential-5.0.xx-win32.msi. After downloading the file, simply execute it to install your MySQL Server.

After installation you'll be given the chance to configure your server. Do so. It's safe to use the default options all the way through. At some point you'll need to set the root password, which will correspond to the root@localhost user. Choose a password that's complicated enough for others not to guess and simple enough for you to remember.

Before going through any case studies in this book, remember to see the Preparing the AJAX Database section at the end of this appendix.

Installing PHP
The official website of PHP is http://www.php.net. Start by downloading from the Windows Binaries section the latest PHP 5 zip package (not the installer!) from http://www.php.net/ downloads.php. We prefer not to use the installer because it doesn't include extensions that you may need for your projects, and it doesn't do much configuration work for you anyway.

After you download the Windows binaries, follow these steps to install PHP:

1. Unzip the zip package (it should be a file with a name like php-5.x.y-win32.zip) into a folder named C:\PHP\. You can choose another name or location for this folder if you want.
2. Copy php.ini-recommended from C:\PHP\ to your Windows folder (C:\Windows), renaming it as php.ini.
3. Open php.ini for editing with the text editor of your choice (such as Notepad) and uncomment the php_gd2.dll, php_mysql.dll, and php_xsl.dll extension lines (by removing the leading semicolons), and add a similar line for php_mysqli:
extension=php_gd2.dll extension=php_mysql.dll extension=php_mysqli.dll extension=php_xsl.dll

4. We recommend enabling full error reporting for PHP on the development machine, but this is optional (this option is the default). Be warned that this change can alter the functionality of other scripts on your server. Find the error_reporting line in php.ini and change it to:
error_reporting = E_ALL

5. Copy php5ts.dll and libmysql.dll located in C:\PHP\, to the Windows System32
folder (by default \Windows\System32).
6. Copy php_mysql.dll, php_mysqli.dll, php_xsl.dll, and php_gd2.dll from
C:\PHP\ext, to the Windows System32 folder.
7. Open the Apache configuration file for editing. By default, the location of this file is
C:\Program Files\Apache Group\Apache2\conf\httpd.conf.
8. In httpd.conf, find the portion with many LoadModule entries, and add the following lines:
LoadModule php5_module c:/php/php5apache2.dll
AddType application/x-httpd-php .php

9. Also in httpd.conf, find the DirectoryIndex entry, and add index.php at the end of the line, like this:
DirectoryIndex index.html index.html.var index.php

10. Save the httpd.conf file, and then restart the Apache 2 service, using the Apache Service Monitor by clicking its icon in the Notification Area of the taskbar. (If you get any error at this point, make sure that you followed correctly all the previous steps of the exercise.) If Apache restarts without generating any errors, that is a good sign.

11. Create a folder called ajax under the htdocs folder (by default C:\Program Files\ Apache Group\Apache2\htdocs).
12. To make sure that your Apache instance can also correctly parse PHP code, create a file named test.php in the ajax folder, and then add the following code to it:
<?php phpinfo();
?>

13. Point your web browser to http://localhost/ajax/test.php (or
http://localhost:8080/ajax/test.php if you installed Apache to work on port
8080) to test if everything went OK with the installation. You should get a page like this:

Figure A.3: PHP Installation Working

Congratulations, you just finished installing Apache, MySQL, and PHP!

The configuration set up isn't yet finished. If you're running Windows (and you probably are, since you're reading this), please skip the Preparing Your *nix Playground section, and go through the Installing phpMyAdmin and Preparing the AJAX Database sections at the end of this appendix.

Preparing Your *nix Playground
Almost all the UNIX and Linux distributions include Apache, PHP, and MySQL; however, you should check the versions of these programs. It would be good to have MySQL 4.1 or newer, and it's very important to have at least PHP 5. The code in this book will not work with older versions of PHP.

Installing Apache
To install Apache on your Unix-based server, follow these simple steps:

1. First, download the latest Apache Unix Source code for your system from http://httpd.apache.org/download.cgi and decompress it with a command such as:
tar -zxvf httpd-2.0.55.tar.gz

2. To compile and install the Apache Web Server on your system, go to the folder containing the sources and execute the following commands, while logged in as root:

./configure --prefix=/usr/local/apache2 --enable-so --enable-ssl --with- ssl --enable-auth-digest

make

make install

Installing MySQL
The official website of MySQL is http://www.mysql.com. At the time of this writing the latest stable version is MySQL 5.0, and you can download it from http://dev.mysql.com/downloads/ mysql/5.0.html. However, it's good to know that we made our SQL queries compliant with the SQL 92 standard, so you should be able to reuse them with other database systems with minimum of translation effort. Chapter 2 of the MySQL 5 manual covers installation procedures for all supported platforms, and you can read it here: http://dev.mysql.com/doc/refman/5.0/ en/installing.html.

If your Linux distribution supports RPMs, you'll need to download the RPMs for Server, Client programs, and Libraries and header files. Install MySQL as explained in the manual at http://dev.mysql.com/doc/refman/5.0/en/linux-rpm.html. If your platform doesn't support RPMs, install MySQL as explained at http://dev.mysql.com/doc/refman/5.0/en/installing- binary.html.

After installing MySQL, you should change the MySQL administrator's password (the root@localhost user), which is blank by default. Read more about MySQL passwords at http://dev.mysql.com/doc/mysql/en/Passwords.html. One way to change root's password is to execute:

mysqladmin -u root password 'your_new_password.'

Alternatively, you can access MySQL through a console program or by using a database administration tool such as phpMyAdmin, and execute this command:

SET PASSWORD FOR root@localhost=PASSWORD('your_new_password');

You can now test your MySQL server by executing the following command in your console:

#mysql -u root -p

Installing PHP
Every time you want to get a new PHP library working on Linux, you need to recompile the PHP module. That's why it's recommended to make a good compilation, with all the needed libraries, from the start.

1. Go to http://www.php.net/downloads.php and get the complete source code archive of PHP 5.x and extract the contents into a directory. At the time of writing, the latest PHP version was 5.1.2.
2. Go to the folder where you extracted the PHP source and execute the following commands:
./configure --with-config-file-path=/etc --with-mysql=/usr/include/mysql
--with-apxs2=/usr/local/apache2/bin/apxs --with-zlib --with-gd --with-xsl

make

make install

If you are compiling PHP for XAMPP, you need to use the following configure
command instead:

./configure --with-config-file-path=/opt/lampp/etc --with-mysql=/opt/lampp
--with-apxs2=/opt/lampp/bin/apxs --with-zlib --with-gd

After executing make and make install, you need to copy the newly created
php_src/libs/libphp5.so file to /opt/lampp/modules/libphp5.so.

3. Copy php.ini-recommended to /etc/php.ini by executing the following command:
cp php.ini-recommended /etc/php.ini.

4. Open the Apache configuration file (httpd.conf), find the DirectoryIndex entry, and make sure you have index.php at the end of the line:
DirectoryIndex index.html index.html.var index.php

5. Restart your Apache Web Server using the following command:
/usr/local/apache2/bin/apachectl restart

6. Create a folder called ajax under the htdocs folder (by default /usr/local/
apache2/htdocs/).
7. To make sure your PHP installation works, create a file named test.php in the ajax
folder you've just created, with the following contents in it:
<?php phpinfo();
?>

8. Finally, point your web browser to http://localhost/test.php, to ensure PHP
was correctly installed under Apache (you should get a page similar to Figure A.3).

Installing phpMyAdmin
phpMyAdmin is a very popular MySQL administration tool written in PHP. It allows you to manage your MySQL databases using a simple-to-use web interface. The official web page is http://www.phpmyadmin.net. Follow these steps to install and configure this program:

1. Start by downloading the latest version of phpMyAdmin from http://www.phpmyadmin.net/home_page/downloads.php. If you aren't sure what file to download, the safest bet is to go with the zip archive.
2. Unzip the archive somewhere on your disk. The archive contains a folder named
with the complete phpMyAdmin version (for example, at the time of this writing, the folder for the beta version of phpMyAdmin is called phpMyAdmin-2.8.0-beta1).
3. To make your life easier, rename this folder to simply phpMyAdmin.
4. Move the phpMyAdmin folder to the htdocs folder of Apache 2 (by default
C:\Program Files\Apache Group\Apache2\htdocs).
5. To make sure your phpMyAdmin installation is accessible by Apache, load http://localhost/phpMyAdmin in your favorite web browser. If everything worked OK, you should get a message such as this:

Figure A.4: phpMyAdmin Doesn’t Have Access to MySQL

6. The error message is suggestive enough—you need to instruct phpMyAdmin how to access your MySQL server. Under the phpMyAdmin folder search for a file named config.inc.php. If you find this file, change its options as shown in the following code snippet. If you don't find this file, create it with the following contents:

<?php
$cfg['PmaAbsoluteUri'] = "http://localhost/phpMyAdmin/";
$cfg['Servers'][1]['host'] = "localhost";
$cfg['Servers'][1]['auth_type'] = 'config';
$cfg['Servers'][1]['user'] = "root";
$cfg['Servers'][1]['password'] = "password";
?>

For more details on installing and using phpMyAdmin, see its documentation at http://www.phpmyadmin.net/home_page/docs.php. Packt Publishing has a separate book for those of you who want to learn more about phpMyAdmin—Mastering phpMyAdmin for Effective MySQL Management (ISBN: 1-904811-03-5). In case you're not a native English speaker, it's good to know that the book is also available in Czech, German, French, and Italian.

Preparing the AJAX Database
As an exercise for both using phpMyAdmin and working with MySQL, let's create a database called ajax, and create a MySQL user with full privileges to this database. You'll use this database and this user for all the exercises in this book. Follow these steps:

1. Load http://localhost/phpMyAdmin in your web browser. If the configuration data you wrote in config.inc.php was correct, you should see something like this:

Figure A.5: phpMyAdmin in Action

2. Write ajax in the Create a new database box, and then click the Create button.
3. phpMyAdmin doesn't have the visual tools to create new users, so you'll need to write some SQL code now. You need to create a user with full access to the ajax database, which will be used in all the case studies throughout the book. This user will be called (surprise!) ajaxuser, and its password will be practical. To add this user, click the SQL tab at the top of the page, and write this code in it:
GRANT ALL PRIVILEGES ON ajax.*
TO ajaxuser@localhost IDENTIFIED BY "practical"

SQL does sound a bit like plain English, but a few things need to be mentioned. The * in ajax.* means all objects in the ajax database. So this command tells MySQL "give all possible privileges to the ajax database to a user of this local machine called ajaxuser, whose password is practical".

4. Click the Go button.

Congratulations, you're all set for your journey through this book. Have fun learning AJAX!