Web Applications: Forms HTML Forms Processing Form Inputs The - - PDF document

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 10

Computer Science

Example: Web Calculator

Computer Science

Example: Web Calculator

3/25/13 11

Computer Science

Example: Web Calculator

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 13

Computer Science

type=radio

Computer Science

type=checkbox

3/25/13 14

Computer Science

<textarea>

Computer Science

<select>

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

• f 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.

3/25/13 19

Computer Science

Announcements and To Do List

• Readings:
• HTML Forms tutorial: http://www.w3schools.com/HTML/
• !