Ajax
Asynchronous JavaScript and XML (asynchronous JavaScript and Xml,ajax) are undoubtedly the most popular new WEB technologies. In this article we will use PHP and simple Ajax Toolkit (Sajax) to create an easy photo album as an online Web application.
We first write a simple photo album using standard PHP development methods and then use Sajax to turn it into an active Web application.
Create a simple photo album
This article uses two methods to create a simple photo album: a traditional Web application and an Sajax-based application. We'll write an album in PHP, read the contents of a directory, and display a table of thumbnail images. If the user clicks a thumbnail, the image is fully expanded. Because a traditional application is written, each click will be a new HTTP request, and the parameter will be passed as part of the URL.
You'll learn how to apply the Sajax library to your albums to see why using Sajax can speed up application development.
Add a pager table
Users who visit albums need some way to quickly view photos. Because many large photos are not easy to display on one page, you need to create a pager-a simple table that displays a small number of thumbnails at a time. You also write navigation to help users move back and forth through the image list.
Figure 1. The page-Splitter provides a way to display user photos |
What is OpenAjax Alliance?
Before the start of the May 2006 JavaOne conference, representatives of 29 companies met in Adobe Systems's conference room to prepare for a general determination of the future of Ajax, a group called OpenAjax Alliance.
The group made several decisions, the most notable of which was to name themselves: OpenAjax Alliance. It also decided not to organize itself into a formal standard group, or an open-source-led organization like the Eclipse Foundation, so the group's own form was temporarily informal. The group agreed to convene a conference call about once a week.
OpenAjax Alliance focuses on three areas: reduce the risk of using AJAX by providing interoperability, ensuring that Ajax solutions adhere to open standard routes and use open source technology to keep the Web open. The team's first task is to find ways to build and maintain interoperability between Ajax tools.
OpenAjax Alliance includes 31 technology companies, including IBM, Adobe Systems, Eclipse Foundation, Google, Laszlo Systems Inc., Oracle, Red Hat Inc., and Z End Technologies LTD.
First, you collect at least 20. jpg pictures and put them in a folder. Each picture also has a thumbnail that is saved in a separate thumbnail folder. Although you can use the GD package to generate thumbnails (see Resources), this article assumes that thumbnails are ready. You can also use the photos and thumbnails provided in this article (see download).
To complete the remainder of this article, assume that the photo is saved in the/images subdirectory, and the thumbnail is placed in the/images/thumbnails. You can make the appropriate modifications in your code. In addition, we also assume that thumbnails and corresponding images use the same name.
The pager should pass two parameters: Start is the index number of the first picture that is displayed alphabetically, and step is the number of photos displayed.
Listing 1. Album Viewer
/*
* Find a list of images in/images and provide thumbnails
*/
function get_table ($limit _start = 0, $limit _step = 5) {
$images = get_image_list (' images ');
Generate navigation for Previous and Next buttons
Code given below
$output. = ' <table class= ' image_table ';
$columns = 5;
foreach ($images as $index => $image) {
Begin directory listing at item number $limit _start
if ($index $limit _start) continue;
End directory listing at item number $limit _end
if ($index >= $limit _start + $limit _step) continue;
Begin column
if ($index-$limit _start% $columns = 0) {
$output. = ' <tr> ';
}
Generate link to blown up image (below)
$thumbnail = ' ';
$output. = ' <td> '. Get_image_link ($thumbnail, $index). ' </td> ';
Close column
if ($index-$limit _start% $columns = = $columns-1) {
$output. = ' </tr> ';
}
}
$output. = ' </table> ';
Return $nav. $output;
} |
The table is simple, and it traverses the list of pictures from the index number $limit _start. Then put a thumbnail of each picture, as one line per five pictures. The cycle ends when the $limit _start + $limit _step is reached.
The table is a visual representation of the directory list, so a function is needed to list all the images in the directory. The Get_file_list () function in Listing 1 returns a list of all the pictures in the/images directory with an indexed array. The following is an example implementation.
Listing 2. Get_file_list implementation
function get_image_list ($image _dir) {
$d = Dir ($image _dir);
$files = Array ();
if (! $d) return null;
while (false!== ($file = $d->read ())) {
GetImageSize returns true only on valid images
if (@getimagesize ($image _dir. '/' . $file)) {
$files [] = $file;
}
}
$d->close ();
return $files;
} |
Note: You will also use the Get_file_list () function later in this article. It is important that the returned array is invariant whenever the function is called. Because the provided implementation is directory-searchable, you must ensure that the specified files in the directory do not change, and are sorted alphabetically each time.
[1] [2] [3] [4] [5] Next page
