Chapter 4 Working with the Web

1*Copyright © 2002 Pearson Education, Inc.


Chapter 4

Working with the Web


Chapter Objectives

Describe some basic Perl Functions Describe the basic functions within the CGI.pm

library that can generate HTML tags» Learn the different formats of the CGI.pm function

syntax

Understand how to use forms to send data and receive data to/in CGI/Perl programs


Chapter Objectives



syntax



Will Cover 3 Sets of Functions

Will discuss several functions

» Some basic Perl functions—the square root, absolute value, string, and random number generation functions.

» The print function —more details about the capabilities of the print function.

» The param function—use of this function to receive input into your programs.


Using Perl Functions

Perl includes built-in functions that provide powerful additional capabilities to enhance your programs.

» Work much like operators, except that most (but not all) accept one or more arguments (I.e., input values into functions).

function_name (argument1, argument2, argument3);

Comma separate eachinput argument tofunction.

Name of the function.

Usually enclose arguments in parentheses.




» Some basic Perl functions—the square root, absolute value, string functions, and random number generation functions

» The print function—more details about the capabilities of the print function.



Some Basic Perl Functions

Here are a few functions within Perl

» sqrt() –a single numerical argument as input & returns the square root of the argument passed in. For example,

$x=25;$y=sqrt($x);print “x=$x y=$y and finally ”,

sqrt(144);

would output the following:

x=25 y=5 and finally 12


Some Basic Perl Functions - abs()

Absolute Value -

» abs() – accepts a single numerical argument & returns the absolute value of this argument. For example,

$x=-5;$y=42;print abs($x), “ “, abs($y);

» would output the following output:

5 42

» The extra space in the print line (“ ”) provides a space between the output values.


Some Basic Perl Functions -rand()

rand() – generates a random number from 0 to the number passed into it. » Example use: simulating a roll of a die or displaying a

random image in a document.

» When int() is used with rand(), it forces rand() to return whole numbers instead of its default fractional numbers.

– For example,

$numb = int( rand(3) );

– returns a random number that is either a 0, 1, or 2.


Some Basic Perl Functions - rand()

» Here is another example of the rand() function:$dice=int(rand(6))+1;print "Your random dice toss is

$dice";

» The random number that is generated in this case can be a 1, 2, 3, 4, 5, or 6. Thus one possible output of this code is

Your random dice toss is 6



» length() – The length function is used to work with string variables. It returns the number of characters in the string argument. For example,

» $name = “smith”;

$title = “Domestic Engineer”;print “name is ”, length($name), “ title is

”, length($title), “ characters long”;

» returns the following output:name is 5 title is 17 characters long



» localtime() – The localtime function is typically used with the time() function to determine the current date and time while your program is executing.

– time returns the number of seconds since January 1, 1970.

– When time() is used as an argument to the localtime() function, the output will be a set of scalar variables that provide the current date and time information.

– For example,


locatltime(time) return values

($sec, $min, $hr, $day, $mon, $yr, $wkday, $DayNumOfYr, $TZ ) = localtime(time);

Currentsecond

Currentminute

Current Hour

Day OfMonth

Month (0 is Jan, 1 is Feb,etc)

Number of years since1900.

