Basic Overview of the use of CGI:
Using the database example mentioned on the web page at hoohoo.nesa, how CGI is used will be explained:
If a person wants to share his database with the world by connecting to the web, he will require a CGI program to transmit information between the web browser and the database engine. When a client requires some information from the database, his web browser sends request to the server. The database engine using CGI executes a CGI script which would then process the request and return the results to the web browser. As the script is being processed on the web server itself, this technique is known as server-side scripting.
The diagram below illustrates the use of CGI:
[Reference: , 23/11/08]
Explanation of how CGI is used:
Generally the input for a CGI script is received from a HTML form on a webpage. For example, the form shown below:
The webpage simulates that of a basic online survey page. The form is created to take in the 4 separate items of data. Once this form is filled and the user presses the Submit button at the bottom of the page, a HTTP request would be sent to the server. Upon submission, the file specified in the action attribute of the form would be requested from the server. This form would request a CGI script on submission.
The information that the user has entered in the form can be submitted by 2 methods: GET and POST. By sending the form data using the GET method, the data is appended to the URL of the CGI program and therefore all the data is visible in the address bar in name/ value pairs.
Shown below is how the address bar would look if the GET method was used:
In the POST method, the data is added to the HTTP request message. If the data sent needs to be secure, for example, the username and password for an email account, the POST method is the suitable method. For this form, I have used the POST method to send the data.
Shown below is the http request that is sent on submitting the form:
Upon receiving the request from the client’s browser, the server executes the CGI Script, which is located in the cgi-bin directory. The script then begins to process the request. As all the data is packaged up when being sent to the script, it has to be separated into their respective parts.
Once each data has been split, the script can begin various other processes, such as validation, etc.
After its processing, the resulting output can be returned back to the web browser in the form of HTML code.
In the form I have created, upon submission the mycgi.pl file is requested from the server. This script uses the split function to separate the various data items. Each data is validated. A web page is then dynamically generated from the script, displaying either the error messages if any field had been incorrectly filled in, or the data that the user has entered into the survey.
The webpage that is returned to the user upon completing the survey correctly is shown below:
REFERENCED SITES:
How Web Servers Work - The Basic Process
How Web Servers Work - Extras: Dynamic Pages
How Web Servers Work – Behind the Scenes
How CGI Scripting Works - The CGI Mechanism
How CGI Scripting Works - Forms: Sending Input
How CGI Scripting Works - Summary
Common Gateway Interface
The Client-Server Architecture
Web and Database Integrating Using CGI
CGI
How CGI Scripting Works - The CGI Mechanism
Web Server
APPENDIX
APPENDIX A:
Program listings of Form.html
<!--
Written by : Malshani Nanayakkara
StudentID: 2007020
-->
<html>
<head><title>HTML Form</title></head>
<body bgcolor="#ADDFFF">
<font color="blue">
<h1><center>Welcome to</center></h1>
<h1><center>Online Surveys</center></h1>
<p align=center><b>Hi, we are conducting a survey to see which is currently the popular drink in the country.<br/>
If you are between the ages of 14 and 50, we kindly request just a minute of your time to fill out the form below.</b></p></font>
<br />
<form method=POST ACTION="http://localhost/cgi-bin/mycgi.pl">
<b>General Information:</b> <br />
<pre>
Name: <input type=text name="name"><br />
Age: <input type=text name="age"><br />
Email address: <input type=text name="email">
</pre>
<b>Survey: <br /><br />
What's your favourite drink? </b>
<br /><br />
<input type=radio name="Drink" value="Soda"> Soda </input><br />
<input type=radio name="Drink" value="Pepsi"> Pepsi </input><br />
<input type=radio name="Drink" value="Sprite"> Sprite </input><br />
<input type=radio name="Drink" value="Fanta"> Fanta </input><br />
<input type=radio name="Drink" value="Ginger Beer"> Ginger Beer </input><br />
<input type=radio name="Drink" value="Cream Soda"> Cream Soda </input><br />
<input type=radio name="Drink" value="Portello"> Portello </input><br />
<input type=radio name="Drink" value="Coca-Cola"> Coca-Cola </input><br />
<input type=radio name="Drink" value="Fruit Juices"> Fruit juices </input><br />
<input type=radio name="Drink" value="Water"> Water </input><br />
<br />
<input type=submit value="Submit !">
</form>
</body>
</html>
Program listing of mycgi.pl
#!C:/Perl/bin/perl.exe
use CGI qw(:standard);
read(STDIN, $data, $ENV{CONTENT_LENGTH});
print "Content-type: text/html\n\n";
#unpack the form data
($firstpair, $secondpair, $thirdpair, $fourthpair) = split(/&/, $data);
($firstkey, $name) = split(/=/, $firstpair);
($secondkey, $age) = split(/=/, $secondpair);
($thirdkey, $email) = split(/=/, $thirdpair);
#($thirdkey, $phoneno) = split(/=/, $thirdpair);
($fourthkey, $drink) = split(/=/, $fourthpair);
$validentry = 0; #keeps track if all entries are valid
print "<html><head><title>CGI Scripting Results</title></head>";
print "<body bgcolor=\"#ADDFFF\"><font color=\"blue\"><br/>";
#--------------------------VALIDATION------------------------------------
#validating name
if($name !~ /[A-Za-z]+/ || $name =~/[0-9A-Za-z]+[0-9]+/ ) #if it is outside the range of the alphabet or it is letters mixed with number
{
print "<br/>ERROR: Name given contains an invalid character or has not been provided!";
$validentry =1;
}
else
{
$name1 = $name; #keeps an original version so that it can be written file. It can read easily from the file then.
$name1 =~s/\+/ /;
print "<b>Name:</b> $name1";
}
#validating age
if ($age<14 || $age>=50)
{ print "<br />ERROR: Age is not between 14-80!";
$validentry =1; }
else
{ print "<br/><b>Age:</b> $age"; }
#validating email address
if (!($email =~/^[\w]+%40[\w]+/))
{ print "<br/>ERROR: Incorrect email address ";
$validentry =1; }
else {
$email =~ s/%40/@/; #replaces the %40 with an @ sign
print "<br/><b>Email address:</b> $email"; }
#validating survey answer
if ($drink!~/[\w]/ )
{ print "<br/>ERROR: You haven't selected an answer!";
$validentry =1;}
else
{
$drink1 = $drink;
$drink1 =~s/\+/ /;
print "<br/><br/><b>Your Survey Answer was:</b> ";
print "<br/><b> Drink:</b> $drink1"; }
#displays a message if all entries have been correctly submitted
if ($validentry==0)
{
print "<br/><br/><center><b>Thank you for participating in our survey!</b></center>";
#writing results to file
$file = 'survey_results.txt';
open(OUTFILE, ">>$file");
print OUTFILE "$name\t$age\t$email\t$drink\n";
close OUTFILE;
}
print "</font><br/>";
print "<form method=POST action=\"http://localhost/cgi-bin/survey.pl\">";
print "<input type=\"submit\" value=\"View survey results\" ";
print "</form>";
print "</body></html>";
#-------------extra code----------
#validating telephone number
# if ((length ($phoneno)==10 ) && ($phoneno =~ /^[0-9]+$/) )
# { print "\nTelephone No: $phoneno"; }
# else
# { print "\nERROR: invalid phoneNo!"; }
APPENDIX B:
Screenshots of validating user input:
The following tests can be performed:
- Two names written
- No name provided
- Number written instead of the name
- Letters and numbers mixed
- No age provided
- Age given outside the required range
- Letters written instead of a number
- No email address given
- Email address without the ‘@’ sign
- No option selected
But as the same error message come for each test, the screenshots for certain validations are shown below.
Test 1: Two names written
Test 2 - 4: Invalid Input for the Name
Test 5 - 7: Invalid Input for the Age
Test 8-9: Invalid Input for the Email address
Test 10: No Selection for the Survey Question
APPENDIX C:
Additional Features:
-writes to a file
If the user has correctly entered data into each of the 4 fields, the information is written on to a text file called ‘survey_results.txt’.
- reads from the text file and displays survey results
Using this text file, the survey results can be viewed:
The page that mycgi,pl returns, contains a button which runs another script which will read the file and display the survey results.
And a page like the one below will be generated:
A program listing for the survey.pl file is given below:
Program listing of survey.pl
#!C:/Perl/bin/perl.exe
use CGI qw(:standard);
print "Content-type: text/html\n\n";
print "<html><head><title>CGI Scripting Results</title></head>";
print "<body bgcolor=\"#ADDFFF\"><font color=\"blue\"><br/>";
open(INFILE, 'survey_results.txt');
@drinks=("Soda", "Pepsi", "Sprite", "Fanta", "Ginger Beer", "Cream Soda", "Portello", "Coca-Cola", "Fruit Juices", "Water");
@drinks_score=(0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
while ($line=<INFILE>) #reads file line by line
{
($name, $age, $email, $survey) = split(/\t/, $line); #seperates each line into seperate data
$survey =~s/\+/ /; #if the drink has two words, the '+' sign will be replaced by a space
$i=0;
while ($i<10)
{
if($survey=~/$drinks[$i]/)
{ $drinks_score[$i]++; } #the line is compared with an array containing all the drinks
$i++;
}
}
print "<br/><font size=\"+1\"><b> Survey Results:</b></font><br/><br/>";
$i=0;
while ($i<10)
{
print "<b> $drinks[$i]</b> $drinks_score[$i]";
print "<br/>";
$i++;
}
print "</body></html>";
