Making A Web Site for Your Business

This tutorial will take you through the steps required to make a web site for your business based on the Celtic XAP Tutorial. If you have not yet installed the site onto your system, please familiarize yourself with the demo site before proceeding with this tutorial. No XAP license is required to build and test your site.

The template for this site was designed by Jim for a small business who was not an existing Comet customer. He made use of .csv files describing the site and its inventory to import the data into Comet keyed files. Think of the opportunity here. How many small businesses do you know who just need a web site? They don't have to be your existing Comet customers. And, if they don't want the hassle of maintaining the site, consider having CometConnect host it!

For those of you who want to add a web site to an existing customer, you'll probably want to tie it in to your existing item master and order files. We'll discuss that later.

Site Folders

OK, now that you're familiar with the demo site, let's take a look at what's going on behind the scenes. All of the files required for the site are contained in these folders:
  • ..\Comet\Celtic
    The site's parent folder containing all the other folders.

  • ..\Comet\Celtic\CEL
    A Comet directory containing the IB and .html source files, the .csv files to describe the site and its inventory, the #XAP file to define the XAP options, and a MAKE program to generate the Comet data files and IB programs.

  • ..\Comet\Celtic\DAT
    A Comet directory containing the data files for the inventory items, the customer information, shopping cart details, and order information.

  • ..\Comet\Celtic\dbimages
    A folder containing large photos of each inventory item.

  • ..\Comet\Celtic\dbthumbs
    A folder containing thumbnail photos of each inventory item.

  • ..\Comet\Celtic\images
    A folder containing other images such as logos used on the web page.

  • ..\Comet\Celtic\XAP
    A Comet folder containing the IB object programs that drive the site.
The first thing you need to do to start your own site is to create these folders. Choose a name for the parent folder that describes your site (replaces "Celtic" above) and create it under your Comet folder. Copy the entire CEL folder from the Celtic CEL folder into your new folder. Make the empty folders called "DAT", "XAP, "dbimages", "dbthumbs", and "images". "DAT" and "XAP" will be Comet folders. After adding CEL, DAT, and XAP to your configuration, run SYSGEN and restart Comet. Now you can use CometExplorer to create the QDIR files for DAT and XAP by clicking on "File", then "New Directory" and browsing to the newly created folders.

site.csv

In the CEL folder is a text file called site.csv. This is the master installation file that describes the business for which you are building your site. It drives the MAKE utility that you will run to generate all the Comet data files. Because it contains information about each inventory item and the Celtic site has nearly 1000 items, the one in your new CEL folder is quite large. Make yourself a new site.csv file and copy only the following lines from the top of the original file:

SITE,,,,
Company Name,,,,Celtic Jewels
Address,,,,this is a test site
City,,,,Not Real
State,,,,CA
Zip,,,,95472
E Address,,,,jim@signature.net
E Name,,,,jim@signature.net
Phone,,,,111-222-3333
Fax ,,,,444-555-6666
Shipping,,,,2

Update the company information for your business.

Now, before we start on the inventory items, you need to organize them into groups and consider any optional features of each item. The groups are the choices seen in the "Products" menu on the left side of the page. When you click on a group you are taken to the main page for the group. It has links to sub-groups and the details for each item in the group. For example, click on "Celtic Greeting Cards from Ireland". You are taken to a page with a description of the types of cards available and a menu (near the top) with choices for each type of card. Select one of them and you'll see the detail for each card in the sub-group.

Defining the Pages

Each group and sub-group is defined in the site.csv file. For example:

Page,301,Mackintosh,,Mackintosh Rings,

where:

  • "Page" is a keyword
  • "301" is the unique page number for this sub-group. All sub-groups in this group will have page numbers beginning with "3".
  • "Mackintosh" is the group
  • "Mackintosh Rings" is the sub-group
Other pages in this group are defined as:
Page,302,Mackintosh,,Mackintosh Earrings - Studs,
Page,303,Mackintosh,,Mackintosh Earrings - Dangling,
(Note: The fourth parameter of the page description is unused, thus the ",,")

Defining the Items

This site is capable of accommodating four types of inventory items:

  • items with no optional features
    an example from the Celtic site are any of the Greeting Cards

  • items with an optional feature that affects its price
    an example from the Celtic site are the stone choices for the Mackintosh earrings

  • items with an optional feature selected from a list of options that does not affect its price
    an example from the Celtic site are size choices for the Mackintosh rings without stones

  • items with both types of optional features
    an example from the Celtic site are size choices for the Mackintosh rings also with stone choices