Day of week (0 isSun, 1 is Mon,since1900.

Day of year (0 is Jan1, 1 is Jan 2, etc.)

Timezone1 if local time is using Daylight Savings Time; 0 otherwise


Using localtime(time)($sec, $min, $hr, $day, $mon, $yr, $wkday, $DayNumOfYr,

$TZ ) = localtime(time);print "Time is $hr:$min:$sec Date=$mon/$day/$yr ";\print "Wkday=$wkday DayNumbOfYear=$DayNumOfYr $TZ=$TZ”;

Would produce the following example output:

» Time is 21:12:58 Date=7/15/101 Wkday=3 DayNumbOfYear=226 1=1


More Common Localtime Use

» The following code shows a common use of localtime() to get date information:

($sec, $min, $hr, $day, $mon, $yr, $wkday, $DayNumOfYr, $TZ ) = localtime(time);$yr=$yr+1900;$mon = $mon + 1;print "Time is $hr:$min:$sec Date=$mon/$day/$yr ";print "Wkday=$wkday DayNumbOfYear=$DayNumOfYr $TZ=$TZ";

The output would look like the following:Time is 21:29:58 Date=8/15/2001 Wkday=3 DayNumbOfYear=226 1=1




» Some basic Perl functions—the square root, absolute value, string, and random number generation functions.

» The print function —more details about the capabilities of the print function.



The print Function You can enclose output in parentheses or not.

When use double quotation marks, Perl outputs the value of any variables. For example,

$x = 10;print ("Mom, please send $x dollars");

Output the following message:

Mom, please send 10 dollars


More On print() If want to output the actual variable name (and

not its value), then use single quotation marks.

$x = 10;print ( 'Mom, please send $x dollars');

Would output the following message:

Mom, please send $x dollars


Still More On print() Can also comma separate several arguments

to print(). For example, $x=5;print ('Send $bucks', " need $x. No make that ",

5*$x);

This print statement request would output the following message:

Send $bucks need 5. No make that 25


Generating HTML with print()

Can use single quotes when output some HTML tags:

print ‘<FONT COLOR=”BLUE”>’;

Can use backslash (“\”) to signal that double quotation marks themselves should be output:

$color=”BLUE”; print “<FONT COLOR=\”$color\”>”;


Using CGI.pm to generate HTML

The CGI.pm module provides several functions that can be used to concisely output HTML tags. For example,

$mypage=‘It is a New Day’;

print “<HTML><HEAD><TITLE> $mypage </TITLE></HEAD><BODY>”;

Can also be written as:$mypage=’It is a New Day’;

print start_html(‘$mypage’);

CGI.pm function


3 Basic CGI.pm Modules

start_html—creates starting HTML tags header—creates the MIME Content-type line end_html — creates ending HTML tags

1. #!/usr/bin/perl2. use CGI ':standard';3. print header;4. print start_html;5. print '<FONT size=4 color="blue">';6. print 'Welcome <I>humans</I> to my site</FONT>'; 7. print end_html;


Would output the following …


Chapter Objectives



syntax



CGI.pm Basic Functions

The various CGI/PM function accept 3 basic syntactic formats:

» No argument format—functions that can be used without any arguments

» Positional argument format—functions that can accept comma-separated arguments within parentheses

» Name-value argument format—functions that accept parameters submitted as name-and-value pairs


No Argument Format The Previous Example shows the start_html, header, end_html functions

» You can place the 1 or more functions directly within a print statement

» Would output

print start_html, br, br, hr;

Comma separate eachCGI.pm function call.

print will outputthe HTML tags

generated directly.

<HTML><HEAD><TITLE></TITLE></HEAD><BODY><BR><BR><HR>


Some Single Argument Functions

CGI.pm Function

Example of Use Example Output

Header- the MIME Content-type line

print header; Content-type:text/html\n\n

start_html—Tags to start an HTML document

print start_html; <HTML><HEAD><TITLE></TITLE></HEAD><BODY>

br—output <BR> tag

print br; <BR>

hr—generate horizontal rule

print hr; <HR>

end_html—end an HTML document

print end_html; </BODY></HTML>


Positional Argument Format

Specify multiple arguments based on the position of the argument

For example

print h1('Hello World');

Argument used as stringto include in the <H 1>

... </H1> tags. Generate <H1> ... </H1>

tags.


Some Positional Functions

CGI.pm Functions Example of Use Example Output

start_html()—tags needed to start an HTML document.

start_html(‘My Page’);

<HTML><HEAD><TITLE> My Page </TITLE></HEAD><BODY>

h1()—header level 1 tags. (also h2(), h3(), and h4() )

print h1(‘Hello There’);

<H1>Hello There </H1>

strong() – output argument in strong.

print strong('Now');

<STRONG>Now</STRONG>

p()—creates a paragraph.

print p(‘Time to move’);

<P>Time to move </P>

b()—prints the argument in bold.

print b('Exit'); <B>Exit</B>

i()—prints the argument in italics.

print i('Quickly'); <I>Quickly</I>


Operating on Variables

Can concisely use functions with a single print statement: » print i('Please '),'come when I call you ', strong('immediately.');

This code would output the following:» <I>Please</I> come when I call you <STRONG>immediately.</STRONG>


Consider the following example:

1. #!/usr/bin/perl2. use CGI ':standard';3. print header, start_html(‘Positional Example’), h1('Simple Math');

4. print b('two times two='), 2*2;5. print br, 'but ', b('four times four='), 4*4;

6. print br, 'Finally, ', b('eight times eight='), 8*8;

7. print end_html;


Would output The following

1. #!/usr/bin/perl

2. use CGI ':standard';

3. print header, start_html(‘Positional Example’), h1('Simple Math');

4. print b('two times two='), 2*2;

5. print br, 'but ', b('four times four='), 4*4;

6. print br, 'Finally, ', b('eight times eight='), 8*8;

7. print end_html;


Name-Value Argument Format

print start_html ( { -title=>'My Title', -bgcolor=>'yellow' } );

Use curly brackets to encloseyour arguments.

The => sequence separates theargument name from the value.Argument name is

specified after a dash. Place argument value in singlequotes.

Commaseparate arguments

<HTML><TITLE>My Title</TITLE></HEAD><BODY BGCOLOR=”yellow”>

Can specify names and values as follows:

Would output the following:


Some name/value functions

CGI.pm Function

Example Usage Example Output

start_html start HTML document

print start_html({ -title=>‘my title’, –bgcolor=>’red’ });

<HTML><HEAD><TITLE>my title</TITLE></HEAD> <BODY BGCOLOR=”RED”>

img—inserts an image

print img({-src=>'myfile.gif', -alt=>’picture’});

<IMG SRC="myfile.gif” alt=”picture”>

a—establishes links

print a( { -href=>'http://www.mysite.com'}, 'Click Here');

<A HREF="http://www.mysite.com"> Click Here </A>

font()—creates <FONT> … </FONT> tags

print font( { -color=>‘BLUE’, –size=>’4’}, ‘Lean, and mean.’);

<FONT SIZE=”4” COLOR=”BLUE”> Lean, and mean. </FONT>


Example Name/Value Program

1.#!/usr/bin/perl2.use CGI ':standard';3.print header;4.print start_html({-title=>'New Day ', -bgcolor=>'yellow'});5.print 'Welcome One And ', i('All');

6. print end_html;

Set background color and title


Would Output The Following ...


Chapter Objectives

Describe the basic functions within the CGI.pm library that can generate HTML tags» Learn the different formats of the CGI.pm function

syntax



Input Data from HTML Forms

A common method to start CGI/Perl programs and pass them arguments. » Use form elements such as:

– text areas, – check boxes,– selection lists, and – radio buttons

» There are CGI.pm functions for each of these will describe the long-hand (not using CGI.pm)


Starting and Ending Forms HTML forms are created by using the HTML <FORM> and </FORM> tags.

» Within these tags, you place various HTML form elements, such as text areas, check boxes, and radio buttons.

» For example, » <FORM ACTION=”http://perl-pgm.com/cgi-bin/stuff.cgi”

METHOD=”POST”> . . ---(Your FORM elements here) .

</FORM>


Two primary <FORM> arguments

<FORM ACTION=”http://perl-pgm.com/cgi-bin/stuff.cgi”

METHOD=”POST”>

» get appends the form arguments to the end of the Web address.

» post sends the data as part of the body of the HTML document.

» Will use post since get method may limit the amount of data you can send.

ACTION= - Specifies the URL of the CGI program to start when the form is submitted

METHOD= - Defines the argument format that will be used to send data to the CGI/Perl program.


Output Form Tags From Perl Example

#!/usr/bin/perluse CGI ':standard';print header, start_html(‘Sample Form’);print ‘<FORM ACTION=” http://perl-pgm.com/cgi-bin/stuff.cgi” METHOD=”POST”>’;

.

. ---- (Perl statements that output FORM

. elements go here)

print ‘</FORM>’;


Form Submit/Reset Buttons 2 types of buttons: Submit form or erases input.

» On submit, data is sent to the location specified in the ACTION= argument of the <FORM> tag.

» HTML for submit/reset

<INPUT TYPE=”SUBMIT” VALUE=”Click To Submit”>

<INPUT TYPE=”RESET” VALUE=”Clear and Restart”>

Output from Perl program as follows: print ‘<INPUT TYPE=”SUBMIT” VALUE=”Click To Submit”>’;

print ‘<INPUT TYPE=”RESET” VALUE=”Clear and Restart”>’;

Type ofbutton

Label on button


Form Submit/Reset Buttons1.#!/usr/bin/perl2.use CGI ':standard';3.print header, start_html('A First Form');4.print '<FORM ACTION="http://65.108.8.8/cgi- bin/C4/first.cgi" METHOD=”POST”>';5.print br, '<INPUT TYPE=”SUBMIT” VALUE="Click To Submit">';

6.print '<INPUT TYPE=”RESET” VALUE="Erase and Restart">';

7. print '</FORM>', end_html;


Would output the following ...


Setting Up Input Text Areas

Input Text Areas creates text boxes on forms. HTML for Input Text boxes

<INPUT TEXT TYPE=”text” SIZE=”15”

MAXLENGTH=”20” NAME=”color”>

Output from Perl program as follows: print ‘<INPUT TEXT TYPE=”text” SIZE=”15” MAXLENGTH=”20” NAME=”color”>’;

15 characterbox

20 charactermax allowed

sets a CGI variable called color


Receiving HTML Form Arguments

Within the receiving program use param()» Make sure CGI variable name in NAME=

argument from form matches argument in param() function.

» See following example,


Receiving HTML Form Arguments

<FORM ACTION="http://perl-pgm.com/cgi.bin/form1Rcv.cgi" METHOD="POST"><INPUT TYPE="text" SIZE="15" MAXLENGTH="20" NAME="color">

URL of program to send form output to.

Name ofargument fromtextbox is color.

.

.

.</FORM>

#!/usr/bin/perluse CGI ":standard";print header;print start_html("Color my Text");$userColor = param("color"); . . .print end_html;

Get the valueof form elementcalled color

The Calling HTML Form

The Receiving CGI/Perl Program


Example sending text box data

Here is a calling form with a text box:1.#!/usr/bin/perl

2. use CGI ':standard';

3. print header, start_html;

4. print '<FORM ACTION="http://65.108.8.8/cgi-bin/C4/form1Rcv.cgi" METHOD=”POST” >';

5. print 'Enter A Color ';

6. print '<INPUT TEXT TYPE="TEXT" SIZE="15" NAME="color">';

7. print br, '<INPUT TYPE=SUBMIT VALUE="Click To Submit">';

8. print '<INPUT TYPE=RESET VALUE="Erase and Restart">';

9. print ‘</FORM>’, end_html;

Sets CGI variable‘color’

Creates submit and reset buttons

Program tostart “On submit”


Example sending text box data

Here is a receiving CGI/Perl Program:1.#!/usr/bin/perl

2.use CGI ':standard';3.print header;4.print start_html("Color my Text");5.$userColor = param('color');6.print "<FONT SIZE=4 COLOR=$userColor>";7.print 'Welcome to my World';8.print ‘</FONT>’, end_html;

Receives CGI variable‘color’

Sets <fontto $userColor


Example Output


Sending Passwords

Can create text boxes as password areas instead of viewable text. » Letters entered within a password box are viewed as

asterisks (“*”).» To create a password box, you set TYPE=”password” with

the INPUT form element tag. » Not a secure method for transmitting passwords.

– Any data input is sent in clear text (non-encrypted). Anyone with network access could, potentially read the password being transferred.

– If password protect one page can still get to other pages.


Setting Up Input Text Areas

HTML for Input Text boxes

<INPUT TYPE=”password” SIZE=”15”

MAXLENGTH=”25” NAME=”pass”>

Output from Perl program as follows: print ‘<INPUT TEXT TYPE=”text” SIZE=”15” MAXLENGTH=”20” NAME=”color”>’;

15 characterbox

20 charactermax allowed

sets a CGI variable called pass

Form elementtype


Program that creates password box

1.#!/usr/bin/perl2.use CGI ":standard";3.print header;4.print start_html("Color my Text");5.print '<FORM

ACTION="http://65.108.8.8/cgi-bin/C4/checkpass.cgi“

METHOD=”POST”>';6.print '<FONT COLOR="BLUE" SIZE=4> Enter password to see message <BR>';7.print '<INPUT TYPE="password" SIZE="15" NAME="passwd">';8.print br, '<INPUT TYPE=SUBMIT VALUE="Click To Submit">';9.print ’<INPUT TYPE=RESET

VALUE="Erase and Restart">';10. print ‘</FORM>’, end_html;

Where to send input

Passwdtext box

Submit & Reset buttons


Receiving Perl Program1. #!/usr/bin/perl2. use CGI ":standard";3. print header; start_html('Check Pass');4. $password=param('passwd');5. if ( $password eq 'PerlOK' ) {6. print 'You got the password do not tell anyone';7. } else {8. print 'Sorry you do not know the password';9. print br, "You entered $password";10. }

11. print end_html;

Get passwdCGI/variable




Text Areas Similar to text boxes, except you can create

multicolumn and multirow input areas.

<TEXTAREA ROWS=”6” COLS=”50” NAME=”color”> Green </TEXTAREA>

Can output from CGI/Perl program as follows:print ‘<TEXTAREA ROWS=”6” COLS=”50” NAME=”color”>’; print ‘Green </TEXTAREA>’

Number of rows

Number of cols

CGI variablename


Check Boxes Small boxes on a form that create a check mark

when the user clicks them.

<INPUT TYPE=”checkbox” NAME=”yesBall” VALUE=”yes”> Play Baseball?

<INPUT TYPE=”checkbox” NAME=”yesFish” VALUE=”yes” CHECKED> Fish?

Can output from CGI/Perl program as follows:print ‘<INPUT TYPE=”checkbox” NAME=”yesBall” VALUE=”yes”> Play Baseball?’;

print ‘<INPUT TYPE=”checkbox” NAME=”yesFish” VALUE=”yes” CHECKED> Fish?’;

CGI Variable name

CGIVariable value

Label next to check box


Coordinated Check Boxes

Creating check boxes that enable multiple boxes to be checked» Use a common NAME= CGI variable name.

<INPUT TYPE=”checkbox” NAME=”summer” VALUE=”bball”> Play Baseball?

<INTPUT TYPE=”checkbox” NAME=”summer” VALUE=”fish” checked > Fish?

<INPUT TYPE=”checkbox” NAME=”summer” VALUE=”travel”> Travel?

If select multiple receive comma separate list. » E.g., “bball, travel” if 1rst and 3rd.


Example Checkbox & Text Area Form

1. #!/usr/bin/perl2. use CGI ':standard';3. print header, start_html('Checkbox and Textarea');4. print '<FORM ACTION="http://65.108.8.8/cgi-bin/C4/form1Rcv.cgi"

ACTION="POST">';5. print 'What do you eat? <BR>';6. print '<INPUT TYPE="checkbox" NAME="eat" VALUE="veggies">

Vegetables?';7. print '<INPUT TYPE="checkbox" NAME="eat" VALUE="meat"> Meat?';8. print '<INPUT TYPE="checkbox" NAME="eat" VALUE="any" checked>

Anything not moving?';9. print '<BR> Any comments?<BR>';10. print '<TEXTAREA ROWS="5" COLS="50" NAME="comments">';11. print 'Put Comments Here </TEXTAREA>';12. print br, br;13. print br, '<INPUT TYPE=SUBMIT VALUE="Click To Submit">';14. print '<INPUT TYPE=RESET VALUE="Erase and Restart">';15. print '</FORM>', end_html;




Radio Buttons

Small circles that similarly to check boxes. » Only one button can be selected at any given time.» The NAME argument must be the same for all radio

buttons group.

<INPUT TYPE=”radio” NAME=”summer” VALUE=”bball”> Play Baseball?

<INPUT TYPE=”radio” NAME=”summer” VALUE=”fish” checked > Fish?

<INPUT TYPE=”radio” NAME=”summer” VALUE=”travel”> Travel?

CGI Variablename

CGI Variablevalue

Label next to radio button


Selection Lists

A box with a scrolling list of one or more items that can be highlighted and selected by the user» <OPTION> defines each option to display. » SIZE defines number to display w/o scrolling. » MULTIPLE allows > 1 one item to be selected

<SELECT NAME="Accommodations" SIZE=2 MULTIPLE><OPTION> A fine hotel <OPTION SELECTED> A cheap motel! <OPTION> A tent in the parking lot <OPTION> Just give me a sleeping bag checked

</SELECT>


Radio and Selection Form

1. #!/usr /bin/perl2. use CGI ':standard';3. print header, start_html;4. print '<FORM ACTION="http://65/108.8.8/cgi-bin/C4/form1Rcv.cgi" ACTION=”POST” >';5. print "What do you want to do this summer?<BR>";6. print '<INPUT TYPE="radio" NAME="summer" VALUE="bball"> Play Baseball?';7. print '<INPUT TYPE="radio" NAME="summer" VALUE="fish" checked > Fish?';8. print '<INPUT TYPE="radio" NAME="summer" VALUE="travel"> Travel? ';9. print "<BR> Where would you like to stay?<BR>";10. print '<SELECT NAME=" Accommodations" SIZE=2>';11. print '<OPTION> A fine hotel';12. print '<OPTION SELECTED> A cheap motel!';13. print '<OPTION> A tent in the parking lot';14. print '<OPTION> Just give me a sleeping bag checked';15. print '</SELECT>';16. print br, br, '<INPUT TYPE=SUBMIT VALUE="Submit it">';17. print '<INPUT TYPE=RESET VALUE="Erase It">';18. print ‘</FORM>’, end_html;




Hidden Fields

Not displayed on the form.

» Typically used by form-processing applications that use multiple form screens to store values.

» By storing values in hidden fields, your application can “remember” things between screens. (Will discuss more later.)

<INPUT TYPE=”hidden” NAME=”preference”

VALUE=”Likes chocolate”>


Using CGI.pm Debug Mode

Can test your scripts before executing them with a browser.» If can use Telnet commands on the Web server

(or have Perl installed on your PC), you» CGI.pm enables you to enter CGI variables and

values from a command line. » Receive the output (usually HTML document)


Using CGI.pm Debug Mode - II

To start and send an argument to the password program can execute the following:

perl checkpass.cgi passwd=PerlOK Enclose blank spaces in quotation marks:

perl checkpass.cgi ‘passwd=Perl Not OK’




Off-line Mode

If not specify any arguments will enter offline mode. For example, perl checkpass

After you enter each CGI variable and value, on a UNIX Web server, press Ctrl-D (that is, press both the Ctrl key and the D key simultaneously) to exit.

(On a Windows system, exit the input mode by pressing Ctrl-Z).


Summary

Several functions found in the CGI.pm library can be used to generate HTML tags.» You must explicitly connect to the CGI.pm library

before you can use these functions. HTML forms are the method most commonly

used to start and pass data to CGI/Perl programs. » The ACTION argument within the <FORM> tag

indicates which CGI application to start when the form is submitted.


Summary

Form elements set name-value pairs used to send parameters to the CGI/Perl application. » The NAME= attribute defines the CGI variable

name. Possible form elements include text boxes, text fields, check boxes, radio buttons, and selection lists.

» Use the param()CGI.pm function to receive arguments from forms. The variable name used as an argument to this function must match the NAME= attribute set in the form.

Documents

Chapter 4 Working with the Web