The rotating banner application

Now that we have installed all of our software, we'll go over what our application is capable of and how we have architected and developed it.

There are essentially two actions you can perform using our banner servlet. First, you can use it to view a random banner image on a Web page, which occurs every time a Web page is loaded that contains the banner ad. Second, you can click on the banner image, which will forward you to the link corresponding to the image that was loaded.

In terms of HTML, the code looks similar to this:

<a href="...Link For Random Image...">
<img src="...Random Image..."/>
</a>

If we want to load a random image, our image tag obviously can't point to a static image file, so we will direct it to run a servlet, which we'll call BannerServlet. We will use an HTTP GET method parameter to direct our servlet to give us an image. So our image tag will look like this:

<img src="http://localhost:8080/banner/servlet/BannerServlet?type=image"/>

This tag calls our servlet and passes in the parameter key-value pair type=image. The servlet's service() method interprets this request and returns a random image to the browser. Of course, the servlet must somehow remember which image it sent to the client so it knows where to go when the client clicks on it. We'll store the metadata related to the image that we sent on the client's session so that when the user clicks the image, the metadata from his session will load, redirecting him to the appropriate URL.

Our link tag will look almost the same as our image tag:

<a href="http://localhost:8080/banner/servlet/BannerServlet?type=link">
<img src="http://localhost:8080/banner/servlet/BannerServlet?type=image"/>

</a>

When the servlet is called with the type=link key-value pair, the servlet grabs the banner's metadata and reroutes the user to the appropriate URL.

Code and CLASSPATH setup

To use the code provided with this article, you must first unzip the zip file (in Resources) and compile the .java files using the command line javac compiler or your favorite IDE. To compile the code, set your CLASSPATH with these two JAR files:

• mm.mySQL-2.0.14-bin.jar (or whatever version you get from the MM MySQL Web site)
  
  
• servlet.jar (if it doesn't come packaged with the JDK you are using)

Copy the compiled .class files into the [tomcat_installdir]\webapps\banner\WEB-INF\classes directory we created earlier. The image files and the .htm file we provided as an example must go in the [tomcat_installdir]\webapps\banner directory.

Database setup

The database portion of our application is merely used to persist metadata about each banner in our system. In other words, we are not actually going to store the image files in our database, but rather a reference to each image file. In our database, we will use seven columns to describe each banner ad.

The descriptions in Table 1 show you what each record will contain. We will actually only use five out of the seven database columns in the application. CustomerName and NumberOfClicksPurchased aren't used in our version, but we put them in as placeholders for expandability. You could very easily extend our application and use it as a real-world business application where customers would pay for a certain number of clicks per banner.

Table 1. Database fields

Of course, in a real-world environment, you would have more than one site banner. Depending on how much your banner "sponsor" paid you in comparison to other sponsors, you might want his banner to be shown less or more. The BannerWeight fields will be used to implement this functionality. We have implemented a very simple weight system where the percent chance for each banner to be displayed is:

(BannerWeight / Sum of all BannerWeights) * 100

Translating what was just stated in SQL, you would issue the following statements using the MySQL Monitor:

mysql> create database BANNER;

To connect to the database, you enter:

mysql> use BANNER;

Next, we create our table:

mysql> create table ADS
(IMAGEFILE VARCHAR(50) NOT NULL, 
URL VARCHAR(50) NOT NULL,
CUSTOMERNAME VARCHAR(50),
NUMBEROFCLICKSPURCHASED INT(4),
NUMBEROFCLICKSREMAINING INT(4) NOT NULL,
NUMBEROFIMPRESSIONS INT(4) NOT NULL,
BANNERWEIGHT INT(4) NOT NULL);

A "describe" of the ADS table would look like Figure 1.

Figure 1. The ADS table

You will need to populate the database with some sample values so that you can make sure what you are building is sound. Included in the project zip file are example banners (in GIF format) you can use to get an idea of how things should work. Of course, for the Web banner URL, you will need to state the location where you decide to house the banner files. You can follow the SQL syntax below to "register" your banners into the database:

mysql> insert into ADS values('/sitea.gif','http://www.cnn.com',
  'John Doe',100,100,0,10);

Use this syntax to insert the records shown in Table 2 into the database.

Table 2. Database records

Note that the Web banner URLs are located on the local host for testing purposes only. In a production environment, your URL would point to the actual location of the GIF file. This URL could be virtually any location on the Internet.

Now that we have a database, we need to use the data we just put in it. We will do this with a Java servlet. The code for the Java servlet that will "power" our endeavor is described below. You might want to take some time to read through the code of BannerServlet.java in the project zip file. If you feel overwhelmed, don't worry; we'll spend some time explaining how the code works.