ch07.htm

Web_Programming_with_Perl5,一个不错的Perl语言教程。

<BR>

You can also use <TT>printf</TT> formatting to pad the number with zeros prior to

producing the image string. This would give the effect of an odometer look.</P>

<P>In order to keep your Web server from being bogged down by this script on every

page access, it might be wise to run this code as a cron job every 15 minutes or

so. With the cron job, you can also keep track of the current seek point in the file

and avoid having to count hits multiple times. You can then access the counter file

that the cron job maintains. If you need up-to-the-second results, you can have the

CGI script use the same logic as the cron job and go to a particular seek point in

the log to begin the counting. It is also always a good idea for the Web server administrator

to rotate the logs every so often. When rotating the logs, it is important to then

reset the seek position of your counter file back to zero. To move the current read

position of an open file, use the Perl <TT>seek</TT> function as in the following

code:</P>

<PRE><FONT COLOR="#0066FF">seek LOGHANDLE, $seekPoint, 0;

</FONT></PRE>

<P>There is a useful package available in the CPAN from Gisle Aas called <TT>CounterFile.pm</TT>.

This module provides an easy programmable interface for maintaining a counter file.

By using this module, you can easily lock the file while you increment the counter.

A <TT>CounterFile</TT> object is used as in the following example:</P>

<PRE><FONT COLOR="#0066FF">Use File::CounterFile;

$counter = new File::CounterFile &quot;page1.count&quot;, &quot;0&quot;;

$counter-&gt;lock;

$current_count = $counter-&gt;inc;

$counter-&gt;unlock;

</FONT></PRE>

<P>You can decrement the counter by using the <TT>dec</TT> method. You can also use

the <TT>value</TT> method to peek at the counter value without incrementing or decrementing

the counter.

<H4 ALIGN="CENTER"><A NAME="Heading20"></A><FONT COLOR="#000077">Parsing the RefererLog</FONT></H4>

<P>To determine how many times you were referred by a particular Web page, you would

scan the <TT>RefererLog</TT>. This is useful to see where people may be coming from.

Here is an example of a record from the <TT>RefererLog</TT>:</P>

<PRE><FONT COLOR="#0066FF">http://vader/sales.html -&gt; /technical.html

</FONT></PRE>

<P>You can search this log using the same code as with the access log. The difference

would be that you might want to search for the number of times you have been referred

from a given page. This can be accomplished by simply modifying the regular expression

in the <TT>grep</TT> statement to contain the <TT>-&gt;</TT> string as part of the

pattern to search, like this:</P>

<PRE><FONT COLOR="#0066FF">my($srchStr) = &quot;$referer -&gt;&quot;;

my($count) = grep(/$srchStr/,@lines);

</FONT></PRE>

<H4 ALIGN="CENTER"><A NAME="Heading21"></A><FONT COLOR="#000077">Parsing the AgentLog</FONT></H4>

<P>The <TT>AgentLog</TT> is useful to find out what kinds of browsers are accessing

your Web site. The most popular Web browser out there today is Netscape, which is

known in the agent log as <TT>Mozilla</TT>. Depending on the browser, you may also

be able to determine what platform the browser was running on. This can be useful

if you want to know how many are Windows users and how many are Macintosh users.

Here is an example of a record from the <TT>AgentLog</TT>.</P>

<PRE><FONT COLOR="#0066FF">Mozilla/1.1N (Macintosh; I; 68K)  via proxy gateway  CERN-HTTPD/3.0 libwww/2.17

</FONT></PRE>

<P>Unfortunately, not all browsers emit this information the same way. The first

part of the line can always be used to determine the browser. For example, Netscape

shows <TT>Mozilla</TT>, Mosaic shows <TT>NCSA Mosaic</TT>. It is interesting to note

that Microsoft's Internet Explorer also announces itself as <TT>Mozilla</TT> with

a qualifier (compatible MSIE 3.0), so that it is sent the same HTML that Netscape

Navigator would be sent. This allows the Internet Explorer to display its own Netscape-compatible

extension capabilities. The following regular expression might provide useful information

for <BR>

determining the user agent.</P>

<PRE><FONT COLOR="#0066FF">if ($line=~/(.*)\((.*)\)(.*)/) {

   my($browser)=$1; # $1 contains the first set of parens

   my($platform)=$2; # $2 contains the 2nd set of parens

   my($proxy)=$3; # and so on.

}

</FONT></PRE>

