1 Copyright © 2002 Pearson Education, Inc.

2 Chapter 4 Working with the Web

3 Copyright © 2002 Pearson Education, Inc. Chapter Objectives l Describe the basic functions within the CGI.pm library that can generate HTML tags l Learn the different formats of the CGI.pm function syntax l Understand how to use forms to send data to CGI/Perl programs

4 Copyright © 2002 Pearson Education, Inc. Using CGI.pm to generate HTML l 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 $mypage ; l Can also be written as: $mypage=It is a New Day; print start_html($mypage);

5 Copyright © 2002 Pearson Education, Inc. 3 Basic CGI.pm Modules l start_html creates starting HTML tags l header creates the MIME Content-type line l end_html creates ending HTML tags 1. #!/usr/bin/perl 2. use CGI ':standard'; 3. print header; 4. print start_html; 5. print ' '; 6. print 'Welcome humans to my site '; 7. print end_html;

6 Copyright © 2002 Pearson Education, Inc. Would output the following …

7 Copyright © 2002 Pearson Education, Inc. CGI.pm Basic Functions The various CGI/PM function accept 3 basic syntactic formats: »No argument formatfunctions that can be used without any arguments »Positional argument formatfunctions that can accept comma-separated arguments within parentheses »Name-value argument formatfunctions that accept parameters submitted as name-and-value pairs

8 Copyright © 2002 Pearson Education, Inc. No Argument Format l 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

9 Copyright © 2002 Pearson Education, Inc. Some Single Argument Functions CGI.pm Function Example of UseExample 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; br output tag print br; hr generate horizontal rule print hr; end_html end an HTML document print end_html;

10 Copyright © 2002 Pearson Education, Inc. Positional Argument Format l Specify multiple arguments based on the position of the argument l For example

11 Copyright © 2002 Pearson Education, Inc. Some Positional Functions CGI.pm Functions Example of UseExample Output start_html() tags needed to start an HTML document. start_html(My Page); My Page h1() header level 1 tags. (also h2(), h3(), and h4() ) print h1(Hello There); Hello There strong() – output argument in strong. print strong('Now'); Now p() creates a paragraph. print p(Time to move); Time to move b() prints the argument in bold. print b('Exit'); Exit i() prints the argument in italics. print i('Quickly'); Quickly

12 Copyright © 2002 Pearson Education, Inc. Operating on Variables l Can concisely use functions with a single print statement: »print i('Please '),'come when I call you ', strong('immediately.'); l This code would output the following: » Please come when I call you immediately.

13 Copyright © 2002 Pearson Education, Inc. Consider the following example: 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;

14 Copyright © 2002 Pearson Education, Inc. Would output The following

15 Copyright © 2002 Pearson Education, Inc. Name-Value Argument Format My Title l Can specify names and values as follows: l Would output the following:

