Building CGI Scripts

1
Building CGI Scripts

• By Anchi GUO
• Faculty of Pharmacy Pharmaceutical
  SciencesUniversity of Alberta, Edmonton, AB T6G
  2N8
• November 28, 2002

2
Objectives

• What is CGI?
• How does it work
• Basic Perl
• Basic HTML
• CGI sample scripts
• Debugging

3
What is CGI

• The Common Gateway Interface
• The method by which a web server can get data,
  and display that data to users via the web
• CGI can output dynamic information
• A CGI can be written in any programming language
  (ex. C/C, C Shell, Perl, VB)

4
How Is CGI Used?

• Sending Email
• Processing forms (ex. Order form)
• Generating website (ex. CyberCell database)

5
How does CGI work?

Application (on server)
Server
Web Browser (on client)

6

• Sample Script
• !/usr/bin/perl
• print "Hello, world!\n"
• !/usr/bin/perl
• Tells the server that this is a Perl script, and
  where to find the Perl interpreter
• print "Hello, world!\n"
• Output Hello, world on the screen

7
Perl Variables

• What is a variable?A variable is storage place,
  where a value can be stored for use by a program.
  
• 3 Perl variable types - scalar - array - hash

8
Scalar

• Is Perl s simplest and most common data type
• Replaces many of the common data types that other
  languages use
• Stores a single item integer, floating point
  number, string, or Boolean value
• Begins with a dollar sign () name, age

9
Array

• An array is a variable that stores multiple
  scalar values
• The entire array can be referenced as a single
  variable
• Array variables start with _at_- _at_name- _at_PDB_code

10
Array (continued)

• Position 0 1 2
• Single element name0 value John name1
  value Peter name2 value Eric

_at_name
John
Peter
Eric
11
Hash

• Is also called associative array
• Is like normal arrays
• Is indexed by string (key)
• Consists of pairs of elements a key
  and a value
• Provides very fast lookup of the value associated
  with a key
• Start with ----- marks, age

12
Hash (continued)

• Individual element
• ageJohn 8agePeter 10ageEric
  5

Key
age
Keys
John
8
Values
Peter
10
Eric
5
13
Basic HTML

• HyperText Markup Language
• HTML is the language used to prepare hypertext
  document.
• Web browsers are used to view HTML documents and
  display data to users

14
HTML Document

• lthtmlgt
• ltheadgtlttitlegtTest Pagelt/titlegtlt/headgt
• ltbodygt
• ltbgtHello, worldlt/bgt
• lt/bodygt
• lt/htmlgt
• Document Structure
• Head
• Body

15
HTML Tags

• HTML tags are commands, they tell the browser how
  to display the text.
• There are opening and closing versions for many
  tags opening tag ltHTMLgt closing tag
  lt/HTMLgt

16
HTML Tags (continued)

• ltHTMLgtlt/HTMLgt For identifying a text document
  as an HTML document
• ltHEADgtlt/HEADgt For creating the head section of
  page
• ltBODYgtlt/BODYgt For enclosing the main section of
  page
• ltBgtlt/Bgt For displaying text in boldface
• ltIgtlt/Igt For displaying text in italics
• ltOLgtlt/OLgt For creating ordered lists
• ltAgtlt/Agt For creating links
• ltFORMgtlt/FORMgt For creating fill-in forms
• ltPgt For creating a new paragraph
• ltBRgt For creating a line break
• ltINPUTgt For creating form elements

17
HTML Tags (continued)

• The affected text is contained within the tags
• ltBgtHellolt/Bgt ------- Hello
• ltIgtBye!lt/Igt ---------- Bye
• Ordered list

ltOLgtltLIgtApplelt/LIgtltLIgtBananalt/LIgtltLIgtOrangelt/LI
gtlt/OLgt
1. Apple 2. Banana 3. Orange
18
HTML Form

• ltFORMgt and lt/FORMgt mark the beginning and the end
  of a form
• Form establishes the relationship between the
  form page and the script that will process the
  current form data
• HTML forms are the user interface that provides
  input to your CGI scripts - Collecting data -
  Accepting commands

19
HTML Form (continued)

