Make Your Own Cool Drop Down Ad's

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:



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:



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')";
blog comments powered by Disqus