A technical tutorial on
developing web-based interactive materials for foreign language instruction |
|
<HTML> <HEADER> <TITLE>This is a sample HTML page</TITLE> </HEADER> <BODY> <P>Hello, world! </BODY> </HTML> |
In the rest of this tutorial, we will use the percentage sign '%' to indicate the Shell prompt.
Now Let us get our hands wet. Login to your Unix account and change to the public_html directory. If a public_html directory is not created, use the following command to create it:
% mkdir public_html
To change into the public_html directory from your home directory, use the following command:
% cd public_html
We now create an text file and save it as myfirst.cgi under the (public_html directory) with the following command:
% pico myfirst.cgi
Enter the following lines into the editing window:
#!/usr/local/bin/perl
$mystring = "Hello, World!\n";
print("$mystring");
Save the file and quit pico. At the Shell prompt, make the program executable:
% chmod a+x myfirst.cgi
At the prompt, issue the following command:
% ./myfirst.cgi
What you will see on the screen is the following line:
Hello, World!
What we have been doing so far is the following:
In the first Perl program we have just created:
#!/usr/local/bin/perl
$mystring = "Hello, World!\n";
print("$mystring");
the first line tells the Unix system that this is a program written in Perl. Very often, we just refer to this kind of program as Perl script.
Technically speaking, this line specifies the location of the Perl Interpreter on the Unix system, which is in the /usr/local/bin directory. Sometimes, a system administrator will install the Perl Interpreter under the /usr/bin directory, in which case, we will modify the line accordingly. If you don't know where the Perl Interpreter is, try the command
% whereis perl
and you should see something on the screen as follows:
perl: /usr/local/bin/perl5.00502 /usr/local/bin/perl
We can use the second half of the above output as the path to the Perl Interpreter in our program.
The second line assigns a value to a variable. Here the variable is $mystring and its value is everything contained in the double quotation (except the quotation marks themselves). In Perl, a variable can be denoted with the dollar sign ($).
The third line prints out the value of the variable in the standard output (e.g., the screen). Standard output is the default place where a program dumps its output if no other locations are specified.
The first script we have tried is not very interesting. It just prints out a line of dummy text. Let us try a more interesting example that is INTERACTIVE.
We edit the myfirst.cgi file as follows:
#!/usr/local/bin/perl
print("Enter your name: ");
$mystring = <STDIN>;
print("Hello, $mystring");
Please pay attention to spelling and make sure that lowercase and uppercase letters are entered exactly as what you see above.
To run the program, issue the following command:
./myfirst.cgi
You will be prompted to enter your name. Once you hit the Return key on your keyboard, you will see a greeting message. E.g., if you enter 'John Foo', you will see
Hello, John Foo
Repeat running the program several times and entering different text each time. Pay attention to what has changed.
What you have done is that you entered a (text) string from the standard input (e.g., the keyboard) and some output (e.g. the greeting message) was printed on the standard output (e.g., the screen). Standard input is where the input to a program comes from. A string is simply a sequence of symbols such as letters, digits or even punctuation marks.
By now you should have noticed that in a Perl script,
The two examples we have studied so far are executed under the Unix Shell. That is, we login (through a telnet client program) to a Unix machine and run the two programs at the shell prompt by issuing the command, for example, 'myfirst.cgi'.
With minor modifications to the two programs, we can also execute them through a web browser as CGI scripts.
Among the many differences between running a program under the Unix shell and through a web browser, the concepts of standard input and standard output are very important. When we run a program under a Unix shell, the default standard input is the keyboard and the standard output is the screen (or the telnet session window, a remote screen). In comparison, when we run a CGI script, the standard input is the web browser and the standard output is the web browser as well. That is, a CGI script will take input from a web browser and dump its output (if there is any) onto a web browser.
Suppose that you are told by your system administrator that:
Let us modify our first example by adding the line print "Content-type: text/html\n\n";
#!/usr/local/bin/perl print "Content-type: text/html\n\n"; $mystring = "Hello, World!\n"; print "$mystring";
Now we can run it as a CGI script. Try it on your own.
As compared to the first example which can be executed under a shell command, we are using the web browser as both the standard input and the standard output.
Again, this example is not very interesting for designing language learning exercises, since the output is always a dummy string of text. To make the best use of CGI scripts for language learning, we need to make it interactive.
We will use our second example as a demonstration of interactive script. An interaction will require some input and some output. On the web, the web browser functions as both the standard input and standard output. To provide standard input, we first create an HTML page which contains a Text Field. The sample code is given below:
<html><head><title>Enter your name</title></head> <body> <h3>Demonstration page for the CGI/Perl tutorial</h3> <form method="POST" action="http://panda.cetnet.org/test2.cgi"> <p>Enter your name: <input type="text" name="myname" size="20"> <input type="submit" value="Submit" name="B1"> <input type="reset" value="Reset" name="B2"></p> </form> </body></html>
Pay attention to the line <input type="text" name="myname" size="20"> where a text field name 'myname' is given. This is the form variable which will be called up in the following Perl script that processes the web form submission:
#!/usr/local/bin/perl # process the user's input submitted thru the web: read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}); # Split the name-value pairs @pairs = split(/&/, $buffer); foreach $pair (@pairs) { ($name, $value) = split(/=/, $pair); # Un-Webify plus signs and %-encoding $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; $FORM{$name} = $value; }# we generate the output page print "Content-type: text/html\n\n"; print "Hello, $FORM{$myname}";
As compared to our second example above, this script contains a large chunk of code (in blue) for form data processing. As a rule of thumb, if your Perl script is used to process form data, just copy and paste this chunk of code and place it at the very beginning of your code (immediately after the first line). It is OK if you don't understand what this chunk of code does. (It will make sense to you later when you become more familiar with Perl programming.) All your form variables will be available in the form of $FORM{$someformvariable}. E.g., in our example, we obtain the value of the form data you just entered using $FORM{$myname}.