• ltHTMLgtltHEADgt
• ltTITLEgtMy first html pagelt/TITLEgtlt/HEADgt
• ltBODYgt
• ltFORM methodpost actionaftersubmit.cgigt
• Name ltINPUT typetext nameuname"gtltBRgt
• Password ltINPUT typepassword nameupwd"gtltBRgt
• ltINPUT typesubmitgt
• ltINPUT typeresetgt
• lt/FORMgt
• lt/BODYgtlt/HTMLgt

20
The ltFORMgt Tag

• ltFORM methodpost actionaftersubmit.cgigt Tag
  attributes specify the properties for the element
• methoddetermines how the form data is sent to
  the script - GET-- delivers form data by
  appending it to the URL of the script -
  POST-- sends the data as a body of text
• action specifies the address of the script that
  is going to process the current form data

21
The ltINPUTgt Tags

• INPUT- is an element of the form
• - creates a wide variety of interface widgets
• ltINPUT typetext nameuname"gt
• Attribute type the appearance and features
  ltINPUT typetextgt-------text field ltINPUT
  typesubmitgt-----submit button ltINPUT
  typeresetgt------reset button ltINPUT
  typepasswordgt---password field ltINPUT
  typehiddengt-----hidden field

22
The ltINPUTgt Tag (continued)

• INPUT attribute "name" identifies each user
  interface element ltinput typetext
  nameuname"gt ltinput typepassword nameupwd"gt
  
• INPUT attribute "value" contains associated
  information that is also sent to the script.
  ltinput typetext nameuname"gt ltinput
  typetext nameuadd"gt ltinput typetext
  nameucity
  valueEdmontongt

23
Form Submission

• ltFORM methodpost action aftersubmit.cgigt
• The browser assembles the form data (name and
  password) into a series of name/value pairs
• The browser delivers data to the server and then
  the script aftersubmit.cgi
• The script aftersubmit.cgi can retrieve the
  element value by using its name (uname and upwd)

24
CGI Script

• Is still a Perl script
• Generates a web page
• Needs a content header print "Content-type
  text/html" print "Content-type image/gif"

25
CGI Script

• !/usr/bin/perl
• print "Content-typetext/html\n\n"
• print "lthtmlgtltheadgt
• print lttitlegtTest Pagelt/titlegtlt/headgt\n"
• print "ltbodygt\n"
• print "ltbgtHello, world!lt/bgt\n"
• print "lt/bodygtlt/htmlgt\n"

26
How does it work?

• CGI script output lthtmlgtltheadgt lttitlegtTest
  Pagelt/titlegtlt/headgt ltbodygtltbgtHello,
  world!lt/bgt lt/bodygtlt/htmlgt
• The output is sent to the server.
• The server captures the output HTTP headers,
  and sends them back to the browser.
• The browser receives the information, formats and
  displays the text appropriately.

27
(No Transcript)
28

• !/usr/bin/perl
• print "Content-type text/html\n\n"
• print "lthtmlgtltbodygt"
• print "ltform methodpost action\show_param.cgi
  \"gt"
• print "Name ltinput typetext name\"name\"gtltbrgt"
• print "Address ltinput typetext
  name\"add\"gtltbrgt"
• print "City ltinput typetext name\"city\"gtltbrgt"
• print "ltinput typesubmitgtltbrgt"
• print "ltinput typehidden name\hidden\
  value\GMC\gt"
• print "lt/formgt"
• print "lt/bodygtlt/htmlgt"

29
(No Transcript)
30
show_param.cgi (1)

• !/usr/bin/perl
• print "Content-type text/html\n\n"
• use CGI
• qnew CGI
• retrieve the parameter values
• nameq-gtparam("name")
• addq-gtparam("add")
• cityq-gtparam("city")
• hiddenq-gtparam(hidden)

the CGI.pm module is used
a CGI.pm object q is created
Parameter names
31
Explanation (1)

• CGI.pm module- is the standard tool for creating
  CGI scripts in Perl - offers many methods For
  example - Handling Input (form parameters,
  environment info) - Generating Output (HTML
  document) - Handling Errors (CGICarp)
