CS108 Lecture 22: Web Applications: Forms 1 Computer Science CS108 Lecture 22: Web Applications: Forms HTML Forms Processing Form Inputs The Common Gateway Interface CGI processing

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

3/25/13

19

Computer Science Announcements and To Do List

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

  !