Webmastering: Week 2

2-1      Webmastering Secrets: CGI/JAVA
 
This 8-week class covers state-of-the-art authoring
secrets to make an AWESOME Web page on the Internet!
 
Tonight is the second class in a series of eight:
 
   Apr 18: SSI:  Add modification date & templates
-> Apr 25: CGI:  Create/process a form & image map <-
   May 2:  Perl: Create a guestbook and/or BBS
   May 9:  Perl: Analyze stats for who/what/when
   May 16: Java: Getting it and using it
   May 23: Java: Animating your page
   May 30: Java: Add a search engine to your page
   June 6: Java: Games and other fun stuff!
  
Any overview questions before we dive in?

2-2       Webmastering: TONIGHT'S PLAN
 
Most of you should already be familiar with basic
HTML authoring.  This class will push your page to
the edge of technology and make it fun for visitors:
  1) Create dynamic pages using templates & dates.
  2) Let guests add content via forms to your page.
  3) Use Java animations to spice up your page.
  4) Master the basics of the Java language.
 
Tonight we will cover dynamic CGI programming:
  1) How CGI works on the server and client side
  2) Overview of languages you can write CGI with
  3) Introduction to Perl (portable, fast, & no compile)
  4) Defining a form in HTML
  5) Processing results of form using a CGI script
  6) Creating image maps using CGI
 
Any questions about what we will cover tonight?

2-3      Webmastering: HOMEWORK REVIEW
 
Last week, we discussed server-side includes.  Did
any of you succeed in implementing the last modified
date or using #include for a generic header/footer?
 
Any of you try any of the other SSI commands?
Anyone else have problems?
Anyone care to share their Web page for others?

2-4       Webmastering: HOW CGI WORKS
 
Common Gateway Interface (CGI) is a standard for
interfacing external applications with Web servers.
 
CGI is typically used to front-end a database.  If
you wanted to display the results of a query or any
other program, CGI is the way to do it.
 
This is basically how CGI works:
1) User requests a page via a normal URL.
2) The server detects it is a CGI to EXECUTE.
3) If a script, the script indicates the parser.
4) The script gets input from environment variables.
5) Script runs and sends legal HTML as output.
6) Server passes HTML output back to user's browser.
 
We will talk more in detail about the HOWs...
For now, any questions on the basic flow?

2-5     Webmastering: EXECUTING SCRIPTS
 
Since CGI basically allows the whole world to run
a program on your system, security precautions must
be taken.  In addition, the Web server must be told
to EXECUTE the desired document rather than simply
display it.  These two issues generally require:
 
1) CGI programs or scripts be placed in a special
directory (usually cgi-bin) defined by the server.
               AND / OR (usually OR)
2) System allows CGI scripts anywhere, but it uses
.CGI (or .PL and .EXE) extension to tell the server
to execute the script.  If your scripts keep getting
displayed rather than executed, try using .CGI
 
You may have to contact the webmaster to either allow
CGI scripts for your page or let you place your
scripts in the server's system-wide CGI-BIN directory.
 
Any questions about getting CGI scripts to execute?

2-6      Webmastering: LANGUAGES
 
Since CGI is simply an executable it can be written
with any language supported by your system:
 
C/C++, Fortran, VB, Java, Perl, Tcl, DOS/Unix Shell
 
Most people use a scripting language since you can
easily tweak the script without recompiling it. 
 
Since Perl is great at processing text with really
short scripts and there are lots of good libraries
and scripts available for it, it has become the
de-facto standard for CGI script writing.
 
My personal recommendations are to use a system
shell/batch file for quick stuff, Perl for medium
stuff, and C++ for serious Web<->DB engines.
 
I will be using Perl in this class, but you should
be able to adapt the concepts to VB, Java, or C...
 
Any questions on languages for CGI programming?

2-7      Webmastering: INTRO TO PERL
 
Perl originated from Unix hackers who needed a
quick and dirty tool for processing textual data.
 
Because of this, you may find Perl a bit hard to
understand at first.  Those of you who may already
be familiar with other Unix tools like sed and awk
will find Perl very similar.  Keep in mind that
you can usually leech someone else's work and tweak
it to fit your site's needs...
 
Perl is freely available for DOS, NT, Unix, & Mac.
Most likely your web site already has it.  If not,
you can obtain it, docs, and lots of links from:
  http://www.perl.com/perl/
 
True Perl hackers pride themselves on how compact
Perl code can be.  Just to scare you, there IS a
3-line Perl program that does PGP en/decryption:
  http://www.dcs.ex.ac.uk/~aba/rsa/
 
Anyone not terrified enough to have a question?

2-8      Webmastering: PERL BASICS
 
Since we do not have enough time to cover Perl in
detail, we will just dive in and address questions as
they arise.  Perl is best learned by example anyways.
Get O'Reilly's 'Programming Perl' to seriously learn.
For CGI-specific help, try 'Introduction to CGI/PERL' 
 
Let us look at a simple CGI script in Perl that just
outputs some HTML that says hello world:
 
#!/usr/local/bin/perl
print "Content-type: text/html\n\n

Hello world w/Perl!

2-9      Webmastering: DEFINING A FORM
 
The complete details on all the form fields can be
found in the HTML help file or on Carlo's forms page.
But, here is a sample form to send an email message:
 
Here is the usual header stuff:
  

Send an email message to us

2-10      Webmastering: PROCESSING FORM
 