• New CGI object
• param is a very useful method. It allows you to
  access the parameters submitted to your CGI
  script

32
show_param.cgi (2)

• get the environment information
• serverENVSERVER_SOFTWARE
• protocolENVSERVER_PROTOCOL
• refENVHTTP_REFERER
• lenENVCONTENT_LENGTH

environment variables
33
show_param.cgi (3)

• print "ltHTMLgtltBODYgt"
• print "Name nameltBRgt"
• print "Address addltBRgt"
• print "City cityltBRgt"
• print "Hidden hiddenltBRgt"
• print "ltHRgtltBRgt"
• print "Server Software serverltBRgtltBRgt"
• print "HTTP REFERER refltBRgtltBRgt"
• print "Content Length lenltBRgtltBRgt"
• print "Remote Address Remote_AddltBRgtltBRgt"
• print "Server Protocol protocolltBRgtltBRgt"
• print "Server Name Server_NameltBRgtltBRgt"
• print "Request Method methodltBRgtltBRgt"
• print "lt\/BODYgtlt\/HTMLgt"

34
Output
35
Reading Data File

• When you build large web application, you will
  need to store data and retrieve it later
• Text files are the simplest way to maintain data

36
Reading Data File (script)

• !/usr/bin/perl
• print "Content-type text/html\n\n"
• filename1ID0.txt
• If (open (FILE, filename) )
• _at_filecontentltFILEgt
• close FILE
• print "lthtmlgtltbodygt"
• print Data is saved.
• print "lt/bodygtlt/htmlgt"

file handle
37
File Handle

• The file handles are just the things we use when
  we are dealing with files.
• A file handle is associated with a file by the
  open statement. open (FILE, filename)
• All the interaction with a file is done by the
  file handle.
• _at_filecontent ltFILEgt -- get the whole
  file filecontent ltFILEgt ---- get the first
  line

38
Writing Data File

• !/usr/bin/perl
• use CGI
• qnew CGI
• print "Content-type text/html\n\n"
• nameq-gtparam("name")
• outputfileusers.txt
• if (open (OUTPUT, "gtgtoutputfile")) open a
  file
• print OUTPUT "name\n" write
  the user name to the file
• print "ltHTMLgtltBODYgtThank you!
  namelt/BODYgtlt/HTMLgt"
• Else
• print "ltHTMLgtltBODYgtErrorlt\/BODYgtlt\/HTMLgt"

39
Writing Data File (continued)

• Opening a file for writing - For
  overwriting open (OUTPUT, "gtgtoutputfile")
  - For appending open (OUTPUT, "gtoutputfile")
• Without gtgt and gt, the file is opened for
  reading open (OUTPUT, "outputfile")
• Creating the output file and making it writable
  touch users.txt chmod aw users.txt

40
Writing and Running a CGI script

• Writing the script using a plain text editor
• Saving the file myCGI.cgi in
  aguo/public_html/cgi-bin/
• Opening a terminal, and type cd
  public_html/cgi-bin --- change the directory
  chmod 755 myCGI.cgi --- make the script
  executable
• Opening the browser, and running the
  script redpoll.pharmacy.ualberta.ca/aguo/cgi-bi
  n/myCGI.cgi

41
Debugging

• Default response of the server "Internal
  Server Error" --- not useful
• Better waysIn the script use CGICarp
  qw(fatalsToBrowser)In the UNIX shell (check
  the syntax) perl -cw scriptname.cgi

42
Debugging (continued)

• use CGICarp qw(fatalsToBrowser)

43
Debugging (continued)

• perl -cw scriptname.cgisyntax error at
  myCGI.cgi line 23 and line 29, near "print
• myCGI.cgi had compilation errors.

44
Conclusion

• Basic HTML (structure, tags, forms)
• Basic Perl (variables)
• Basic CGI - form processing (retrieving form
  data)- writing data file- reading data file
• Steps for working with CGI scripts- writing and
  saving the file to public_html/cgi-bin-
  changing the file permission to executable-
  running the script
• Debugging

45
Thanks

• Dr. David Wishart
• Shan Sundararaj 
• Hassan Monzavi
• Haiyan Zhang