Introduction%20to%20Perl%20and%20CGI

1
Introduction to Perl and CGI

• David Lash
• Chapter 1 Introduction

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

• Expect zero previous programming experience.
• Expect most people to have some HTML experience.
• Assumptions
• Overview HTML but most should master quickly.
• Not a how to program course but cover Perl
  basics

4
Course Objectives

• Basics of HTML Documents
• 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
Course Expectations

• Format
• Meet once a week for 1-2 hours.
• Weekly lab assignments.
• Assignments put up on Web.
• A couple of tests

6
Section Objectives

• Basics of HTML Documents
• Introduction to CGI
• Introductory Background On Perl

7
Objectives

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

8
World Wide Web Background

• The World Wide Web (WWW) is a collection of
  millions of documents and files that are
  accessible via the Internet
• 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
Accessing HTML Files
10
Objectives

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

11
HTML?

• 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
Displaying HTML
13
Objectives

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

14
HTML Overview - II

• A set of TAGs are required of all HTML documents
• ltHTMLgt ... lt/HTMLgt
• ltHEADgt ... lt/HEADgt
• ltBODYgt ... lt/BODYgt
• Text is displayed within the BODY tags
• 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
HTML Overview - Example
The header section of document
ltHTMLgt ltHEADgt ltTITLEgtMypage lt/TITLEgt lt/HEADgt ltBOD
Ygt Welcome to my site. lt/BODYgt lt/HTMLgt
Indicates start and end of HTML
document. (Container based.)
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
Displaying HTML
Document Title
Blue Text
Bold and italic Text
17
Paragraph and Break Tags

• ltHTMLgtltHEADgtltTITLEgt Web Page With "P" Taglt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Welcome To Exploring The Internet
• ltHRgt
• Hopefully you will find this course interesting.
• ltPgt
• In this course,
• you will develop
• a broad knowledge of the Internet
• lt/PgtltPgt
• This class meets at night.
• lt/PgtltPgt
• CLASS 1 - Introduction To The Internet
• ltBRgt
• CLASS 2 - Email
• ltBRgt
• CLASS 3 - HTMLltBRgt
• lt/BODYgtlt/HTMLgt

Create line
Create a new paragraph
Line Break
Note gt 1 tag per line
18
Would Display ...
19
Objectives

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

20
Ordered Lists

• For example
• ltOLgt ltLIgt This is the first element lt/LIgt
  ltLIgt This is the second line lt/LIgtltLIgt This is
  the third line lt/LIgtlt/OLgt
• 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 ltLIgt lt/LIgt
List is contained in ltOLgt lt/OLgt
21
Unordered Lists

• For example,
• ltULgt ltLIgt This is the first element lt/LIgt
  ltLIgtThis is the second line lt/LIgtltLIgt This is
  the third line lt/LIgt lt/ULgt
• Would create the following
• This is the first element
• This is the second line
• This is the third line

List item has start ltLIgt lt/LIgt
List is contained in ltULgt lt/ULgt
22
Objectives

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

23
General Link Format

• Specified in HTML in the following format
• ltA HREFWeb Addressgt Click Here lt/Agt

The words displayed for the link
Internet address of file to link to
Anchor tag can be used for links
24
Link Examples

• ltA HREF"http//www.depaul.edu/dlash/index.html"gt
  
• My Home Page
• lt/Agt
• What is displayed on web page
• Page to load when link is clicked

25
Quick Link Example

• lthtmlgt
• ltheadgtlttitlegt Some Favorite Sites lt/titlegtlt/headgt
• ltbodygt
• ltulgt
• ltligt
• lta href"http//www.disney.com"gt The Mouselt/agt
• ltligtlta href"http//www.lucent.com"gt The Joblt/agt
  lt/ligt
• ltligtAnd when you go to lta href"http//www.yahoo.c
  om"gt yahoolt/agt you can find anything. lt/ligt
• lt/bodygtlt/htmlgt

26
Objectives

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

27
The Basic Table Structure

• The bare minimum tags needed to describe a table
  are
• ltTABLEgtltTRgtltTDgt
• Here is a structure for a simple 4
  cell table
• ltTABLEgt
• ltTRgt
• ltTDgt Cell 1lt/TDgtltTDgtCell
  2lt/TDgt
• lt/TRgtltTRgt
• ltTDgt Cell 3lt/TDgtltTDgtCell
  4lt/TDgt
• lt/TRgt
• lt/TABLEgt