16 Copyright © 2002 Pearson Education, Inc. Some name/value functions CGI.pm Function Example UsageExample Output start_html start HTML document print start_html({ -title=>my title, –bgcolor=>red }); my title img inserts an image print img({- src=>'myfile.gif', -alt=>picture}); a establishes links print a( { - href=>' 'Click Here'); Click Here font() creates … tags print font( { -color=>BLUE, – size=>4}, Lean, and mean.); Lean, and mean.

17 Copyright © 2002 Pearson Education, Inc. Example Name/Value Program 1. #!/usr/bin/perl 2. 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;

18 Copyright © 2002 Pearson Education, Inc. Would Output The Following...

19 Copyright © 2002 Pearson Education, Inc. Input Data from HTML Forms l 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)

20 Copyright © 2002 Pearson Education, Inc. Starting and Ending Forms HTML forms are created by using the HTML and tags. »Within these tags, you place various HTML form elements, such as text areas, check boxes, and radio buttons. »For example, perl-pgm.com/cgi- bin/stuff.cgi.. ---(Your FORM elements here).

21 Copyright © 2002 Pearson Education, Inc. Two primary arguments The 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.

22 Copyright © 2002 Pearson Education, Inc. A Form Tag Example #!/usr/bin/perl use CGI ':standard'; print header, start_html(Sample Form); print ;perl-pgm.com/cgi- bin/stuff.cgi (Perl statements that output FORM. elements go here) print ;.

23 Copyright © 2002 Pearson Education, Inc. Form Submit/Reset Buttons l 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 tag. »HTML for submit/reset l Output from Perl program as follows: print ;

24 Copyright © 2002 Pearson Education, Inc. Form Submit/Reset Buttons 1. #!/usr/bin/perl 2. use CGI ':standard'; 3. print header, start_html('A First Form'); 4. print '<FORM ACTION=" bin/C4/first.cgi" METHOD=POST>'; 5. print br, ' '; 6. print ' '; 7. print ' ', end_html;

25 Copyright © 2002 Pearson Education, Inc. Would output the following...

26 Copyright © 2002 Pearson Education, Inc. Setting Up Input Text Areas l Input Text Areas creates text boxes on forms. l HTML for Input Text boxes <INPUT TEXT TYPE=text SIZE=15 MAXLENGTH=20 NAME=color> l Output from Perl program as follows: print ; 15 character box 20 character max allowed sets a CGI variable called color

27 Copyright © 2002 Pearson Education, Inc. Receiving HTML Form Arguments l Within the receiving program use param() »Make sure CGI variable name in NAME= argument from form matches argument in param() function. »See following example,

28 Copyright © 2002 Pearson Education, Inc. Receiving HTML Form Arguments

29 Copyright © 2002 Pearson Education, Inc. 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 ' '; 5. print 'Enter A Color '; 6. print ' '; 7. print br, ' '; 8. print ' '; 9. print, end_html; Sets CGI variable color Creates submit and reset buttons

30 Copyright © 2002 Pearson Education, Inc. 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 " "; 7. print 'Welcome to my World'; 8.print, end_html; Receives CGI variable color

31 Copyright © 2002 Pearson Education, Inc. Example Output

32 Copyright © 2002 Pearson Education, Inc. Sending Passwords l 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.

33 Copyright © 2002 Pearson Education, Inc. Setting Up Input Text Areas l HTML for Input Text boxes <INPUT TYPE=password SIZE=15 MAXLENGTH=25 NAME=pass> l Output from Perl program as follows: print ; 15 character box 20 character max allowed sets a CGI variable called pass

34 Copyright © 2002 Pearson Education, Inc. Program that creates password box 1.#!/usr/bin/perl 2.use CGI ":standard"; 3.print header; 4.print start_html("Color my Text"); 5.print '<FORM ACTION=" bin/C4/checkpass.cgi" METHOD=POST>'; 6.print ' Enter password to see message '; 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, end_html;

35 Copyright © 2002 Pearson Education, Inc. Receiving Perl Program 1. #!/usr/bin/perl 2. 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;

36 Copyright © 2002 Pearson Education, Inc. Would output the following...

37 Copyright © 2002 Pearson Education, Inc. Text Areas l Similar to text boxes, except you can create multicolumn and multirow input areas. Green Can output from CGI/Perl program as follows: print ; print Green Number of rows Number of cols CGI variable name

38 Copyright © 2002 Pearson Education, Inc. Check Boxes l Small boxes on a form that create a check mark when the user clicks them. Play Baseball? Fish? l Can output from CGI/Perl program as follows: print Play Baseball?; print Fish?; CGI Variable name CGI Variable value Label next to check box

39 Copyright © 2002 Pearson Education, Inc. Coordinated Check Boxes l Creating check boxes that enable multiple boxes to be checked »Use a common NAME= CGI variable name. Play Baseball? Fish? Travel? If select multiple receive comma separate list. »E.g., bball, travel if 1rst and 3rd.

40 Copyright © 2002 Pearson Education, Inc. Example Checkbox & Text Area Form 1. #!/usr/bin/perl 2. use CGI ':standard'; 3. print header, start_html('Checkbox and Textarea'); 4. print ' '; 5. print 'What do you eat? '; 6. print ' Vegetables?'; 7. print ' Meat?'; 8. print ' Anything not moving?'; 9. print ' Any comments? '; 10. print ' '; 11. print 'Put Comments Here '; 12. print br, br; 13. print br, ' '; 14. print ' '; 15. print ' ', end_html;

41 Copyright © 2002 Pearson Education, Inc. Would Output The Following...

42 Copyright © 2002 Pearson Education, Inc. Radio Buttons l 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. Play Baseball? Fish? Travel? CGI Variable name CGI Variable value Label next to radio button

43 Copyright © 2002 Pearson Education, Inc. Selection Lists l A box with a scrolling list of one or more items that can be highlighted and selected by the user » defines each option to display. » SIZE defines number to display w/o scrolling. »MULTIPLE allows > 1 one item to be selected A fine hotel A cheap motel! A tent in the parking lot Just give me a sleeping bag checked

44 Copyright © 2002 Pearson Education, Inc. Radio and Selection Form 1. #!/usr /bin/perl 2. use CGI ':standard'; 3. print header, start_html; 4. print ' '; 5. print "What do you want to do this summer? "; 6. print ' Play Baseball?'; 7. print ' Fish?'; 8. print ' Travel? '; 9. print " Where would you like to stay? "; 10. print ' '; 11. print ' A fine hotel'; 12. print ' A cheap motel!'; 13. print ' A tent in the parking lot'; 14. print ' Just give me a sleeping bag checked'; 15. print ' '; 16. print br, br, ' '; 17. print ' '; 18. print, end_html;

45 Copyright © 2002 Pearson Education, Inc. Would Output The Following...

46 Copyright © 2002 Pearson Education, Inc. Hidden Fields l 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.)

47 Copyright © 2002 Pearson Education, Inc. Using CGI.pm Debug Mode l 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)

48 Copyright © 2002 Pearson Education, Inc. Using CGI.pm Debug Mode - II l To start and send an argument to the password program can execute the following: perl checkpass.cgi passwd=PerlOK l Enclose blank spaces in quotation marks: perl checkpass.cgi passwd=Perl Not OK

49 Copyright © 2002 Pearson Education, Inc. Would output the following...

50 Copyright © 2002 Pearson Education, Inc. Off-line Mode l If not specify any arguments will enter offline mode. For example, perl checkpass l 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).

51 Copyright © 2002 Pearson Education, Inc. 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. l HTML forms are the method most commonly used to start and pass data to CGI/Perl programs. »The ACTION argument within the tag indicates which CGI application to start when the form is submitted.

52 Copyright © 2002 Pearson Education, Inc. Summary l 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.