Each item is described by an entry in the site.csv. For example:

2116,SB,J,R,Mackintosh Sand Blasted Oblong Rose Ring,$20.00

where:

  • "2116" is the item number (may be up to 20 characters)
  • "SB" is the first option choice (sand-blasted)
  • "J" is the first in a range of choices for the second option (size 5)
  • "R" is the last in the range of choices for the second option (size 9)
  • "Mackintosh Sand Blasted Oblong Rose Ring" is the description of the item
  • "$20.00" is the price of the item
Items without one or both options simply omit them but be sure to include the "," place holders. For example, this item uses only the first option:
5102,AM,,,Mackintosh Leafy Round Stone Drops,$24.00

Defining the Option Codes

The codes used to define the options are also defined in the site.csv file. The option codes used in the example above are "SB", "J", and "R", but they may be anything you define up to a maximum of 6 characters. Because the Celtic site's options were SIZE and COLOR, these are the keywords used for these sections in the .csv file and the MAKE utility is looking for that. But your item options may be anything you choose. Just be sure to use the "COLOR" section for the option that affects the price and "SIZE" for the one that doesn't. If there are no options for any of your items, these sections may be omitted from the site.csv file.

Now, before you think this is getting too complicated and that this inventory is nothing like the one you want to define, check out this demo site that we built from the Celtic site. As you can see, the inventory items and options have nothing to do with jewelry! As a matter of fact, since our demo site is much simpler than the Celtic one, you may want to start your web site from ours rather than from the Celtic one. If so, you can download DemoXAP.zip and follow the instructions just as if you started with the Celtic site.

The Hardware page of our demo site contains items both with and without options. Security Dongles are items with no options. The Multi-User Boards are items with the option that affects price (the number of users). And the Monitor is an item with the range option that does not affect price (the color). For an example of an item that uses both options, explore the Technical Support page.

How did we do this? Here's the entire site.csv file for our demo site:


SITE,,,,
Company Name,,,,Signature Systems XAP Demo Site
Address,,,,360 Tesconi Circle, Suite E                                          
City,,,,Santa Rosa                                
State,,,,CA                                        
Zip,,,,95401
E Address,,,,MyEmailAddr@isp.net                  
E Name,,,,Ms. Contact Person                 
Phone,,,,(707)527-9611                              
Fax ,,,,(707)578-5486 fax                               
Shipping,,,,2

SIZES,,,,
A,,,,Jim
B,,,,Barb
C,,,,Brian
D,,,,Green
E,,,,Amber

COLORS,,,,
CD,,,,CD
BD,,,,Bound paper
SU,,,,Subscriber (unlimited)
15,,,,15 minutes
30,,,,30 minutes
60,,,,60 minutes
3U,,,,3-user
10U,,,,10-user
20U,,,,20-user

Page,101,Hardware,,Dongles,
1000,,,,USB Security Dongle,$100.00 
1001,,,,Parallel Plug Security Dongle,$1000.00 

Page,102,Hardware,,Multi-user Boards,
1100,3U,,,Multi-user Board,$2595.00 
1100,10U,,,Multi-user Board,$4985.00 
1100,20U,,,Multi-user Board,$5677.00 

Page,103,Hardware,,Monitors,
1200,,D,E,Televideo Monitor,$675.00 

Page,201,Documentation,,Internet Basic,
2000,CD,,,IB Manual,$25.00 
2000,BD,,,IB Manual,$2500.00 
 
Page,202,Documentation,,Windows API,
2100,CD,,,Windows API Manual,$75.00 
2100,BD,,,Windows API Manual,$7500.00 

Page,203,Documentation,,XAP Programming,
2200,CD,,,XAP Programming Manual,$75.00 
2200,BD,,,XAP Programming Manual,$7500.00 

Page,301,Support,,General Support,
3000,SU,A,C,Comet Support Session,$0.00 
3000,15,A,C,Comet Support Session,$100.00 
3000,30,A,C,Comet Support Session,$175.00 
3000,60,A,C,Comet Support Session,$300.00 

Page,302,Support,,Windows Programming Support,
3100,SU,B,C,Windows Programming Support Session,$0.00 
3100,15,B,C,Windows Programming Support Session,$100.00 
3100,30,C,C,Windows Programming Support Session,$175.00 
3100,60,C,C,Windows Programming Support Session,$300.00 

Page,303,Support,,XAP Programming Support,
3200,SU,A,B,XAP Programming Support Session,$0.00 
3200,15,A,B,XAP Programming Support Session,$100.00 
3200,30,A,A,XAP Programming Support Session,$175.00 
3200,60,A,A,XAP Programming Support Session,$300.00 
Study it and see how the option codes are used. Then go back to the web page and see how that is displayed. This is how our demo site inventory is organized:

GroupSub-groupsOptionsHtml Page Number
Hardware
Security Dongles101
BoardsNumber of users102
MonitorsScreen color103
Documentation
Internet BasicFormat201
Windows APIFormat202
XAP ProgrammingFormat203
Support
GeneralSession length and Specialist301
Windows ProgrammingSession length and Specialist302
XAP ProgrammingSession length and Specialist303

So you see, the site can be adapted to many different types of businesses. Be sure to follow the syntax requirements exactly when making your site.csv entries and you'll be well on your way. We recommend starting with only a couple of groups and a few items until you get the hang of it.

Images of the items

The next step is to collect the .jpg images for each item in your inventory. You will need two images of each item, a thumbnail size and a larger size. Of course if you prefer they can both be the same, but the idea is that when the user clicks on the item's description or its thumbnail the larger image will be displayed. Since our demo site was so small, we made the two sizes of the images manually. If your site is large you might try a web search for image processing software that will automatically convert a group of images to their thumbnail size.

The .jpg must be named using the item number from the .csv file. For example, the image of the Parallel Plug Security Dongle defined above is called 1001.jpg. Put the thumbnail version into the ...\dbthumbs folder and the larger image into the ...\dbimages folder. Both will share the same file name.

Other Images

You may recall there is one other folder of images for the site. It is called simply "images" and it contains all the other images used besides the ones for the product details. For our demo site, the only images we needed were our Comet logo and the pictures of the staff for the Support page. You'll want to load up your ...\images folder with the images you'll be using for your site.

Customizing the .html Code

The CEL folder contains the .html files that define your web page. You'll need to make some changes for your site. The html code in these files is not all of the code required for the page. This code will be dynamically merged by XAP programs to build the pages at runtime. The changes may you make to these files may be as simple or elaborate as you like depending on how fancy you want your pages. For our demo site, we kept it as simple as possible.

MENUS.HTM contains the html code for the menus seen at the top and down the left side of each page. To set the items for your top menu, scroll down to the end of the TOP section. (You'll be passing a lot of style code and java script. Don't worry about that for now. Just look for <!--END TOP-->) The html table defined just above <!--END TOP--> contains the code for the top menu. For our demo site we have only "Company Info", "Shipping Info", and "Security & Privacy". The Celtic site includes these plus several more. You may define as many as you like. We'll create code for each item in the next step - the SECTIONS.HTM file.

The Products menu shown down the left side of each page is defined just below in the LEFT section. (Look for <!--BEGIN LEFT-->) There will be one item on this menu for each inventory group. For our demo site we have Hardware, Documentation, and Technical Support. Modify the code so you have one table entry for each of your item groups. We'll create code for each item in the next step - the SECTIONS.HTM file.

The last section in the menus.htm file is an optional section called the Size Guide. For now, leave that as it is. You can decide if you need that later or not. While you're in menus.htm, you might also want to set the contact phone number displayed at the top of the page. Look for "Call Us" right above where you just defined your top menu items. Also change the <TITLE> statement at the top of menus.htm so it reflects your site's name.

SECTIONS.HTM contains the html code for the home page as well as each group's main page. For each group there will be two sections in the SECTIONS.HTM file. The first section defines the links to the page for each sub-group. The second section contains text to describe the type of items in the group.

Look at the main page for our Hardware group. Notice the links in the box for the sub-groups. Here's the code from the SECTIONS.HTM file for those links:


<!--BEGIN HARDWARE-->
	<tr><td width=20></td><td valign=top>
	<h2>Hardware - for demo purposes only</h2><br>
	<table width=90% class=graybox><tr><td width=8> </td><td>
	<a class=product_links href="**xapsite**detail?page=0101">Security Dongles</a><br>                      
	<a class=product_links href="**xapsite**detail?page=0102">Boards</a><br>                          
	<a class=product_links href="**xapsite**detail?page=0103">Monitors</a><br>                          
	</td></tr></table>                                                                               
	</td></tr>
	<tr><td></td><td><br><font face="Verdana" size="4" color="#336600">    **PAGE**</font><br>
	</td></tr></table>
