ePrint web order form

This is a web application that I built for NAIT's in-house printing department.

 

The initial idea was simple: create a webpage that lets customers place printing orders on-line. I had previously implemented an online solution for the photo department and they wanted something similar. (The photo solution, called epix, is actually a customization of the Web Publisher Pro application which is an add-on to Canto's Cumulus digital asset management package.)

 

Of course it was not so simple to build. Firstly there were many iterations of the form itself as I worked with the client to fine tune the job specification details. The HTML solution was to show only those choices relevant to the selected job type. This was done with a combination of javascript and css so that items were shown and hidden based on a combo box selection.

 

The other requirement was the ability to upload files. I found a JSP (JavaServer pages) based library (Apache Tomcat was being used as the application server) that worked for us. When the user clicks submit, a bunch of javascript-based validation is invoked. When validation passes an email is formatted and sent to an ASP mail service. [UPDATE] This library was replaced with my own custom Java servlet that sends email to an SMTP relay service with NAIT's exchange server.

 

This web application was deployed and saw a LOT of use. Too much, says the client :) But there were some usability problems. The JSP upload library turned the page into an old-school post-back page: the customer uploaded a file and then the page reloaded itself and repopulated itself based on the session variables etc. This made the page very complicated to build, debug and enhance. Also there was confusion with the standard html-based upload mechanism where the user selects the file AND THEN clicks upload. Not intuitive.

 

So I developed version 2 which replaces the upload functionality with a Flash-based widget that talks to my custom written java servlet to handle the upload. It provides much better user feedback and does not require a page refresh (I was inspired by Flickr's new upload page). The submit button is also Flash based so that a page refresh is not required to give feedback about the success or failure of the submission.

 

The result is a webpage with a simpler architecture: HTML, CSS, Javascript and Flash that is very AJAX in the way it works. On the server side are two custom written Java servlets that handle upload and email. Simple, but not simple.

 

(Note: this application was built in a pre-jquery time which makes this a new approach to web application and service)

Done