📄 ch13.htm
字号:
<HTML>
<HEAD>
<TITLE>Chapter 13 -- Web Sites and Perl</TITLE>
<META>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE" VLINK="#551A8B" ALINK="#CE2910">
<H1><FONT SIZE=6 COLOR=#FF0000>Chapter 13</FONT></H1>
<H1><FONT SIZE=6 COLOR=#FF0000>Web Sites and Perl</FONT></H1>
<HR>
<P>
<CENTER><B><FONT SIZE=5><A NAME="CONTENTS">CONTENTS</A></FONT></B></CENTER>
<UL>
<LI><A HREF="#TheWebSite">
The Web Site</A>
<UL>
<LI><A HREF="#TheHomePage">
The Home Page</A>
<LI><A HREF="#GuestAccess">
Guest Access</A>
<LI><A HREF="#MemberAccess">
Member Access</A>
<LI><A HREF="#MembershipApplicationForm">
Membership Application Form</A>
<LI><A HREF="#Searching">
Searching</A>
<LI><A HREF="#Downloads">
Downloads</A>
</UL>
<LI><A HREF="#TheSalesForm">
The Sales Form</A>
<LI><A HREF="#TheDatabaseSearchExcite">
The Database Search Excite</A>
<UL>
<LI><A HREF="#TheServer">
The Server</A>
</UL>
<LI><A HREF="#TheTriviaQuiz">
The Trivia Quiz</A>
<LI><A HREF="#ChapterinReview">
Chapter in Review</A>
</UL>
</UL>
<HR>
<P>
Throughout this book we have described Perl so that you can use
it to create a dynamic interactive Web site. In this chapter we'll
combine what we've learned about Perl. Drawn from the snippets
of code and subroutines used in the previous chapters of this
book, this chapter examines a fully operational site. With this
example site you can see exactly where Perl fits into your Web
server. This information may seem more like review to some of
you, but the best way to see how Perl can be applied to your site
is to demonstrate it on a full Web site, with CGI Perl scripts
included.
<H2><A NAME="TheWebSite"><FONT SIZE=5 COLOR=#FF0000>
The Web Site</FONT></A></H2>
<P>
To demonstrate applying Perl to a Web site, the first thing to
establish is the site itself. For the purposes of this book, we
will use a mythical music recording label company, Goo Goo Records.
Goo Goo Records markets and sells popular music, and has expanded
its business to include the WWW. Their site provides marketing
and sales information to its Web site's users, develops a mailing
list from these users, and makes special sneak previews available
to its members, among many other features.
<P>
To create the site, the company bought a computer to use as the
Web server. After installing Windows NT, Perl for Windows NT,
and the EMWAC server software, the Web Master created the root
directory for the site on the C drive, naming it "googoo."
All of the files for the site, including the Perl scripts, are
housed in this directory. The Perl scripts are kept in the directory
path "C:\googoo\" with the CGI scripts having the path
"C:\googoo\cgi-bin\." The database that runs off the
site is housed in the directory under the same root "/googoo/,"
named "ggdata." It is important that the database data
also be under a directory of the document root. It won't make
any difference for searching if it isn't (Perl will be able to
search anywhere in the directory structure), but if you want to
access anything (like to view an image, or to download a file)
it has to be accessable to the browser, meaning it has to be under
the document root. The browser would have to access the files
with this URL - http://www.googoo.com/data/files/image.zip.
<H3><A NAME="TheHomePage">
The Home Page</A></H3>
<P>
When users open this location, http://www.googoo.com, they arrive
at Goo Goo Records' Home Page, which resembles Figure 13.1. The
file is kept in the "googoo" directory, with the file
name index.htm. The HTML itself looks like this:
<P>
<A HREF="f13-1.gif" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/f13-1.gif"><B>Figure 13.1 :</B> <I>The Goo Goo Records home Page</I>.</A>
<BLOCKQUOTE>
<PRE>
<HTML>
<HEAD>
<TITLE>
Goo Goo Records Home Page
</TITLE>
<HEAD>
<BODY bgcolor="#40E0D0" Text="#191970" >
<META Name="keywords" Content="music, sound clips, video clips, avi, wav, alternative,
underground, punk, pop music, funk, contests, prizes">
<CENTER>
<H1>Welcome To Goo Goo Records!</H1>
<IMG Src="http://www.googoo.com/cgi-bin/dino.pl">
<HR>
<FORM METHOD=POST ACTION="http://www.googoo.com/cgi-bin/immap.pl">
<INPUT TYPE=IMAGE NAME="mapfile" IMG SRC="http://www.googoo.com/images/menubar.gif"
alt=" For site areas, please see below ">
</FORM>
</CENTER>
<P>
<B>To get started choose one of the following:
<UL>
<LI>Join the Goo Goo Site! Click <A HREF="join.htm">here</A> to become a member.
<LI>Get A Free Catalogue!Go<A HREF="request.htm"> here</A> and order one!
<LI>Jump Right In! Try <A HREF="access.htm"> this</A> link to access the Goo Goo site.
<LI>Scared? Then escape using <A HREF="escape.htm">piece of hypertext </A> to find a safe place to hide.
</UL>
</BODY>
</HTML>
</PRE>
</BLOCKQUOTE>
<P>
You may notice the Goo Goo Records' Web site makes use of many
customizing elements in the HTML, like the designation of the
background color, and the imbedded <META> tag to help search
engines find the site.
<P>
The design of this site calls for the use of Perl right from the
start. There are three main features to the home page requiring
Perl: the image map, an animated logo, and access to a Members
Only area of the site.
<H4>The Logo</H4>
<P>
The Goo Goo Records logo has been animated so that the dinosaur
bursts out of the egg. In Figure 13.2, the logo is frozen with
the dinosaur just breaking out of the shell. This is accomplished
with the logo animating script "dino.pl" which is kept
in the CGI bin. You might recognize this script as being adapted
from the animated logo script anim.pl found in <A HREF="ch7.htm" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/ch7.htm" >Chapter 7</A> The
images for the animation are kept in the "logo" directory
in the main site directory, giving it the directory path name
C:/googoo/logo. Each progessive image for the animation is labeled
with the file name "dino1.gif," "dino2.gif,"
and so forth.
<P>
<A HREF="f13-2.gif" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/f13-2.gif"><B>Figure 13.2 :</B> <I>The Goo Goo Records animated logo</I>.</A>
<P>
To create this animation, the following Perl script is used:
<BLOCKQUOTE>
<PRE>
#!/usr/bin/perl
# dino.pl
@files = ("dino1.gif","dino2.gif","dino3.gif","dino4.gif","dino5.gif","
dino6.gif","dino7.gif,"dino8.gif","dino-9.gif");
print "Content-Type: multipart/x-mixed-replace;boundary=myboundary\n\n";
print "--myboundary\n";
foreach $file (@files) {
print "Content-Type: image/gif\n\n";
open(LOGO,"$file");
print <LOGO>;
close(LOGO);
print "\n--myboundary\n";
sleep(1);
}
</PRE>
</BLOCKQUOTE>
<P>
This simple script is quite similar to the animation script that
can be found in <A HREF="ch6.htm" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/ch6.htm" >Chapter 6</A>
<H4>The Image Map</H4>
<P>
At the top of the page, and as seen in Figure 13.3 as well, the
Image map script creates an image map of the different areas of
the Goo Goo Records site: the Membership Application, Escape Route,
and Catalogue Request, for example.
<P>
<A HREF="f13-3.gif" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/f13-3.gif"><B>Figure 13.3 :</B> <I>The Goo Goo Records home page image map</I>.</A>
<P>
You may notice that the way an image map is created and used on
the Goo Goo Records' site is a little different from the way it
was demonstrated in <A HREF="ch6.htm" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/ch6.htm" >Chapter 6</A> Previously we used an <A HREF>
call to the image map file. Instead, the Web Master has designed
a Perl script to define the image map. The Goo Goo Records' site
makes a call to a Perl program which defines the image map.
<P>
The scripts for the image map are as follows:
<BLOCKQUOTE>
<PRE>
#!/usr/bin/perl
# immap.pl #############################################################
# This is the Image Map script
#Remember to create a file called mapfile.map (this must be put in your
# CGI-BIN directory) which lists your map file co-ordinates.
# Note that there will display a default page if the click was not within the
#specified area. The pages are just HTML pages associated with the hot-area
# and, the numbers are the co-ordinates. For the rectangle, the coordinartes
# are the upper left, and lower right (x,y) coordinates of the rectangle. For
# the circle, the first (x,y) co-ordinate is the centre of the circle, and the
# second is the (x,y) coordinate of any point on the edge of the circle.
# NOTE: The image pixel co-ordinates are in the negative direction, so pixel
# (0,0) is the at the upper left of the image.
#
###############################################################
if ($ENV{'REQUEST_METHOD'} EQ 'POST') {
read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
@pairs=split(/&/, $buffer); # This is the Name-Value pair splitter.. Put into $FORM array
foreach $pair (@pairs) {
($name,$value)=split(/=/,$pair);
$value=~tr/+/ /;
$value=~s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg;
$FORM{$name}=$value;
}
$url="http://www.googoo.com/"; # This is the URL for your site.
$name=(keys(%FORM))[1]; # Get the NAME field
# the coordinates come in as mapfile.x and mapfile.y
chop($name); # remove the x from "mapfile.x
$mapfile=$name."map"; # create the image map filename by adding .map
chop($name); # remove the '.' to get the bare name
$x=$FORM{"$name.x"}; # get the x
$y=$FORM{"$name.y"}; # and y co-ordinates
open(MAP,$mapfile); # open the map file and read line by line
while ($line=<MAP>) {
$dest=&circle($line) if $line=~/circ/i; # go
# to the circle or rectangle routine
$dest=&rect($line) if $line=~/rect/i;
# depending on which directive
if ($line=~/default/i) { # if it is the default,
$default=(split(/\s/,$line))[1]; # split the line and
# populate $default
}
break if $dest; # if we have found a destination page,
# break the loop
}
close(MAP); # close the map file
if ($dest) { # if we found a destination
print "Location: $url$dest\n\n"; # send them there.
}
elsif ($default) { # if we didn't, but we have a default page....
print "Location: $url$default\n\n";
# send them to the default
}
else { # Otherwise print the error message
print "Content-type: text/html\n\n";
print "<HTML>\n";
print "<title>Error - Image Map Error</title>\n";
print "<h1>Error: Image Map Error</h1>\n";
print "<P><hr><P>\n";
print "There was an error with the Image Map. Please\n";
print "contact GooGoo Records at <address><a
href=\"mailto:support@googoo.com\">support@googoo.com</a></address>\n";
print "</HTML>\n";
exit;
}
}
else { # if there were problems with the form, print an error.
print "Content-type: text/html\n\n";
print "<HTML>\n";
print "<title>Error - Image Map Error</title>\n";
print "<h1>Error: Image Map Error</h1>\n";
print "<P><hr><P>\n";
print "There was an error with the Image Map. Please\n";
print "contact GooGoo Records at <address><a
href=\"mailto:web@googoo.com\">web@googoo.com</a></address>\n";
print "</HTML>\n"; exit;
}
sub circle {
local($line)=@_;
local($dummy,$c1,$c2,$c1x,$c1y,$c2x,$c2y,$page,$r1,$r2);
($dummy,$page,$c1,$c2)=split(/\s/,$line);
#Split the line on spaces
($c1x,$c1y)=split(/,/,$c1); # Split the
# coordinates into x and y
($c2x,$c2y)=split(/,/,$c2);
$r1=sqrt((($c1x-$c2x)**2)+(($c1y-$c2y)**2));
# calculate the radius
$r2=sqrt((($c1x-$x)**2)+(($c1y-$y)**2));
# calculate the distance from($x,$y)
if ($r2<=$r1) { # if ($x,$y) is in the circle,
# return the page
return $page;
}
else {
# otherwise, return undef.
return undef;
}
}
</PRE>
</BLOCKQUOTE>
<P>
Sensitive to those Web surfers who may have their browser's graphics
capabilities turned off, each of the pages indicated on the image
map is given a hypertext link right below. The text alternate
for the image map is "For site areas, please see below"
which is designated in the HTML for the page, and seen in Figure
13.4.
<P>
<A HREF="f13-4.gif" tppabs="http://210.32.137.15/ebook/PC%20Magazine%20Programming%20Perl%205.0%20CGI%20Web%20Pages%20for%20Microsoft%20Windows%20NT/f13-4.gif"><B>Figure 13.4 :</B> <I>Image map text alternate</I>.</A>
<P>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -