Chapter 17

Creating Online Catalogs

CONTENTS

As the commerce potential of the Web increases, a new business venture is starting to appear-the CyberMall. Through the comfort of your browser, you can surf the world, shopping in places you had never dreamed existed.

Basic Presentation Structure

One of the toughest tasks in maintaining an online catalog is the frequent change in the products for sale and their prices. While this can be handled by constantly updating the HTML documents that display the products, another method is to utilize Perl to dynamically create a catalog "page," loading information from a server-side dataset.

TIP
The variety of different implementations of online catalogs and online stores is almost as numerous as the number of Web sites on the Internet in general-no two are quite alike. One interesting online catalog/shopping mall that's worth perusing is the Haddonfield Gourmet at http://www.haddonfield.com/haddonfieldgourmet/.

Required Components

For each product, you need (at least) four components:

  1. A graphic of the product.
  2. A description of the product.
  3. The product's price.
  4. An order code-the method of identifying the product within your warehouse. If the number of products you offer is small, you may want to dispense with the code and rely on the product description.

Using a derivative of the advertising database demonstrated in chapter 8, "Advertising with Billboards," creating a database of products for sale is a snap. As before, using a flat-file format makes the structure easy to read and maintain. For example, a database of entries could look something like this: 

coat.gif|Winter Coat|49.99|WC101
parka.gif|Down Parka|75.00|PK155
gloves.gif|Fur-lined gloves|19.99|GL354

NOTE
You could also implement the database within the browser as a JavaScript array. Doing this would have the additional benefit of allowing fast searches throughout the catalog. You'll find a JavaScript version of the catalog databasing system on the companion CD-ROM

Loading the database into memory for processing is handled by the standard Perl fragment, as demonstrated in listing 17.1.

Listing 17.1  Loading the Catalog
 
open (CATALOG, 'catalog.dat');

while (<CATALOG>) {
   ($image, $desc, $price, $code) = split (/\|/, $-);
   chop $code;
   push (@images       , $image);
   push (@descriptions , $desc);
   push (@prices       , $price);
   push (@codes        , $code);
}

close (CATALOG);

Once the catalog is loaded, simply select an item to display and generate a page that contains your information (see listing 17.2).

Listing 17.2  Creating a Catalog Page
 
# $which is the index to the product to display
#
print "Content-type: text/html\n\n";
print "<HTML>\n";
print "<HEAD><TITLE>Catalog Item $codes[$which]</TITLE></HEAD>\n";
print "<BODY><CENTER>\n";
print "<IMG SRC=\"$images[$which]\"><BR>\n";
print "$descriptions[$which] - $prices[$which]\n";
print "</CENTER></BODY></HTML>\n";

Although the actual creation and display of the page is simple, two questions should come to mind:

  1. How do you know which pages you have shown the user?
  2. How do you specify the next or previous pages?

This is easily handled by the addition of a simple form to the page, with a next page advance button, and a hidden field that holds the current page number.

NOTE
You could use the product code as an index, then search the database for the code and move to the next or previous record. However, if the catalog is large and not sorted or indexed by a product code, finding a particular item will take a bit of time.
More examples on product searching are covered in chapter 18, "Online Store Product Searches."

In other words, adding the code fragment shown in listing 17.3 to the HTML generation block from listing 17.2 does the trick.

Listing 17.3  Navigating the Catalog
 
print "<FORM METHOD=POST ACTION=\"/cgi-bin/catalog.pl\">\n";
print "<INPUT TYPE=SUBMIT VALUE=\"Next\">\n";
$which++;
print "<INPUT TYPE=HIDDEN NAME=\"page\" VALUE=\"$which\">\n";
print "</FORM>\n";

Notice the actual page number passed is the next page to load. From this fragment, when the catalog script is run, it first pulls the value for $which from the values passed in with the form data, as demonstrated in listing 17.4.

Listing 17.4  Determining the Current Page
 
read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
@pairs = split(/&/, $buffer);

foreach $pair (@pairs) {
   ($name, $value) = split(/=/, $pair, 2);
   $value =~ tr/+/ /;
   $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
   $contents{$name} = $value;
}

$which = $contents{'page'};

if(!$which) {
   $which = 0;
}
...

The last "if" block is necessary to address the case where the user first enters the catalog-there is no "current" page. Because the catalog script is activated from something other than the form it creates, such as clicking a link to enter the catalog, there is no form data and the value of $contents{'page'} will be "null" (or empty). In this case, forcing it to zero starts you at the first page of the catalog.

The last item to tackle is what to do when the user has reached the end of the catalog-no more pages. Modifying the script fragment from listing 17.3 as follows: 

$numItems = @codes;
if ($which < $numItems) {
   print "<INPUT TYPE=SUBMIT VALUE=\"Next\">\n";
}

will only display a Next button when there are more pages to display.

From Here…

This chapter introduces a simple catalog framework that can easily work for an art gallery, an "online book," or anything that requires sequencing through a selection of pages, instead of creating individual HTML documents. To expand on these tricks, check out: