UoL CS Notes
Menu

CGI Programming and HTML Forms

COMP284 Lectures

Web-Based Application Interfaces

Web-based applications are client-server applications where:

  1. The client software, consisting of a user interface and client-side logic of the application, run in a web browser.
  2. Static aspects of a user interface are realised using HTML.
  3. The client software incorporates user inputs into a HTTP request that it sends to a web server to retrieve information or to update parts of itself.
  4. The web server uses a program, the server software, to compute an HTTP response that it sends back the web browser.
flowchart LR
subgraph wb[Web Browser]
cs[Client Software]
end
wb -->|HTTP Request| ws[Web Server]
ws -->|HTTP Response| wb
ws <--> ss[Sever Software]

HTML

Elements

  • A HTML element is an individual component of a HTML document.
  • Most element consist of a start tag and a matching end tag with some content in-between.

The general form of a start tag is like so:

<tagName attrib1="value" attribN="valueN">

and an end tag looks like the following:

</tagName>

Void Elements

These are HTML elements that only have a starting tag such as:

  • area
  • base
  • br

Since they have no content, they cannot be nested.

The start tag of void elements can be made self-closing by ending the tag with /> instead of > like so:

<br/>

Documents

An HTML5 document begins with a DOCTYPE declaration and an html element like so:

<!DOCTYPE html>
<html>
</html>

It is recommended that the start tag specifies the language used in the document:

<html lang="en-GB">

Forms

Forms allow users to enter data which can be sent to a web server. It has several optional attributes, including:

Attribute Description
action URL to use for form submission.
method HTTP method to use for form submission (get or post).
enctype The encoding type to use for form submission.
novalidate Form is not validated during submission.

You would use these attributes like so:

<form action="https://sam.csc.liv.ac.uk/COMP/Calendar.pl" method="post" enctype="text/plain">
</form>

Input

The input element represents a field that allows the user to enter data of a certain type.

The input element is a void element.

The type attribute of an input element determines what type of data can be entered and in what form.

Value of Type Data Type Form Control
text Text with no line breaks Text field.
number Floating-point number. Text field or spinner.
password Password Text field with obscured input.
button   Button
submit Initiates form submission. Button
reset Resets the form. Button

You can use them like so:

<input type="text">
<input type="reset">

Common attributes of input elements include the following:

Attribute Description
id A unique id used to identify the element within the document.
name A unique name used by the form processor to access input.
autofocus Automatically focus on this form control when the page is loaded.
disabled Whether the form control is disabled.
required Whether the form control is required to have a non-empty value for form submission.

Labels

In order for a form to be readable, each form control should be accompanied by an indication of what it is. A label element is a caption the can be associated with a specific form control.

It can be used in the following ways:

<label for="s1">Surname:</label>
<input type="text" name="surname" id="s1">

<label>
	First names(s):
	<input type="text" name="first" id="f1">
</label>

Form Example

You can put this all together using the following HTML which would render like so:

<form action="process.py">
	<label for="s1">Surname:</label>
	<input type="text" name="surname" id="s1">
	<label>
		First Name:
		<input type="text" name="first" id="f1">
	</label>
	<label>
		Student ID:
		<input type="number name="studentid" id="sid" min="190000000" max="999999999">
	</label>
	<input type="submit">
</form>

A string composed of name=value pairs will be sent to the action program.

HTML encoding is used on strings.

Select

A select element represents a drop-down menu with pre-defined options. They can be made with the following HTML and render like so:

<label for="m1">Select a module:</label>
<select name="module" id="m1">
	<option value="COMP201">COMP201: Software Engineering I</option>
	<option value="COMP207">COMP207: Database Development</option>
	<option value="COMP211">COMP211: Computer Networks</option>
</select>

  • By default, the first option is selected.
  • If the selection is not changed and the user activates the submit button then module=COMP201 is sent to the server.
  • If the default element has an empty value then the user is forced to make a choice.

Common Gateway Interface (CGI)

This is a standard method for web server to use an external application, a CGI program, to dynamically generate web pages.

  1. A web client generates an HTTP request and sends it to a web server.
  2. The web server selects a CGI program to handle the request, converts the HTTP request to a CGI request and executes the program.
    • The CGI program then processes the CGI request and the server passes the program’s response back to the client.

Common gateway interface illustration.1

GET vs POST