Start End Table
Table Row
Table Columns within the row
28
Resulting HTML Output
ltTABLE BORDER1gt
ltTABLEgt ltTRgt
ltTDgt Cell 1lt/TDgtltTDgtCell 2lt/TDgt
lt/TRgtltTRgt ltTDgt Cell
3lt/TDgtltTDgtCell 4lt/TDgt lt/TRgt
lt/TABLEgt
29
Got The Idea?
What Would the Following Generate?
lttable BORDER1gt lttrgt lttdgt Cell 1lt/tdgtlttdgtCell
2lt/tdgt lt/trgtlttrgt lttdgt Cell 1lt/tdgtlttdgtCell
2lt/tdgtlttdgtCell 3lt/tdgt lt/trgt lt/tablegt
30
And the Answer is ...
lttable BORDER1gt lttrgt lttdgt Cell 1lt/tdgtlttdgtCell
2lt/tdgt lt/trgtlttrgt lttdgt Cell 1lt/tdgtlttdgtCell
2lt/tdgtlttdgtCell 3lt/tdgt lt/trgt lt/tablegt
31
Are You Sure Your Got It?
What Would the Following Generate?
ltTABLE BORDER1gt lttrgt lttdgtCell1lt/tdgt
lttdgtCell2lt/tdgt lttdgtlt/tdgt
lttdgtlt/tdgt lttdgtCell ? lt/tdgt lt/trgtlttrgt
lttdgt Cell 1lt/tdgt lttdgtCell
2lt/tdgt lttdgtCell 3lt/tdgt lt/trgt lt/TABLEgt
32
And the Answer is ...
ltTABLE BORDER1gt lttrgt lttdgtCell1lt/tdgt
lttdgtCell2lt/tdgt lttdgtlt/tdgt
lttdgtlt/tdgt lttdgtCell ? lt/tdgt lt/trgtlttrgt
lttdgt Cell 1lt/tdgt lttdgtCell
2lt/tdgt lttdgtCell 3lt/tdgt lt/trgt lt/TABLEgt
33
Some Major Table Attributes

• Some other attributes for the table tag
• alignleftrightcenter - how to align the table\
• valignleftrightcenter - vertical alignment of
  the cell contents within the actual cell
• backgroundURL - sets a graphic image for
  background
• bgcolor"rrggbb" or color name - sets a color
  for background or table.http//www.depaul.edu/dla
  sh/website/TableEx7.html
• summarytext - a summary text to provide for
  non-visual browser.
• border - 0 or no border is the default see
  below for more details.

34
The Major Table Attributes

• Some other attributes for the table tag
• heightnumber, percentage - specifies the height
  (in pixels) of entire window or of size of
  current window (See slides below.)
• widthnumber, percentage - specifies the width
  (in pixels) of entire window or of size of
  current window (See slides below.)

35
Got it?

• What are 4 HTML TAGS needed in every document?
• What 2 HTML tags are used for Bullet lists?
• What 3 HTML tags are used for Tables?

• ltHTMLgt, ltHEADgt, ltTITLEgt, ltBODYgt

• ltULgt ltLIgt ltLIgt lt/ULgt

ltTABLEgt ltTRgt ltTDgt
36
Objectives

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

37
Some HTML On-line Reference

• http//www.w3.org - World wide web consortium
• http//www.htmlgoodies.com - HTML tutorial
  information.
• http//hotwired.lycos.com/webmonkey - HTML
  cheatsheet

38
Objectives

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

39
Web Application Program

• HTML is a static technology
• 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
• Problem How do you start the program and include
  program results in HTML document?

40
The Common Gateway Interface

• a standard that enables Web browsers to exchange
  data with computer programs located on a Web
  server
• 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.
• It is simple to use and available on a variety of
  Web servers.

41
How Web Apps Work w/ CGI
42
How Web Apps Work w/ CGI
43
Compare to Embedded HTML Tech
44
Advantages/Disadvantages of CGI

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

• Adv - Web Servers - Available on most Web Servers
  (E.g, Apache (Open Software), IIS, Netscapes
  Iplanet.

• Adv - Availability - Can ISP that enable CGI
  program development.

• Disadv - Speed - Can be slow to start up separate
  language environment. Esp. for apps with lots of
  hits.

• Disadv - Start-up - A little more to do than
  embedded languages

45
Objectives

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

46
The Perl Programming Language

• Practical Extension and Reporting Language
• Invented in 1987 by Larry Wall at NASAs 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
Why Perl is Popular

• Perl is a free language with lots of free
  applications - Open source project.

• Perl is easier to work with than many other
  languages

• Perl provides a CGI interface module

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

• Perl (and CGI) is readily available in many
  environments.

48
Summary

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

49
Summary - II

• Perl is a popular computer language that can be
  used for developing CGI programs.
• You can install Perl and your own Web server
  software on your PC or workstation.
• If you use an ISPs Web server, find out several
  things about its services.

50
Chapter 1 - On-line Reference

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

51
Got it?

• CGI is an interface standard between the web
  server and application program environment. Perl
  is a programming language.

• What is the difference between CGI and Perl?
• 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

52
Got it?

• 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