python html cgi

jenny2000000

I211_Lecture_21_cgi.pptx

Home >Information Systems homework help >python html cgi

I211 – Information Infrastructure II

Lecture 20

Today

CGI

Forms

HTML Forms and CGI

We can get input from users online by using HTML forms! (These have the same sorts of elements as Tkinter)

Text boxes <input type="text" name="name">

Radio buttons <input type="radio" name="y_or_n" value="yes" checked > Yes

Text areas <textarea name="comments" rows="3">None</textarea>

Buttons <button name="name"></button>

Check boxes <input type="checkbox" name="size" value="Large"> Large

HTML Forms and CGI

HTML form elements must be enclosed in <form> tags.

The <form> tag has an action attribute that specifies what URL to send the data to:

Form Submit

<!doctype html>

<html>

<body>

Please enter your name:

<button type="submit">Submit</button>

</form>

</body>

</html>

HTML Form Elements:

You don’t need to chmod .html files!

A submit button creates a button that will submit the form when clicked!

HTML Forms and CGI

import cgi

form = cgi.FieldStorage()

form now has a dictionary-like object where the form element’s name attribute is the key, and the form element’s data (user-typed or value attribute) is the value

CGI Handler with .getfirst()

#! /usr/bin/env python3

print('Content-type: text/html\n')

import cgi

form = cgi.FieldStorage() #parses form data

html = """<!doctype html>

<html>

<body>

<p>{content}</p>

</body>

</html>"""

user = form.getfirst('username','Who are you?')

print(html.format(content = 'Hello,' + user))

The first argument is the name of the form element we want, and the second argument is what to return if it isn’t found.

This is exactly like the .get() method for dictionaries!

Simple Form (Individual)

<!doctype html>

<html>

<body>

<p>Please enter your name:

<button type="submit">Submit</button>

</form>

</body>

</html>

Save this as name.html and upload

Form CGI Handler (Individual)

#! /usr/bin/env python3

print('Content-type: text/html\n')

import cgi

form = cgi.FieldStorage() #parses form data

html = """<!doctype html>

<html>

<body>

<h1>Greetings!</h1>

<p>{content}</p>

</body>

</html>"""

user = form.getfirst('username','Who are you?')

print(html.format(content = 'Hello,' + user))

Save this as name.cgi, and don’t forget to

pico and chmod +x

 URL is https://cgi.sice.indiana.edu/~ username /name.html

HTML Form Page

<!doctype html>

<html>

<head><meta charset="utf-8"><title>First Interactive Form</title></head>

<body>

Please enter your name:

<button type="submit">Submit</button>

</form>

</body>

</html>

HTML Form Page

<!doctype html>

<html>

<head><meta charset="utf-8"><title>First Interactive Form</title></head>

<body>

Please enter your name:

<button type="submit">Submit</button>

</form>

</body>

</html>

The form element lets you collect information from the user.

HTML Form Page

<!doctype html>

<html>

<head><meta charset="utf-8"><title>First Interactive Form</title></head>

<body>

Please enter your name:

<button type="submit">Submit</button>

</form>

</body>

</html>

The action attribute determines where the information on the form is sent.

HTML Form Page

<!doctype html>

<html>

<head><meta charset="utf-8"><title>First Interactive Form</title></head>

<body>

Please enter your name:

<button type="submit">Submit</button>

</form>

</body>

</html>

The name attribute determines what the user’s response will be called on the cgi page.

HTML Form Page

<!doctype html>

<html>

<head><meta charset="utf-8"><title>First Interactive Form</title></head>

<body>

Please enter your name:

<button type="submit">Submit</button>

</form>

</body>

</html>

The submit button gives the user something to click to indicate that the form is filled out and should be processed.

CGI Handler with .getfirst()

#! /usr/bin/env python3

print('Content-type: text/html\n')

import cgi

form = cgi.FieldStorage()

html = """<!doctype html>

<html>

<head>

</head>

<body>

<p>{content}</p>

</body>

</html>"""

