Lecture 12: CGI and Forms

Lecture 12

CGI

Ketan Mayer-Patel

University of North Carolina

Review of basic HTTP exchange

Client connects to server
- Uses TCP
Client makes request
- Format of request
Server sends reply
- Format of reply
  - Status codes / types of reply
  - Content-type header
Differences between 1.0 and 1.1
- Host header required on request
- Persistent connection mode

CGI

Resource may need to be generated.
Common Gateway Interface (CGI)
- Defines interface between web server and resource generator.
- Server recognizes URL as program instead of static file.
- Program is executed.
  - Parameters if given extracted from URL
- Program generates the reply and gives it back to server.
- Server sends generated reply as response to HTTP request.

Server Requirements

Server must be configured to allow CGI
- www.cs.unc.edu is NOT
- wwwx.cs.unc.edu is
- wwwp.cs.unc.edu is
Configuration may include restrictions
- Where programs reside.
- Who can create them.
- How URLs are mapped on to them.
Server configuration is software-specific

CGI via GET and POST

Most common way of invoking a CGI response is either via GET or POST
Difference is whether parameters appear in the URL or as part of the HTTP message body.

CGI via GET URL Format

http://host/path/to/cgi/program?p1=v1&p2=v2&...&pN=vN

Protocol: http
Server: host
Path to CGI program: /path/to/cgi/program
Parameter indicator: ?
Parameters
- Separated by &
- Name=value

CGI via GET example

Suppose:
- Server name: wwwp.cs.unc.edu
- Program path: /Courses/comp416-f10/echo.php
- Parameter names: p1 and p2
- Parameter values: "Hi There" and "This & that"
What should the URL look like?

Parameter Encoding

Need to do something about special characters not allowed in URLs
- Spaces replaced with "+"
- Others use hexadecimal ASCII code:
  - %##
  - Common: %2f = /, %2b = +, %26 = &
  - Hex code is always permissible.
- Link to ASCII table

Parsing CGI URLs Exercise

For each, identify the following:
- Protocol
- Host name and port number
- Path
- Parameters
  - Names and values (decoded)

http://espn.com/nfl/nflpreview?gameId=301003001
http://fake.org:8080/greeting.php?name=Ketan+Mayer&type=%48%65%6c%6c%6f

CGI requests via POST

URL does not include parameter info.
Parameter info is provided in message body of HTTP request.
Parameter format (and encoding) still the same as with GET.

GET vs. POST

Which when gets used?
<a> links use get
HTML forms can use either get or post

HTML Forms

<form>
- action attribute specifies CGI URL path
- method attribute specifies HTTP method
  - GET or POST

Input elements

<input> tags create input items
- Part of <form> content.
- Some input types are empty tags, some require content.
type attribute determines input type
name attribute determines parameter name
value attribute sets default value

<input> types

text
- Text input line

<input type="text" name="input1" value="default" />

checkbox
- Creates a checkbox item
radio
- Create a radio button
- Buttons with same name attribute value determines group
file
- Allows user to browse and select a file that is then sent

More <input> types

password
- Like text, but typing doesn't show up
  - No real security
hidden
- Doesn't show up at all
- Allows yo to specify a parameter/value pair to be passed as part of CGI URL.
reset
- Creates a button that resets all inputs to default values.

Submit Button

submit
- Creates a submission button
- When pressed:
  - Encoded parameter string is created from all the inputs
  - HTTP request made using either GET or POST
- value attribute determines button label

<textarea>

Multi-line text input form item
Name attribute determines parameter name
Rows and cols attribute determine size
Text between start and end tag provides default value.

<select>

Provides user with a multi-choice menu or scrolling list
name attribute determines parameter name
multiple attribute allows more than 1 choice if set
size attribute determines scrolling list size
- If multiple is not set and size="1", then uses a drop down menu form.

<option>

Used to specify different items in <select>
- Part of the <select> tag's content
Text content of option element used as both label and value
- If value sent to CGI needs to be different than the label, then value attribute can be set.

Form example

Form example

Lecture 12

CGI

Ketan Mayer-Patel

University of North Carolina

Review of basic HTTP exchange

Client connects to server
- Uses TCP
Client makes request
- Format of request
Server sends reply
- Format of reply
  - Status codes / types of reply
  - Content-type header
Differences between 1.0 and 1.1
- Host header required on request
- Persistent connection mode

CGI

