Web form design and processing: A basis for e-commerce interaction
Form string data:
name=Evan+Burke&card=Visa&number=84443261344895544&order=Fench+perfume1. Design the form
“Retrofit” the form data string above for buying some French perfume into the HTML form fields and submit button on the Web page form.
Here are screenshots of my html page, cgiForm.html:
The rendered page, cgiForm.html, in the browser:
2. Write the script
Script archives exist for PERL, Python and JavaScript. Search the web for a script that processes the HTML forms data. Read the code and list the steps involved in processing the form.
I have not had any experience in programming in PERL or Python, but I have done quite a lot of JavaScript development in recent times, however only for client-side development.
Preliminary Planning Requirments
I interpreted this excercise to mean you needed to at least test the code in order to understand how the script worked. So I enacted a plan to get a script working. I had a fairly good idea of how it worked, based on experience with asp and asp.net webforms, which is as follows:
- Set up the html form page, using a GET method attribute in the form tag, so that the form fields are visible in the querystring.
- Submit the form page to a cgi script.(Client-side validation would normally be required at this point, for usability reasons)
- Have the cgi script read the querystring parameters.
- Assign the parameters to variables and validate the values.
- If the values do not validate then redirect the form back to the intial page, and display a diagnostic message.
- If the values pass validation save record the details to a data store, e.g. MySQL
Before I found the script I had to gain an understanding of how CGI worked with the web server (having never used it before or encountered it any tasks I’ve been involved in), and why you needed to use PERL, Python or JavaScript (my initial impression of CGI was that it was a scripting language). So this became my first step.
Initially I wanted to use Python in this example, but as it turned out, in my search for scripts I found that there seemed to be more information for using CGI with PERL. I also had a lot of problems trying to get the right Apache modules to work with Python, in fact the configuration of Apache took at least 80% of my time, overall I don’t see it as lost time because I assume I will be using Apache for any future exercises and workshops, but it was frustrating. I came to the view that popular development platforms owe some of their popularity to the fact that:
- There is a large volume of useful information about the scripting language, and
- There is a large volume of useful information about how to configure the applications required to get the scripting language to work.
That said, I found a two blogs that explained in sufficient detail the steps required to get PERL working with the WampServer version of Apache, they are:
- Chromic Design, Setting Up Perl and CGI For Wamp Server.
- audienceone’s realities and delusions, Perl on WAMPSERVER.
In addition I needed to get MySQL working with PERL as well, the following link and article explains how to do this, Tech republic, Use the Perl DBI for connecting to a MySQL database
Anyway to help anyone else out who is going through the same trials as I did, this is what you need to do to get PERL working, this assumes you already have WampServer set up on your computer:
- Download the ActivePerl distribution.
- Install ActivePerl
- Get the Perl database interface, DBI to connect your Perl scripts to your MySQL database. There is also a MySQL page which details the requirments and steps, here.
- Run the Perl Package Mangager (start > ActivePerl > Perl Package Mangager), this gets installed with the ActivePerl distribution, see figure 3, and make sure your DBI is installed
- If you havn’t already, follow the steps by audienceone’s realities and delusions, Perl on WAMPSERVER. to configure your WampServer with Perl. This is important as you will need to have your
httpd.conffile in Apache configured correctly for Perl to work. - You should now be able to test CGI and Perl scripts on WampServer
Figure 3: Perl Package Mangager.
Searching for CGI scripts that use form data.
In my search I found a number of useful scripts that helped me gain an understanding in how to use a CGI script that processes form data.
The following list were my guides:
- tizag.com, PERL – DBI Query.
- Elated, Tutorial: Introduction to Perl and the CGI and
- Elated, How-To: Form validation with Perl and CGI
I used the Elated, How-To: Form validation with Perl and CGI as a template for the form validation, and an introduction into the basics the Perl script syntax and how form processing works.
Then using the tizag.com, PERL – DBI Query, article I was able to see and test what was required to build the form.
Steps required to process the CGI form:
In addition to the steps I initially proposed before my investigation into PERL scripting, CGI, connecting the Perl to MySQL, I have revised the list as follows:
- Set up the html form page, using a GET method attribute in the form tag, so that the form fields are visible in the querystring.
- Submit the form page to a cgi script.
- CGI configuration
- Add the Perl modules
- Add the HTTP Header
- Set the configuration variables for connection to a data store, i.e. MySQL
- Get values for processing.
- Have the Perl CGI script read the querystring parameters.
- Assign the parameters to variables and validate the values.
- Validate the values in the querystring
- If the values do not validate then redirect the form back to the intial page, and display a diagnostic message.
- If the values pass validation save record the details to a data store, e.g. MySQL
- Store the values in a data store
- Set the data source name
- Connect to the data source
- Encrypt data if necsessary (not sure what the procedure is for maintaining credit card details) or store only the necessary details
- Prepare the sql query
- Execute the query
- Display confirmation or diagnostic message
3. Can you modify the script to process the form?
After a lot of testing, yes. Here is my final basic script:
#!c:/wamp/bin/perl/bin/perl.exe
use CGI;
use DBI;
# Create the CGI object
my $query = new CGI;
# Output the HTTP header
print $query->header ( );
# CONFIG VARIABLES
$platform = "mysql";
$database = "exercise9";
$host = "localhost";
$port = "3306";
$tablename = "orders";
$user = "alex";
$pw = "password";
# DATA SOURCE NAME
$dsn = "DBI:$platform:$database:$host:$port";
process_form ( );
sub process_form
{
if ( validate_form ( ) )
{
# check data has been entered correctly
print <<END_HTML;
<html><head><title>Thank You</title></head>
<body>
Thank you - your form was submitted correctly!
</body></html>
END_HTML
}
else
{
print <<END_HTML;
<html><head><title>Error</title></head>
<body>
There was a problem submitting your form!
</body></html>
END_HTML
}
}
sub validate_form
{
my $name = $query->param("name");
my $card = $query->param("card");
my $number = $query->param("number");
my $order = $query->param("order");
my $error_message = "";
$error_message .= "Please enter your name<br>" if ( !$name );
$error_message .= "Please specify your card<br>" if ( !$card eq "Please select");
$error_message .= "Please specify your card number<br>" if ( !$number );
$error_message .= "Please specify your order<br>" if ( $order eq "Please select" );
if ( $error_message )
{
# Errors with the form - redisplay it and return failure
print $error_message;
return 0;
}
else
{
#print "Form ok";
# Form OK - return success
store_form ( $error_message, $name, $card, $number, $order );
return 1;
}
}
sub store_form
{
my $error_message = shift;
my $name = shift;
my $card = shift;
my $number = shift;
my $order = shift;
# PERL DBI CONNECT
$connect = DBI->connect($dsn, $user, $pw);
# PREPARE THE QUERY
$query = "INSERT INTO orders (name, card, number, orderName) VALUES ('$name', '$card', '$number', '$order')";
$rows = $connect->do($query);
# EXECUTE THE QUERY
#$rows->execute();
print "$rows row(s) affected\n";
$connect->disconnect();
}
The following screenshots detail the the form being processed and the data saved.
References
Alan Pachuau. Setting Up Perl and CGI For Wamp Server WAMP(P) (06 May 2009). Retrieved 15th June 2009 from http://www.chromicdesign.com/2009/05/setting-up-perl-for-wampp.html
audienceone’s realities and delusions. Perl on WAMPSERVER. (05 September 2008). Retrieved 15th June 2009 from http://audienceone.blogspot.com/2008/09/perl-on-wampserver.html
techrepublic. Use the Perl DBI for connecting to a MySQL database. (09 November 2005). Retrieved 15th June 2009 from http://articles.techrepublic.com.com/5100-10878_11-5942389.html
activestate. Complete and Ready-to-Install. (n.d). Retrieved 15th June 2009 from http://www.activestate.com/activeperl/
Perl DBI. Download latest DBI. (n.d). Retrieved 15th June 2009 from http://dbi.perl.org/
tizag.com. PERL – DBI Query. (n.d). Retrieved 15th June 2009 from http://www.tizag.com/perlT/perldbiquery.php
ELATED. How-To: Form validation with Perl and CGI. (12 June 2003 ). Retrieved 15th June 2009 from http://www.elated.com/articles/form-validation-with-perl-and-cgi/
Tutorial: Introduction to Perl and the CGI (12 June 2003 ). Retrieved 15th June 2009 from http://www.elated.com/articles/introduction-to-perl-and-cgi/
MySQL. 2.15.2. Installing ActiveState Perl on Windows (n.d). Retrieved 15th June 2009 from http://dev.mysql.com/doc/refman/5.1/en/activestate-perl.html