user = form.getfirst('username','Who are you?')

print(html.format(content = 'Hello,' + user))

CGI Handler with .getfirst()

#! /usr/bin/env python3

print('Content-type: text/html\n')

import cgi

form = cgi.FieldStorage()

html = """<!doctype html>

<html>

<head>

</head>

<body>

<p>{content}</p>

</body>

</html>"""

user = form.getfirst('username','Who are you?')

print(html.format(content = 'Hello,' + user))

This indicates to the interpreter that it should treat the rest of the code as python.

Note the space after the ! and before python3

CGI Handler with .getfirst()

#! /usr/bin/env python3

print('Content-type: text/html\n')

import cgi

form = cgi.FieldStorage()

html = """<!doctype html>

<html>

<head>

</head>

<body>

<p>{content}</p>

</body>

</html>"""

user = form.getfirst('username','Who are you?')

print(html.format(content = 'Hello,' + user))

This first printed line is needed to tell the browser that the rest of what is printed should be displayed as html.

CGI Handler with .getfirst()

#! /usr/bin/env python3

print('Content-type: text/html\n')

import cgi

form = cgi.FieldStorage()

html = """<!doctype html>

<html>

<head>

</head>

<body>

<p>{content}</p>

</body>

</html>"""

user = form.getfirst('username','Who are you?')

print(html.format(content = 'Hello,' + user))

This line creates a dictionary of all the values sent to the cgi page.

CGI Handler with .getfirst()

#! /usr/bin/env python3

print('Content-type: text/html\n')

import cgi

form = cgi.FieldStorage()

html = """<!doctype html>

<html>

<head>

</head>

<body>

<p>{content}</p>

</body>

</html>"""

user = form.getfirst('username','Who are you?')

print(html.format(content = 'Hello,' + user))

This triple quoted string is our html template. The {content} acts as a placeholder.

CGI Handler with .getfirst()

#! /usr/bin/env python3

print('Content-type: text/html\n')

import cgi

form = cgi.FieldStorage()

html = """<!doctype html>

<html>

<head>

</head>

<body>

<p>{content}</p>

</body>

</html>"""

user = form.getfirst('username','Who are you?')

print(html.format(content = 'Hello,' + user))

The getfirst method is called on the form we made earlier.

The first argument is the name of the form element we want, and the second argument is what to return if it isn’t found.

CGI Handler with .getfirst()

#! /usr/bin/env python3

print('Content-type: text/html\n')

import cgi

form = cgi.FieldStorage()

html = """<!doctype html>

<html>

<head>

</head>

<body>

<p>{content}</p>

</body>

</html>"""

user = form.getfirst('username','Who are you?')

print(html.format(content = 'Hello,' + user))

Printing the html string we created displays it in the browser.

We use the format method to put the information we want into our placeholder.

Calculate 1 (Group Work)

Write an HTML form and a Python CGI script (2 separate files, on burrow) that can take two numbers from the user and show them the total of those two numbers.

Example: http://cgi.soic.indiana.edu/~dpierz/calculate1.html

Note: Since we’re getting data from the user, you might also consider using try and except for error checking.

Calculate 1 (HTML Solution)

<html>

<head><meta charset="utf-8"><title>Calculate</title>

<body>

<p>Please enter two numbers to add together: </p>

<p>number one <input type='text' name='one'></p>

<p>number two <input type='text' name='two'></p>

<button type="submit">Equals</button>

</form>

</body>

</html>

Calculate 1 (Python Solution)

#! /usr/bin/env python3

print('Content-type: text/html\n')

import cgi

form = cgi.FieldStorage()

html = """

<!doctype html>

<html>

<body>

<p>{content}</p>

</body>

</html>"""

try:

total = eval(form.getfirst('one','0')) + eval(form.getfirst('two','0'))

except:

total = "Error invalid numbers"

print(html.format(content = 'The total is: '+str(total)))

Questions?