Make Revenue With Your Own Banner Management System - Adding the banners
(Page 2 of 11 )
In this step, we will develop a simple web page that will allow us to add banners to our rotation schedule. A rotation schedule is just a fancy name for the list of all of our banners (which will be stored in a database).
Firstly, we will need to create a basic HTML form. This form will allow us to select an image for our banner and also create a name for this banner in the rotation schedule. Copy the code below and paste it into a file named addbanner1.asp.
<html>
<head>
<title> My Banner Management Site </title>
</head>
<body bgcolor="#ffffff">
<form enctype="multipart/form-data" name="frmBanner" action="addbanner2.asp" method="post">
<pre>
<h1>Add a Banner</h1>
Banner Image: <input type="file" name="banner_image">
Banner Name: <input type="text" name="banner_name">
Banner URL: <input type="text" name="banner_url">
<br><br>
<input type="submit" value="Add Banner">
</pre>
</form>
</body>
</html>Save addbanner1.asp into a directory which your web server can process (by default this directory is c:\inetpub\wwwroot) and then fire it up using your web browser. You should get a page that looks similar to this:
The code behind this page is just simple HTML. The code is broken down into chunks and described below:
<html>
<head>
<title> My Banner Management Site </title>
</head>The code above shows the opening HTML tags. Firstly, the <html> tag tells the browser to interpret the entire page as a HTML document. Next, the <head> tag tells the browser that we are describing some meta-data for our web page, the only metadata we are describing in our web page is the <title> tag, which sets the title in the top bar of our web browsers window. Lastly, the title tag is the closed (</title>) followed by the <head> tag.
<body bgcolor="#ffffff">
<form enctype="multipart/form-data" name="frmBanner" action="addbanner2.asp" method="post">
<pre>
<h1>Add a Banner</h1>
Banner Image: <input type="file" name="banner_image">
Banner Name: <input type="text" name="banner_name">
Banner URL: <input type="text" name="banner_url">
<br><br>
<input type="submit" value="Add Banner">
</pre>
</form>
</body>
</html>Next, the <body> tag is used to represent the beginning of our document. Within the <body> tag, we also set the background colour of our page to white (#FFFFFF is the hexadecimal code for white).
After this, the <form> tag tells our browser that we want to capture some information for processing. Notice the enctype="multipart/form-data" attribute of our form. This is the most important part of the whole page. It tells the browser that we want to upload our image, and to be ready to handle it in binary mode instead of the normal ASCII mode. The action="addbanner2.asp" attribute of the form tells the browser to send all of the information captured in this form to the addbanner2.asp page for processing.
Secondly, we have our form elements, the first being a file box through which we can browse for our banner image. The second element is just a simple text box in which we can type the name of the banner and the third another text box for the URL that the banner will re-direct to when it is clicked. We've also got our submit button which tells the browser to submit our form to addbanner2.asp.
Lastly, we end our form with the </form> tag and also tell the browser that we are at the end of our web page with the </html> tag.
Next: Saving the banners >>
More ASP Articles
More By Mitchell Harper
/ 8 
