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

3/25/13 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 Computer Science  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 1

3/25/13 HTTP Computer Science HyperText Transfer Protocol http://www.ltg.ed.ac.uk/ ~ht/WhatAreURIs/ Data-Driven Web Applications Computer Science http://www.windowsecurity.com/img/upl/web-apps11165227941888.gif 2

3/25/13 HTML Forms Computer Science HTML Forms are a way to provide input to the webserver: Forms are created with the <FORM> tag. HTML Forms Computer Science Here is the code that created that form: Rendered Display: 3

3/25/13 Linking Forms to Actions Computer Science 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. Using Google Search as CGI Computer Science 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 4

3/25/13 HTML Form Fields Computer Science We need to specify each form field’s name, type, and value: � type=text Processing HTML Form Fields Computer Science 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/ 5

3/25/13 Email form fields Computer Science 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. HTML Forms Computer Science HTML Forms are a way to provide input to the webserver: Forms are created with the <FORM> tag. 6

3/25/13 How CGI Works Computer Science Web Browser Web App (client) (server) GET / If “name” NOT in CGI data? RESP: form Show form GET + name If “name” RESP: welcome + in CGI data: name do welcome HTML Forms Computer Science Here is the code that created that form: HTML/GUI Display: 7

3/25/13 Processing CGI Form Fields Computer Science 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 . Processing CGI Form Fields Computer Science 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. 8

3/25/13 Using CGI Data in the HTML Response Computer Science After we ‘ read ’ the CGI Fields, we can use in our program/output: Example: Web Calculator Computer Science 9

3/25/13 Example: Web Calculator Computer Science Example: Web Calculator Computer Science 10

3/25/13 Example: Web Calculator Computer Science Example: Web Calculator Computer Science 11

3/25/13 We must handle two different cases: Computer Science Web Browser Web App (client) (server) GET / Got form data? NO: send form RESP: login form GET + login form Got form data? YES: read out name RESP: welcome and send welcome message More HTML Forms Fields Computer Science Reference: http://www.w3schools.com/HTML/html_forms.asp for more syntax, etc. 12

3/25/13 type=radio � Computer Science type=checkbox Computer Science 13

3/25/13 <textarea> Computer Science <select> Computer Science 14

3/25/13 Reading Other CGI Form Data Computer Science Here are a variety of CGI Form Fields : Reading Other CGI Data Computer Science All form fields are presented to Python as Type MiniFieldStorage. This code: Produces this HTML output: 15

3/25/13 Reading Other CGI Data Computer Science 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! Reading a CGI Data list Computer Science If needed, check type of form fields… And process as a list of MiniFieldStorage Notice output obtained by indexing into this list: 16

3/25/13 Organizing a Python Web App Computer Science 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! Separate Processing from Input/Output Computer Science 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. 17

3/25/13 Many functions make simple programs Computer Science Put each web interaction into its own function.  Print a web form.  Display an output.  Got multiple paths/outputs -- one function each! What You Learned Today Computer Science  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. 18

3/25/13 Announcements and To Do List Computer Science  Readings:  HTML Forms tutorial: http://www.w3schools.com/HTML/  ! 19