1. Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 5

2. 2 Today’s Topics HTML Frames HTML Forms Perl Introduction  First Perl Program

3. 3 Frames Use Frame to display multiple HTML documents in a same browser window  Each document is a frame  Each frame is independent of the others Advantages  Facilitate Web site navigation  Good for organizing large Web sites  Easy to construct Disadvantages  The web developer must keep track of more HTML documents  It is difficult to print the entire page

4. 4 Frame Code Structure … … use no-frame version

5. 5 The Frameset Element The frameset tag pair should follow the head element, replacing the body element The cols and rows attributes are used to divide the Web page into frames Each frame is represented by a separate frame element

6. 6 Setting up rows and columns Specify a certain number of rows or columns of certain sizes by This makes a three columns of 100 pixels, 300 pixels, and the rest of the screen Example: frameseta.htmlframeseta.html Can also use percentages (n%) Note: use no more than one * in the list

7. 7 The Frame Element Each frame tag should contain a name attribute  The name attribute is used for targeting links (discuss later) Each frame tag should contain a src attribute that specifies a Web page Can shutdown resizing by adding noresize Can turn off scroll bars with scrolling=“no” frame is a self-closing tag  Other self-closing tags?

8. 8 Some more attributes You may specify frameborder, framespacing, and border attributes Only border seems to have a big effect See HTML p. 136, and W3C online for more information Examples:  frameseta1.html (border="5" framespacing="5“) frameseta1.html  frameseta2.html (frameborder="0" border="0" framespacing="0“) frameseta2.html

9. 9 Tabular layout By setting both the cols and rows attributes, you create a table of frames Frames are listed row by row Example: framesetb.htmlframesetb.html

10. 10 Nested framesets Irregular layouts are useful (the equivalent of using rowspan or colspan in a table layout) You can specify a instead of a to create nested framesets Or, you can set the src for a frame to point to a frameset file Example: framesetc.htmlframesetc.html

11. 11 Linking in frames Each frame may contain hyperlinks Each hyperlink can be targeted to different frame or a new window It is achieved by the target attribute of tag

12. 12 The target attribute Target link to a named frame  Example:  loads the source into a frame named myframe  useful when using frames for site navigation HTML defined target values  _blank opens a new, unnamed window  _self opens the link in the current frame (default)  _top opens the link in the full, unframed browser window (throws you out of the frameset)  _parent opens the link in the immediate frameset parent (calling frame) Example: framesetd1.htmlframesetd1.html

13. 13 The base tag Rather than specifying the target for each link, you can add a line in head element  Example:  Sets default links to the frame named right  Can also set default link targets to be “_top” to leave the site Example: framesetd2.htmlframesetd2.html

14. 14 Avoid Deep Linking A deep link is any absolute link inside a framed Web page that displays the destination page inside the frame system Deep linking should be avoided, why?  Copyright issues, might be illegal You can avoid deep links by sending them to a new browser window  Any link can be routed to a new browser window with the target attribute

15. 15 Frames for Site Navigation A typical frame layout uses two nested frameset elements to divide a Web page into three frames: 1.The title frame runs across the top of the Web page 2.A navigational frame occupies a left-hand border under the title frame 3.A content frame occupies the remainder of the Web page Example: framesetd.htmlframesetd.html

16. 16 Art Galleries with Frames A three-frame layout works well for an online art gallery Fill the navigation frame with clickable thumbnail previews When a user clicks on a thumbnail preview, send the original image to the content frame Example: framesete.htmlframesete.html

17. 17 Hw2 Discussion Hw2 requirement Hw2 table example Hw2 frame example My implementation of Hw2 frame My implementation

18. 18 Advantages of Frames Frames support intuitive site layouts that are easy to navigate Site development efforts can focus on content and navigation as independent problems Scalability: write one navigation tool bar and stick it in a frame - only change one file to change navigation system

19. 19 Problems with Frames Not all browsers support frames (try it on a palm!) It is difficult for others to link to content inside a frame It’s easy to create deep links by accident Tougher to save sub-pages, messy with browser cache Complex layout awkward Doesn’t control layout inside each frame

20. 20 Frames vs. tables Tables are tougher to code (but this is fixable through scripting) Tables have wider (but not universal) support on browsers Frames are really quick to get going

21. 21 Today’s Topics HTML Frames HTML Forms Perl Introduction  First Perl Program

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

23. 23 Tag 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

24. 24 How Browsers and Web Applications Work with CGI

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

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

27. 27 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 )

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

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

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

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

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

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

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

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

36. 36 Today’s Topics HTML Frames HTML Forms Perl Introduction  First Perl Program

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

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

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

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

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

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

43. Program Entered in Pico

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

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

46. 46 Program with Syntax errors Missing quote mark

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

48. 48 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”;

49. 49 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/hw2/ directory on the Web server. Can execute by the following: http://people.cs.uchicago.edu/~hai/hw2/first_script.pl