cs108 lecture 22: web applications: forms 1 computer science cs108 lecture 22: web applications:...
TRANSCRIPT
3/25/13
1
Computer Science
CS108 Lecture 22: Web Applications: Forms
HTML Forms Processing Form Inputs The Common Gateway Interface CGI processing in Python Aaron Stevens
Computer Science
What You’ll Learn Today
Using HTML forms to collect data from a client and send it to your web application
Accessing user input from inside your python web application: the Common Gateway Interface
3/25/13
2
Computer Science
HTTP
HyperText Transfer Protocol http://www.ltg.ed.ac.uk/~ht/WhatAreURIs/
Computer Science
Data-Driven Web Applications
http://www.windowsecurity.com/img/upl/web-apps11165227941888.gif
3/25/13
3
Computer Science
HTML Forms
HTML Forms are a way to provide input to the webserver:
Forms are created with the <FORM> tag.
Computer Science
HTML Forms
Here is the code that created that form:
Rendered Display:
3/25/13
4
Computer Science
Linking Forms to Actions
HTML Forms send data to the webserver, as specified by a parameter called action:
action tells the form to which URL to send the HTTP request and data.
Computer Science
Using Google Search as CGI
Google Search responds to HTTP requests with minimal form data: http://www.google.com/search?q=<value>
action = http://www.google.com/search q = the query value
3/25/13
5
Computer Science
HTML Form Fields
We need to specify each form field’s name, type, and value:
!type=text
Computer Science Processing HTML Form Fields
The application waiting to process a form is called a Common Gateway Interface or CGI. Requires a non-trivial script on the server to process the
data. Some easy CGIs to which we can send FORM data: Send a query to Google search, maps, etc. Send the form data to email: http://cs-webapps.bu.edu/util/formmailer.py http://www.response-o-matic.com/
3/25/13
6
Computer Science
Email form fields
Example: contact form
Here’s an application you can use to send form data to email: http://cs-webapps.bu.edu/util/formmailer.py Must include a field named “mailto”, with a value for your email address.
Computer Science
HTML Forms
HTML Forms are a way to provide input to the webserver:
Forms are created with the <FORM> tag.
3/25/13
7
Computer Science
How CGI Works Web Browser
(client) Web App (server)
GET /
GET + name
RESP: form
RESP: welcome + name
If “name” NOT in CGI data? Show form
If “name” in CGI data: do welcome
Computer Science
HTML Forms
Here is the code that created that form:
HTML/GUI Display:
3/25/13
8
Computer Science
Processing CGI Form Fields
Common Gateway Interface or CGI is a way for web applications to send data to the server. Python’s CGI module provides access to a dict of all form fields and their values.
Use the cgi.FieldStorage() function to get this dict, to which the code refers to as form.
Computer Science
Processing CGI Form Fields
Notice a few things: Check that a field exists before ‘reading’ it. Notice the item in the dict is an object of type cgi.MiniFieldStorage. The data we want is the .value attribute.
3/25/13
9
Computer Science
Using CGI Data in the HTML Response After we ‘read’ the CGI Fields, we can use in our program/output:
Computer Science
Example: Web Calculator
3/25/13
12
Computer Science
We must handle two different cases:
Web Browser (client)
Web App (server)
GET /
RESP: login form
Got form data? NO: send form
GET + login form
RESP: welcome
Got form data? YES: read out name
and send welcome message
Computer Science
More HTML Forms Fields
Reference: http://www.w3schools.com/HTML/html_forms.asp for more syntax, etc.
3/25/13
15
Computer Science Reading Other CGI Form Data
Here are a variety of CGI Form Fields:
Computer Science
Reading Other CGI Data
All form fields are presented to Python as Type MiniFieldStorage. This code: Produces this HTML output:
3/25/13
16
Computer Science
Reading Other CGI Data
These data are key-value pairs:
Notice that the checkboxes might produce a list of MiniFieldStorage objects. Or a single MiniFieldStorage if only one checkbox
was selected!
Computer Science
Reading a CGI Data list If needed, check type of form fields… And process as a list of MiniFieldStorage Notice output obtained by indexing into this list:
3/25/13
17
Computer Science Organizing a Python Web App
Divide and Conquer Strategy: Separate the processing from Input/Output Separate each “action” to is own function(s)
Test each part of the application by itself!
Computer Science
Separate Processing from Input/Output
Write functions to do the computation. unit test with a non-web, console application.
Examples: calculatePMT, dollarFormat, wordCount, encode/decode/ciphering, etc.
Always test computation first, and then begin work on presentation.
3/25/13
18
Computer Science
Many functions make simple programs Put each web interaction into its own function. Print a web form. Display an output. Got multiple paths/outputs -- one function each!
Computer Science
What You Learned Today
The HTML <FORM> tag Accessing CGI field data in Python Be mindful of what type of data you are
expecting. When in doubt, use introspection! Divide and conquer strategy for web application
development.