Wishlist Application
As part of a series of articles on modern day project management I have created a fairly simple wishlist application to act as an accompanying demonstration for the series.
The application has been constructed in PHP using the (now common) MVC framework and makes use of a reasonable amount of client side coding in order to provide the now expected ajax controls.
For the application I chose a number of open source frameworks on which to base my development;
- CodeIgniter - http://www.codeigniter.com
- Mootools - http://www.mootools.net
The applications specification has been outlined in the previous articles (which are currently being formatted for posting) and so these should be referred to for any specification related queries
Functionality
The wishlist makes use of a number of different enabling technologies to achieve an effective construction offering ease of maintenance, optimisation and separation of content from logic.
The sections below explore some of this functionality and enabling technologies in a little more detail.
> User Signup
Users can sign up to the wishlist for free using the signup form. The form allows the user to choose their name, password, name and description for their wishlist (so that support for multiple lists could be added at a future date) as well as their email address.
As well as server side validation of the form, it also makes use of a custom javascript form validation class. The form enables rapid validation of fields, and prompt user feedback. The class also enables the contents of an inputs 'rel' attribute to be displayed alongside the input with a high visibility effect when the user places the cursor focus on that field. It means that direct guidance can be given for each individual input which should help to reassure the user about any information entered.
As well as the javascript validation there is inline feedback on the username the user chooses. Because of the way the application works the username must be unique and so to ensure this the input is validated. To reduce the likelihood of this happening an ajax function has been added to the field to provide feedback to the user when the name is taken or when it is safe to proceed.
The form 'tips' should help to guide the user through the form filling out process and help to avoid any undue frustration. The idea of making user/form interaction as seamless as possible is probably one that I will investigate further soon, with further development to the form validation script making up a part of this.
> Wishlist controls
After creating the wishlist users are instantly logged in and can start adding items to the list. On the detection of javascript controls are added to the form that allow the user to add items fully asynchronously. A custom class was created extending the CNET Modalizer script in order to launch modal popups on the page
One example of the modal popups is the add-item functionality for which the form is launched within a modal prompt. Multiple items can be added to the list from the form before closing it, allowing for rapid data entry.
Once an item is added to the list controls are automatically added to it which allow the owner to delete the item immediately. Once the delete icon is clicked, a confirmation prompt is launched before the item is removed from the list (and removed from the page).
If a user is browsing another users list whilst logged into the system then they are able to mark an item as bought using the same control mechanism as used for deleting an item. When an item is marked as bought it is visually scored, and other users can see that the item has been purchased. The owner of the list however cannot see any purchased items on their own list.
> Help system
In order to explain the usage of the system to users an integrated help system has been built into the application. An information section on the right hand side visually conveys to the user the currently available actions at ay given time. This visual representation of the available actions is backed up with help content which is fetched through an Ajax request and displayed through the modal interface described earlier.
By constructing the help system in this manner it would be trivial to move this help content into a database and have it dynamically managed as well, thus providing more scope for expansion at a later date
Project Planning
-->Resources
- CodeIgniter
- View the site - The home page of the CodeIgniter project. Offers a comprehensive user guide to get you started as well as a large and active community.
- Mootools
- View the site - The home page of the mootools project. The framework can be downloaded, documentation perused and users quizzed!.