There are two main request methods used by HTML forms:

  • GET:
    • The browser appends the form data to the URI in the request:
      <scheme> "://" <server-name> ":" <server-port> <script-path> <extra-path> "?" <query-string>
    • They are limited to between 1KB and 8KB depending on the browser and server.
    • Requests remain in the browser history and can be bookmarked.
    • They should not be used for sensitive data such as passwords.
  • POST:
    • The browser appeds the form datat to the body of the request.
    • No limit on the length of the request.
    • They don’t remain in the browser history.
    • They are suitable for transfer of sensitive information.

Sever Interaction

The server can access this information in the following ways:

  • GET:
    • Form data is provided tot he CGI program via the QUERY_STRING environment variable.
  • POST:
    • Form data is provided to CGI programs via the standard input.

The following environment variables are also available to the CGI:

Variable Meaning
REQUEST_METHOD The request method that was used.
HTTP_USER_AGENT The browser issuing the request.
HTTP_REFERER The URL of the document that the browser points to before accessing the CGI program.
HTTP_ACCEPT A list of the MIME types that the browser can accept.
REMOTE_ADDR The remote IP address of the device from which the request came.

CGI Program in Python

We can use python to make a CGI program by using the following features:

  • environ dictionary of the os module to access the environment variables.
  • cgi module to process and decode form data.
  • print statements to produce HTML markup.

Accessing Environment Variables

We can access environment variables like so:

os.environ['REQUEST_METHOD']

This might return the string such as GET.

Accessing Form Data

To access form data we can use the cgi module like so:

  1. Create an instance of the FieldStorage class and assign it to a variable:

     variable = cgi.FieldStorage()

    This reads the form data from the standard input, or the environment variable QUERY_STRING.

  2. We can then use the following functions to get the data:

     variable['name'].value
 varaible.getvalue('name')
 variable.getfirst('name', default=None)
 variable.getlist('name')

CGI Wrapper Example

Consider that we want to develop a CGI program for a username generator with the following functionality:

  • Access is restricted to IP addresses starting with 128.253 (for the University of Liverpool).
  • The program point out a HTML document with an HTML form that allows a user to enter the data required fro our program.
    • The drop-down menu should cover the previous nine years plus the current year.
  • On submission of the completed form, the program:
    • Generates a user name based on the data that was entered into the form.
    • Prints out an HTML document with that username.

HTML Wrapper

This code define functions that can print outh the initial and final part for some HTML markup:

# htmlUH.py

def startHTML(title):
	print('''\
Content-type: text/html

<!DOCTYPE html>
<html lang='en-GB'>
	<head>
		<meta charset='utf-8'>
		<link rel='stylesheet' type='text/css' href='form.css'>
		<title>''' + title + '''</title>
	</head>
	<body>''')
	
def endHTML():
	print('''
	</body>
</html>''')

HTML Form

We can then use the following python to make the form:

def printForm():
	print('''\
<form action='generate.py' method='post'>
	<label>
		Enter your full name:
		<input type='text' name='fullname'>
	</label>
	<label>
		Select your year of registration:
		<select name='year' required>
			<option value=''>
				----
			</option>''')
	now = datetime.datetime.now()
	for year in range(now.year - 9, now.year + 1):
		print('<option>',year, '</option>')
	print('''\
		</select>
	</label>
	<input type='submit' name='submit' value='Generate'>
</form>''')

Generating Username

We can use the following function to generate a username:

def genUsername(name, year):
	# first letter of given name/names
	return ("sg" + name.split()[0][0].lower()
	# first three letter of surname
	+ name.split()[-1][:3].lower()
	# last two digits of year
	+ str(year)[2:4])

Wrapper Script

#!/usr/bin/python3
# generate.py

import os, sys, codecs, datetime, locale
from htmlUH import start_html, end_html

start_html("Generate Username")
if (os.environ["REMOTE_ADDR"][0:7] != "138.253"):
	print('<div><b>Sorry, please come back when you are on a uni computer</b></div>')
else:
	inputs = cgi.FeildStorage()
	if inputs.getvalue('submit'j):
		# form has been completed and submitted
		name = inputs['fullname'].value
		year = inputs['year'].value
		username = genUsername(name, year)
		print('<div>The username for ' + name + ' registerd in ' + year + ' is ' + username + '</div>')
	else:
		# show user the form
		printForm()
end_html()

  1. Common gateway interface illustration - https://www.oreilly.com/library/view/cgi-programming-on/9781565921689/04_chapter-01.html ↩