1. Introduction to Programming the WWW I CMSC 10100-1 Summer 2004 Lecture 6

2. 2 Today’s Topics HTML Forms (cont’d) First Perl program

3. 3 HTML Forms HTML Forms are used to select different kinds of user input, defined with tag Form contains form elements to allow the user to enter information  text fields  textarea fields  drop-down menus  radio buttons  checkboxes, etc A Web page can contain one or multiple forms  Identified by id or name attribute

4. 4 Attributes action attribute  Gives the URL of the program(CGI) to receive and process the form’s data CGI is Common Gateway Interface, a protocol to handle web data transmissions How does CGI work? (next slide) CGI programs usually kept in a cgi-bin/ directory Usually triggered by clicking the submit button action can also be a mailto: link  Syntax: action=mailto:XXX  Example : formeg.html formeg.html Example:  add.html using CGI programs in action add.html

5. 5 How Browsers and Web Applications Work with CGI

6. 6 Tag Attributes (cont’d) method attribute  Sets the HTTP method by which the browser sends the form data to the program, value can be GET or POST HTTP protocol specification Simple HTTP request and reply  GET method: The form data gets appended to the request URL  POST method: The form data is sent as part of the message body  Avoid GET method in favor of POST for security reasons A long form content line attached to URL may crash the web server The GET request line is plain ASCII text sent without encryption and will be saved in server logs Example:  add.html using CGI programs in action add.html

7. 7 Tag Attributes (cont’d) enctype attribute  Specify the content type used to submit the form to the server when the action method is POST  Default value application/x-www-form-urlencoded (need not specify)  Special cases: Use “ text/plain ” if action=mailto:XXX Use "multipart/form-data“ if the data sent is a file the id, name attributes  Give the identification or name to a form  Useful for multiple forms in a same page  id is preferable

8. 8 Tag To define any one of a number of common form “controls”  Text fields (including password, hidden fields)  multiple-choice lists  Clickable images  Submission buttons Only type and name attribute required No ending tag (no )

9. 9 Text Fields single line of text  Set type to password to mask text like a password Set type to hidden to create a hidden field  size and maxlength attributes  value attributes to give default text Example: formeg1.htmlformeg1.html

10. 10 Multi-line Text Area The tag Attributes  cols  rows  wrap Values: Off,virtual(default),physical Example: formeg1.htmlformeg1.html

11. 11 Check Boxes Check boxes for “check all that apply” questions   Make sure name identical among a group of checkboxes  checked attribute When form is submitted, names and values of those checked boxes are sent Example: formeg1.htmlformeg1.html

12. 12 Radio Buttons Similar as checkboxes, but only one in the group may be selected  Example: formeg1.htmlformeg1.html

13. 13 Multiple Choice Elements The tag creates either pull-down menus or scrolling lists The tag defines each item within a tag tag attributes  size attribute Number of rows visible at the same time  multiple attribute If set, allow multiple selections  name attribute Example: formeg1.htmlformeg1.html

14. 14 Action Buttons Some special types of form controls  Act immediately  Effect can not be reversed  Affect the entire content of the form

15. 15 Action Buttons (cont’d) What are they?  Submit buttons  Reset buttons  Regular buttons  image buttons (will send form content as submit button)  *File buttons (need to deal with enctyple attribute) Example: formeg1-bak.htmlformeg1-bak.html

16. 16 HTML Forms Resources HTML Forms tutorials  http://www.webcom.com/html/tutor/forms/start.shtml http://www.webcom.com/html/tutor/forms/start.shtml  http://info.netmar.com/creating/forms.html http://info.netmar.com/creating/forms.html HTML Forms and Input  http://www.w3schools.com/html/html_forms.asp http://www.w3schools.com/html/html_forms.asp

17. 17 The Perl Programming Language Practical Extension & Reporting Language  Invented in 1987 by Larry Wall at NASA’s Jet Propulsion Laboratory  Developed as a utility programming language for the UNIX operating system  Perl is a scripting language Scripting language vs. System language  Gained popularity because of its ease of use, free availability via the Internet, and its powerful combination of features

18. 18 Why Perl is Popular Perl is a free language with lots of free applications Perl is easier to work with than many other languages  Scripting language vs. System language Perl provides a CGI interface module Perl applications are portable

19. 19 Perl Interpreter A program that translates Perl program commands into commands that are understandable to a computer Runs your Perl programs and generates any output Its command name is simply perl It can be installed in any of several places on a Web server Download Perl for different platform  http://www.perl.com/pub/a/language/info/software. html#binary http://www.perl.com/pub/a/language/info/software. html#binary  Perl Builder for windows Perl Builder

20. 20 Finding Location Of Perl SSH onto the CS dept Server Enter either of the following commands:  which perl  where is perl Access Unix manpage: man Perl Interpreter Location

21. 21 Program Development Process Each time you develop and run a program:  Create a program file and copy (or save) it into the correct directory  Change your program’s access permissions chmod 755 -rwxr-xr-x  Check your program’s syntax  Run your program

22. Starting Your First Program Start some editor and enter the following: #!/usr/local/bin/perl print “can u believe this is my 1st perl script?\n”; The first line (“pound-bang” line)  A convention on Unix system that makes the script to be run as if it is an executable program  Format: “#!” + full path to the location of perl in the system The second line (single statement line)  Each statement line ends with “;”  print is a built-in function of perl  \n is a special backslash interpretation denoting a new line Backslash interpretation only effective in double-quoted string

23. Program Entered in Pico

24. Run The Program Save the program file on the web server Enter the full path to the program file to run For example: /home/hai/html/hw2/first_script.pl Program File Home Directory Directories On Web Server

25. 25 To Check Your Program Syntax (on a UNIX Web Server) establish an SSH session navigate to the directory that contains the file enter perl –c filename, where filename is the program file whose syntax you want to. For example, cd html/hw2 perl –c first_script.pl If no syntax errors then you will see: first_script.pl syntax OK

26. 26 Program with Syntax errors Missing quote mark

27. 27 Running Your Program At least two different ways to run your Perl programs:  Directly on a Web server or PC without a browser  Using your browser over the Internet

28. 28 Getting Ready to Run Your Program Over the Internet To run a Perl script in a browser over the Internet, add a MIME content-type line  Multipart Internet Mail Extensions (MIME) is used by HTTP to Suggest to browser how to render the data  Other MIME types Other MIME types  MIME line example print “Content-type: text/plain\n\n”; New first_script.pl file #!/usr/local/bin/perl print “Content-type: text/plain\n\n”; print “can u believe this is my 1st perl script?\n”;

29. 29 Running Your Program Over the Internet 1. Connect to the Internet. 2. Start your browser. 3. Enter the URL or Web address to your file 4. Check the program’s syntax. 5. Run the program. For example, assume the first_script.pl script is saved in the /home/hai/html/cs101/hw2/ directory on the Web server. Can execute by the following: http://people.cs.uchicago.edu/~hai/hw2/first_script.pl