<H4 ALIGN="CENTER"><A NAME="Heading22"></A><FONT COLOR="#000077">Review</FONT></H4>

<P>The important thing to remember about this example is that the code used to open

and read the log files is very easily reusable. The main difference is in what you're

searching for, which boils down to the regular expression. As you've seen in previous

chapters, regular expressions can be as simple as ordinary words or they can be extremely

complex. This is one of many features that illustrates the simplicity of Perl, yet

shows the power of Perl for the more advanced user. You should always explore the

capabilities of the Perl regular expression before you attempt to write your own

parsing routines.

<H3 ALIGN="CENTER"><A NAME="Heading23"></A><FONT COLOR="#000077">Clickable Maps</FONT></H3>

<P>Clickable maps are used to visually navigate within a Web site. Generally, you

see the clickable map on the main page or index page. The concept of a clickable

map replaces that of an ordinary unordered URL list. For example, suppose you have

five separate organizations in your site. You can display links either like this:</P>

<PRE><FONT COLOR="#0066FF">&lt;UL&gt;

&lt;LI&gt;&lt;A HREF=&quot;sales.html&quot;&gt;Sales&lt;/A&gt;

&lt;LI&gt;&lt;A HREF=&quot;service.html&quot;&gt;Service&lt;/A&gt;

&lt;LI&gt;&lt;A HREF=&quot;support.html&quot;&gt;Support&lt;/A&gt;

&lt;LI&gt;&lt;A HREF=&quot;training.html&quot;&gt;Training&lt;/A&gt;

&lt;LI&gt;&lt;A HREF=&quot;technical.html&quot;&gt;Technical Information&lt;/A&gt;

&lt;/UL&gt;

</FONT></PRE>

<P>Or you can put a pretty picture in place of this list and provide a nicer look

and feel. Images are nice, but there are still some issues regarding limited bandwidth.

This section explains how to create a clickable image map, as well as some tips on

how to reduce your image byte size for those users viewing your page through a slower

modem.

<H4 ALIGN="CENTER"><A NAME="Heading24"></A><FONT COLOR="#000077">Introduction</FONT></H4>

<P>To create a clickable map, you first need to create an image. Once you have an

image, you need to determine which portion of an image will navigate to some specific

URL when clicked. This is called your image map. When the user clicks on the image,

a point is returned in pixel coordinates, which might correspond to an area defined

in your image map. This area is associated with a specific URL that will be retrieved.

<H4 ALIGN="CENTER"><A NAME="Heading25"></A><FONT COLOR="#000077">Creating an Image</FONT></H4>

<P>The preferred image formats for the Web are JPEG and GIF. GIFs are nice because

they provide transparency, which allows the background color of your page to seep

through the image. This is especially useful if your image is not an ordinary rectangle.

Because of the way in which GIFs are compressed, you will get a better compression

ratio if you have large areas of a continuous single color. Images with dithered

colors, for example, will not compress well in the GIF format. The JPEG format, which

is intended for photographic scans, does a better job at compressing these types

of images. It is important that you choose the correct format for your image. As

a rule, you might consider that 16- or 4-color images be done in the GIF format,

and images with a greater color depth be implemented in JPEG format. I suggest that

you try different approaches with your image until you find that perfect nirvana

of smallest byte size together with the greatest quality for your image. A product

such as Adobe PhotoShop is perfect for this type of work.</P>

<P>There are some things you can do to reduce the byte size of your image. The most

important thing is to choose the appropriate format for your image, as described

in the previous paragraph. Once you have the proper format for your image, you can

work on reducing the size by limiting the color depth to the actual number of colors

you need. Most images will look fine with 16 or 256 colors. You need to go above

that only for photographic scans. You can customize the palette of colors for your

image if necessary. Another way to reduce byte size, of course, is to reduce the

physical size of the image. If you are using the GIF format, yet another way to reduce

image size is by designing the image with large areas of continuous color. As mentioned

earlier, this increases the effectiveness of the GIF compression algorithm.

<H4 ALIGN="CENTER"><A NAME="Heading26"></A><FONT COLOR="#000077">Creating the Map</FONT></H4>

<P>Now that you have an image, you can map out the locations of your image in pixels.

Pixel areas can be defined as rectangles, circles, polygons, and points. The coordinate

system originates at the top-left corner of the image. If you do not cover all areas

of your image in the map, you can set a default URL value for those pixels not covered.

The following example shows a map for an image.</P>

<PRE><FONT COLOR="#0066FF">rect http://vader/sales.html 167,32 262,155

