|Let us help you run 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 FoldersOK, 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:
site.csvIn 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:
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,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:
2116,SB,J,R,Mackintosh Sand Blasted Oblong Rose Ring,$20.00
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.00Study 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:
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.
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:
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:
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 ServerYour 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 siteOpen 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 ProgramsYou 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:
The Comet Data FilesHere 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!
Debugging XAP programsHere are a couple of suggestions for debugging XAP prorgrams:
Tuning your siteYou 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:
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.