Submit your files to Canvas when completed. You should submit an HTML file, 2 CGI files, and a link to your page on burrow.
As a reminder, you may use anything on the Canvas section for THIS CLASS or for I210, as well as any book listed as a reference for this course or I210. You may use any notes (physical or online) taken for THIS CLASS or for I210.
you will create a website to help a local pizza place take online orders during quarantine.
Specifically, you will create a website that will allow the user to choose size, crust, and toppings for a pie. Once the user has made their selections, the page should calculate the cost, and display it to the user.
When you are finished your pages should look like (including bonus)
Section 1 – HTML
Instructions:
Write an HTML page that displays the pizza image and message as seen on pizzanet.html, and allows the user to select a size and crust for a pie, and advance to the next (CGI) page.
This page should send its information to a CGI page called pizza1.cgi.
Section 2 – First CGI page
Instructions:
The CGI page pizza1.cgi should get the information from the form about size and crust, and pass them on to the next CGI page (pizza2.cgi) via the form. The form should also get any toppings that the customer wants to choose.
Pizza2.cgi should display a summary message of the user’s order, along with the calculated cost.
Section 3 – Second CGI page
Instructions:
Pizza2.cgi should display a summary message of the user’s order, along with the calculated cost.
BONUS – Section 4
Instructions:
Add a textbox to pizza1.cgi for discount codes. If the user enters the code PYTHON, they should receive a 10% discount when you calculate the final cost on pizza2.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
Radio buttons
Yes
Text areas
Buttons
Check boxes
Large
HTML Forms and CGI
HTML form elements must be enclosed in
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 = “””
{content}
“””
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)
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 = “””
Greetings!
{content}
“””
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
HTML Form Page
The form element lets you collect information from the user.
HTML Form Page
The action attribute determines where the information on the form is sent.
HTML Form Page
The name attribute determines what the user’s response will be called on the cgi page.
HTML Form Page
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 = “””
{content}
“””
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 = “””
{content}
“””
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 = “””
{content}
“””
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 = “””
{content}
“””
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 = “””
{content}
“””
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 = “””
{content}
“””
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 = “””
{content}
“””
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)
Calculate 1 (Python Solution)
#! /usr/bin/env python3
print(‘Content-type: text/html\n’)
import cgi
form = cgi.FieldStorage()
html = “””
{content}
“””
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?
#! /usr/bin/env python
import cgi
print(‘Content-type: text/html\n’)
html = “””
You guessed: |
Suit: {suit} |
Rank: {rank} |
{again}
“””
form = cgi.FieldStorage()
suit_guess = form.getfirst(‘suit’, ‘D’)
rank_guess = form.getfirst(‘rank’, ‘2’)
our_guess = “10S”
rank_dict = {“2”:2, “3”:3, “4”:4, “5”:5, “6”:6, “7”:7, “8”:8, “9”:9, “10”:10, “J”:11, “Q”:12, “K”:13}
if suit_guess == “S”:
suit_reply = “Correct Suit!”
else:
suit_reply = “Wrong Suit!”
if rank_dict[rank_guess] < rank_dict["10"]:
rank_reply = "Too Low!"
if rank_dict[rank_guess] > rank_dict[“10”]:
rank_reply = “Too High!”
if rank_dict[rank_guess] == rank_dict[“10”]:
rank_reply = “Correct Rank!”
if suit_reply == “Correct Suit!” and rank_reply == “Correct Rank!”:
new_game = “Nice Job!”
else:
new_game = “””
Try to guess the card!
Rank:
2
3
4
5
6
7
8
9
10
J
Q
K
A
Suit:
Clubs
Diamonds
Hearts
Spades
Submit
Reset
“””
image_fill = “cards/” +rank_guess + suit_guess +” ”
print(html.format(image = image_fill, suit = suit_reply, rank = rank_reply, again = new_game))