CGI on AOL Tutorial

. Using CGI on the America OnLine Server
to create forms for guestbooks, questionnaires, etc.

CGI means Common Gateway Interface and is a programming language that many servers, like AOL, use to process form data. This allows you to collect information from visitors to your web page and save it in a file and view it. You decide what information you want to collect by creating a HTML form and you define the format of the saved information by creating a template. When someone fills out your form and presses the submit button the AOL server uses the template and forms data to format and save the information, then that person either sees a thank you page provided automatically by AOL or they see a customized thank you page that you provide, or they are connected back to any page you choose.

Writing CGI-BIN Script is not a topic that can be covered quickly or on a web page such as this. It is written in a programming language like C or PERL and so requires a working knowledge of one of these languages. However there are many ready-made scripts available for use that can easily be adapted to suit your purposes.

Rules on the use of CGI vary with each web server. Some allow it, some don't, some allow only pre approved scripts.

We are fortunate in that AOL has an all-purpose CGI script already available that can be used and, with slight modifications on your part, can be easily adapted for various forms. They do provide instructions for use also, however they are somewhat confusing. If you are an AOL member and want to make use of their available CGI script read on........

You must use a text editor or word processor that allows you to save as ".txt" or ".html" type file to create these files. You cannot use Personal Publisher or AOLPress as they automatically add tags to a page to make it work and you don't want those tags added to these files.

Most of the code is not case sensitive, however there are, for some strange reason certain parts of it that seem to be....... like for instance the "r" in the required tag will not work with an upper case "R". So because of that and the fact that it is easy to mistype a code, you might want to cut and paste from this tutorial until you feel confident. Keep in mind that you cannot copy from a view of the source code of this page because extra characters have been added here to force this page to display the bracketed tags.

Also remember that these instructions work with pages uploaded to the AOL server. Other servers, such as GeoCities and Tripod may use a different method to process CGI.

YOU WILL NEED TO MAKE 3 FILES:

form
template
data file

You can name these files what ever you want, however :

the form will be called "______.html"
the template will be called "_______.gbt"
the data file will be called "_______.html"

and whatever name you choose to fill in that blank with must be the same for the template and the data file.

After these 3 files are created they should each be uploaded to your MYPLACE file. Be sure to check the box to upload them as ASCII files rather than image files.

CREATING YOUR FORM:

This will be an HTML file. It will start with:

your title here

.html" method="post">

Note that in the BODY TAG you can use whatever colors that you want and can even add to this a background image if you like. Below the BODY TAG you may also add a FONT TAG to denote a special font or size, or a EMBEDED SOUND tag to add a midi sound. In the FORM TAG you will substitute in your own screen name and where the blank line is you will put the name of your file.

Now you will add INPUT TAGS to your form:
INPUT TAGS can be text, radio, checkbox, button, image, submit or reset devices. Following is an explanation of each of these. You may choose which you want to use:

Text Input:

This will ask the user to type in text which will be displayed in the data file. It might look like this:

Your name:

That would tell the browser to create a textbox 30 characters in length, and name the textbox "name". Whatever the user types in will become a substitute for "name".
Another example might be:

Your email address:

Here the user would be able to type in his email address in the displayed box. You may have as many of these as you want, just change the value in the "name" attribute for each one. And you may change the value of the "size" attribute to reflect the size of the box that will be displayed. You will want to separate each of these tags with
tags and you could even center them on the page or use TABLE TAGS to accommodate the shifting of everything on the page over to the right a bit for the use of a bordered background.

Radio Buttons Input:

Radio buttons are small circles of which users may check one to make a choice. Here is an example:

MALE
FEMALE

This example would allow users to choose male or female, but not both. The checked attribute goes in whichever radio button you want checked by default. In this case its the one for female. Note that both radio buttons have the same "name", but the "value" is different in each.

Checkboxes Input:

Checkboxes are similar to radio buttons except each has a different name. The user can choose one, all, none, or several on your form. An example:

What sports do you play?

soccer
baseball
tennis

The user would be asked to check any of the boxes that apply to him. The tennis box has the default check.

Select (drop-down) Listbox:

This device makes a dropdown box with several choices to choose from by clicking on one to highlight it. Note that this is not to be confused with the Java Script that looks like this and is a device to transport a user to another page of his choice. There is no value=" " attribute for this type of input. The text that you put after each

What sports do you play?

Textarea Input:

Textarea provides a big box where users can enter lots of text, like a message in a guestbook for example.

You can make the name anything you like, and you can change the size by changing the rows and cols (columns wide). Wrap is there to tell the browser to wrap the text into the textbox. If you want any default text, you would put it between the textarea tag set.

Submit and Reset Buttons:

