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.
Q3. Can you modify the script to process the form?
Answer:
In these 2 questions, I use xampp instant packages and xampp's python plug-in to develop the perl and python script. For JavaScript (ajax), I use Jaxer to develop the script.
PERL script to handle the data from the form in try.html is shown as follow...
Diagram-20 - The PERL script to handle the form's dataAfter clicking the "Buy!" button, the perl_order.cgi perl script will be run and the output of the perl_order.cgi to handle the form's data is shown in Diagram-21.
Diagram-21 - the output of the perl_order.cgi after clicking the "buy!" button
The explanation of this perl_order.cgi is stated below step by step...
- #!"G:\xampp\xampp\perl\bin\perl.exe" - Firstly, we states the location of Perl. "#!" means notation invoke interpreters.
- $query_string=$ENV{'QUERY_STRING'}; - in the try.html, get method is used to submit the form data. This statement put the get statement string into $query_string variable, for example, the get statement string in URL is like ?fullname=Joseph+Cheung&fulladdress=Room+100&2C.... etc
- @pairs=split(/&/, $query_string); - take the & away from the $query_string
- foreach $pair (@pairs)
{
($key, $content)=split(/=/, $pair);
$content=~tr/+/ /;
$content=~s/%(..)/pack("c", hex($1))/ge;
$fields{$key}=$content;
} - foreach and its statements inside {} are used to divide the $query_string into pieces. Each piece is put in field variable. - $name=$fields{'fullname'};
$address=$fields{'fulladdress'};
$email=$fields{'fullemail'};
$discount=$fields{'fulldiscount'};
$visa=$fields{'fullvisa'};
$perfume=$fields{'fullperfume'};
my $receipt=2009030000;
my $range=1000;
$total=0; - initialize the variables and put the field variable into local user-friendly variable. - $perfume=int($perfume);
$discount=int($discount); - convert strings into integers. - $total=$perfume*(100-$discount)/100;
$receipt=$receipt+int(rand($range)); - compute the total charge of the transaction and generate the receipt number. - print "Content=type:.... - all print statements are used to output and show the transaction has been completed.
Python script to handle the data from the form in try2.html is shown as follow... This time, we use post method and the form action is "/cgi-bin/python.cgi".
Diagram-22 - the source code of python.cgi which handle the post data from the form in try2.html
The output screen of python.cgi is shown in Diagram-23. After clicking the "Buy!" button in try2.html, the python.cgi python script will be run and the output is then obtained.
Diagram-23 - The output after handling the post data from the form
The explanation of the python.cgi python script is listed as below...
- #!G:\xampp\xampp\python\python.exe - is used to locate the interpreter python.exe location
- import os, sys, cgi, cgitb, random; cgitb.enable() - import python library
- form=cgi.FieldStorage()
name=form.getvalue('fullname')
address=form.getvalue('fulladdress')
email=form.getvalue('fullemail')
discount=form.getvalue('fulldiscount')
perfume=form.getvalue('fullperfume')
visa=form.getvalue('fullvisa') - handling the post data from the form - receipt=2009030000 - create receipt number
- startrange=0
stoprange=1000
total=0
statement=''
finalstatmt='' - variables declaration - perfume=int(perfume)
discount=int(discount) - convert strings to integers - total=perfume*(100-discount)/100
receipt=receipt+random.randint(startrange, stoprange) - calculate the total charge after discount and generate the receipt number - if (perfume==1000):
statement='You have bought Odors Perfume with Discount '
if (perfume==5000):
statement='You have bought Worthless Perfume with Discount '
if (perfume==10000):
statement='You have bought Very Good Perfume with Discount '
if (discount==0):
statement=statement+'0% Off '
if (discount==50):
statement=statement+'50% Off '
if (discount==80):
statement=statement+'80% Off ' - make the statement to show what you have bought and the discount you have - finalstatmt & print statements are used to display the output in the browser
JavaScript script to handle the data from the form in try5.html is shown as follow... This time, we do not use post or get method and the form is handled by formHandle.js JavaScript script.
Diagram-24 - Ajax - The French Perfume Purchase Form
When you enter your information in the form in the Diagarm-24. The information you have just entered are displayed instantly in the bottom of the try5.html. After filling all information and then clicking "Pay" button, your Receipt will be generated. The word "Receipt" will be shown in the bottom in the try5.html but on the top of the personal information. Beside that, the total amount you need to pay will be calculated and also be shown in the bottom of the try5.html but under your personal information. The try5.html involves 2 JavaScript scripts. They are ajax.js and formHandle.Js. The following diagrams show them and I will explain for these 2 scripts too.
Diagram-25 - Ajax.js is download from www.w3schools.com and is used to detect the brower's version & manufacturer
Ajax.js will detect the brower's version & manuacturer. If the brower is Internet Explorer (IE), then Ajax.js will create a actionXObject. If the brower is others, like firefox or Netscape, Ajax.js will generate a XMLHttprequest. Javascipt itself is seldom used to manipulate form's data. However, JavaScript together with other technologies, like xml forms AJAX - Asynchronous JavaScript and XML which can create more interactive webpages and handle form's data.
Diagram-26 - fromHandle.js
Diagram-27 - try5.html
When you interact with the try5.html, for example, onkeyup or onclick by keyboard or mouse respectively, formHandle.js will then get the form's data value by getElementByID().value in formHandle.js. After that, formHandle.js use the values to generate the html output strings printed in the Receipt and to compute the total payable amount after the "Pay" button is clicked. The variables - finalperfume and finaldiscount are used to store the perfume and the discount rate you finally select.
Can you modify the script to process the form? Yes, the formHandle.js, try5.html is developed by me. I learn JavaScript in w3schools.com.
No comments:
Post a Comment