Article
About the Author
Mitchell Harper
Mitchell is the lead developer for Interspire, who develop re-brandable Internet software and tools to help Web developers increase their customer base and make more revenue. Mitchell can be reached via email at mitchell@interspire.com.
Create your own Banner Management Application
If you’re like me, then you probably run one or more small sites that either provide information to your visitors, or sell a range of products and services targeted at a specific audience. You have people that you trust managing and updating content, you’ve spent many, many hours of your time developing the site, and you may even attract a couple of thousand visitors every day.
Along with the profits that you generate through either membership charges or product sales, wouldn’t it be nice to manage a simple banner rotation and stats system on your site? With this system, you could display a random banner at the top of every page on your site, track impressions and click-thrus, and, as your site gains credibility, you can reap the profits by allowing others to advertise on your site.
What You’ll Need
To create the simple app that I’m about to explain, you'll need:
- A webserver (preferably a Win2k box) capable of running ASP scripts
- SQL Server 2000
- Basic ASP knowledge
- Basic SQL Syntax and Enterprise Manager knowledge
Please note that all the code included in this article can be downloaded here.
Project Overview
Basically, our simple project will do three things:
- Allow us to add and delete banners from our rotation schedule
- Display banners on our site using very simple ASP script
- Track impressions and click-thrus for each banner that's displayed on our site
Let’s start with the first step: the addition and deletion of banners from our rotation schedule. Don’t worry if you don’t understand parts of the code: it will all make sense by the end of the article.
Step 1: Develop a Web app to add banners to our rotation schedule
In this step, we'll develop a simple Web page that will allow us to add banners to our rotation schedule. A rotation schedule is just a fancy name for the list of all of our banners (which will be stored in a database).
Firstly, we'll need to create a basic HTML form. This form will allow us to select an image for our banner, and create a name for this banner in the rotation schedule. Copy the code below and paste it into a file named addbanner1.asp.
<html>
<head>
<title> My Banner Management Site </title>
</head>
<body bgcolor="#ffffff">
<form enctype="multipart/form-data" name="frmBanner"
action="addbanner2.asp" method="post">
<pre>
<h1>Add a Banner</h1>
Banner Image: <input type="file" name="banner_image">
Banner Name: <input type="text" name="banner_name">
Banner URL: <input type="text" name="banner_url">
<br><br>
<input type="submit" value="Add Banner">
</pre>
</form>
</body>
</html>
Save addbanner1.asp into a directory that your Web server can process (by default this directory is c:\inetpub\wwwroot), and then fire it up using your Web browser. You should get a page that looks similar to this:
The code behind this page is just simple HTML. I've broken the code into chunks and described it below:
<html>
<head>
<title> My Banner Management Site </title>
</head>
The code above shows the opening HTML tags. Firstly, the <html> tag tells the browser to interpret the entire page as an HTML document. Next, the <head> tag tells the browser that we're describing some meta-data for our Web page. The only metadata we're describing is the <title> tag, which sets the title in the top bar of our Web browser's window. Lastly, the title tag is the closed (</title>) followed by the <head> tag.
<body bgcolor="#ffffff">
<form enctype="multipart/form-data" name="frmBanner"
action="addbanner2.asp" method="post">
<pre>
<h1>Add a Banner</h1>
Banner Image: <input type="file" name="banner_image">
Banner Name: <input type="text" name="banner_name">
Banner URL: <input type="text" name="banner_url">
<br><br>
<input type="submit" value="Add Banner">
</pre>
</form>
</body>
</html>
Next, the <body> tag is used to mark the start of our document. Within the <body> tag, we also set the background colour of our page to white (#FFFFFF is the hexadecimal code for white).
After this, the <form> tag tells our browser that we want to capture some information for processing. Notice the enctype="multipart/form-data" attribute of our form. This is the most important part of the whole page. It tells the browser that we want to upload our image, and that it must be ready to handle it in binary mode instead of the normal ASCII mode. The action="addbanner2.asp" attribute of the form tells the browser to send all the information that's captured in this form to the addbanner2.asp page for processing.
Secondly, we have our form elements. The first is a file box through which we can browse for our banner image. The second element is just a simple text box in which we can type the name of the banner, and the third is another text box for the URL that the banner will re-direct to when it's clicked. We also have a submit button which tells the browser to submit our form to addbanner2.asp.
Lastly, we end our form with the </form> tag, and tell the browser that we are at the end of our Web page with the </html> tag.