CS1116/CS5018

Web Development 2

Dr Derek Bridge

School of Computer Science & Information Technology

University College Cork

A web page that contains a form

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Challenge</title>
    </head>
    <body>
        <p>
            Halt! Who goes there?
        </p>
        <form action="response.py" method="get">
            <input type="text" name="firstname" />
            <input type="text" name="surname" />
            <input type="submit" />
        </form>
    </body>
</html>

Handling a form

The user requests a form, fills it in and presses Submit. The browser sends the data to the server. The server executes the program using the data and sends back the program's output.

When the user presses submit…

When the user presses the submit button, the browser arranges the data in name/value pairs
- E.g. the user types Hugh and Jeegoh into the form
- The browser arranges the data as follows:
  firstname=Hugh&surname=Jeegoh

…and behind the scenes

The browser also encodes the data using standard URL encoding:
- This replaces spaces, slashes and other characters that are not allowed in URLs by their hexadecimal equivalents
- E.g. spaces are replaced by %20 (which may display as '+'); slashes by %2F
- E.g. if the user types Ann and O Domini into the form, the browser arranges and encodes the data as follows:
  firstname=Ann&surname=O%20Domini

And then…

The browser then creates an HTTP request
- The command comes from the form's method attribute
- The URL comes from the form's action attribute
- If the method="get", the data is added to the end of the URL after a question mark:
  GET response.py?firstname=Hugh&surname=Jeegoh

The server-side program, `response.py`

#!/usr/local/bin/python3

from cgi import FieldStorage

print('Content-Type: text/html')
print()

form_data = FieldStorage()
fname = form_data.getfirst('firstname')
sname = form_data.getfirst('surname')

print("""
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Response</title>
        </head>
        <body>
            <p>
                Hello, %s %s. You may go on your way.
            </p>
        </body>
    </html>""" % (fname, sname))

Class exercise

I have written a web page that contains a form:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Your message</title>
    </head>
    <body>
        <form action="to_morse.py" method="get">
            <label>Type your message: </label>
            <input type="text" name="message" />
            <input type="submit" />
        </form>
    </body>
</html>

Your task is to write a program that takes the user's data and outputs a web page that contains an HTML table that contains the user's input data and its translation into Morse code
FYI: 'A' is '.-', 'B' is '-...', 'C' is '-.-.' and so on

Incomplete solution

#!/usr/local/bin/python3

from cgi import FieldStorage

print('Content-Type: text/html')
print()












print("""
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Your message in Morse code</title>
        </head>
        <body>
            <table>
                <tr>
                    <th>Original: </th><td>%s</td>
                </tr>
                <tr>
                    <th>Morse: </th><td>%s</td>
                </tr>
            </table>
        </body>
    </html>""" % (message, morse))

Complete solution

#!/usr/local/bin/python3

from cgi import FieldStorage

print('Content-Type: text/html')
print()

morse_dict = {
        'A': '.-',    'B': '-...',  'C': '-.-.',  'D': '-..',   'E': '.',
        'F': '..-.',  'G': '--.',   'H': '....',  'I': '..',    'J': '.---',
        'K': '-.-',   'L': '.-..',  'M': '--',    'N': '-.',    'O': '---',
        'P': '.--.',  'Q': '--.-',  'R': '.-.',   'S': '...',   'T': '-',      
        'U': '..-',   'V': '...-',  'W': '.--',   'X': '-..-',  'Y': '-.--',   
        'Z': '--..'
}

form_data = FieldStorage()
message = form_data.getfirst('message')

morse_list = [morse_dict[char.upper()] for char in message]
morse = ' '.join(morse_list)

print("""
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Your message in Morse code</title>
        </head>
        <body>
            <table>
                <tr>
                    <th>Original: </th><td>%s</td>
                </tr>
                <tr>
                    <th>Morse: </th><td>%s</td>
                </tr>
            </table>
        </body>
    </html>""" % (message, morse))

CS1116/CS5018

Web Development 2

Dr Derek Bridge

School of Computer Science & Information Technology

University College Cork

A web page that contains a form

Handling a form

When the user presses submit…

…and behind the scenes

And then…

The server-side program, response.py

Class exercise

Incomplete solution

Complete solution

The server-side program, `response.py`