Resource may need to be generated.
Common Gateway Interface (CGI)
- Defines interface between web server and resource generator.
- Server recognizes URL as program instead of static file.
- Program is executed.
  - Parameters if given extracted from URL
- Program generates the reply and gives it back to server.
- Server sends generated reply as response to HTTP request.

Server Requirements

Server must be configured to allow CGI
- www.cs.unc.edu is NOT
- wwwx.cs.unc.edu is
- wwwp.cs.unc.edu is
Configuration may include restrictions
- Where programs reside.
- Who can create them.
- How URLs are mapped on to them.
Server configuration is software-specific

CGI via GET and POST

Most common way of invoking a CGI response is either via GET or POST
Difference is whether parameters appear in the URL or as part of the HTTP message body.

CGI via GET URL Format

http://host/path/to/cgi/program?p1=v1&p2=v2&...&pN=vN

Protocol: http
Server: host
Path to CGI program: /path/to/cgi/program
Parameter indicator: ?
Parameters
- Separated by &
- Name=value

CGI via GET example

Suppose:
- Server name: wwwp.cs.unc.edu
- Program path: /Courses/comp416-f10/echo.php
- Parameter names: p1 and p2
- Parameter values: "Hi There" and "This & that"
What should the URL look like?

Parameter Encoding

Need to do something about special characters not allowed in URLs
- Spaces replaced with "+"
- Others use hexadecimal ASCII code:
  - %##
  - Common: %2f = /, %2b = +, %26 = &
  - Hex code is always permissible.
- Link to ASCII table

Parsing CGI URLs Exercise

For each, identify the following:
- Protocol
- Host name and port number
- Path
- Parameters
  - Names and values (decoded)

http://espn.com/nfl/nflpreview?gameId=301003001
http://fake.org:8080/greeting.php?name=Ketan+Mayer&type=%48%65%6c%6c%6f

CGI requests via POST

URL does not include parameter info.
Parameter info is provided in message body of HTTP request.
Parameter format (and encoding) still the same as with GET.

GET vs. POST

Which when gets used?
<a> links use get
HTML forms can use either get or post

HTML Forms

<form>
- action attribute specifies CGI URL path
- method attribute specifies HTTP method
  - GET or POST

Input elements

<input> tags create input items
- Part of <form> content.
- Some input types are empty tags, some require content.
type attribute determines input type
name attribute determines parameter name
value attribute sets default value

<input> types

text
- Text input line

<input type="text" name="input1" value="default" />

checkbox
- Creates a checkbox item
radio
- Create a radio button
- Buttons with same name attribute value determines group
file
- Allows user to browse and select a file that is then sent

More <input> types

password
- Like text, but typing doesn't show up
  - No real security
hidden
- Doesn't show up at all
- Allows yo to specify a parameter/value pair to be passed as part of CGI URL.
reset
- Creates a button that resets all inputs to default values.

Submit Button

submit
- Creates a submission button
- When pressed:
  - Encoded parameter string is created from all the inputs
  - HTTP request made using either GET or POST
- value attribute determines button label

<textarea>

Multi-line text input form item
Name attribute determines parameter name
Rows and cols attribute determine size
Text between start and end tag provides default value.

<select>

Provides user with a multi-choice menu or scrolling list
name attribute determines parameter name
multiple attribute allows more than 1 choice if set
size attribute determines scrolling list size
- If multiple is not set and size="1", then uses a drop down menu form.

<option>

Used to specify different items in <select>
- Part of the <select> tag's content
Text content of option element used as both label and value
- If value sent to CGI needs to be different than the label, then value attribute can be set.

Form example

Form example

COMP 416, Fall 2010

CGI and Forms

CGI

Ketan Mayer-Patel

University of North Carolina

Review of basic HTTP exchange

CGI

Server Requirements

CGI via GET and POST

CGI via GET URL Format

CGI via GET example

Parameter Encoding

Parsing CGI URLs Exercise

CGI requests via POST

GET vs. POST

HTML Forms

Input elements

<input> types

More <input> types

Submit Button

<textarea>

<select>

<option>

Form example

CGI

Ketan Mayer-Patel

University of North Carolina

Review of basic HTTP exchange

CGI

Server Requirements

CGI via GET and POST

CGI via GET URL Format

CGI via GET example

Parameter Encoding

Parsing CGI URLs Exercise

CGI requests via POST

GET vs. POST

HTML Forms

Input elements

<input> types

More <input> types

Submit Button

<textarea>

<select>

<option>

Form example