You can process a form using GET or POST.  If you
do GET it tacks them on the URL, something like:
  mailto.pl?to=chrisw@dqsoft.com&from=fred@test.com
So now you know what all the gook is you have seen
when you have been using some high-end servers!
 
POST sends the data to server.  Processing both of
these methods can be messy; but, luckily, someone has
already written a handy Perl library called cgi-lib
to put these variables into an associative array.
 
These arrays are similar to normal arrays, except
that they can use strings instead of numbers to
reference.  More like a table than an array.
So, to get the from field we ask for: $in{'from'}
 
Now, our simplified script design looks like:
1) If GET, show form, if POST, process form
2) Copy the body field out to a temporary file
3) Combine fields to form a sendmail command
4) Shell out and have OS send the mail
5) Return an HTML acknowledgement to the user
 
Any questions before we dive into the code?

2-11     Webmastering: PERL SCRIPT FOR FORM
 
First, we use cgi-lib to see if there are variables
to process a form from a previous POST or GET, the
else (not shown) would simply print out the form:
  require 'cgi-lib.pl';
  if (&ReadParse()) {
 
Next, we erase any SSI commands in the email body.
Perl 'magic' prevents a possible security risk:
  $body = $in{'body'}; $body =~ s///g;
 
Next, we put the body contents into a temp file:
  $mailfile = 'd:\\chrisw\\web\\scripts\\mail.old';
  open(MAILTMP, ">$mailfile") ||
    &CgiDie('Cannot open temp file for mail!');
  print MAILTMP "$body";
  close(MAILTMP);
 
Note how I used an absolute path.  The current dir
seems to vary on server/OS and may be the location
of the script, the calling HTML, the server home...
 
Any questions on the first half of the script?

2-12  Webmastering: PERL SCRIPT FOR FORM (cont.)
 
Next, we need to build the command-line for sendmail.
This example uses blat, a sendmail replacement for NT:
  @mcmd = ();  push (@mailcommand, "blat.exe");
  push (@mailcommand, "$mailfile")
  push (@mailcommand, "-s \"$in{'subject'}\"");
  push (@mailcommand, "-t \"$in{'to'}\"");
  push (@mailcommand, "-f \"$in{'from'}\"");
  push (@mailcommand, "-i \"$in{'from'}\"");
  $commandline = join(' ', @mailcommand);
 
Finally, we execute the shell command with backquotes:
  $resultstring = `$commandline`;
 
Any questions on the script so far?

2-13  Webmastering: PERL SCRIPT FOR FORM (cont.)
 
Next, we convert newlines to HTML
 commands:
  $body =~ s/\n/
\n/g;  #force newlines for HTML
 
Finally, we send a confirmation page to user using
the routines in CGI-LIB (which you can customize)
and a simple table:
 
  print &PrintHeader; 
  print &HtmlTop("Email successfully sent");
  print <

Return to...

2-14  Webmastering: IMAGE MAPS AND OTHERS
 
Image maps use CGI too, but use input type=image.
However, image maps are special in two ways:
  1) Clicking on image immediately submits form
  2) Sends TWO values image.x & image.y as pixels
 
Let us look at a quick redirection example:
  if ($in{'navbar.x'} < 100) {
    print "Location: http://dqsoft.com/\n\n";
  } elsi ($in{'navbar.x'} < 200) { ...
 
This single-line of HTTP, instructs the browser
to load the document, transparent to the user.
Several tools will automate regions for you...
  
Two other form elements may also prove useful:
  1) 
     Allows user to upload a file but is not an
     official HTML tag and is difficult to use.
  2) 
     Hidden elements can 'store' data from one
     form to the next but hide it from user.
 
Any questions on image maps, upload, or hidden?

2-15   Webmastering: CGI TROUBLESHOOTING
 
I will warn you, troubleshooting CGI scripts can
be quite frustrating.  My web host just moved from
a Unix system to an NT system for my pages and I
had quite a few hard-to-find problems.
 
Unfortunately, when a script fails, you usually 
get an HTTP 403 or 404 message, pretty useless...
 
Here are the things I sugggest:
1) Make sure CGI security is addressed.  Has your
   server OKed your cgi-bin dir?  Are extension
   mappings for PL or CGI enabled or necessary?
2) Backslash any questionable characters (@,",$).
   This is sometimes platform-dependent.
3) You WILL get 'URL not found' messages if ANY
   kind of Perl error occurs, so debug locally
   or via telnet and run through Perl manually.
   Note that you may have to dummy POST vars.
4) Get a super-simple script working THEN slowly
   build it up, only changing a few lines at a
   time.  This way you always know suspect lines.
5) Current/relative directories can be tricky.
   When in doubt, use absolutes.
  
Any questions on troubleshooting?

2-16         Webmastering: CONCLUSION
 
This concludes tonight's class.
 
Next week's class will start promptly at the same time.
You can mail me here at box 952 or via chrisw@dqsoft.com
for questions or help with your pages.  You will find
my page w/links and samples at http://dqsoft.com/
 
Next week, we will create user interaction at your site:
  1) Creating a user 'community' with return visitors
  2) Create a 'starter' guestbook
  3) Create a form to add a guest and their links
  4) Have Perl modify guestbook with form info
  5) Improve the guestbook
  6) Setup bulletin-board discussion areas
 
HOMEWORK: Implement some type of form using CGI.  If
nothing else, just have the script print out HTML.
 
Now we have an open question and answer session where
you can get me to debug your scripts for you...