Building Dynamic Web Sites Part III - by Chris Wenham

Summary: Build a catalog on a web site using a poor man's database. Background: Building Dynamic Web Sites Part I and Part II

Foreword: I never imagined this series would be as popular as it turned out to be. It was quite unfortunate, then, when I lost my computer and all of the work on it. For about two months I had to manage with a borrowed laptop until my equipment was eventually returned. On it was my work and from there I was able to pick up this series again. One word of note, however, is that since Part II of this series was published, Dennis Bareis has updated his program considerably. Instead of being called HTMLPP it's now called PPWizard. Since its updated so often the download link at the bottom of each article kept breaking, and lots of readers wrote in to complain. So for now, we'll be linking to the web page where the program is downloaded, rather than the program itself.

Suppose you've quit your job, sold your Harley Davidson and bought a year's worth of web space in order to jump-start your dream of running your very own storefront on the web. You're selling gorgeous handcrafted goods and need to put together an online catalog complete with photographs, descriptions, available varieties, the whole nine yards. However, advertising costs have taken up all of your budget, so you can't afford that copy of DB2. Drat. You need a poor man's database.

For our purposes a "Poor Man's Database" means a simple text file that has been laid out in a structured way. In it, fields like the catalog item's name, description and price are defined using the methods I described in Part II of this series. For example, lets say you created a file called "database.it" and put this in it:

#define Name Deluxe Ballpoint Pen 
#define Materials Oak, Paduk, Bubigna, Cherry 
#define Description A fine writing implement, takes standard refills 
#define Picture ballpen.gif 
#define Price $79.95

Pretty simple, and if you've read Part II you'll know that in the template for a catalog page you can simply place each field where you want, with the upmost flexibility. For example, we'll create a file and call it item.it. Its contents are:

#include database.it 
<HTML> 
<HEAD> 
<TITLE><$Name></TITLE> 
</HEAD> 
<BODY> 

<H1>Frank's World Of Handcrafted Goods</H1> 

<H2><$Name></H2> 
<p>Available in: <$Materials> 
<p><$Description> 
<p><img src="<$picture>"> 
<p><strong>Price:</strong> <$Price> 

</BODY> 
</HTML>

When you type "ppwizard item.it" on the command line, the resulting item.htm file looks like this in a web browser:

Frank's World Of Handcrafted Goods

Deluxe Ballpoint Pen

Available in: Oak, Paduk, Bubigna, Cherry

A fine writing implement, takes standard refills

Price: $79.95

(I've omitted the picture to conserve space here)

With that template, it's easy to stamp out page after page of catalog items that all have the same basic look and feel. It's also possible to create catalog pages of multiple styles but with the same information. For example, you might have a web site open to the general public with your usual look and feel, but say you also struck a deal with an exclusive club that wants a discount and needs a duplicate of the catalog to be customized for their web site's own look, feel and navigational structure.

Trouble is, you want your catalog to have a separate web page for each item you're selling. You could put each catalog item's information in separate files (database1.it, database2.it) and laboriously tell the preprocessor to build each one, or, we could be sneaky...

Being Sneaky

Introduced in a recent version of the HTML Preprocessor we've been using (see bottom of this article for a download link) is a new command called #output. It tells the preprocessor to temporarily suspend sending its output to the main web page file, and redirects it to a new file who's name you specify. To quote an example from PPWizard's documentation, say this is a page you've created:

Line 1 of file 1 
Line 2 of file 2 
#output '2nd' 
	Line 1 of file 2 
	Line 2 of file 2 
	#output '3rd' 
		Line 1 of file 3 
	#output 
	Line 3 of file 2 
#output 
Line 3 of file 1

When run through the preprocessor, it would create two additional files (called '2nd.htm' and '3rd.htm') in addition to the main one it was already working on (1st.htm). You can also see that these output files can be nested many levels deep (infinitely deep according to the preprocessor's documentation, since the program is careful to temporarily close any output file that its not directly working on), but that's something we won't need to take advantage of just yet.

You can also see that #output on its own, with no file name after it, "closes" the file and goes back to working on the one before it.

This little trick allows us to not only put the details of all of our catalog items into just one file, but to make the preprocessor automatically generate the separate, web-ready catalog pages for us. So now the "database.it" file looks like this:

#output 'item1' 
#define Name Deluxe Ballpoint Pen 
#define Materials Oak, Paduk, Bubigna, Cherry 
#define Description A fine writing implement, takes standard refills 
#define Picture ballpen.gif 
#define Price $79.95 
#include item.it 
#output 

#output 'item2' 
#define Name Elegant Fountain Pen 
#define Materials Oak, Chak-De-Coke, Paduk, Bloodwood 
#define Description A magnificent compliment to your desk. Includes pump but also takes cartridges 
#define Picture fountpen.gif 
#define Price $99.95 
#include item.it 
#output

Not only do we change the output file at the top of each new database record (and close it afterwards) but we also #include the item.it file too. Because this time around, instead of telling the preprocessor to work on the template and have it #include the database, we tell it to work on the database and #include the template. So the command line instruction this time around is "ppwizard database.it"

After the preprocessor has run we find three new files called database.htm, item1.htm and item2.htm. The first one, database.htm has nothing in it, but the last two are complete, ready-to-publish web pages for your catalog. By the way, the preprocessor will give several warnings because you're redefining fields like "Name" and "Description", but don't worry, these warnings are harmless.

Tying it all together

But we also want an index for visitors to locate the items they want to buy. This would usually be the first page of your catalog, or the "contents" page. We can generate this automatically too, because remember how the #output command can also close the new file and go back to working on the original? For a brief moment, before the preprocessor moves on to the next database record, all of the information for the last catalog item is still in memory - so we have the chance to use at least the title and the price to make a link on a contents page.

First we add a new #define field called "File" that gives a unique file name both to create the catalog page with and to link to it with. This filename doesn't include the extension (.htm) since the preprocessor does that for us.

Next, just after the #output command that closes the catalog item page and before the next record begins, we put this line:

<li><a href="<$file>.htm"><$Name></a> - <$Price>

It adds a link to the new catalog page, but since that page's file has just been closed it gets added to the contents page instead, called contents.it and which looks something like this:

<HTML>
<HEAD>
<TITLE>Frank's World Of Handcrafted Goods</TITLE>
</HEAD>
<BODY>

<H1>Frank's World Of Handcrafted Goods</H1>
<P>Choose from our wide range of quality handcrafted goods!

<ul>
#include database.it
</ul>

<p>Please make checks and money orders payable to Frank's World Of Handcrafted Goods.
<br>Mail your orders to: Frank, 187 Handcrafted Way, Woodtown, NY, 12345 or phone (555)555-2624
<br>E-mail frank@frankcrafts.com

</BODY>
</HTML>

The magic line is, of course, the "#include database.it" right between the <ul> (unordered list) tags.

database.it is now starting to look a bit like this too:

#define File item1
#output <$File>
#define Name Deluxe Ballpoint Pen
#define Materials Oak, Paduk, Bubigna, Cherry
#define Description A fine writing implement, takes standard refills
#define Picture ballpen.gif
#define Price $79.95
#include item.it
#output
<li><a href="<$file>.htm"><$Name></a> - <$Price>

#define File item2
#output <$File>
#define Name Elegant Fountain Pen
#define Materials Oak, Chak-De-Coke, Paduk, Bloodwood
#define Description A magnificent compliment to your desk. Includes pump but also takes cartridges
#define Picture fountpen.gif
#define Price $99.95
#include item.it
#output
<li><a href="<$file>.htm"><$Name></a> - <$Price>

This time around, the command line to get the whole ball rolling is: "ppwizard contents.it". After running it you'll have three files: contents.htm, item1.htm and item2.htm (database.htm is not created this time because it was not processed as an individual file, but rather as a file #included into another). In short, you'll have a complete web catalog ready to go!

Maintaining the catalog from that point onwards is simple, you just edit database.it and run "ppwizard contents.it" to generate a fresh, up-to-date set of files. To add more catalog items, you'd append database.it with a record based on this template:

#define File 
#output <$File>
#define Name 
#define Materials 
#define Description 
#define Picture 
#define Price 
#include item.it
#output
<li><a href="<$file>.htm"><$Name></a> - <$Price>

You can also visit the web site generated with the code from this article, to get a proper idea of how it all ends up looking. Remember that all the files on this example site were created with just one command: "ppwizard contents.it" typed in an OS/2 command line window. Also for your convenience, you can download a zip file (1K) of all the source files.

But even this method of storing the database is crude compared to another method made possible when Dennis Bareis added the #Import feature to PPWizard. With it, you could create and manage the database part with a spreadsheet instead, one that can export to coma delimited or tab delimited files. It's much more complicated, however, which is why I taught you this simpler method first. I'll discuss this new method in Part IV of Building Dynamic Web Sites.

PPWizard

by Dennis Bareis
download from Dennis Bareis' home page (ZIP, 164k)
Registration: Free

Chris Wenham is the Senior Editor of OS/2 e-Zine! -- a promotion from Assistant Editor which means his parking spot will now be wide enough to keep his bicycle and a trailer.