Home arrow HTML arrow Page 2 - Make Your Own Cool Drop Down Ad's

Make Your Own Cool Drop Down Ad's

"The age of the banner ad is dead" shouts a self-proclaimed online marketer. "Banner ads represent a bad return on investment" writes another. The truth of the matter is that banner ad's aren't dead, my friend. In this article Tim shows us how to create a banner management application that lets us add nifty MySQL-blobbed, two part drop-down banners to our sites. If you run your own site then you can't afford not to read this tutorial!

Author Info:
By: Tim Pabst
Rating: 4 stars4 stars4 stars4 stars4 stars / 26
May 20, 2002
  1. · Make Your Own Cool Drop Down Ad's
  2. · How drop down ads work
  3. · The admin.php script
  4. · The admin.php script (contd.)
  5. · Viewing, expanding and collapsing a banner
  6. · Tracking the number of click-thrus
  7. · Conclusion

print this article

Make Your Own Cool Drop Down Ad's - How drop down ads work
(Page 2 of 7 )

Before I discuss the database or PHP code for this article, let's take a quick look at how drop down ads actually work, so you know what I'm talking about. Let's assume that we have the following 430x50 banner on our web site:

The top part of our drop down banner

That banner's good, but what about if we could really grab our visitor's attention and provide them with more information about tomatoes, and also let them request a free taste sampling at the same time? Consider the second part of this banner, which is shown below:

The bottom part of our drop down banner

Now, if we took both of these banners and used a link with some JavaScript, we could display the top banner, and when the user click on a link, we could also display the bottom part of the banner:

Both parts of our drop down banner

In the image above, I've added the grey dotted line simply to show how the banners will appear. The [ Expand ] link above the banners can be used to toggle whether or not the bottom part of the banner is shown. As mentioned earlier, when the page loads, the bottom banner will be displayed for a couple of seconds and will then collapse, leaving only the top part of the banner visible, like this:

The collapsed version of our banner

Now, hopefully I haven't confused you too much and we can continue onto building the database that will hold the images and the details of each ad.

Building the database
To keep things simple, we will build a database that has just one table. Start by creating a database called ads at the MySQL console application:

create database ads;
use ads;

Next we want to create a table that will store the details of each ad, as well as the top and bottom part of the banner, as blobs. Call the table banners:

CREATE TABLE banners (
bannerId int(11) NOT NULL auto_increment,
title varchar(50) default NULL,
width int(11) default NULL,
type1 int(11) default NULL,
type2 int(11) default NULL,
data1 blob,
data2 blob,
link1 varchar(250) default NULL,
link2 varchar(250) default NULL,
numImps int(11) default '0',
numClicks int(11) default '0',
PRIMARY KEY (bannerId),
UNIQUE KEY id (bannerId)

The banners table contains quite a few fields, so let's run through what each field is:
  • bannerId: A unique identifier for each banner.
  • title: A title by which the banner will be referenced, such as "My Banner".
  • width: The width of the banner. Both the top and bottom part of the banner must be the same width, and we will be using PHP's GetImageSize function to get the width of the banner.
  • type1: The MIME type of the top banner, such as image/gif.
  • type2: The MIME type of the bottom banner, such as image/gif.
  • data1: The top image stored as binary data.
  • data2: The bottom image stored as binary data.
  • link1: The link which the top banner will load when clicked.
  • link2: The link which the bottom banner will load when clicked.
  • numImps: The number of impressions for the banner.
  • numClicks: The number of clicks for the banner.
As you can see, we are also tracking the number of impressions and click-thrus for each banner. We will create our drop down banner application and implementation using six files:
  • database.inc.php: Contains MySQL database connection details.
  • admin.php: Contains all functionality to add, remove and list banners currently stored in the database.
  • view.php: Contains one function called viewBanner. This function outputs the necessary HTML and JavaScript code to display an expandable/collapsible banner on the page.
  • getbanner.php: Accepts a query string value for the banner ID, sets appropriate content type headers, and streams the binary data for that banners image.
  • track.php: Whenever a banner is clicked, track.php increments the number of clicks field (numClicks) for that specific banner.
  • test.php: Calls up the viewBanner function of view.php, which shows a banner on the page, passing its ID as the only parameter.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials