GeekPortfolio.com

Case Study: Photo Sharing Application with Java and Ajax

The Basics

The photo-sharing web application uses a Java applet to provide drag-and-drop image upload functionality. This allows the client - a wedding photographer - to add multiple images to a virtual photo album without the indivdiual upload forms typical to this kind of software. Subsequently, the file names are stored in a MySQL database and organized by unique album identifiers. Clients can then securely access their album and order their photos online with a user-friendly web interface. Enhanced with Ajax, standard shopping cart and checkout conventions become more responsive and provide instantaneous feedback.

The Problem

Normal gallery sites require the user to upload a single image at a time. Some may allow multiple uploads from a single form, but the user is still forced to pick each file individually. If someone is working with a large number of images (think "just back from vacation"), it takes a considerable amount of user interaction just to get them into the gallery. This client was uploading several hundred photos at a time via FTP, then manually creating pages for each album. This two-step process took a long time, and if the client wanted to change their web page layout, they would be forced to go back through every album they had generated to update its presentation.

The Solution

This Java applet allows the user to select several files at once, and the user can upload them all at once using the drag-and-drop action they are familiar with from their native operating system. The applet posts directly to a PHP script that processes the image, extracts its metadata (image size, type, formatting, etc.) and adds all of the info to a database. Another script can take the database information and generate album pages automatically, and to change the format of all pages requires changes to only one script.

Notes

This application is still in development. The Java applet is done, along with the upload scripts to accept files on the server side. User security is in place to allow the photographer to upload a full photo album, then create accounts so that their clients can browse only their own wedding photos and order prints online. Styles and formatting are still being finalized to make the presentation more refined, but as above it only needs to be changed in a single file to update all albums simultaneously.

Ajax is used in the shopping cart to add items on-the-fly as a user selects which photos they want, instead of waiting for an entire page to be completed. It prevents the user from losing their selections when browsing to other areas of the album, and doesn't force them to click an "Add to Cart" button.

Gallery sample snapshot

gallery sample image

Process flow chart for Java image upload applet

process flow chart