1. 1 Introduction to Perl and CGI David Lash Chapter 1 – Introduction

2. 2 Course is based on AWL book...

3. 3 Conclusions... l Expect zero previous programming experience. l Expect most people to have some HTML experience. l Assumptions: » Overview HTML but most should master quickly. » Not a “how to program” course but cover Perl basics

4. 4 Course Objectives l Basics of HTML Documents l In-depth description of Perl » Variable use & generating HTML from Perl » Using with HTML Forms » Conditional use » Loops » Arrays (Sequential and Associative) » Regular Expressions » Subroutine Fundamentals » Writing multi-screen web applications » Using cookies

5. 5 Course Expectations l Format: » Meet once a week for 1-2 hours. » Weekly “lab” assignments. » Assignments put up on Web. » A couple of tests

6. 6 Section Objectives l Basics of HTML Documents l Introduction to CGI l Introductory Background On Perl

7. 7 Objectives l Basics of HTML Documents – Accessing Documents Over WWW – What is HTML – Basic Document TAGS – Lists (ordered and non-ordered) – Links – Tables – Publishing Documents l Introduction to CGI l Introductory Background On Perl

8. 8 World Wide Web Background l The World Wide Web (WWW) is a collection of millions of documents and files that are accessible via the Internet l Web browsers are special computer programs that know how to retrieve and display files from the World Wide Web. Can work with Play a file in the wav format (a sound file) Interpret and then display a file in a gif format ( a digital picture file) Interpret and then display a file in the HTML format (a text-based Web page)

9. 9 Accessing HTML Files

10. 10 Objectives l Basics of HTML Documents – Accessing Documents Over WWW – What is HTML – Basic Document TAGS – Lists (ordered and non-ordered) – Links – Tables – Publishing Documents l Introduction to CGI l Introductory Background On Perl

11. 11 HTML? l The Hypertext Markup Language (HTML) uses coded commands called HTML tags that provide instructions to Web browsers indicating how to display each page » It is simple to use and understand » It provides ways to include lots of stuff (e.g., text, graphics, sounds, links) » It is STANDARD » Its creation is one of the big reasons the WWW became popular

12. 12 Displaying HTML

13. 13 Objectives l Basics of HTML Documents – Accessing Documents Over WWW – What is HTML – Basic Document TAGS – Lists (ordered and non-ordered) – Links – Tables – Publishing Documents l Introduction to CGI l Introductory Background On Perl

14. 14 HTML Overview - II l A set of TAGs are required of all HTML documents:... Text is displayed within the BODY tags l The set of HTML tags and text you want to display are stored in a file with either htm or html suffix »E.g., mypage.html or mypage.htm or homepage.html

15. 15 HTML Overview - Example Mypage Welcome to my site. Indicates start and end of HTML document. (Container based.) The header section of document Appears in upper left hand corner of browser window This is where most of TAGS usually are and text your displaying (w/i BODY tags).

16. 16 Displaying HTML Document Title Blue Text Bold and italic Text

17. 17 Paragraph and Break Tags Web Page With "P" Tag Welcome To Exploring The Internet Hopefully you will find this course interesting. In this course, you will develop a broad knowledge of the Internet This class meets at night. CLASS 1 - Introduction To The Internet CLASS 2 - Email CLASS 3 - HTML Create a new paragraph Create line Line Break Note > 1 tag per line

18. 18 Would Display...

19. 19 Objectives l Basics of HTML Documents – Accessing Documents Over WWW – What is HTML – Basic Document TAGS – Lists (ordered and non-ordered) – Links – Tables – Publishing Documents l Introduction to CGI l Introductory Background On Perl

20. 20 Ordered Lists l For example: This is the first element This is the second line This is the third line l Would look like: 1. This is the first element 2. This is the second line 3. This is the third line List item has start & List is contained in &

21. 21 Unordered Lists l For example, This is the first element This is the second line This is the third line l Would create the following  This is the first element  This is the second line  This is the third line List is contained in & List item has start &

22. 22 Objectives l Basics of HTML Documents – Accessing Documents Over WWW – What is HTML – Basic Document TAGS – Lists (ordered and non-ordered) – Links – Tables – Publishing Documents l Introduction to CGI l Introductory Background On Perl

23. 23 General Link Format l Specified in HTML in the following format: Click Here Anchor tag can be used for links Internet address of file to link to The words displayed for the link

24. 24 Link Examples My Home Page – What is displayed on web page – Page to load when link is clicked

25. 25 Quick Link Example Some Favorite Sites The Mouse The Job And when you go to yahoo you can find anything.

26. 26 Objectives l Basics of HTML Documents – Accessing Documents Over WWW – What is HTML – Basic Document TAGS – Lists (ordered and non-ordered) – Links – Tables – Publishing Documents l Introduction to CGI l Introductory Background On Perl

27. 27 l The bare minimum tags needed to describe a table are Here is a structure for a simple 4 cell table Cell 1 Cell 2 Cell 3 Cell 4 Table Row Table Columns within the row Start & End Table The Basic Table Structure

28. 28 Resulting HTML Output Cell 1 Cell 2 Cell 3 Cell 4

29. 29 Got The Idea? What Would the Following Generate? Cell 1 Cell 2 Cell 1 Cell 2 Cell 3

30. 30 And the Answer is... Cell 1 Cell 2 Cell 1 Cell 2 Cell 3

