1 Copyright © 2002 Pearson Education, Inc.. 2 Chapter 4 Working with the Web.

1 Copyright © 2002 Pearson Education, Inc.


Chapter 4

Working with the Web


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

Understand how to use forms to send data to CGI/Perl programs


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’);


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 …


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


Name-Value Argument Format

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

Use curly brackets to encloseyour arguments.

The => sequence separates the argumentname from the value.

Argument name isspecified after a dash. Place argument value in single

quotes.

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;


Would Output The Following ...


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

The <FORM> tag has two primary arguments:

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

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


A Form Tag 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 Submit buttons submits form or erases all input.

» On submit the form, 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”>’;


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


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’


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 (nonencrypted). Anyone with network access could, potentially read the password being transferred.


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


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;


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;




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.

Date post:	26-Mar-2015
Category:	Documents
Upload:	zachary-buchanan
View:	214 times
Download:	0 times

1 Copyright © 2002 Pearson Education, Inc.. 2 Chapter 4 Working with the Web.

Documents