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:



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:



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:



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:



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)
) TYPE=MyISAM;

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.

Next: The admin.php script >>
 

More HTML Articles
More By Tim Pabst

Comments On: Make Your Own Cool Drop Down Ad's

>>> Be the FIRST to comment on this article!