<!--END HARDWARE-->
The most critical lines in this code are the section (group) name in the BEGIN and END statements and the page numbers in the link statements. The section names must be the same as the ones you just defined in the LEFT section in menus.htm. They must also match the group names in the site.csv file. The page numbers must match the sub-group pages defined in the site.csv file.

Here's the code for the main text on the page:


<!--BEGIN MAINHARDWARE-->
	<table width=600><tr><td width=20></td><td valign=top>
		<table width=90% class=body border=0><tr><td valign=top width=250>
		We offer selected hardware items to expand and enhance your Comet installation.
		</td></tr></table>
	</td></tr></table>
</td></tr></table>
<center>
<p>
<font face="Verdana" size="1" color="#cccccc"> Copyright © 2007 Signature Systems, Inc. -  Powered by Xap Technology</font>
</BODY></HTML>
<!--END MAINHARDWARE-->
Pretty simple stuff. All we changed was the text to describe the group and the copyright. Just make sure the section name is correct and preceded it with "MAIN". You will need a pair of section code segments like the above for each group in your inventory.

You will also need a similar pair of section code segments for the home page text and each of the top menu sections you defined in the TOP section of menus.htm. In our example this would be "Company Info", "Shipping Info", and "Security & Privacy". In our example the pages for these menu items do not contain any links so we need only define an empty section for that. The MAIN section for each top menu item does contain some text to display. Here are the 2 sections for our "Shipping Info" menu item:


<!--BEGIN SHIPPINGINFO-->
<!--END SHIPPINGINFO-->

<!--BEGIN MAINSHIPPINGINFO-->
	<table width=600><tr><td width=20></td><td valign=top><br><br>
	<font class=body><h1>Shipping Information</h1>
	Delivery time is dependant on the availability of stock. We make every effort to keep
	stock current and most orders will be sent within a week of the order date. However,
	we do run out of our most popular items from time to time.
	<p>All orders are sent via the US postal service using their "delivery confirmation"
	service. This allows our customers to track the shipment when necessary. Also, all orders
	over two weeks old are sent via priority mail at no extra charge to our customers.
	<p>If items ordered are needed quickly, please e-mail or call for stock verification
	and overnight shipping options.
	</td></tr></table>
</td></tr></table>
<center>
<p>
<font face="Verdana" size="1" color="#cccccc"> Copyright © 2007 Signature Systems, Inc -  Powered by Xap Technology</font>
</body></html>
<!--END MAINSHIPPINGINFO-->

While you're in sections.htm you'll also want to change the several copyright messages and company contact information. Remember as you are writing these html code segments that they are only pieces of a web page. They will be merged together at runtime by XAP to form the complete page.

Site Name and Contact Info also needs to be changed in several other .htm files:

accepted.htm<TITLE> statement, references to company name and phone number
cartview.htmcopyright statements
checkout.htmcopyright statement
declined.htm<TITLE> statement, references to company name and phone number, and link to site's home page
detail.htmcopyright statement
orders.htmreference to company name
showcart.htmsales tax rate and state to which it applies. Note: For the sales tax to be applied properly for your state, you will also have to modify the calculation done in purchase.ibs.

Running MAKE

Once you have your site.csv file built, your .html coding done, and all your images in place, it's time to run MAKE to generate your site. You will supply MAKE with the name of a .csv file that describes your domain. For our local test we're using local.csv. Open this file in a text editor and set the smtp server, path name, and printer name appropriately for your environment. If your smtp server requires authentication, you'll need to add the user name and password information here also. Here's the syntax:
euser,,,,username
epwd,,,,password

OK, here we go! Run MAKE from READY. When asked for the name of the domain file, enter local. Enter "Y" to "Initialize ALL Files?". As it runs, progress messages will be displayed. The entire process should take about 10 seconds, depending on the speed of your computer. When it has finished, the last progress message displayed will say "Done". Press ENTER to exit the program.

Now we'll verify that MAKE did its job. Open Comet Explorer and select the DAT directory. You should see that this folder now contains 13 keyed files and one text file. Open MAKELOG.TXT and check to be sure there are no error messages.

Switch to the XAP directory. This folder should now contain 14 IB object programs and the style.css text file.

