Monday, July 23, 2007

Dynamic Web Content With JavaServer Pages (JSP)

Anytime you go to a website and it knows who you are, or asks you to log in, or you can do tasks on it, etc., that site is no longer static. Such dynamic websites run at least one web application to accomplish all those tasks. It doesn't have to be complicated really - a simple mechanism that responds autonomously to user requests can be considered a "web application". The previous timecard utility application was not dynamic. If you hit [Update], nothing happens. In this post, I describe a strategy to give that button some life. The result is shown above.

There're several ways to create dynamic web applications, including ASP and PHP, but I chose to use JavaServer Pages (JSP) to implement this functionality. The idea is simple: when a user clicks the update button, send all the data entered into the page to the server and update totals (lunch/work hours and week summary on the right).
This arena takes a basic web designer into the world of programming. Several tutorials exist on the web, including Sun's JSP Tutorial and the Java Tutorial. With these two resources, I've never really needed to buy reference books.

My implementation here simply uses JSP in its most popular form - mixing scriptlets and HTML code. When the page is called, it checks for a required session object and if none exists, creates one. That session object holds the dynamic data we need in parts of the page.
The session object is written along JavaBean conventions, but since we do not use it as such in this example, it can be any POJO. That class does the actual calculation of the times. The strategy is to use the principles of OOP for most server-side programming. Here, the timecard object depends on a Day object (which represents a typical day's hours - a column in our table), and a Week object (which represents all the Days of a week - the whole table). Each Day knows how to add up its own hours, and the week knows how to add up the computed hours from its Days to create a summary.

In NetBeans:
(1) Update the JSP code.
(2) Add new Java classes: TimecardBean.java, Day.java, Week.java, and a utility/helper class for formatting and parsing times and dates - DateTime.java.
(3) Deploy to the web server.

# As the code show, we are now naming fields of the form dynamically so that we'll be able to read them back easily. Also, business rules are implemented concerning the accumulation of work hours. For example, all day hours are rounded to the nearest quarter hour, and a mandatory lunch period is deducted if someone works more than 4 hours (and doesn't take lunch).

It's as simple as that - and you have a dynamic web application. Our code now also reports any errors it encounters and catches a few exceptions.
Possible problems so far with this kind of solution include a slow user experience because whenever the update button is clicked, the web server clears the timecard object and repopulates it with data sent from the client, recalculates all values, and regenerates the HTML to send to your browser.

Skills Needed: Basic Java and JSP programming.
Technologies So Far: HTML, CSS, Java.
IDE: NetBeans 6.0 (M9)
Web/App Server: Sun Java System Application Server 9.
JDK: 1.6+