Lesson 2 -- Printer Friendly Version

INSTRUCTIONS:

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties.

Chapter 1

In order to create a CGI application, you'll need to choose a programming language. Although CGI programs can theoretically be written in any computer programming language (including C, Visual Basic, TCL, and countless other languages), virtually all CGI programming is done in a language named Perl.

Why? Well, to quote Eric Herrmann, author of a book entitled "CGI Programming with Perl:"


"Wouldn't it be nice to work with a language that you didn't have to compile? No messing with painful linker commands. No compilation steps at all. Just type it in and it's ready to go.

What about a language that is free? Easy to get a hold of and available on about any machine on the Net?

How about a language that works well with and even looks like C, arguably the most popular programming language in the world?

And wouldn't it be nice if that language worked well with the operating system, making each of your system calls easy to implement?

And what about a programming language that works on almost any operating system? That way, if you change platforms from Unix to Windows, NT, or Mac, your programs still run.

Heck, why not just ask for a language that's easy to learn and for which there is a ton of free technical help? Ask for it. You've got it (with Perl)!

Perl is an excellent choice for all these reasons and more. The more is probably what makes the language so popular. If Perl could do all those wonderful things and turned out to be hard to work with, slow, and not secure, it probably would have lost the popularity war. But Perl is easy to work with, has built-in security features, and is relatively fast."


Perl is an acronym which stands for "Practical Extraction and Report Language." Perl was developed to simplify the process of scanning text files (such as the input coming from a form), extracting and manipulating that information, and printing reports (or web pages) based on that information.

Perl is one of the easiest programming languages to learn. Wall is a student of linguistics, and he used his knowledge of human languages to develop a very simple, yet robust, computer language.

The official Perl slogan, according to Wall, is "There's more than one way to do it." This is because Perl is a very forgiving language that will bend over backwards to help you achieve your goals.

No two people communicate in exactly the same way. Your style of writing or speaking can be as unique as your fingerprints. With Perl, you'll find that you can develop your own programming style. Like English, Perl is a language that is rich in symbols and synonyms. With Perl, you can phrase the same instructions in countless ways. As long as you don't make any gross errors, Perl should be able to understand your instructions.

The Perl language has its own home page. You'll find it at the following web address:

http://www.perl.com/

Chapter 2

When you develop your program, you will want to make sure that the program you create will be easy for you (and others who might need to work with those programs) to understand. As such, you should liberally sprinkle your programs with comments documenting exactly what is taking place at each and every step in your program. Although the purpose of each line of code may be crystal clear to you as you're writing your program, I can guarantee that it won't be two or three weeks from then.

In this class, we will also use a methodology known as "structured programming" to ensure that the programs we develop are easy to read and modify. Programs built under the structured programming methodology rely on three basic structures to deal with any situation:

The Sequence Structure

The programs you write in this class will contain many instructions for the server to carry out. As you write your program, you will need to determine the most efficient sequence for these instructions to take place.

The structure you create to ensure that one instruction takes place after another in a specific order is known as the sequence structure. In plain English (what programmers call "pseudocode") a sequence structure in a program might look like this:

Step 1. Get user's e-mail address.
Step 2. Store e-mail address in a file.
Step 3. Display a secret document.

The If-Then-Else Structure

You will use this structure when you need your program to make a decision. This structure has three parts:

-the "if" statement, which is used to perform a test;

-the "then" statement, which kicks in if the test proves positive; and

the "else" statement which is processed if the test proves negative (false).

In pseudocode, a program with a sequence structure and an if-then-else structure might look like this:

Step 1. Get user's password.
Step 2. IF user's password is valid,
Step 3. THEN display secret document.
Step 4. ELSE (otherwise), display an error message

The Loop Structure

This structure is used to allow an event to occur over and over again as long as a certain condition remains true.

In pseudocode, a program containing a sequence structure, an if-then-else structure and a loop structure might look something like this:

Step 1. Get user's password.
Step 2. IF user's password is valid,
Step 3. THEN display secret document.
Step 4. ELSE, loop back to step 1 and start anew.

As you work your way through this class, you will notice that every single one of the programs you write will consist of a sequence of events, interrupted occasionally by decisions and loops.

As you will see, your job as a CGI programmer will be to find ways to achieve your goals using some combination of the three structures described above.

Chapter 3

Ready to get started? Let's use Perl to write our first CGI program! The program we're going to write will be one that is meant to display a web page. This program is going to be very short and very simple. It will only use the sequence structure.

First of all, you'll need a type of program known as a "text editor" to write all of your programs.

Unfortunately, you cannot write your CGI programs with a word processor. Today's word processors secretly insert all sorts of horrible characters and formatting codes (such as curly quotes, bullets, em dashes, indentation, margins, fonts, etc.) into your document without your knowledge. Although the word processor you are using will have no trouble deciphering the special characters and codes, they will choke your server, and your programs will fail to run.

