Perl and HTML Controls
| In this example, we'll take a look at using Perl with many HTML controls. Having some server-side experience under your belt is a good idea when you want to create full web applications, using not only JavaScript, but sending data back to the serverafter all, one of JavaScript's main uses is checking user input before sending it back to the server. In this example, we'll put together a feedback form that enables the user to submit comments about a web site, and then use a Perl script to summarize what data the user entered, displaying that data back to the user. Doing so will give us experience in reading data from HTML controls, using Perl on the server. Tip You could just as easily store the user's data in a file on the server. For information on file handling in Perl, take a look at www.perldoc.com. (Currently, the file-handling functions appear at www.perldoc.com/perl5.6.1/pod/perlfunc.html.) You can see the feedback form itself in Figures 24.9 (the top half of the feedback form) and 24.10 (the bottom half). As you can see in those figures, we'll be reading data from text fields, text areas, select controls, check boxes, radio buttons , and password controlsnot a bad start to CGI programming. Figure 24.9. Top half of the feedback form. Figure 24.10. Bottom half of the feedback form. Here's what the HTML for the feedback form looks like. Note that the URL for the ACTION attribute is fictitious; you need to use the URL of the script as placed on your server here: (Listing 24-03.html on the web site)<HTML> <HEAD> <TITLE>CGI Example</TITLE> </HEAD> <BODY> <H1>Welcome to the Feedback Form!</H1> <FORM METHOD="POST" ACTION="http://www.starpowder.com/24-04.cgi" ENCTYPE="application/x-www-form-urlencoded"> Please enter your name: <INPUT TYPE="text" NAME="text" VALUE=""> <BR> <BR> Please enter your feedback: <BR> <TEXTAREA NAME="textarea" ROWS=5 COLS=50>Good Job!</TEXTAREA> <BR> <BR> Please indicate which pages in my site you liked best: <BR> <INPUT TYPE="checkbox" NAME="checkboxes" VALUE="Introduction" Here's the Perl script we'll develop (bear in mind that to use this script, you'll have to set the UNIX file permission of the script file to 755, and may have to change the #!/usr/local/bin/perl line to point to the Perl installation as stored on your server): (Listing 24-04.cgi on the web site) #!/usr/local/bin/perl use CGI; $co = new CGI; print $co->header, $co->start_html( -title=>'CGI Example', -author=>'Steve', -meta=>{'keywords'=>'CGI Perl'}, -BGCOLOR=>'white', -LINK=>'red' ), $co->center($co->h1('Thanks for sending us feedback.')), $co->h3('Here is what you wrote...'), $co->hr; if ($co->param()) { print "Your name is: ", $co->param('text'), ".", $co->p, "Your feedback is: ", $co->param('textarea'), ".", $co->p, "Your favorite pages: ", join(", ",$co->param('checkboxes')), ".",$co->p, "You think my site is: ", $co->param('list'), ".", $co->p, "Today is ", $co->param('radios'), ".", $co->p, "Your password is: ", $co->param('password'), ".", $co->p, "How much money you want to send: ", $co->param('popupmenu'), ".", $co->p, "The hidden data is: \"", join(", ", $co->param('hiddendata')), "\"."; } print $co->hr; print $co->end_html; When the user enters data into the feedback form that you see in Figures 24.9 and 24.10 and clicks the Submit button, that data is sent to our Perl script on the server. The Perl script reads the data sent to it and creates a new page summarizing that data, which it sends back to the browser. You can see that summary page in Figure 24.11. Figure 24.11. The summary of the user's feedback data. That's what we're aiming fora working feedback form that uses a CGI script that summarizes the data entered by the user. To make this work, we'll need to get two components set up correctly: the HTML form and its controls in the feedback form itself, and the Perl script. I'll start by taking a look at setting up the HTML form that will contain the controls we'll use. Setting Up the FormTo send our data back to the server, the browser needs to know where to send it. You specify that with the ACTION attribute of the <FORM> element in the feedback form (substitute the URL of the Perl script on your server for the URL used here): <FORM METHOD="POST" ACTION="http://www.starpowder.com/24-04.cgi" ENCTYPE="application/x-www-form-urlencoded"> . . . </FORM> At the end of the form, we add Submit and Reset buttons (as discussed in Chapter 12): <FORM METHOD="POST" ACTION="http://www.starpowder.com/24-04.cgi" ENCTYPE="application/x-www-form-urlencoded"> . . . <INPUT TYPE="submit" NAME="Submit" VALUE="Submit"> <INPUT TYPE="reset"> </FORM> Now when the user clicks the Submit button, the data in the controls in this form will be sent to our CGI script for processing. The next step, then, is to add the HTML controls to this formand to see how to use them in Perl. Using Text FieldsI can add a text field to hold the user's name to our HTML form like this: <HTML> <HEAD> <TITLE>CGI Example</TITLE> </HEAD> <BODY> <H1>Welcome to the Feedback Form!</H1> <FORM METHOD="POST" ACTION="http://www.starpowder.com/24-04.cgi" ENCTYPE="application/x-www-form-urlencoded"> Please enter your name: <INPUT TYPE="text" NAME="text" VALUE=""> <BR> <BR> . . . <INPUT TYPE="submit" NAME="Submit" VALUE="Submit"> <INPUT TYPE="reset"> </FORM> </BODY> </HTML> Now let's take a look at how to extract the data from this text field in Perl. I'll start as we've already done, by creating a new web page and using a Perl print statement to send the heading of that page back to the browser: #!/usr/local/bin/perl use CGI; $co = new CGI; print $co->header, $co->start_html( -title=>'CGI Example', -author=>'Steve', -meta=>{'keywords'=>'CGI Perl'}, -BGCOLOR=>'white', -LINK=>'red' ), . . . Next, I'll add the text you see at the top of the summary page in Figure 24.11; here, the CGI h1 method creates an <H1> header, the h3 method creates an <H3> header, the center method creates a <CENTER> element, and the hr method creates an <HR> horizontal rule: #!/usr/local/bin/perl use CGI; $co = new CGI; print $co->header, $co->start_html( -title=>'CGI Example', -author=>'Steve', -meta=>{'keywords'=>'CGI Perl'}, -BGCOLOR=>'white', -LINK=>'red' ), $co->center($co->h1('Thanks for sending us feedback.')), $co->h3('Here is what you wrote...'), $co->hr; . . . We've already seen how to extract text from a text field; in this case, our text field is named text , so I can get the text from the text field and display it in the summary page this way (the CGI p method creates a <P> element): #!/usr/local/bin/perl use CGI; $co = new CGI; print $co->header, $co->start_html( -title=>'CGI Example', -author=>'Steve', -meta=>{'keywords'=>'CGI Perl'}, -BGCOLOR=>'white', -LINK=>'red' ), $co->center($co->h1('Thanks for sending us feedback.')), $co->h3('Here is what you wrote...'), $co->hr; if ($co->param()) { print "Your name is: ", $co->param('text'), ".", $co->p, . . . } print $co->hr; print $co->end_html; That's it. Next I'll take a look at handling text areas. Using Text AreasTo enable the user to enter her feedback, I'll use a text area just named textarea , adding some complementary default text to this control: <HTML> <HEAD> <TITLE>CGI Example</TITLE> </HEAD> <BODY> <H1>Welcome to the Feedback Form!</H1> <FORM METHOD="POST" ACTION="http://www.starpowder.com/24-04.cgi" ENCTYPE="application/x-www-form-urlencoded"> . . . Please enter your feedback: <BR> <TEXTAREA NAME="textarea" ROWS="5" COLS="50">Good Job!</TEXTAREA> <BR> <BR> . . . <INPUT TYPE="submt" NAME="Submit" VALUE="Submit"> <INPUT TYPE="reset"> </FORM> </BODY> </HTML> Working with text areas is much like working with text fields in Perlyou just pass the name of the control to the param method to get the text from the control. Here's how that looks in the Perl script, where I'm displaying the text from the text area in the summary page: #!/usr/local/bin/perl use CGI; $co = new CGI; print $co->header, $co->start_html( -title=>'CGI Example', -author=>'Steve', -meta=>{'keywords'=>'CGI Perl'}, -BGCOLOR=>'white', -LINK=>'red' ), $co->center($co->h1('Thanks for sending us feedback.')), $co->h3('Here is what you wrote...'), $co->hr; if ($co->param()) { print . . . "Your feedback is: ", $co->param('textarea'), ".", $co->p, . . . } print $co->hr; print $co->end_html; Using Check BoxesCheck boxes are a little different from text fields and text areas. Here's how I add a set of check boxes to enable the user to indicate what page in the site she liked the best. Note that I'm giving all the check boxes the same name, checkboxes : <HTML> <HEAD> <TITLE>CGI Example</TITLE> </HEAD> <BODY> <H1>Welcome to the Feedback Form!</H1> <FORM METHOD="POST" ACTION="http://www.starpowder.com/24-04.cgi" ENCTYPE="application/x-www-form-urlencoded"> . . . Please indicate which pages in my site you liked best: <BR> <INPUT TYPE="checkbox" NAME="checkboxes" VALUE="Introduction" When I pass the param method the name checkboxes in the Perl script, I'll get a list of the check boxes that were checked back. A Perl list is a construction that enables you to handle multiple items at the same time (lists and arrays can be used interchangeably in many ways in Perl), and I can concatenate all the items in a list of text items together using the join function. Here's how I do that, putting a comma between the names of all the check boxes that were checked: #!/usr/local/bin/perl use CGI; $co = new CGI; print $co->header, $co->start_html( -title=>'CGI Example', -author=>'Steve', -meta=>{'keywords'=>'CGI Perl'}, -BGCOLOR=>'white', -LINK=>'red' ), $co->center($co->h1('Thanks for sending us feedback.')), $co->h3('Here is what you wrote...'), $co->hr; if ($co->param()) { print . . . "Your favorite pages: ", join(", ",$co->param('checkboxes')), ".",$co->p, . . . } print $co->hr; print $co->end_html; That's all it takes. Now the check boxes the user checked will display in the feedback form, as you see in Figure 24.11. Using Select ControlsWe also can add select controls to our feedback form. This select control enables the user to rank our site using possible values that range from "Good" to "Greatest" : <HTML> <HEAD> <TITLE>CGI Example</TITLE> </HEAD> <BODY> <H1>Welcome to the Feedback Form!</H1> <FORM METHOD="POST" ACTION="http://www.starpowder.com/24-04.cgi" ENCTYPE="application/x-www-form-urlencoded"> . . . Please indicate what you think of my site: <BR> <SELECT NAME="list" SIZE="4"> <OPTION VALUE="Greatest">Greatest <OPTION SELECTED VALUE="Great">Great <OPTION VALUE="Very Good">Very Good <OPTION VALUE="Good">Good </SELECT> <BR> <BR> . . . <INPUT TYPE="submit" NAME="Submit" VALUE="Submit"> <INPUT TYPE="reset"> </FORM> </BODY> </HTML> In multi-selection select controls, you'll get a list of selected items; because this select control allows only single selections, however, we'll get the value of the single selected item when we pass the name of this control, select ,to the param method: #!/usr/local/bin/perl use CGI; $co = new CGI; print $co->header, $co->start_html( -title=>'CGI Example', -author=>'Steve', -meta=>{'keywords'=>'CGI Perl'}, -BGCOLOR=>'white', -LINK=>'red' ), $co->center($co->h1('Thanks for sending us feedback.')), $co->h3('Here is what you wrote...'), $co->hr; if ($co->param()) { print . . . "You think my site is: ", $co->param('list'), ".", $co->p, . . . } print $co->hr; print $co->end_html; You can see the results in Figure 24.11, where the summary page is indicating that the user thought the web site was great. Using Radio ButtonsUsing radio buttons is something like using check boxes; you use the same name for all radio buttons that you want to group together. Here's what that looks like in a radio button group named radios , where I'm enabling the user to indicate what day of the week it is: <HTML> <HEAD> <TITLE>CGI Example</TITLE> </HEAD> <BODY> <H1>Welcome to the Feedback Form!</H1> <FORM METHOD="POST" ACTION="http://www.starpowder.com/24-04.cgi" ENCTYPE="application/x-www-form-urlencoded"> . . . Please indicate the day you're writing this on: <BR> <INPUT TYPE="radio" NAME="radios" VALUE="Sunday " CHECKED>Sunday <INPUT TYPE="radio" NAME="radios" VALUE="Monday ">Monday <INPUT TYPE="radio" NAME="radios" VALUE="Tuesday ">Tuesday <INPUT TYPE="radio" NAME="radios" VALUE="Wednesday ">Wednesday <INPUT TYPE="radio" NAME="radios" VALUE="Thursday ">Thursday <INPUT TYPE="radio" NAME="radios" VALUE="Friday ">Friday <INPUT TYPE="radio" NAME="radios" VALUE="Saturday">Saturday . . . <INPUT TYPE="submit" NAME="Submit" VALUE="Submit"> <INPUT TYPE="reset"> </FORM> </BODY> </HTML> Because only one radio button in a group can be selected at once, we can get the value of the selected radio button in the radios group and display it in the summary page like this: #!/usr/local/bin/perl use CGI; $co = new CGI; print $co->header, $co->start_html( -title=>'CGI Example', -author=>'Steve', -meta=>{'keywords'=>'CGI Perl'}, -BGCOLOR=>'white', -LINK=>'red' ), $co->center($co->h1('Thanks for sending us feedback.')), $co->h3('Here is what you wrote...'), $co->hr; if ($co->param()) { print . . . "Today is ", $co->param('radios'), ".", $co->p, . . . } print $co->hr; print $co->end_html; You can see the results in Figure 24.11. Using Password ControlsPassword controls are much like text fields, except that they mask what you're typing. Here's how we add a password control, named password , to the feedback form: <HTML> <HEAD> <TITLE>CGI Example</TITLE> </HEAD> <BODY> <H1>Welcome to the Feedback Form!</H1> <FORM METHOD="POST" ACTION="http://www.starpowder.com/24-04.cgi" ENCTYPE="application/x-www-form-urlencoded"> . . . Please enter your password: <BR> <INPUT TYPE="password" NAME="password" VALUE="open sesame" SIZE=30> <BR> <BR> . . . <INPUT TYPE="submit" NAME="Submit" VALUE="Submit"> <INPUT TYPE="reset"> </FORM> </BODY> </HTML> From Perl's point of view, handling a password control is just like handling a text field. All we have to do is to pass the name of the control, password ,to the param method to get the text the user entered into this control: #!/usr/local/bin/perl use CGI; $co = new CGI; print $co->header, $co->start_html( -title=>'CGI Example', -author=>'Steve', -meta=>{'keywords'=>'CGI Perl'}, -BGCOLOR=>'white', -LINK=>'red' ), $co->center($co->h1('Thanks for sending us feedback.')), $co->h3('Here is what you wrote...'), $co->hr; if ($co->param()) { print . . . "Your password is: ", $co->param('password'), ".", $co->p, . . . } print $co->hr; print $co->end_html; Using Drop-Down ListsYou can make a select control appear as a drop-down list if you don't specify anything for the SIZE attribute. Here's how I do that with a drop-down list that enables the user to indicate how much money he wants to send in appreciation of our web site (compare this HTML to the select control in the topic "Using Select Controls" in this chapter, where the SIZE attribute is set to 4, which means the control will display all four items at once): <HTML> <HEAD> <TITLE>CGI Example</TITLE> </HEAD> <BODY> <H1>Welcome to the Feedback Form!</H1> <FORM METHOD="POST" ACTION="http://www.starpowder.com/24-04.cgi" ENCTYPE="application/x-www-form-urlencoded"> . . . Please indicate how much money you'd like to send me: <SELECT NAME="popupmenu"> <OPTION VALUE="Very much">Very much <OPTION VALUE="A lot">A lot <OPTION VALUE="Not so much">Not so much <OPTION VALUE="None">None </SELECT> . . . </FORM> </BODY> </HTML> You can see this drop-down list control near the bottom of Figure 24.10. Because drop-down lists allow only single selections, we can get that selection and display it like this: #!/usr/local/bin/perl use CGI; $co = new CGI; print $co->header, $co->start_html( -title=>'CGI Example', -author=>'Steve', -meta=>{'keywords'=>'CGI Perl'}, -BGCOLOR=>'white', -LINK=>'red' ), $co->center($co->h1('Thanks for sending us feedback.')), $co->h3('Here is what you wrote...'), $co->hr; if ($co->param()) { print . . . "How much money you want to send: ", $co->param('popupmenu'), ".", $co->p, . . . } print $co->hr; print $co->end_html; That's all it takes. You can see the results in Figure 24.11. Using Hidden Data FieldsThe last of the HTML controls I'll take a look at here are hidden controls, also called hidden data fields . You use hidden controls to store data that's not immediately visible to the users (although they can see it if they view the page's source). In this case, I'll store the name of the feedback form in a hidden control named hiddendata like this: <HTML> <HEAD> <TITLE>CGI Example</TITLE> </HEAD> <BODY> <H1>Welcome to the Feedback Form!</H1> <FORM METHOD="POST" ACTION="http://www.starpowder.com/24-04.cgi" ENCTYPE="application/x-www-form-urlencoded"> . . . <INPUT TYPE="hidden" NAME="hiddendata" VALUE="Feedback Form 1"> . . . <INPUT TYPE="submit" NAME="Submit" VALUE="Submit"> <INPUT TYPE="reset"> </FORM> </BODY> </HTML> In addition, we can recover the text in the hidden control by passing its name to the param method in the Perl script like this: #!/usr/local/bin/perl use CGI; $co = new CGI; print $co->header, $co->start_html( -title=>'CGI Example', -author=>'Steve', -meta=>{'keywords'=>'CGI Perl'}, -BGCOLOR=>'white', -LINK=>'red' ), $co->center($co->h1('Thanks for sending us feedback.')), $co->h3('Here is what you wrote...'), $co->hr; if ($co->param()) { print . . . "The hidden data is: \"", join(", ", $co->param('hiddendata')), "\"."; } print $co->hr; print $co->end_html; You can see the text we've recovered from the hidden control at the bottom of Figure 24.11. That's it. That completes our Perl CGI example. In this example, we've seen how to display a number of HTML controlstext fields, text areas, select controls, check boxes, radio buttons, and password controlsto enable the user to enter data into those controls, and then use Perl methods to read and display that data in a summary page. That's a good start to CGI programming. Perl is only one option for CGI programming, but it's a good one. Perl is free and is already installed on most UNIX-based servers. Both Perl and UNIX are robust server platforms. Perl documentation and examples are freely available online. As we've seen, with a little CGI code, you can handle the server side of the equation. We've been working with code in the browser throughout this book, and it's good to do a little work on the server side with a widely available tool such as Perl. That's it for our look at the server side in this chapterand that's it for our book. We've seen a tremendous amount of JavaScript programming here, from the very basics on up to working with the built-in browser objects, built-in JavaScript objects, HTML controls, the mouse, keyboard, images, and cross-browser issues. We've also worked with Dynamic HTML, changing web pages on-the-fly , dynamic styles, drag and drop, behaviors, data binding, regular expressions, XML and XSLT, cookies, creating your own JavaScript objects, and much more. All that's left to do is to put all this programming power to work for yourself! Best of luck with all your web projects.  |
CHECKED>Introduction <INPUT TYPE="checkbox" NAME="checkboxes" VALUE="Photo Pages">Photo Pages <INPUT TYPE="checkbox" NAME="checkboxes" VALUE="Links">Links <INPUT TYPE="checkbox" NAME="checkboxes" VALUE="Feedback Form">Feedback Form <BR> <BR> Please indicate what you think of my site: <BR> <SELECT NAME="list" SIZE=4> <OPTION VALUE="Greatest">Greatest <OPTION SELECTED VALUE="Great">Great <OPTION VALUE="Very Good">Very Good <OPTION VALUE="Good">Good </SELECT> <BR> <BR> Please indicate the day you're writing this on: <BR> <INPUT TYPE="radio" NAME="radios" VALUE="Sunday " CHECKED>Sunday <INPUT TYPE="radio" NAME="radios" VALUE="Monday ">Monday <INPUT TYPE="radio" NAME="radios" VALUE="Tuesday ">Tuesday <INPUT TYPE="radio" NAME="radios" VALUE="Wednesday ">Wednesday <INPUT TYPE="radio" NAME="radios" VALUE="Thursday ">Thursday <INPUT TYPE="radio" NAME="radios" VALUE="Friday ">Friday <INPUT TYPE="radio" NAME="radios" VALUE="Saturday">Saturday <BR> <BR> Please enter your password: <BR> <INPUT TYPE="password" NAME="password" VALUE="open sesame" SIZE=30> <BR> <BR> Please indicate how much money you'd like to send me: <SELECT NAME="popupmenu"> <OPTION VALUE="Very much">Very much <OPTION VALUE="A lot">A lot <OPTION VALUE="Not so much">Not so much <OPTION VALUE="None">None </SELECT> <BR> <BR> Thank you for sending us feedback! <INPUT TYPE="hidden" NAME="hiddendata" VALUE="Feedback Form 1"> <INPUT TYPE="submit" NAME="Submit" VALUE="Submit"> <INPUT TYPE="reset"> </FORM> </BODY> </HTML> 
