Home arrow HTML arrow Page 6 - 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 - Tracking the number of click-thrus
(Page 6 of 7 )

Remember back to the admin.php script where the number of impressions, click thruís and click-thru rate is listed for each banner. As we already know, the number of impressions is incremented whenever the viewBanner function is called. Track.php on the other hand increments the number of click-thru's for each banner and redirects the user to the destination link for that banner, depending on whether or not they clicked on the top or bottom banner.

Track.php starts by connecting to our MySQL database and incrementing the numClicks field for the selected banner:

@mysql_query("update banners set numClicks = numClicks + 1 where bannerId = " . $_GET["bannerId"]);

Remember that the banners ID is passed as the bannerId query string value, so that's why $_GET["bannerId"] is used in the SQL query. After the number of clicks has been incremented, it's a simple matter of determining if the user clicked on the top or bottom banner. This is accomplished by checking the img query string variable:

// Redirect the user to the link
if($_GET["img"] == "top")
// Get the link for the top banner
$result = @mysql_query("select link1 from banners where bannerId = " . $_GET["bannerId"]);
// Get the link for the bottom banner
$result = @mysql_query("select link2 from banners where bannerId = " . $_GET["bannerId"]);

Depending on which banner was clicked, we retrieve either the link1 or link2 field from the banners table. Once retrieved, we make sure that field was indeed returned and use the header function to redirect the user to that link:

if($row = mysql_fetch_row($result))
header("Location: " . $row[0]);

Sending the binary image data
As we saw earlier, the viewBanner function sets the src of each banner image to something like getbanner.php?bannerId=2&img=top. Getbanner.php connects to the database and retrieves the blob data for the banners image as well as its MIME type, depending on whether img is top or bottom:

if($_GET["img"] == "top")
// Get the top image for the banner
$result = mysql_query("select data1, type1 from banners where bannerId = " . $_GET["bannerId"]);
// Get the bottom image for the banner
$result = mysql_query("select data2, type2 from banners where bannerId = " . $_GET["bannerId"]);

Once the image and MIME type are retrieved, it's simply a matter of calling the header function to set the type of output and then echoing the binary data to the browser, like this:

if($row = mysql_fetch_row($result))
header("Content-type: " . $row[1]);
echo $row[0];

If you want to test getbanner.php then you can fire up your browser and visit http://localhost/getbanner.php?bannerId=1&img=top, assuming that you have added a banner with admin.php and that the scripts are installed on your local machine.
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