rect http://vader/service.html 16,14 40160,68

circle http://vader/support.html 215,215 , 215, 175

poly http://vader/training.html 25, 130, 100, 80, 160, 140, 105, 195poly http://&#194;vader/software.html 20, 285, 90, 200, 160, 285

</FONT></PRE>

<P>To set up your image map, use the following HTML code:</P>

<PRE><FONT COLOR="#0066FF">&lt;A HREF=&quot;http://vader/imagemaps/splash_map.map&quot;&gt;

&lt;IMG SRC=/images/splash_map.gif ISMAP&gt;

&lt;/A&gt;

</FONT></PRE>



<DL>

	<DT><FONT COLOR="#0066FF"></FONT></DT>

</DL>



<H3 ALIGN="CENTER">

<HR WIDTH="82%">

<FONT COLOR="#0066FF"><BR>

</FONT><FONT COLOR="#000077">NOTE:</FONT></H3>





<BLOCKQUOTE>

	<P>This method of referring to an image map with the <TT>&lt;HREF&gt;</TT> tag does

	not work with all Web servers. You should make sure your Web server supports this

	before attempting to use it.<BR>

	

<HR>





</BLOCKQUOTE>



<P>You also can display an image from your CGI script and query the pixel coordinate

that has been clicked by the user. Listing 7.7 shows how to do this, using <TT>CGI::Form</TT>.

Figure 7.4 shows how the image map appears in the browser.

<H3 ALIGN="CENTER"><A NAME="Heading28"></A><FONT COLOR="#000077">Listing 7.7. Clickable

image CGI example.</FONT></H3>

<PRE><FONT COLOR="#0066FF">#!/public/bin/perl5

use CGI::Form;

use CGI::ImageMap qw(action_map map_untaint);

$q = new CGI::Form;

print $q-&gt;header;

print $q-&gt;start_html(&quot;Clickable Map Demonstration&quot;);

print &quot;&lt;H1&gt;Clickable Map Demonstration&lt;/H1&gt;\n&quot;;

print $q-&gt;startform;

print $q-&gt;image_button(`picture', &quot;/images/cool_image.gif&quot;);

print $q-&gt;endform;

print &quot;&lt;HR&gt;\n&quot;;



if ($q-&gt;param) {

   ($x,$y) = ($q-&gt;param(`picture.x'),$q-&gt;param(`picture.y'));

   print &quot;&lt;P&gt;The user clicked location &lt;EM&gt;($x,$y)&lt;/EM&gt;\n&quot;;

   my $map = $q-&gt;param( `splash_map.map' );

   $action = action_map($x,$y,@map);

   print &quot;&lt;P&gt;The corresponding action is &lt;EM&gt;$action&lt;/EM&gt;\n&quot;;

}

print $q-&gt;end_html;

</FONT></PRE>

<P><A HREF="08wpp04.jpg" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/08wpp04.jpg"><TT><B>Figure 7.4.</B></TT></A><TT> </TT>The image

map as it appears in the browser. <BR>

<BR>

This returns the coordinate clicked by the user. You can imagine the possibilities

of visual navigation using clickable maps. The more visual your page is, the easier

it should be for the average user to navigate through it. You can also sometimes

cross language barriers with this approach. The limitation today, of course, is the

bandwidth at which images are transferred through the wire. Given the advances in

network technology, this problem should soon be alleviated.

<H4 ALIGN="CENTER"><A NAME="Heading29"></A><FONT COLOR="#000077">Review</FONT></H4>

<P>Clickable maps are a great way to present a friendly navigation model. However,

you have to be considerate of the average user when creating your images. Even though

you might have a 100Mbs network running at your location, you should keep in mind

that most users today are accessing your page at a rate of 28.8Kbs; thus, the larger

the image, the more frustrating your page may be. When ISDN or cable modems become

the standard means of connection, you will have more freedom and flexibility when

it comes to image size.

<H3 ALIGN="CENTER"><A NAME="Heading30"></A><FONT COLOR="#000077">Text File Search</FONT></H3>

<P>The earlier example of the hit counter showed you how to scan a single file for

occurrences of a string. This text file search example shows you how to scan your

entire Web site for occurrences of a string. You may have visited the popular Web

search sites available, such as Yahoo!, Excite, Lycos, and InfoSeek. These search

engines work with large amounts of indexed data from Web sites around the world.

In some cases, these search engines are implemented in Perl. As you have already