Companies like doubleclick.net have made a lot of money serving banner ads on the Web. The service they provide is great, but why pay for something you can do yourself? In this article, enterprise Java consultants Javid Jamae and Kulvir Bhogal demonstrate how to create rotating banner ads using an all open-source environment: Apache Tomcat, MySQL, and the MM MySQL JDBC driver. First, they'll walk you through the necessary setup in Tomcat and MySQL, and then show you how to install the MM MySQL JDBC driver to allow a Java servlet running in Tomcat to communicate with MySQL.
Banner advertising has been around since the Internet was first transformed from an educational and governmental information store into a centerpoint for international commerce. A rotating banner is an allocated space on a Web page, in which the space is used to display an advertisement -- either randomly or based on some business logic -- every time the Web page is loaded or reloaded. The programs that drive rotating banner ads are fairly simple, but they are important advertising tools. Just like their half-minute radio and television counterparts, these dynamic advertising tools allow a single Web page to display advertisements from various sources and enable different companies to create brand recognition for their products and services while targeting the same audience.
Regardless of how you view them (yes, we all find them annoying at times), Web banners have become a way of life on the Internet. The fact is that the Web constitutes a gargantuan audience of consumers, whose money keeps the wheels of e-business turning. In the short history of Internet marketing, e-business owners have shown they are willing to pay top dollar to place their banner ads on high-traffic sites.
Some companies, such as doubleclick.net, have capitalized on the Web banner phenomenon, acting as an application service provider (ASP) to perform such services as tracking clicks for specific banner advertisements. These ASPs then inform advertisers on how effective their Web advertisement campaigns are.
Of course, ASPs such as doubleclick.net cost money. If you're like us, you don't like spending money when you could get the service for free. Wait a second -- you've probably heard that nothing in this world is free. But don't worry. All this article will cost you is your time. In fact, we'll show you how to tie together an open source (that is, free) environment to set up your own, powerful Web banner tracking system. To pull off this task, our weapons of choice will be Tomcat, MySQL, a single Java servlet, and a few helper classes. Excited? Well then, let's jump into the software installation.
Setting up Tomcat and MySQL
In this section, we will walk through the setup for both Tomcat and MySQL. We'll then show you how to install the driver you need to enable these two applications to communicate.
Setting up Tomcat
Download and install Tomcat. For this article, we used Tomcat 4.1 for Windows, which comes with a nice install package and creates icons and a Start menu folder for you. It also creates a Windows Service to start and stop the Tomcat server. Installation should be very straightforward, but if you have trouble, refer to the Tomcat documentation. Because of the popularity of Tomcat, there is also ample help available on newsgroups and on the Web, some of which we've listed in Resources.
After you install Tomcat, there are a few steps you need to complete to set up our rotating banner Web application. First, we will create a subdirectory called banner under the [installdir]\webapps directory. Under the banner subdirectory, we will then create the standard Web application directory structure:
[installdir]\webapps\banner
[installdir]\webapps\banner\WEB-INF
[installdir]\webapps\banner\WEB-INF\classes
[installdir]\webapps\banner\WEB-INF\lib
Next, we'll add a context to point to our Web application. A context is merely an alias, telling Tomcat where to access our Web application. Our context path will be /banner, and it will point to the banner subdirectory we just created. When a user enters http://localhost:8080/banner, he will be taken to our top-level banner directory under webapps. If he wants to run our BannerServlet, which will exist in the WEB-INF/classes directory, he would use http://localhost:8080/banner/servlet/BannerServlet.
To add the /banner context, we first need to edit the server.xml file in the Tomcat conf directory. Go nearly to the bottom of the file where you will see several context tags. There should be one for /admin and one for /examples. Add the following context tag:
After you've added the context tag, restart Tomcat so that the changes to the server.xml file take effect (in our case, we just restarted the Windows Service that Tomcat installed).
Setting up MySQL
MySQL is a powerful database for the price you pay for it (nothing), and many companies use MySQL to handle their data. The number is growing daily as companies with low budgets enter the Web market. The open source community has greeted MySQL with open arms. The documentation about this powerful database is abundant, and there are both Linux and Windows versions.
Download and install MySQL with the "Typical" setup option (for this article, we'll assume you are working with the WinNT version of MySQL). After you've completed the installation, you will notice one of the annoying aspects of MySQL: it doesn't place anything in your Start menu. You will need to go to the directory where you installed the database (c:\mysql\, by default), then go to the bin directory, where you will find the executables to run MySQL.
First, double-click the winmysqladmin.exe file. The first time you open this file, you will be asked to enter a username and password. Next, right-click on the street light icon that will appear in your taskbar. Go to WinNT and choose "Start the service" to keep MySQL running in the background. Finally, double-click the "mysql.exe" icon to start "MySQL Monitor," where you will work with MySQL.
Getting MySQL and Tomcat to work together
Getting MySQL and Tomcat to communicate with one another can be difficult. With the JDBC API, however, we'll be able to use SQL to talk to a MySQL database from our Java classes with relative ease.
We'll use the MM MySQL JDBC driver, an open source driver, to facilitate communication between MySQL and Tomcat. (At the time of this writing, 2.0.14 is the latest version.)
Unfortunately, setting up this driver is a little tricky. First, download the appropriate JAR file for the driver from here. We downloaded the file called mm.mysql-2.0.14-you-must-unjar-me.jar. Next, unjar (or unzip) the file to a temporary directory. Finally, copy the file that contains the driver from the unzipped directory structure into your WEBAPPS/BANNER/WEB-INF/lib directory and restart Tomcat. In the version of the driver we downloaded, the file is called mm.mysql-2.0.14-bin.jar.
We could have used the JDBC/ODBC bridge driver to communicate with MySQL, but we've assumed that a native driver would provide more of a performance advantage (though we haven't run any benchmarks to prove our assumption). For this application, it probably wouldn't make much of a difference in performance, but we decided to demonstrate how to use the native JDBC driver so you wouldn't have to figure it out when you are designing a larger application.
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 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:
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.
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);