Buttons, images, submits and resets are all done with this tag. Just change the type= attribute to which ever one you want to use. Submit is required, the others are optional.

Note that value= will be what you want written on the buttons. On the submit button you could say instead "press to send".

Now you might want to add some HIDDEN INPUT TAGS .
These go right after the FORM tag and they do not show up on your page but rather they determine how your content will work. Some examples are:

Add this tag to allow users to put HTML in the comments on your form. For example when someone wants to leave an image or banner or hyperlink in your guestbook.

Add the ResponsePage tag to indicate what page you want the browser to transport the user to after they submit the form. If you do not specify a ResponsePage, then the AOL will, by default, transport users to a simple page that says THANK YOU. You might want to fill in the blank with the URL of your own thankyou page, or just use the URL of the page that they came from originally before getting the form to fill out.

This tag allows you to make one or more fields on your form required so that the form will not process unless that field is filled it. In the blanks after value= you would list the field names you want to include. The name would be whatever was in the name=" " property on the input tag. Note that there is no space between the names, just commas. Also note that this is one of those case sensitive tags I mentioned earlier. For some reason the "r" in required MUST be a lower case "r".

This tag will send you an email to your AOL screen name whenever someone submits a form.

At the bottom of your FORM you will need to add the close tags:

CREATING YOUR TEMPLATE:

You will name your Template file the same name as the Data File that you will be making later, except it will have the extension .gbt on it. This file does not have any , , , etc. tags or the closing tags for these either. It is just a list of tags that serve as markers that get filled in with the appropriate form data. All of the inputs that were listed in your form must have a corresponding tag in the Template. For example if your FORM looked like this: <html> <head> <title>My Guestbook

Then your TEMPLATE would look like this:

submitted on: #date# at #time#
By: #name#
From: #home#
email: #email#
Comments: #comment#

Notice that it is very simple...none of the usual HTML tags. It has an optional date and time field. The browser will fill these in automatically. Now notice that all the input tags from your FORM that asked the user to fill in something has a corresponding tag in the TEMPLATE and the "names" are the same in both files, and those names are set on both sides by pound signs (#). A

(horizontal rule) tag is added at the end so that it will separate each of the entries. You could use a bar image instead if you like. The size of the Template file is limited to 100,000 bytes. The size of the DataFile is limited to 1,000,000 bytes. An email message will automatically be sent to you when it is 90% full and when the size limit is reached, attempted new entries will be discarded and an error will be returned to the user.

CREATING YOUR DATAFILE:

You are not really required to make this file. If you don't make it, then AOL server will automatically make one for you. But you will want to make it yourself so that you can put your own background, colors, graphics and link-back on it! This file starts off with the , , , , , and tags.....but there are no closings for these tags at the end of the file. That is because this is an open ended file. The server will continue to add to it as people submit data on your form.

So on this file add your color and background choices to the tag. Keep in mind that this is the page people will see when they view your guestbook or whatever. Add any embeded sound tags, special fonts, heading at the top, or other text you want and any links to send users back to other pages.

For the example used above, the DATAFILE would look like this:

My Guestbook

Welcome to my guestbook
Click here to return to my page

Again...note that there are no closing tags! And remember that this file will be named the same as your Template file, but will have the .html extension instead of the .gbt extension like the Template file has.

FINISHING UP (uploading and linking):

After you have created the 3 files.......FORM, TEMPLATE, and DATAFILE...... you must upload them to your MYPLACE file in AOL.

Now you will want to put links on one of your pages that will send users to where they can fill out (submit data) your form and in the case of a guestbook for example, another link to where users can view the submitted data.

For a guestbook, for example
the URL to use in the link to SIGN MY GUESTBOOK would be:
http://members.aol.com/your screen name/_________.html
(fill in the blank with the name on your FORM FILE)

the URL to use in the link to VIEW MY GUESTBOOK would be:
http://members.aol.com/your screen name/_________.html
(fill in the blank with the name on your DATA FILE)

HAVE FUN!:

Forms can be used for many purposes. A guestbook is just one example. You can gather information in a survey like the example of the Radio Buttons and Checkboxes that asked about what sports you like to play. Be creative and see what other uses you may find. E mail or send an AOL Instant Message to ladybug703 for questions or help.

This tutorial was provided by

and used by permission.

View our Guestbook Sign or Guestbook

Except where noted, all graphics have been created by Kansas Belle
exclusively for and are the sole property of the Ladies of the Heart /AOL Committee
Please do not use without written permission.
Copyright 1999-2000

Any and all information contained within this site, is done with the
approval of each lady, and is not meant for anyone else to use,
unless first granted permission from the individual ladies.
All rights to privacy will be protected to the best of our abilities.