Perl CGI: The Happy Path Simple CGI constructs

Prepared by Bill Kilgallon, Bill@KilgallonFamily.com

CGI Paradigms

There is an object oriented and a procedural interface to the Perl CGI library. We will be exclusively using the Object Oriented interface.

To use the CGI module, include the following line your Perl program:
use CGI;

You must also instantiate a Perl CGI object. For example, to create an object named "query", use:
$query = new CGI;

The actual syntax for supplying an argument to a CGI object method would be as follows (this example uses the header CGI method):
$query->header({-type=>'image/gif', -expires=>'+3d'});

The arguments in the curly braces are HTML tag modifiers. The arguments not in the braces are the contents between the open and closing tags.

For example, the actual HTML generated is as follows:

print $query->h1({-align=>'center'}, 'Hello', 
		 $query->em('World'), '(two)!');

Generates

<H1 ALIGN="center">Hello <EM>World</EM> (two)!</H1>

Naturally, like the rest of Perl, these arguments can be scalars, arrays, or hashes. Like the rest of Perl, you never really know for sure when to pass which. Like the rest of Perl, if you go with your gut, it will probably almost always work out fine nonetheless.

Examples on the upcoming pages will demonstrate the syntax involved for these different argument types.

CGI Example

The following program displays the obligatory "Hello World" message to the masses.

#!/usr/bin/perl
use CGI;
use strict;

my $query=new CGI;

# Create a header, and let it default arguments, it likely knows
# better then we do.

print $query->header();  

# Start the body of our document, and give it a title (shows up on the
# browser bar and on printouts).  All the legal fields within the HTML
# "BODY" tag are supported, and are optional.  Other unsupported
# options can be specified as well, and will be correctly added.  Note
# that there is nothing actually in the body tag, just HTML modifiers
# being specified.

print $query->start_html({-title=>'The Official Hello World Page',
			  -author=>'Bill Kilgallon'});

# Now lets create the hello world message in big characters.  No
# modifiers, just an argument.

print $query->h1('Hello World (one)!');

# Lets do the same again, but put the World in italics (to show
# nesting) and use an HTML modifier to align it in the center of the
# page

print $query->h1({-align=>'center'}, 'Hello', 
		 $query->em('World'), '(two)!');

# And finally, end the document.

print $query->end_html;

HTML Elements: Divisions / Paragraphs

The <DIV> construct allows you to specify abstract sections of a document. It will not get much use (besides perhaps right justifying, left justifying, or centering larges blocks of text) until you start using cascading style sheets.

To use this construct in Perl CGI, use the construct:

print $query->div({-align=>'center'});
print 'A great deal ';
print 'of text entered here';

The <P> tag specifies the start of a new paragraph. It is used just like the "DIV" tag above.

The <BR> tag forces the start of a new line. It is used just like the "DIV" tag above.

HTML Elements: Headings

The <H1> something </H1> construct allows you to specify a block of text to be displayed as a first level header.

To use this construct in Perl CGI, use the construct:

print $query->h1({-align=>'center'}, 'Some Text Here');

The <H2> something </H2> construct is the same, but specifies a second level header.

This continues, from 1 through 6.

HTML Elements: Content Indicators

Content based HTML tags allow you to use predefined formatting for common page elements, such as abbreviations, acronyms, citations, etc.

The <ABBR> something </ABBR> construct allows you to specify a block of text as being an abbreviation for something.

To use this construct in Perl CGI, use the construct:

print $query->abbr({-align=>'center'}, 'Some Text Here');

The following code shows related constructs...

#!/usr/bin/perl
use CGI;
use strict;

my $query=new CGI;

# Create a header, and let it default arguments, it likely knows
# better then we do.

print $query->header();  

# Start the body of our document, and give it a title (shows up on the
# browser bar and on printouts).  All the legal fields within the HTML
# "BODY" tag are supported, and are optional.  Other unsupported
# options can be specified as well, and will be correctly added.  Note
# that there is nothing actually in the body tag, just HTML modifiers
# being specified.

print $query->start_html({-title=>'Testing...',
			  -author=>'Bill Kilgallon'});

# Content based tags...

# print $query->abbr('This is an abbreviation');    not supported
# print $query->acronym('This is an acronym');      not supported
print $query->cite('This is a citation');
print $query->br();
print $query->code('This is code');
print $query->br();
print $query->dfn('This is the defining instance');
print $query->br();
print $query->em('This is emphasized');
print $query->br();
print $query->kbd('This is keyboard input');
print $query->br();
print $query->samp('This is a sequence of literal characters');
print $query->br();
print $query->strong('This is strong text');
print $query->br();
print $query->var('This is a variable');

# And finally, end the document.
print $query->end_html;

HTML Elements: Text Modifiers

Text modifiers are much like Content based HTML tags, but instead of being predefined formats they directly control the appearance of the text.

The <B> something </B> construct allows you to specify a block of text as being bold.

To use this construct in Perl CGI, use the construct:
```
print $query->b('Some Text Here');
```

The following code shows related constructs...

#!/usr/bin/perl
use CGI;
use strict;

my $query=new CGI;

# Create a header, and let it default arguments, it likely knows
# better then we do.

print $query->header();  

