cgi in context n.
Skip this Video
Loading SlideShow in 5 Seconds..
CGI in Context PowerPoint Presentation
Download Presentation
CGI in Context

Loading in 2 Seconds...

play fullscreen
1 / 27

CGI in Context - PowerPoint PPT Presentation

  • Updated on

CGI in Context.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

CGI in Context

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cgi in context
CGI in Context

CGI is Common Gateway Interface, supporting a greater degree of interaction between the user and a Web page, most commonly by means of a FORM. A FORM contains a number of elements each of which has a name. When the form is submitted a list of names and values is transmitted, using CGI protocols, indicating the contents of the form.

cgi processes
CGI processes
  • The server transmits the document over the communication link.
  • The browser renders the document, including the FORM.
  • The user completes the FORM and submits it.
  • The name/value pairs from the FORM are transmitted back to the server.
  • The server starts the process identified in the FORM header and
  • supplies the name/value pairs to it.
  • The process takes some action, determined by the name/value pairs,
  • and outputs a properly formatted HTML document.
  • The HTML document produced by the process is returned to the browser
  • as the response from the server to the user's input on the original FORM.
form basics
Form Basics


ACTION = "http:\\\cgi-bin\



Details of the form here


The ACTION argument should be all on one line, it identifies

the server-side process which will accept the information from the form and return a reply to the browser.

The METHOD should always be POST.

The server-side process given does exist and will return a list of name/value pairs from the form.

submit reset buttons
Submit & Reset Buttons



VALUE="Button Label" >

Pressing a submit button will transmit all the

name/value pairs from the browser to the server


VALUE="Button Label" >

Pressing a reset button will cause the form to clear all components back their default values

input text element
INPUT - TEXT Element



VALUE="Initial Value">

TEXT elements supply a single-line text input area.

The SIZE argument determines the (approximate) number

of characters to display, not the maximum number that can be entered.

The VALUE argument determines the default contents.

select pull down menu
SELECT - Pull-down menu


<Option> OptionName

<Option> OptionName

<Option> OptionName

etc. etc. etc.


The options will be presented on a pull-down menu, with the first selected by default.

The value part of the name/value pair will be the item

selected when the form is submitted.

input radio buttons
INPUT - Radio Buttons







VALUE=Orange >


All <INPUT> tags with the same NAME act as a set of radio buttons and the value submitted will be the VALUE of the selected radio button.

The button label is not the VALUE, but the text between the <INPUT> and </INPUT> tags.

input check boxes
INPUT - check boxes








VALUE=Orange >


The TYPE argument specifies a checkbox, CHECKED specifies that it should be ticked by default.

Only boxes that are ticked will send

a NAME/VALUE pair to the server.

If more then one checkbox has the same name a list of VALUEs is sent.

select selection box
SELECT - selection box





<Option> OptionName

<Option> OptionName

<Option> OptionName

etc. etc. etc.


The SIZE argument indicates that a

<SELECT> element should be a selection box, not a pull-down menu.

MULTIPLE indicates that more than one element may be selected.

The NAME/VALUE pair will not be sent if none are selected and will be a list if more than one is selected.


COLS & ROWS, if specified, override the default size. They only specify the visible size of the field and do not prevent the user from typing much more.

The entire contents are sent as the VALUE part of the NAME/VALUE pair.





Default contents



A single line text field which does not echo the user’s input as they type.

But should not be assumed

to be secure when transmitted

across the Web.




VALUE="Default" >


Acts as a SUBMIT button in its own right. In this format sends two name value pairs, CgiName.x and CgiName.y, containing the location of the mouse pointer when it was clicked.

More complex formats allow server- or client- side image maps that can associate links with various parts of the image.





form usability
Form Usability

Layout of a FORM is vital if it is to be used effectively.

The sequence in which the fields are presented and the language used to indicate to the user what to do are important.

The most effective layouts can only be attained by using a <TABLE> to ensure that fields are vertically aligned.

Using CGI it is not possible to validate a user’s input until the form is complete and has been submitted. Combined with the latency of the Web this can be very frustrating.

Client-side scripting (next two lectures) can be used to validate upon entry or upon submission.

cgi process
CGI Process

The form processing in these notes will use Tcl, not PERL.





The ACTION argument has to be on a single line and identifies the name of a file (mycgiscript.cgi) which must be in the cgi-bin subdirectory of the .public_html directory and must have execute permissions.

This is a minimal .cgi file that exports the current environment and then starts a tcl process.


export env


The tcl process is scripted in the source myformexample.tcl, which must also have execute permission.

addup form





<H3>Enter two numbers and then press Submit.</H3>

<INPUT TYPE="text" SIZE="8” NAME="FirstNumber"><br>

<INPUT TYPE="text" SIZE="8" NAME="SecondNumber">

<INPUT TYPE="submit" VALUE="Submit"> </CENTER>


addup tcl

The first thing the tcl process has to do is to decode the CGI protocol encoded name/value pairs. There are two ways to do this ….

Write your own routine …