If you see anything other than what's described here, the installation has failed and you'll need to correct whatever is wrong before continuing.

Starting the Web Server

Your site is ready for testing! Run XAPMON from READY. If it starts successfully, you'll see "Monitor running . . .". If not, recheck your Comet.ini and #XAP files to be sure they're setup properly. This demo is configured to use port 8080 for its communication with the web browser. If for some reason this port is not available on your computer, set the correct port in the #XAP and local.csv files.

See your new site

Open up your web browser and send it to http://localhost:8080/xap/, where 8080 is the port being used. Your new site's home web page should display. Now for the debugging... Chances are your site won't be perfect the first time you see it. The info below should help you get it just the way you want.

The XAP Programs

You can tell which program is being run at any given time by looking at the URL information in your browser's address window. The first word you see following "xap/" is the name of the program. For example, on our demo site you might see http://localhost:8080/xap/main?section=HARDWARE. This indicates the name of the program is "main". If the program name is blank, the program is "main" by default.

Here is a summary of the programs on your site and the .html files they use. This should give you an idea where to start looking when you see a problem:

cartupUpdates, empties, and displays the shopping cart.
cartviewUses Menus.htm SECTION TOP, CartView.htm, and ShowCart.htm.
ccresultDisplays order confirmation and calls MAIL on CEL to send email to customer and site administrator. Uses Declined.htm and Accepted.htm.
cctestA credit card processing simulator. Uses CcTest.htm.
cgitestAn XAP debugging program.
checkoutAsks for the customer's billing info. Uses Menus.htm SECTION TOP, CheckOut.htm, ShowCart.htm, and ShowCust.htm.
detailDisplays the pages of the item details. Uses Menus.htm SECTION TOP, Menus.htm SECTION LEFT, Detail.htm, and the section for the item's group in SECTIONS.HTM.
indexThe home page.
logA site administrator's program to display the email log.
mainThe index page and the main page for a group. Uses Menus.htm SECTION TOP, Menus.htm SECTION LEFT, the section for INDEX or the item's group in SECTIONS.HTM as well as it's MAIN section.
ordersA site administrator's program to display open orders. Uses Menus.htm SECTION TOP and Orders.htm.
purchaseVerifies purchase information. Uses Menus.htm SECTION TOP and Purchase.htm.
sizguideDisplays the descriptive info for product options. Uses Menus.htm SECTION TOP and Menus.htm SECTION SIZEGUIDE.
webserveThe XAP web server. This is run whenever the requested program cannot be found. By default it will run the home page.

The Comet Data Files

Here is a summary of the Comet data files used by your site. Notice this demo was written before the introduction of multi-keyed files. You could change it to eliminate the cross-reference files and use multiple keys instead!
colorsthe item option codes for the option that affects price
custthe customer master file
custxindex to the customer master file by name
itemsthe item master file
itemsxindex to the item master file by item page number and position
ordhthe order header file
ordhxindex to the order header file by customer number
ordlthe order line file
seqused by CCResult to calculate next order number
shopcartthe customer's shopping cart contents
sizesthe item option codes for the range option (does not affect price)
userused by CartUp to calculate next customer number

Debugging XAP programs

Here are a couple of suggestions for debugging XAP prorgrams:
  • You can print directly to LUN 0 which is the browser. Your debug message will appear right on the web page.

  • It can be helpful to see the full html code that's generated after all your MERGEs. Use the "View Source" option of your browser. Right click on the web page and select "View Source" from the menu. The code for the web page will be displayed in a text editor.

  • Add "ENTER 'CGITEST'" to your IB source file. CGITEST is a subprogram included with our demo sites that will dump out the current contents of the CGI variables to the web page. It also displays a list of all your accessed Comet directories in DAB order. And, of course, you can always change this program to suit your needs.

  • Make use of the XAP LOGFILE capability. To get this going, just include the LOGFILE command in your #XAP file. It will show you all the browser's activity such as connecting to your site, loading of images, and programs run.

Tuning your site

You can control the number of items displayed per page depending on the speed of the internet connection. Look in your local.csv file for the line that says:

Time,20,5,10

This setting specifies that if the page requires 20 seconds or less to load, 10 items per page will be displayed. If it requires more than 20 seconds, it will show only 5 items per page. Adjust this setting to get the performance you require.

To learn more about Signature System's eXtended Active Pages (XAP) technology, visit the XAP page.


Copyright © 2007 Signature Systems, Inc.