Home arrow HTML arrow Page 3 - 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 - The admin.php script
(Page 3 of 7 )

Admin.php is the heart of our drop down banner system. It allows us to add, delete and view a list of banners. It relies on a query string variable called method to tell it what to do:


case "add":
case "add_final":
case "delete":

Let's now take a quick look at each function in admin.php. ShowAddBanner displays a HTML form that allows us to enter the details of a new banner, as well as upload the two images that comprise that banner (the top of the banner and the bottom of the banner). The HTML form posts back to itself (admin.php) and looks like this:

The form generated by the ShowAddBanner function

There's nothing to difficult about the form, although I should state that because it uploads images to the web server, I've had to change the <form> tag's enctype attribute to "multipart/form-data", like this:

<form name="frmAddBanner" action="admin.php?method=add_final" method="post" enctype="multipart/form-data">

Once the "Add Banner >>" button is clicked, all of the forms data is sent back to admin.php, however the script picks up the method variable (which is tacked onto the end of the forms action attribute) as "add_final" and calls the AddBanner function.

AddBanner employs some error checking routines and if all is well, it opens the two image files, reads them in using fread, and sends an SQL INSERT query to our MySQL database. First off, here's how the error checking is handled:

global $database_user;
global $database_pass;
global $database_server;
global $database_name;

global $data1;
global $data1_name;
global $data1_type;
global $data1_size;

global $data2;
global $data2_name;
global $data2_type;
global $data2_size;

$title = $_POST["title"];
$link1 = $_POST["link1"];
$link2 = $_POST["link2"];

// Get the width of each image
$data1_data = @GetImageSize($data1);
$data1_width = $data1_data[0];
$data2_data = @GetImageSize($data2);
$data2_width = $data2_data[0];

// Define valid types for each image
$imageTypes = array("image/gif", "image/jpeg", "image/pjpeg");

// Make sure the user has completed all fields
$err = "<ul>";

if($title == "")
$err .= "<li>Please enter a title</li>";

if($data1_size == 0)
$err .= "<li>Please select a top image</li>";

if($data1_size > 0 && !in_array($data1_type, $imageTypes))
$err .= "<li>Top image is an invalid type";

if($data2_size == 0)
$err .= "<li>Please select a bottom image</li>";

if($data2_size > 0 && !in_array($data2_type, $imageTypes))
$err .= "<li>Bottom image is an invalid type";

if($link1 == "")
$err .= "<li>Please enter a link for the top image</li>";

if($link2 == "")
$err .= "<li>Please enter a link for the bottom image</li>";

// Is the width of the top image the same as the bottom?
if($data1_size > 0 && $data1_width != $data2_width)
$err .= "<li>Width of top and bottom image dont match</li>";

$err .= "</ul>";

// If there is an error, output it and don't continue
if($err != "<ul></ul>")
<h2>One/More Errors Occured</h2>
<?php echo $err; ?>
<a href="javascript:history.go(-1)">&lt;&lt; Go Back</a>


The error checking I've used is something that I've become accustomed to in the last couple of months, and it's proving to be quite effective. Firstly, I create a variable called $err and fill it with the header of an unordered list, <ul>. Next, I step through all of the variables that could cause errors, and if any of them do, I add them to the $err variable as separate <li> tags. For example,

if($title == "")
$err .= "<li>Please enter a title</li>";

After the error checking, I add </ul> to the $err variable, and then check its value. If the value isn't equal to <ul></ul>, then we have errors and the script spits them to the browser.

Here's how it looks when I submit the add banner form without filling in any of the fields:

Error handling capabilities

Remember earlier how I said that we would be using PHP's GetImageSize function to get the width of each image? Well here's the code that does it for each of the top and bottom images for a banner:

// Get the width of each image
$data1_data = @GetImageSize($data1);
$data1_width = $data1_data[0];
$data2_data = @GetImageSize($data2);
$data2_width = $data2_data[0];

GetImageSize returns an array of values including width and height. The first index in the array is the images width, so we take that and store it in a variable for each image. They are then compared to make sure that they are the same width:

if($data1_size > 0 && $data1_width != $data2_width)
$err .= "<li>Width of top and bottom image dont match</li>";

Next up, we have the code that connects to the database:

$s = @mysql_connect($database_server, $database_user, $database_pass)
or die("Couldn't connect to database server");

$d = @mysql_select_db($database_name, $s)
or die("Couldn't select database");

The values of $database_server, $database_user, $database_pass and $database_name are stored in database.inc.php, which looks like this:


$database_user = "admin";
$database_pass = "password";
$database_server = "localhost";
$database_name = "ads";


You should change these values to match your setup before you run the scripts included with the support material for this article.

Once connected, we use PHP's built-in file handling support to open and read both of the banner images that were uploaded:

// Get the contents of each banner file
$data1_blob = @addslashes(fread(fopen($data1, "r"), $data1_size))
or die("Couldn't open top image for reading");

$data2_blob = @addslashes(fread(fopen($data2, "r"), $data2_size))
or die("Couldn't open bottom image for reading");

Lastly, we run the SQL INSERT query, adding the new banner to the database:

$query = "insert into banners(title, width, type1, type2, data1, data2, link1, link2) ";
$query .= "values('$title', $data1_width, '$data1_type', '$data2_type', '$data1_blob', '$data2_blob' ";
$query .= ", '$link1', '$link2')";

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials