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:
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:
This tag calls our servlet and passes in the parameter key-value pair
type=image. The servlet's
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:
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
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.
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
|ImageFile||A reference to the physical location of the banner image||/images/sitea.gif|
|URL||The target URL for the site users should be rerouted to after they click on the banner||http://www.sitea.com|
|CustomerName||The name of the customer who purchased the banner||John Doe|
|NumberOfClicksPurchased||The number of clicks the user has purchased||140|
|NumberOfClicksRemaining||The number of clicks the customer has remaining||139|
|NumberOfImpressions||The number of times the banner has been displayed||23|
|BannerWeight||The odds of this banner being displayed||10|
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
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:
Translating what was just stated in SQL, you would issue the following statements using the MySQL Monitor:
To connect to the database, you enter:
Next, we create our table:
A "describe" of the ADS table would look like Figure 1.
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:
Use this syntax to insert the records shown in Table 2 into the database.
Table 2. Database records
|CUSTOMERNAME||John Doe||Albert Einstein||Jane Doe||Madonna|
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.