Instead, a text editor is REQUIRED for this class. You can use the free text editor that came with your computer. You Windows users will want to go with Notepad (it's in your 'Accessories' group). Mac users can go with MacText, SimpleText or BBEDIT.

If, in a fit of anger, you somehow removed the text editor from your system, you shouldn't have any trouble downloading a shareware model for free from http://www.tucows.com/

Now, start your text editor, and you're ready to begin.

Step One

Type the path to the Perl interpreter

Perl is a type of programming language known as an "interpreted language." The programs you write in Perl can easily be understood by a human, but cannot be read by a computer. If you want your web server to be able to understand a program that you have written in Perl, your program will need to be converted to a language that the machine can understand.

This task is the responsibility of a piece of software stored somewhere inside your server and known as a "Perl interpreter."

When you ask your web server to run a Perl program, the server first locates the Perl interpreter and then asks the interpreter to read your program. The interpreter translates the program you have written into a language the machine can understand, and feeds those machine-language instructions to the server for processing.

In order to ensure that your server can find the interpreter, each of the programs you write must contain the path to the physical location of the Perl interpreter. You should not try to guess this path. You will need to call the hosting service responsible for your server and ask them this question:

What is the physical path to the Perl interpreter?

Note: the path is case-sensitive. If the hosting service tells you that the letters are all lower-case, then write the letters down as lower-case characters.

The hosting service will probably tell you that the physical path to the Perl interpreter is either: 

 /usr/bin/perl
or 

 /usr/local/bin/perl
When you write your CGI program, you will need to make sure that the very first line of the program contains a pound sign (#) followed immediately by an exclamation point and the exact path to the Perl interpreter, as described to you by your hosting service.

The first line of your program must NOT contain a space, a tab, a blank line, or any visible or invisible character other than a pound sign, an exclamation point, and the path to the Perl interpreter.

If you fail to heed those instructions, your server will not be able to find your Perl interpreter. If your server cannot find the Perl interpreter, it will not be able to understand your program, and you'll succeed in generating nothing more than an error message!

For this exercise, let's assume that the path to the Perl interpreter on your server is /usr/bin/perl

In your text editor, type the following: 

 #!/usr/bin/perl
The exclamation point (!) commands the server to start up the Perl interpreter.

The pound sign (#) tells the interpreter (once it has started) to ignore the line. In fact, any line that starts with a pound sign will be ignored by the interpreter.

Step Two

Type some comments

If you want to add comments to your program (and you should), precede the comments with a pound sign. This will disallow the interpreter from accidentally processing your comments.

Let's try typing a comment to our program. Press the ENTER key (use RETURN if you're on a Mac) to move to the very next line of your program, and type the following line: 

 #This is my very first CGI program
Your program should now look like this: 

 #!/usr/bin/perl  
 #This is my very first CGI program
Press the ENTER (or RETURN) key again, and you'll move to the next line. Let's add another comment! To do so, type the following: 

 #First line contains path to Perl interpreter
Your program should look like this: 

 #!/usr/bin/perl  

 #This is my very first CGI program  
 #First line contains path to Perl interpreter
There is no limit to the number of comments you can type. The more you type now, the better off you'll be the next time you need to read or modify your program.

Step Three

Specify the content type

The text that your program produces is going to be viewed on your client's screen through his or her web browser.

However, before a browser will display any text, it must be told what type of text to expect. Basically, there are two types of text that a browser can display:

-plain text, or

-HTML text

If you choose to send the browser plain text, the browser will refuse to format the text in any way. You won't be able to center your text, enlarge it, color it, embellish it with pictures, or do anything even remotely exciting. However, if you were interested in creating a document that would download and/or print quickly, plain text would serve that purpose well.

If you send HTML (HyperText Markup Language) text to the client's screen, your CGI program can be told to build a web page with large text, small text, centered text, bold text, colored text, forms, tables, frames, still images, animated images...the list is almost endless!

Because HTML text is a lot more flexible and enjoyable to work with than plain text, you'll probably want your CGI program to output HTML text.

To do this, you must add the following line to the end of your program: 

 print "Content-type: text/html\n\n";
Your program should now look like this: 

 #!/usr/bin/perl 
 #This is my very first CGI program 
 #First line contains path to Perl interpreter 
 print "Content-type: text/html\n\n";
The line we just added warns the browser that the text it is about to receive has been formatted using HTML.

There are several interesting things to note about this line:

First, notice the word 'print' at the beginning of the line. The word 'print' is known as a "command." Any line that begins with the 'print' command is automatically sent to the client's browser.

Next, notice the double quotes around everything that follows the 'print' command. The information that you want to send to the browser should always be surrounded by double quotes.

Also, notice how the 'C' has been capitalized, but the other characters are lower case. Perl is very case- sensitive. In this programming language, a lowercase 'c' is NOT the same as an uppercase 'C.'

There is a hyphen (-) between 'Content' and 'type' and a space between the colon (:) and the word 'text.'

There is a forward slash (/) at the end of the word text, but backward slashes are used in front of each occurrence of the letter 'n.'

The '\n' character is used to create a new line (sort of like what happens when you press the ENTER key on your keyboard). All browsers require you to send two blank lines after the "Content-type: text/html" statement.

The pair of new lines act as a placeholder for future functionality. At some point, we will be able to send additional information about our text output instead of those two blank lines. At this point in time, nobody knows what other information the browser could possibly need, so we just leave the new lines blank.

Finally, notice the semicolon (;) at the very end of the entire line, outside of the double quotes. The semicolon warns the interpreter that it has reached the end of the line and that it is time to start reading a new line. Because your interpreter ignores comment lines, they do not need to end with a semicolon. However, all the other lines in your program should end with a semicolon.

Note: If you had wanted your CGI program to send plain text to the browser (you don't), the line we just typed should have read as follows: 

print "Content-type: text/plain\n\n";
Now, add a comment to the end of your program that describes the purpose of the last line we typed. Go ahead--I'm sure you can do it!

Chapter 4

Step Four

Type the HTML

The final step (at least for this program) is to type the HTML that we want to send to the browser. Notice how each line of HTML tags is surrounded by quotes, preceded by a 'print' command, and followed by a semicolon.

The number of HTML tags you place on a line is up to you. There is no rule that says you can only place one tag or two tags or any fixed number of tags on any one line of your program. Basically, I try to never put more than about 60 characters on a line. I do this not because I have to. I do it for my convenience (and yours)--it makes the program more readable. 

print "<html><head>";  
print "<title>CGI-Generated HTML</title>";  
print "</head><body>";  
print "<H2>Hello, world!</H2>";  
print "<HR>";  
print "</body></html>";
Note: If you don't understand HTML (that angle-bracketed stuff between the quotes above), you're in the wrong class! Please learn HTML first by enrolling in my 'Creating Web Pages' class. Once you know HTML, you'll be able to make a lot more sense of what follows in this class.

What if you needed a quote mark in your HTML? Would placing more than one pair of quote marks on one of the lines above confuse the interpreter?

You bet it would! The interpreter would absolutely have a hissy fit if you tried to place more than one pair of quotes on the same line.

For example, let's change the line that prints the words 'Hello, world' so that those words will be centered. In HTML, this ordinarily be done by adding the statement align="center" to the end of the <H2> tag, like this: 

print "<H2 align="center">Hello, world!</H2>";
Unfortunately, because of the quotes, the line above would be completely unacceptable to the Perl interpreter:

Does this mean you can never use quote marks in your HTML? Of course note! Remember the Perl slogan: "There's more than one way to do it!"

All you have to do is place backslashes in front of the quote marks. The backslash (\) tells the interpreter that the character which follows is not to be taken literally, just like the pound sign (#) tells the interpreter that the line it precedes is not to be taken literally. 

print "<H2 align=\"center\">Hello, world!</H2>";
As you might imagine, each semicolon in your HTML would also need to be preceded by a backslash. Fortunately, you won't run across too many semicolons in an HTML document.

Your program should now look like this: 

#!/usr/bin/perl  
#This is my very first CGI program  
#First line contains path to Perl interpreter 
print "Content-type: text/html\n\n";
#Line above warns browser that HTML is on the way
print "<html><head>"; 
print "<title>CGI-Generated HTML</title>";
print "</head><body>";
print "<H2 align=\"center\">Hello, world!</H2>";
print "<HR>";
print "</body></html>";
#End of program
Again, please notice that every single line, except the comment lines, ends with a semicolon. Perl is very picky about those semicolons. If you forget to type just one of those special line-ending characters, your program simply will not work.

Your program is now done. You don't have to type '#End of program' -- I just put that comment in so you would know we're finished.

However, there's one big problem with the program above. It's tiresome to write all those quote marks and 'print' commands and semicolons!

As I mentioned before, if you forget just one quote mark or semicolon or misspell one 'print' command or forget to place a backslash in front of extraneous quote marks, you're sunk--the program won't run.

Here's a little trick designed to make programming in Perl much, much easier: the amazing PrintTag command!

The PrintTag command looks like this: 

print <<"PrintTag";
The command orders your browser to accept every line of HTML in your program as if it were preceded by a 'print' command, surrounded by quotes, and followed by a semicolon.

When the PrintTag command has been issued, your browser will then display everything you send it until it runs across the word 'PrintTag.'

-You will not have to precede each line of HTML with the word 'print.'

-You will not have to surround the HTML with quotes.

-You will not have to type a semicolon at the end of each line.

-You will not have to precede extra quotes with a backslash.

For Perl programmers, the PrintTag command is the greatest thing since sliced bread!

Here's an example of the PrintTag command in action. The program below will do the exact same thing as the first program we wrote, but with considerably less effort on the part of the programmer. 

#!/usr/bin/perl 
#This is my very first CGI program
#First line contains path to Perl interpreter
print "Content-type: text/html\n\n";
#Line above warns browser that HTML is on the way
#Next line tells browser to start printing
#until it sees the word PrintTag
print <<"PrintTag";
<html><head>
<title>CGI-Generated HTML</title>
</head><body>
<H2 align="center">Hello, world!</H2>
<HR>
</body></html>
PrintTag
#Line above has the magic word that
#makes the browser stop printing
#End of program
Note: do not put any comments between the PrintTag command and the line with the word PrintTag on it. Otherwise, the browser will put your comments on display for all to see!

Important: You must remember never to type any spaces or tabs after the print <<"PrintTag"; statement or before the <html><head>. The very first thing your client's browser must see after the print <<"PrintTag"; statement is an HTML tag. If it encounters spaces or tabs, your program could crash!

Likewise, you should never type any spaces before or after the line that says 'PrintTag' at the end of your HTML tags. This word should appear all by itself on its own line. It should not be preceded by a space or tab--type the word flush up against the left margin. Also, make sure the word is followed only by a hard return (ENTER) and not a space or tab or any other character.

Just between you and me: You do not have to use the word PrintTag--that's just my convention. If you'd rather substitute another word for PrintTag like 'ErrorMessage' or 'ConfirmationPage' or even 'WhoopDeeDoo', that's your decision. Just be sure to spell it the same way both above and below the HTML tags, and don't gum it up with any unneeded spaces or tabs.

Saving your Work

To save your work, click your text editor's 'File' menu and choose 'Save As.' Then, select a drive and/or folder for your file. Click in the 'File Name' box and delete or backspace out any name that might be typed in the box. You can give your file any name you like, but the name cannot have any spaces in it. The name must also end with a period and the letters 'cgi' (for example, you could call this file 'hello.cgi'). Then, click the 'Save' or 'OK' button.

Note: the Windows Notepad text editor has a nasty habit of adding an extension of '.txt' to the end of your filename. You then have to use the Windows Explorer or File Manager to rename the file so that the extension is '.cgi'. If this gets annoying, try downloading a better text editor from http://tucows.abac.com.

Running your Program

You will not be able to run any CGI program on your machine (unless you own your own UNIX web server running Perl). In order to run the programs we will be creating in this class, you will need to upload them to a special directory on your UNIX-based, Perl-friendly web server and configure the files to be executable. This is not difficult, and you will learn more about how it all works in upcoming lessons. We will be completely ready to upload and test our first CGI program at the end of lesson 5.

Lesson 5 will be coming up quickly, however. If you haven't done so already, you might want to arrange for some space on a UNIX server with CGI and Perl support.

You can rent space on such a server from a variety of hosting services, including Iserver ($65/month), Tabnet ($29/month), or A+ Net ($29/month). If you don't want to pay for hosting and don't mind banner advertisements being placed on your pages by the host, there are many free hosting services that offer CGI support out there. I recommend virtualave.net, webprovider.com, or if you (or someone you know) has a business you'd like to get online, I strongly recommend that you use hypermart.net--the best of the bunch.

Chapter 5

Quiz 2

When you feel you have a grasp on all of the concepts taught within this lesson, I would like you to take a short, multiple choice quiz. To get to the quiz, click on 'Quizzes' on the menu bar. When the form comes up, input your last name, e-mail address, and password, and make sure you have 'Quiz 2' selected. Good luck!


Assignment A

Now it's your turn! Please create and save a CGI program that uses the PrintTag command to display a web page. The web page should have a title that says 'Assignment One' and a centered paragraph that says 'I did it!'. Pretend that you plan to upload the program to a server that has its Perl interpreter stored in the following directory: 

/usr/local/bin/perl
Remember, do not attempt to upload or run this program on a server! You have much to learn about server security and permissions before you're ready to run your scripts. Please wait until you complete lesson 5 before you try running any of the CGI scripts you develop in this course.

You're on the honor system here--please complete and evaluate this assignment on your own. The answer is posted below so that you can check your work. You do not need to return your assignment to me, but please post a message in the discussion area if you have any problems.


Answer: 


#!/usr/local/bin/perl 
print "Content-type: text/html\n\n";
print <<"PrintTag";
<html><head>
<title>Assignment One</title>
</head><body>
<P align="center">I did it!</P>
</body></html>
PrintTag
#End of program

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties. Do NOT attempt to click any of the links on this page.

Copyright 1999 by ed2go.com. All rights reserved.
No reproduction or redistribution without written permission.

1