cgi in context n.
Download
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


  • 94 Views
  • Uploaded on

CGI in Context.

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

PowerPoint Slideshow about 'CGI in Context' - quang


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

<FORM

ACTION = "http:\\www.sbu.ac.uk\cgi-bin\

cgiwrap\~fintan\cgiteach\test.cgi"

METHOD = "POST">

Details of the form here

</FORM>

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

<INPUT TYPE=SUBMIT

NAME=CgiName

VALUE="Button Label" >

Pressing a submit button will transmit all the

name/value pairs from the browser to the server

<INPUT TYPE=RESET

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

<INPUT TYPE=TEXT NAME=CgiName

{SIZE=VisibleSize}

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

<SELECT NAME=CgiName>

<Option> OptionName

<Option> OptionName

<Option> OptionName

etc. etc. etc.

</SELECT>

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

<INPUT TYPE=RADIO

NAME=Colour

VALUE=Red >

Red</INPUT>

<INPUT TYPE=RADIO

NAME=Colour

VALUE=Orange >

Orange</INPUT>

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

<INPUT TYPE=CHECKBOX

CHECKED

NAME=Colour

VALUE=Red >

Red</INPUT>

<INPUT TYPE= CHECKBOX

NAME=Colour

VALUE=Orange >

Orange</INPUT>

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

<SELECT

NAME=CgiName

SIZE=NumberVisible

MULTIPLE>

<Option> OptionName

<Option> OptionName

<Option> OptionName

etc. etc. etc.

</SELECT>

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.

textarea
TEXTAREA

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.

<TEXTAREA

NAME=CgiName

COLS=NumCols

ROWS=NumRows>

Default contents

</TEXTAREA>

password
PASSWORD

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.

<INPUT

TYPE=PASSWORD

NAME=CgiName

VALUE="Default" >

images
IMAGES

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.

<INPUT

TYPE=IMAGE

NAME=CgiName

SRC=Filename>

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.

<FORM

ACTION=“http://www.sbu.ac.uk/cgi-bin/cgiwrap/

~myuserid/mycgiscript.cgi”

METHOD = POST>

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.

#!/usr/local/bin/bash

export env

./myformexample.tcl

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

addup form
AddUp FORM

<FORM

ACTION="http:\\www.sbu.ac.uk\cgi-bin\cgiwrap\

~fintan\addup.cgi"

METHOD="POST"> <CENTER>

<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>

</FORM>

addup tcl
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:

#!/usr/local/bin/tclsh

# Filename myformexample.tcl. Example Tcl CGI

# script.

#

# Fintan Culwin, v0.1, March 1996.

source GetPostedData.tcl

GetPostedData

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

<HTML>

<HEAD>

<TITLE>

Add Up Script

</TITLE>

</HEAD>

<BODY>

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>"

<CENTER><H1>

This document was generated<BR>

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

</H1>

<P>

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>"

<H3>

54

plus 22 \n

is 76.

</H3>

addup tcl 5
addup.tcl - 5

puts "<P><HR><H3>”puts -nonewline "<A HREF=http:\\\\www.sbu.ac.uk\\~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>”

<P><HR><H3>

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

Return to FORMs, addup example</A>.

</H3>

</CENTER>

<HR>

<P>

</BODY>

</HTML>

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

<FORM

ACTION="http:\\www.sbu.ac.uk\cgi-bin\cgiwrap\

~fintan\visitor.cgi"

METHOD="POST">

<CENTER>

<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">

</CENTER>

</FORM>

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

GetPostedData

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

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

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

ProcessForm

} 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).