'Retrofit' the form data string above:
name=Evan+Burke&card=Visa&number=844326134489554&order=French+perfume
Below is the code for the retrofitted form in HTML which captures all the items listed above. The editor which was used to design the HTML code was Notepad++:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Order Cosmetics Here!</title>
</head>
<body>
<h1>Online Cosmetics</h1>
<p>
Please fill out the form below to purchase your choice of cosmetic.</p>
<p>
<form name="perfume" action="cgi-bin/anyform.py" method="POST">
<table>
<tr>
<td><label for="name" />Name:</td>
<td><input type="text" name="name" size="40" /></td>
</tr>
<tr>
<td><label for="card" />Card Type:</td>
<td><select name="card">
<option>Mastercard</option>
<option selected="selected">Visa</option>
<option>American Express</option>
</select>
<p /><label for="number" />Number: <input type="text" name="number" size ="40" /></td>
</tr>
<tr>
<td><label for="order" />Products</td>
<td><select name="order">
<option selected="selected">French perfume</option>
<option>Skin Care</option>
</select></td>
</tr>
<tr>
<td colspan="2"><p /><input type="submit" name="submit" value="Click to Order!" /></td>
</tr>
</table>
</form>
</p>
</body>
</html>
2. Write the script which processes the forms data. Read the code and list the steps involved in processing the form.
After some research on the internet i came across a generic python script which processes all the form data posted to it, and re-displays it in HTML to the browser.
Setup of CGI Python Script
1. To use the python script you must configure cgi on the apache webserver
2. You must install the python libraries to the machine
3. Place python script in designated cgi-bin directory of apache
Call CGI/Python Script from HTML page to process the form
1. Must change method in the FORM tag to 'POST'
2. Change the action in the 'FORM' tag to "cgi-bin/anyform.py"
3. Ensure in the python script the local python libraries are imported at the start of the script using this line of code at the very beginning if windows '#!c:/Python26/python.exe -u' and if unix '#!/usr/local/bin/python'
How the Python script works
1. Looks at all the forms data using the function 'cgi.FieldStorage()' which gathers all the form data
2. Sorts out all the form data by key names 'nameList = form.keys() nameList.sort()
3. Loops through each of the form items, and displays the value associated with each of the form items.
4. Once this is complete the HTML is the rendered back to the webserver then onto the browser for display to the client.
Below is the script which was gathered from http://infohost.nmt.edu/tcc/help/lang/python/anyform.txt and modified to work on a Windows machine:
#!c:/Python26/python.exe -u
#--
# anyform.cgi: Generic Python CGI forms handler
#--
import cgi # Main CGI handler
def valueCheck(form, name):
""" This function should be called once for each named element
on the form. It will display the element name and the value
or values. The (name) argument is the element name.
The `form' argument is a dictionary where the keys are the
names of the items, and each item is either:
- If there is only value for a single name, the item is
an object whose .value member is the text of the item; or
- If there are multiple values for the name, the item is
a list of objects whose .value members are the item texts.
"""
if form.has_key(name): # Is there an item for this name?
item = form[name] # Yes, get the item (or list of items)
if type(item) is list: # Is it a list of containers?
#--
# List: display in brackets with commas. First form
# the list of .value attributes from item, then
# concatenate them with commas between them and
# brackets around them.
#--
valueList = [i.value for i in item]
text = "[%s]" % ", ".join(valueList)
else: # Single value
text = item.value
print "%s = %s<br>" % (name, `text`)
else: # No value: say so
print "%s is undefined<br>" % name
#--
# Main program starts here
#--
form = cgi.FieldStorage() # Get the form object
print "Content-type: text/html" # Print the required header for HTML
print # Blank line to signify end of headers
print "<html>"
print "<head>"
print " <title>Results of your form submittal</title>"
print "</head>"
print "<body>"
print "<h1>Results of your form submittal</h1>"
print "<p>Here are your results:\n<p>"
nameList = form.keys()
nameList.sort()
for name in nameList:
valueCheck(form, name)
print "</body>"
print "</html>"
3. Can you modify the script to process the form?
In regards to modification of the script, this can be easily done as the code resides on the your local web server. The modifications which can happen to this file depends on the requirements of the HTML form. Some examples include saving the form data to a database, a flat file, emailing the data to a certain email address, or instantiating another process. These are just a few of the modifications which can occur to this particular python script, it just depends on the requirements needed.
4. Improve the user experience by adding a Javascript feature.
The javascript function i added to the form involves the shaking/resizing of the submission button, below is the script which must be added to the header of the HTML form:
<SCRIPT LANGUAGE="JavaScript">
pos = 15;
TO = null;
function shake_funct2(object,speed)
{
obj = eval(object)
txt = clear_space(obj.value);
if (pos == 15)
{
txt = txt + " ";
pos = -15;
}
else
{
txt = " " + txt;
pos = 15;
}
obj.value = txt;
obj.style.width = parseInt(obj.style.width) + pos;
obj = object
sp = speed
TO = setTimeout("shake_funct2(obj,sp)",speed);
}
function clear_space(text)
{
while (text.substring(0,1) == " ")
{
text = text.substring(1,text.length);
}
while(text.substring(text.length-1,text.length) == " ")
{
text = text.substring(0,text.length-1);
}
return text;
}
function end_shake_funct2(object)
{
clearTimeout(TO);
obj = eval(object);
txt = clear_space(obj.value);
obj.value = txt;
//alert(pos);
if (pos == -15)
{
obj.style.width = parseInt(obj.style.width) +15;
}
pos = 15
}
// End -->
</script>
Last but not least the onmouseover and onmouseout event must be populated on the submit button as per below:
<input type="submit" name="submit" value="Click to Order!" style="font-size:10;width:150"onmouseover="shake_funct2(this,100)" onmouseout="end_shake_funct2(this)" />
No comments:
Post a Comment