Chapter 1

Download Report

Transcript Chapter 1 

Chapter 5
Sebesta:
Programming the
World Wide Web
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
1
5.1 The Common Gateway Interface
- Markup languages cannot be used to specify
computations, interactions with users, or to
provide access to databases
- CGI is a common way to provide for these needs,
by allowing browsers to request the execution of
server-resident software
- CGI is just an interface between browsers and
servers
- An HTTP request to run a CGI program specifies a
program, rather than a document
- Servers can recognize such requests in two ways:
1. By the location of the requested file (special
subdirectories for such files)
2. A server can be configured to recognize
executable files by their file name extensions
- A CGI program can produce a complete HTTP
response, or just the URL of an existing document
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
2
5.2 CGI Linkage
- CGI programs often are stored in a directory named
cgi-bin
- Some CGI programs are in machine code, but Perl
programs are usually kept in source form, so
perl must be run on them
- A source file can be made to be “executable” by
adding a line at their beginning that specifies that
a language processing program be run on them
first
For Perl programs, if the perl system is stored in
/usr/local/bin/perl, as is often is in UNIX
systems, this is
#!/usr/bin/perl -w
- An HTML document specifies a CGI program with
the hypertext reference attribute, href, of an anchor
tag, <a>, as in
<a href =
"http://kirk.cs.twsu.edu:6550/cgi-bin/reply.pl>"
Click here to run the CGI program, reply.pl
</a>
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
3
5.2 CGI Linkage (continued)
<!-- reply.html - calls a trivial cgi program
-->
<html>
<head>
<title>
HTML to call the CGI-Perl program reply.pl
</title>
</head>
<body>
This is our first CGI-Perl example
<a href =
"http://kirk.cs.twsu.edu:6550/cgi-bin/reply.pl">
Click here to run the CGI program, reply.pl
</a>
</body>
</html>
- The connection from a CGI program back to the
requesting browser is through standard output,
usually through the server
- The HTTP header needs only the content type,
followed by a blank line, as is created with:
print "Content-type: text/html \n\n";
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
4
5.2 CGI Linkage (continued)
#!/usr/bin/perl
# reply.pl – a CGI program that returns a
#
greeting to the user
print "Content-type: text/html \n\n",
"<html> <head> \n",
"<title> reply.pl example </title>",
" </head> \n", "<body> \n",
"<h1> Greetings from your Web server!",
" </h1> \n </body> </html> \n";
5.3 HTML for Forms
- A form is the usual way information is gotten from
a browser to a server
- HTML has tags to create a collection of objects that
implement this information gathering
- The objects are called widgets (e.g., radio buttons
and checkboxes)
- Each widget has a value; the values of all of the
widgets in a form are together called the form data
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
5
5.3 HTML for Forms (continued)
- When the Submit button of a form is clicked, the
form’s form data are sent to the server
- All of the widgets, or components of a form are
defined in the content of a <form> tag
- The only required attribute of <form> is action,
which specifies the URL of the application that is
to be called when the Submit button is clicked
action =
"http://kirk.cs.twsu.edu:6550/cgi-bin/survey.pl"
- The method attribute of <form> specifies one of
the two possible techniques of transferring the
form data to the server, GET and POST
(GET is the default)
- For both techniques, the form data is coded as a
text string, called the query string
- With the GET technique, the query string is
attached to the end of the URL of the request,
after attaching a question mark to the URL
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
6
5.3 HTML for Forms (continued)
- When the server receives a GET request, it
puts the query string in the OS environment
variable, QUERY_STRING
- The advantage of the GET technique is that
parameters can be passed to the server, even
if a form is not involved
- One disadvantage of the GET technique is that
some servers place an arbitrary limit on the
length of a URL, thus limiting the length of the
query string
- Another disadvantage of GET is that, because
URLs are easy to find, the the query string
is also easy to find - security is a problem
- With the POST technique, the query string is
passed through standard input to the CGI
program
- The length of the query string is placed in the
environment variable, CONTENT_LENGTH
- Advantage: There is no length limitation
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
7
5.3 HTML for Forms (continued)
- Widgets
- Many are created with the <input> tag
- The type attribute of <input> specifies the kind of
widget being created
1. Text
- Creates a horizontal box for text input
- Default size is 20; it can be changed with the
size attribute
- If more characters are interred than will fit, the
box is scrolled (shifted) left
- If you don’t want to allow the user to type more
characters than will fit, set maxlength, which
causes excess input to be ignored
<input type = "text" name = "Phone"
size = "12" >
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
8
5.3 HTML for Forms (continued)
- Widgets (continued)
2. Checkboxes - to collect multiple choice input
- Every checkbox requires a value attribute,
which is the widget’s value in the query string
when the checkbox is ‘checked’
- A checkbox that is not ‘checked’ contributes
no value to the query string
- By default, no checkbox is initially ‘checked’
- To initialize a checkbox to ‘checked’, the
checked attribute must be set to "checked“
* The <label> tag allows text to be associated with
the input "windows" that are created in a form.
<label for="label-address">Address:</label>
<input type="text" size="20"
name="address" id="label-address“>
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
9
5.3 HTML for Forms (continued)
- Widgets (continued)
Grocery Checklist
<form>
<input type = "checkbox" name
value = "milk" checked
Milk
<br/>
<input type = "checkbox" name
value = "bread"> Bread
<br/>
<input type = "checkbox" name
value= "eggs"> Eggs
</form>
= "groceries"
= "checked">
= "groceries"
= "groceries"
3. Radio Buttons - collections of checkboxes in
which only one button can be ‘checked’ at a
time
- Every button in a radio button group MUST
have the same name
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
10
5.3 HTML for Forms (continued)
- Widgets (continued)
3. Radio Buttons (continued)
- If no button in a radio button group is
‘pressed’, the browser often “presses” the
first one
Age Category
<form>
<input type = "radio" name = "age"
value = "under20" checked = "checked"> 0-19
<br/>
<input type = "radio" name = "age"
value = "20-35"> 20-35
<br/>
<input type = "radio" name = "age"
value = "36-50"> 36-50
<br/>
<input type = "radio" name = "age"
value = "over50"> Over 50
</form>
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
11
5.3 HTML for Forms (continued)
- Widgets (continued)
4. Menus - created with <select> tags
- There are two kinds of menus, those that
behave like checkboxes and those that
behave like radio buttons (the default)
- Menus that behave like checkboxes are
specified by including the multiple attribute,
which must be set to "multiple"
- The name attribute of <select> is required
- The query string value of a <select> is the
name of the <select>, along with the chosen
menu items (if none are ‘checked’, nothing
is included in the query string)
- The size attribute of <select> can be
included to specify the number of menu
items to be displayed (the default is 1)
- If size is set to > 1 or if multiple is
specified, the menu is displayed as a
pop-up menu
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
12
5.3 HTML for Forms (continued)
- Widgets (continued)
4. Menus (continued)
- Each item of a menu is specified with an
<option> tag, whose pure text content (no tags)
is the value of the item
- An <option> tag can include the select
attribute, which specifies that the item is
preselected
Grocery Menu - milk, bread, eggs, cheese
<form>
With size = 1 (the default)
<select name = "groceries">
<option> milk </option>
<option> bread </option>
<option> eggs </option>
<option> cheese </option>
</select>
</form>
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
13
5.3 HTML for Forms (continued)
- Widgets (continued)
4. Menus (continued)
- After clicking the menu:
- After changing size to 2:
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
14
5.3 HTML for Forms (continued)
- Widgets (continued)
5. Text areas - created with <textarea>
- Usually include the rows and cols attributes
to specify the size of the text area
- Default text can be included as the content of
<textarea>
- Scrolling is implicit if the area is overfilled
Please provide your employment aspirations
<form>
<textarea name = "aspirations"
cols = "40">
(Be brief and concise)
</textarea>
</form>
Chapter 5
rows = "3”
© 2002 by Addison Wesley Longman, Inc.
15
5.3 HTML for Forms (continued)
- Widgets (continued)
6. Reset and Submit buttons
- Both are created with <input>
<input type = "reset" value = "Reset Form">
<input type = "submit” value = "Submit Form">
- Submit has two actions:
1. Code the form data into a query string
2. Request that the server execute the CGI
program specified as the value of the
action attribute of the <form> tag
- A Submit button is required in every form
--> SHOW popcorn.html
--> SHOW Figure 5.10 (a filled-out form)
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
16
5.4 Query String Format
- A query string includes names and values of
widgets
- Widget values are always coded as strings
- The form of a name/value pair in a query string is:
name=value
- If the form has more than one widget, their values
are separated with ampersands
milk=2&payment=visa
- Each special character is coded as a percent sign
and a two-character hexadecimal number (the
ASCII code for the character)
- Some browsers code spaces a plus signs, rather
than as %20
5.5 Decoding the Query String
- Step 1 (for the CGI program) is to get the query
string into a scalar variable
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
17
5.5 Decoding the Query String (continued)
- We want it to work for both GET and POST
techniques
$request_method = $ENV{'REQUEST_METHOD'};
if ($request_method eq "GET") {
$query_string = $ENV{'QUERY_STRING'};
}
elsif ($request_method eq "POST") {
read(STDIN, $query_string,
$ENV{'CONTENT_LENGTH'})
}
else {
print
"Error - the request method is illegal \n";
exit(1);
}
- Step 2 of the decoding is to split the query string
into its widgets
@name_value_pairs =
split(/&/, $query_string);
- Step 3 is to split the pairs into names and values
foreach $name_value (@name_value_pairs) {
($name, $value) = split (/=/, $name_value);
# Processing
}
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
18
5.5 Decoding the Query String (continued)
- Step 4 is to replace the plus signs with spaces
$value =~ tr/+/ /;
- Step 5 is to convert the coded special characters
in the query string
- First, find them with:
/%([\dA-Fa-f][\dA-Fa-f])/
- Then, use substitute to convert them
- Convert the found coded character to a decimal
number with the hex
- Pack the decimal number into a character using
pack
s/%([\dA-Fa-f][\dA-Fa-f])/pack("C",hex($1))/eg
(the e modifier is to execute the second part of
the substitute; the g modifier is to be sure all
of them are translated)
--> SHOW query_string.pl
(which decodes and displays the form data
from popcorn.html)
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
19
5.6 An Example of Form Processing
- Processing the popcorn form data
- Compute the costs of the ordered items
- Determine the total sale amount
- Send the item costs and the total sale back to
the user
--> SHOW popcorn.pl
--> SHOW Figure 5.12
5.7 The CGI.pm Module
- A Perl module serves as a library
- The Perl use declaration is used to make a module
available to a program
- To make only part of a module available, specify
the part name after a colon
(For our purposes, only the standard part of the
CGI module is needed)
use CGI qw(:standard);
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
20
5.7 The CGI.pm Module (continued)
- Common CGI.pm Functions
- “Shortcut” functions produce tags, using their
parameters as attribute values
- e.g., h2("Very easy!"); produces
<h2> Very easy! </h2>
- In this example, the parameter to the function
h2 is used as the content of the <h2> tag
- Tags can have both content and attributes
- Each attribute is passed as a name/value pair,
just as in a hash literal
- Attribute names are passed with a preceding
dash
textarea(-name => "Description",
-rows => "2",
-cols => "35"
);
Produces:
<textarea name ="Description" rows=2
cols=35> </textarea>
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
21
5.7 The CGI.pm Module (continued)
- If both content and attributes are passed to a
function, the attributes are specified in a hash
literal as the first parameter
a({-href => "fruit.html"},
"Press here for fruit descriptions");
Produces:
<a href="fruit.html">
Press here for fruit descriptions</a>
- Tags and their attributes are distributed over
the parameters of the function
ol(li({-type => "square"},
["milk", "bread", "cheese"]));
Produces:
<ol>
<li type="square"milk</li>
<li type="square"bread</li>
<li type="square"cheese</li>
</ol>
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
22
5.7 The CGI.pm Module (continued)
- Tables are easier to specify with CGI.pm
- The table is created with the table function
- The border attribute is specified as a parameter
- The table’s caption is created with a call to
caption, as the second parameter to table
- Each row of the table is created with a call to
Tr
- A heading row is created with a call to th
- Data cells are created with calls to td
- The calls to Tr, th, and td require references as
parameters
- Suppose we have three arrays of sales numbers,
one for each of three salespersons; each array
has one value for each day of the work week
- We want to build a table of this information,
using CGI.pm
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
23
5.7 The CGI.pm Module (continued)
table({-border => "border"},
caption("Sales Figures"),
Tr(
[th(["Salesperson", "Mon", "Tues",
"Wed", "Thu", "Fri"]),
th("Mary").td(\@marysales),
th("Freddie").td(\@freddiesales),
th("Spot").td(\@spotsales),
]
)
);
- CGI.pm also includes non-shortcut functions, which
produce output for return to the user
- A call to header() produces:
Content-type: text/html;charset=ISO-8859-1
-- blank line --
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
24
5.7 The CGI.pm Module (continued)
- The start_html function is used to create the
head of the return document, as well as the
<body> tag
- The parameter to start_html is used as the title
of the document
start_html("Bill’s Bags");
Produces:
<html><head><title>Bill’s Bags</title>
</head><body>
- The end_html function generates </body></html>
- Decoding the query string is very easy with
CGI.pm
- The param function is given a widget’s name; it
returns the widget’s value
- If the query string has name=Abraham in it,
param("name") will return "Abraham"
--> SHOW popcorn2.pl
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
25
5.8 A Survey Example
- We will use a form to collect survey data from
users
- The program needs to accumulate survey results,
which must be stored between form submissions
- Store the current results in a file on the server
- Because of concurrent use of the file, it must be
protected from corruption by blocking other
accesses while it is being updated
- Under UNIX, this can be done with the Perl
function, flock, using the parameter value 2 to
specify a lock operation and 8 to specify an
unlock operation
--> SHOW conelec.html
--> SHOW Figure 5.14
- Two CGI programs are used for this application,
one to collect survey submissions and record the
new data, and one to produce the current totals
- The file format is eight lines, each having seven
values, the first four for female responses and the
last four for male responses
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
26
5.8 A Survey Example (continued)
- The program to collect and record form data must:
1. Decode the data in the query string
2. Determine which row of the file must be
modified
3. Open, lock, read, unlock, and close the survey
data file
4. Split the affected data string into numbers and
store them in an array
5. Modify the affected array element and join the
array back into a string
6. Open, lock, write, unlock, and close the survey
data file
--> SHOW conelec1.pl
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
27
5.8 A Survey Example (continued)
- The program that produces current results must:
1. Open, lock, read the lines into an array of
strings, unlock, and close the data file
2. Split the first four rows (responses from
females) into arrays of votes for the four age
groups
3. Unshift row titles into the vote rows (making
them the first elements)
4. Create the column titles row with th and put its
address in an array
5. Use td on each rows of votes
6. Push the addresses of the rows of votes onto
the row address array
7. Create the table using Tr on the array of row
addresses
8. Repeat Steps 2-7 for the last four rows of data
(responses from males)
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
28
5.8 A Survey Example (continued)
--> SHOW conelec2.pl
--> SHOW Figure 5.15
5.9 Animation Using CGI
- CGI was once a good way to create animation, but
now there are several better ways
- There are two ways to use CGI to create animation,
neither of which requires user intervention
1. Client-pull animation
- The client repeatedly requests images from the
server, which it displays in sequence
- Problems: Internet is not fast enough, and if
the approach were widely used, it would
pull down the speed of the whole Internet
2. Server-push animation
- The server sends the sequence of images to
the client, with delays between them
- Problems: Also creates a huge load on the
Internet, and it is supported only by
Netscape
Chapter 5
© 2002 by Addison Wesley Longman, Inc.
29