# Start the body of our document, and give it a title (shows up on the
# browser bar and on printouts).  All the legal fields within the HTML
# "BODY" tag are supported, and are optional.  Other unsupported
# options can be specified as well, and will be correctly added.  Note
# that there is nothing actually in the body tag, just HTML modifiers
# being specified.

print $query->start_html({-title=>'Testing...',
			  -author=>'Bill Kilgallon'});

print $query->hr();
print $query->div({-align=>'center'});

# More tests
print $query->b('This is bold');
print $query->br();
print $query->big('This is big');
print $query->br();
print $query->big($query->big('This is bigger'));
print $query->br();
print $query->blink('This is annoying');
print $query->br();
print $query->i('This is italic');
print $query->br();
print $query->small('This is small');
print $query->br();
print $query->small($query->small('This is smaller'));
print $query->br();
print $query->Sub('This is a subscript');
print $query->br();
print $query->sup('This is a superscript');
print $query->br();
print $query->tt('This is typewriter style');
print $query->br();

# And finally, end the document.

print $query->end_html;

HTML Elements: Rules

The <HR> tag allows you to insert an HTML element (Horizontal Rule) that denotes a break within a page.

Note that these tags have been used throughout this document, and even on this page.

The Perl CGI construct for creating a horizontal rule would be:
```
print $query->hr();
```

Note that the HTML 4.0 standard defines many controllable aspects of horizontal rules that we will not cover here.

HTML Elements: Images

The <IMG> tag allows you to insert a graphical image into your document.

Legal attributes for this tag include SRC, ALIGN, HEIGHT, WIDTH (and many more).

The Perl CGI construct for inserting an image would be:

# Try an image
print "Below should be a left justified image\n";
print $query->hr();
print $query->img({-src=>'/killbill/images/xmms.jpg',
	           -align=>'left',
	           -width=>'275',
	           -height=>'116'});
print $query->hr();

Again, there are many options for controlling the presentation of your image, all available from the Perl CGI routines.

HTML Elements: Hyperlinks

The <A> tag allows you to insert a link that will lead the reader to another location (perhaps in an entirely different document).

Legal attributes for this tag include HREF (and many more).

The Perl CGI construct for inserting an anchor would be:

# Try a hyperlink
print $query->hr();
print $query->a({-href=>'/killbill/images/xmms.jpg'},
		"This is a link directly to the image of the basic",
		" Linux MP3 player client");
print $query->hr();

Again, there are many options for controlling the behavior of your link, all available from the Perl CGI routines.

HTML Elements: Formatted Lists

The <UL> tag allows you to create an unordered list of items.

Within this list, you tag each separate element with the <LI> construct.

The raw HTML to generate this list would be:

<UL ALIGN="center">
<LI TYPE="disc">List Entry One</LI> 
<LI TYPE="disc">List Entry Two</LI> 
<LI TYPE="disc">List Entry Three</LI>
</UL>

The Perl CGI construct for creating an unordered list would be:

# Try an unordered list
print $query->hr();
print "This should be a centered unordered list of three elements\n";
print $query->ul({-align=>'center'}, 
		 $query->li({-type=>'disc'},
			    ['List Entry One',
			     'List Entry Two', 
			     'List Entry Three']));
print $query->hr();

Note that the manually inserted array elements could also have been simply a reference to the name of a prebuilt array of scalers (which would have been much more readable).
Note that other lists (i.e. ordered) would be done the same way.

For example:

# Try an orderd list
my @myList = ['List Entry One', 'List Entry Two', 'List Entry Three'];
print $query->hr();
print "This should be a left justified ordered list of three elements\n";
print $query->ol({-align=>'LEFT'}, 
		 $query->li(@myList));
print $query->hr();

HTML Elements: Tables

The <TABLE> tag allows you to create a spreadsheet like table.

Within this table, you specify the table caption with the <CAPTION> construct.

Within this table, you specify the table heading with the <TH> construct.

Within this table, you specify a table row with the <TR> construct.

Within this table, you specify a table data with the <TD> construct.

The raw HTML to generate a table would be:

<TABLE>
<CAPTION>Compensation Packages</CAPTION> 
<TR><TH>Position</TH> <TH>Compensation</TH> <TH>Vacation</TH></TR> 
<TR><TD>Programmer</TD> <TD>$35,000</TD> <TD>2 weeks</TD></TR> 
<TR><TD>Sales</TD> <TD>$250,000</TD> <TD>4 weeks</TD></TR> 
<TR><TD>CEO</TD> <TD>$750,000</TD> <TD>9 weeks</TD></TR>
</TABLE>
<HR>

The Perl CGI construct for creating a table would be:

# Try a table
my @myHeading = ['Position', 'Compensation', 'Vacation'];
my @myRowOne = ['Programmer', '$35,000', '2 weeks'];
my @myRowTwo = ['Sales', '$250,000', '4 weeks'];
my @myRowThree = ['CEO', '$750,000', '9 weeks'];

print $query->hr();
print "This should be a table\n";
print $query->table($query->caption('Compensation Packages'),
		    $query->Tr( [ $query->th(@myHeading),
				  $query->td(@myRowOne),
				  $query->td(@myRowTwo),
				  $query->td(@myRowThree)] ));

print $query->hr();

It's not as bad as it looks.
Note that the "TR" construct had to be written as "Tr()" for PerlCGI (as opposed to "tr()") because "tr()" was an already existing Perl function.

Return to Index