Copy one from ~fintan/.public_html/cgi-bin/GetPostedData.tcl

Assuming that you have done this, and copied GetPostedData.tcl into your cgi-bin directory, the start of the addup.tcl file is:


# Filename myformexample.tcl. Example Tcl CGI

# script.


# Fintan Culwin, v0.1, March 1996.

source GetPostedData.tcl


This calls the GetPostedData routine and places the values into an associative array whose index values are the names.

addup tcl html header
addup.tcl - HTML header

# Output the appropriate MIME headerputs "Content-type: text/html”puts "”

# Output a complete HTML header ....

puts "<HTML>\n<HEAD>"

puts "<TITLE>\nAdd Up Script\n</TITLE>"

puts "</HEAD>\n\n<BODY>"

Content-type: text/html




Add Up Script




Which produces this on the tcl processes’ output stream.

This stream is connected back to the browser which submitted the form in the first place.

addup tcl 3
addup.tcl - 3

puts "<CENTER><H1>\nThis document was generated<BR>" puts -nonewline "by a tickle script on<BR>”puts -nonewline [ exec date ]puts ".\n</H1>\n<P>"


This document was generated<BR>

by a tickle script on Tue Mar 5 12:27:16 GMT 1996.



addup tcl 4
addup.tcl - 4

# Calculate the answerset TheAnswer [ expr $FormData(FirstNumber) + . . . . . . $FormData(SecondNumber)]

# Send the information back to the browserputs "<H3>\n$FormData(FirstNumber) “puts “ plus $FormData(SecondNumber) \n" puts "is $TheAnswer. \n</H3>"



plus 22 \n

is 76.


addup tcl 5
addup.tcl - 5

puts "<P><HR><H3>”puts -nonewline "<A HREF=http:\\\\\\~fintan”puts -nonewline "\\sdw\\cgiteach\\tclscript.html#addupexample>”puts "Return to FORMs addup example</A>.”puts "</H3>\n</CENTER>\n<HR>\n<P>”puts “</BODY></HTML>”


<A HREF=http:\\\\\\~fintan\\sdw\\cgiteach\\tclscript.html#addupexample>

Return to FORMs, addup example</A>.







visitor s book context
Visitor’s Book - Context

In this the information received from the form is used to update files held on the server, and the contents of those files are used to supply the contents of the reply.

visitor s book html
Visitor’s Book - HTML






<B>Visitor's Book</B>

Please enter your personal name

<INPUT TYPE="text" SIZE="20" NAME="PersName">

and your family name

<INPUT TYPE="text" SIZE="20" NAME="FamName"></td>

<INPUT TYPE="submit" VALUE="Send The Information">



visitor s book cgi 1
Visitor’s Book - CGI - 1

puts "Content-type: text/html"

puts ""

# Output a complete HTML header ....

puts "<HTML>\n<HEAD>"

puts "<TITLE>\nVisitor's Book\n</TITLE>"

puts "</HEAD>\n\n<BODY>"

# Obtain the data from the form


puts "<H1>Mr. Blobby's Visitor's Book\n</H1>\n<P>"

if { ( [ info exists FormData(PersName)]) &&

( [ info exists FormData(FamName)]) } {


} else {

puts "<H3>\nThank you for visiting my home page.\n<BR>"

puts " Maybe next time you will leave your name.\n</H3>\n<P>"


This makes sure that the user has replied.

visitor s book cgi 2
Visitor’s Book - CGI - 2

proc ProcessForm {} {

global FormData

# Store the information from the form (in html) format

# at the end of a file called 'visitors.dat'.

# Open the file in append (a) mode.

set FileId [ open visitors.dat a ]

# Write the information in HTML format as a single line

puts -nonewline $FileId $FormData(PersName)

puts -nonewline $FileId $FormData(FamName)"

puts -nonewline $FileId " visited on "

puts -nonewline $FileId [exec date]

puts $FileId

# close the visitors.dat file

close $FileId

This adds their details to the end of the visitors.dat file.

visitor s book cgi 3
Visitor’s Book - CGI - 3

# Obtain the number of visitors from visitors.num file.

set FileId [ open visitors.num r ]

gets $FileId NumVisitors

close $FileId

# Then increment the value and return it to the file.

incr NumVisitors

set FileId [ open visitors.num w ]

puts $FileId $NumVisitors

close $FileId

This obtains the number of visitors from the visitors.num

file, increments it and writes it back to the file.

visitor s book cgi 4
Visitor’s Book - CGI - 4

# Finally send the information back to the user.

puts "<H2>\nHello $FormData(PersName)!"

puts "</H2>"

puts "<H3>Your are visitor number $NumVisitors.<BR>"

puts "previous visitors have included:"

puts "</H3>\n<P>\n<HR>"

set Visitors [exec tail visitors.dat]

puts $Visitors

puts "<P>\n<HR>\n<H4>"

puts "Please call again some time .."

puts "</H4>"

This writes the reply to the user, in HTML format, onto the output stream. (The Unix tail command will obtain the last 20 lines from the file specified).