31. 31 Are You Sure Your Got It? What Would the Following Generate? Cell1 Cell2 Cell ? Cell 1 Cell 2 Cell 3

32. 32 And the Answer is... Cell1 Cell2 Cell ? Cell 1 Cell 2 Cell 3

33. 33 Some Major Table Attributes Some other attributes for the table tag l align=left|right|center - how to align the table\ l valign=left|right|center - vertical alignment of the cell contents within the actual cell l background=URL - sets a graphic image for background l bgcolor="#rrggbb" or color name - sets a color for background or table. http://www.depaul.edu/~dlash/website/TableEx7.html l summary=text - a summary text to provide for non-visual browser. l border=# - 0 or no border is the default see below for more details.

34. 34 The Major Table Attributes Some other attributes for the table tag l height=number, percentage - specifies the height (in pixels) of entire window or % of size of current window (See slides below.) l width=number, percentage - specifies the width (in pixels) of entire window or % of size of current window (See slides below.)

35. 35 Got it? l What are 4 HTML TAGS needed in every document? l What 2 HTML tags are used for Bullet lists? l What 3 HTML tags are used for Tables? » »,,,

36. 36 Objectives l Basics of HTML Documents – Accessing Documents Over WWW – What is HTML – Basic Document TAGS – Lists (ordered and non-ordered) – Links – Tables – Publishing Documents l Introduction to CGI l Introductory Background On Perl

37. 37 Some HTML On-line Reference l http://www.w3.org - World wide web consortium l http://www.htmlgoodies.com - HTML tutorial information. l http://hotwired.lycos.com/webmonkey - HTML cheatsheet

38. 38 Objectives l Basics of HTML Documents l Introduction to CGI » What is CGI? » Sequence of steps to retrieve a file. » Advantages and Disadvantages of CGI. l Introductory Background On Perl

39. 39 Web Application Program l HTML is a static technology l Web application programs help with dynamic tasks, such as: » Input a search term, search the WWW, and return the results » Calculate and display the number of times that a page has been viewed » Verify the input fields on a Web form » Save a Web form into a database » Display a special graph, or return the results of a calculation based on data input from a form l Problem: How do you start the program and include program results in HTML document?

40. 40 The Common Gateway Interface l a standard that enables Web browsers to exchange data with computer programs located on a Web server l first appeared in the NCSA HTTPD Web server software built by the National Center for Super- computing Applications (NCSA). » one of the first widely used Web servers. » was simple and the program source code was made available for free. » Back in the “old” days (1994) it was the only option. l It is simple to use and available on a variety of Web servers.

41. 41 How Web Apps Work w/ CGI

42. 42 How Web Apps Work w/ CGI

43. 43 Compare to Embedded HTML Tech

44. 44 Advantages/Disadvantages of CGI l Adv - Works with lots of different prog languages: Perl, VB, C, C++, Java, UNIX shell » CGI Programs - Web application programs that are developed specifically to work with the CGI standard are known as CGI programs. l Adv - Web Servers - Available on most Web Servers (E.g, Apache (Open Software), IIS, Netscape’s Iplanet. l Adv - Availability - Can ISP that enable CGI program development. l Disadv - Speed - Can be slow to start up separate language environment. Esp. for apps with lots of hits. l Disadv - Start-up - A little more to do than embedded languages

45. 45 Objectives l Basics of HTML Documents l Introduction to CGI » What is CGI? » Sequence of steps to retrieve a file. » Advantages and Disadvantages of CGI. l Introductory Background On Perl

46. 46 The Perl Programming Language l Practical Extension and 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 » Gained popularity because of its ease of use, free availability via the Internet, and its powerful combination of features

47. 47 Why Perl is Popular l Perl is a free language with lots of free applications - Open source project. l Perl is easier to work with than many other languages l Perl provides a CGI interface module l Perl applications are portable (can port across Microsoft/UNIX barrier) » Note: Perl is also includes a combination of UNIX and C features. For example, file I/O, general statement format, regular expressions. l Perl (and CGI) is readily available in many environments.

48. 48 Summary l Web pages written in HTML are static and cannot interact with users. l CGI is an interface standard that allows computer programs to communicate with Web servers. Several programming languages can be used with CGI.

49. 49 Summary - II l Perl is a popular computer language that can be used for developing CGI programs. l You can install Perl and your own Web server software on your PC or workstation. l If you use an ISP’s Web server, find out several things about its services.

50. 50 Chapter 1 - On-line Reference l http://www.perl.com - Background about the Perl language and free downloads of Perl. l Http://www.w3.org - World wide web consortium l http://history.perl.org/ - Timeline history of the Perl. l http://hoohoo.ncsa.uiuc.edu/ - NCSA sitie l http://hotwired.lycos.com/webmonkey/programmi ng/ - Discussion about alternative web application programming environments like Perl, ASP, and PHP. l http://www.apache.org - Apache web server open software site with free downloads.

51. 51 Got it? l What is the difference between CGI and Perl? l List the steps involved when a Web browser interacts with a static Web Page. »Request a Web Page URL »Find server over Internet »Web server gets file »Returns over Internet »Browser Interprets the HTML »CGI is an interface standard between the web server and application program environment. Perl is a programming language.

52. 52 Got it? l List the steps involved when a Web browser interacts with a CGI/Perl Web application? »Request a Web Page URL »Find server over Internet »Web server gets file »Starts program environment and uses CGI to send data »Returns results over Internet »Browser Interprets the HTML