HTML
  Home arrow HTML arrow Page 3 - Make Your Own Cool Drop Down Ad's
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Moblin 
JMSL Numerical Library 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
HTML

Make Your Own Cool Drop Down Ad's
By: Tim Pabst
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 18
    2002-05-20

    Table of Contents:
  • Make Your Own Cool Drop Down Ad's
  • How drop down ads work
  • The admin.php script
  • The admin.php script (contd.)
  • Viewing, expanding and collapsing a banner
  • Tracking the number of click-thrus
  • Conclusion

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    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:

    require_once("database.inc.php");

    switch($_GET["method"])
    {
    case "add":
    ShowAddBanner();
    break;
    case "add_final":
    AddBanner();
    break;
    case "delete":
    DeleteBanner($_GET["bannerId"]);
    break;
    default:
    ShowBanners();
    }


    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>
    <?
    die();
    }
    else

    ...


    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:

    <?php

    $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')";

    More HTML Articles
    More By Tim Pabst


     

    HTML ARTICLES

    - Tabular Database Forms with HTML
    - Using the Find Functions for HTML Database F...
    - Sorting for Database Forms with HTML
    - Edit and Other Database Form Functions with ...
    - More Database Form Functions with HTML
    - Database Form Functions with HTML
    - Using the HTML Table Element as a Recordset
    - Building Single Row Database Forms with HTML
    - Introduction to Database Forms with HTML
    - Another Look at Animation of Geographical Ma...
    - Animation of Geographical Map Regions
    - Changing and Moving Pictures with CSS
    - Clickable Geographical Map Regions
    - Gradient Creation with the HR Element
    - Text on HTML Images: Do it Yourself







    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway