uShop Online Shopping System

Last Update: February 22, 2001

This Tutorial is designed to help you get familiar with using the uShop^TM applets to create an online store. Step by step, it will take you through the process of creating an online store with uShop^TM. It's perfect for people wanting to get familiar with uShop^TM or for those just wanting to get familiar with using Java Applets on web pages in general.

2. Tutorial Setup

Upon installing uShop^TM on your local computer, you should have a directory structure setup that is similar to that displayed in the figure below.

Figure 1. Initial Directory Structure

For this tutorial, you will only be using files in the following three directories:

classes - This directory contains all of the uShop^TM class files and the uShop^TM template files.
images - This directory contains a few images that the tutorial uses.
tutorial - This directory is the main directory where you will be creating the store pages for this tutorial.

Throughout this tutorial, you will primarily be working with the files located in the "tutorial" directory. The files contained in this directory are listed in Figure 2 and described below.

Figure 2. "tutorial" Directory Contents

index.html - This is the main HTML page that handles setting up the frame-layout of the tutorial's catalog. The layout of the tutorial's example store will have two frames - A small frame on the left that will contain links to your store's product pages and a larger frame on the right into which the actual store pages will be displayed.
tutorial_contents.html - This is the page that appears in the left frame. It contains links to the other pages and will also contain a small shopping cart applet.
tutorial_welcome.html - This page is the first page to appear in the right frame. It contains a little "Welcome To My Online Store" information.
tutorial_page1.html - This page will contain some product information and some uShop^TM input applets.
tutorial_page2.html - This page will contain some more product information and some more uShop^TM input applets.
tutorial_shoppingcart - This page will contain a large version of the uShop^TM shopping cart applet.
tutorial_orderform - This page will contain a special "order button" applet that is used to initiate the ordering process.

3. Getting Familiar With The Example Store Layout

STEP 1 - In order to get familiar with the layout of this tutorial's example store, start up your browser and open the file "index.html" that is located in your "tutorial" directory. (The "tutorial" directory was created when you unzipped/installed uShop^TM on your computer). After the "index.html" file is opened and displayed in your browser, spend a few moments browsing the pages in the example store by selecting the links in the left frame.

Note that for this tutorial, we chose to keep the pages very basic. We also chose to layout the store using two frames. The small frame on the left will serve as a navigation menu with links to all of the store's web pages. This small frame will also contain a small shopping cart applet which is very popular and allows customers to see a simple list of the products that are in their shopping cart. The larger frame on the right will be used to display all of the store's product pages, a larger more detailed view of the shopping cart, and the form used to place the order.

Also, note that when designing your store, you do not have to use this frame layout. If fact, you do not have to use frames at all! You can design your store's web pages however you like using any HTML editor that you like.

And finally, note that at this point No uShop^TM Applets have been used yet! All of these example pages are just standard HTML. We will begin adding the uShop^TM Applets in the next step.

4. Adding A Small Shopping Cart Applet

The steps in this section show how to add a small shopping cart applet to the left frame of the store.

STEP 2 - Using your favorite HTML editor, open up the file "tutorial_contents.html" for editing. If you do not have an HTML editor, any simple text editor will do (such as Note Pad).

STEP 3 - To add the small shopping cart applet to this page, locate the following line of HTML code:

<BR>(The Small Shopping Cart applet will go here.)

and replace it with the following lines:

<APPLET CODE="uShopCart2.class" CODEBASE="../classes/" WIDTH=160 HEIGHT=185>
<PARAM NAME="columns_name"               VALUE="16">
<PARAM NAME="columns_price"              VALUE="10">
<PARAM NAME="show_remove_button"         VALUE="NO">
<PARAM NAME="list_font_size"             VALUE="10">
<PARAM NAME="list_text_color"            VALUE="#000000">
<PARAM NAME="list_background_color"      VALUE="#FFFFFF">
<PARAM NAME="background_color"           VALUE="#0080C0">
</APPLET>

STEP 4 - Save the file and startup the store as we did in STEP 1 of this tutorial. (If your browser is already running, you many need to exit the browser and restart it to reload the newly modified page.)

You will notice that there is now a small shopping cart applet in the top of the left frame. How did we do this? We used the standard HTML syntax to add an applet called "uShopCart2.class" to the page.

Taking a closer look at the lines you just added:

<APPLET CODE="uShopCart2.class" CODEBASE="../classes/" WIDTH=160 HEIGHT=185>

This line uses the standard HTML <APPLET> tag to add an applet called "uShopCart2.class" to the page. The "CODEBASE" setting indicates that the class file is located in the relative directory "../classes/". The "WIDTH=160" and "HEIGHT=185" settings indicate to make the applet 160 pixels wide and 185 pixels high.

<PARAM NAME="columns_name" VALUE="16">

This line specifies a value of 16 for the "columns_name" parameter. As defined in the uShop^TM Applet Reference, the "columns_name" parameter allows you to specify the number of columns (i.e., characters) used for the NAME field in the shopping cart. In this case, the first 16 characters of the product's name will be displayed in the small shopping cart applet.

<PARAM NAME="columns_price" VALUE="10">

This line specifies a value of 10 for the "columns_price" parameter. As defined in the uShop^TM Applet Reference, the "columns_price" parameter allows you to specify the number of columns (i.e., characters) used for the PRICE field in the shopping cart. In this case, the first 10 characters of the product's price will be displayed in the small shopping cart applet.

<PARAM NAME="show_remove_button" VALUE="NO">

This line specifies a value of "NO" for the "show_remove_button" parameter. As defined in the uShop^TM Applet Reference, the "show_remove_button" parameter allows you to specify whether to display a "Remove" button on this small shopping cart. Since this is parameter is set to "NO", the "Remove" button is NOT displayed.

<PARAM NAME="list_font_size" VALUE="10">

This line specifies a value of 10 for the "list_font_size" parameter. As defined in the uShop^TM Applet Reference, the "list_font_size" parameter allows you to specify the font size of this small shopping cart. In this case, a font size of 10 is used.

<PARAM NAME="list_text_color" VALUE="#000000">

This line specifies a value of "#000000" for the "list_text_color" parameter. As defined in the uShop^TM Applet Reference, the "list_text_color" parameter allows you to specify the color of the text shown in this small shopping cart. In this case, a font color of #000000 (black) is used.

<PARAM NAME="list_background_color" VALUE="#FFFFFF">

This line specifies a value of "#FFFFFF" for the "list_background_color" parameter. As defined in the uShop^TM Applet Reference, the "list_background_color" parameter allows you to specify the color of the background behind the text in the small shopping cart. In this case, the background color of the shopping cart list is set to #FFFFFF (white).

<PARAM NAME="background_color" VALUE="#0080C0">

This line specifies a value of "#0080C0" for the "background_color" parameter. As defined in the uShop^TM Applet Reference, the "background_color" parameter allows you to specify the color of the background of the applet, in general. In this case, the background color of the applet is set to #0080C0 in order to match the background color of the HTML page.

</APPLET>

This </APPLET> tag is the standard HTML syntax for indicating the end of an applet.

Note: As you have seen while adding this shopping cart applet to the HTML page, all of uShop's applets will have a variety of parameters to let you customize them for your catalog's needs. You can get a complete list and description of all of uShop's applets and applet parameters by looking through the uShop^TM Applet Reference.

STEP 5 - We are now done editing the file "tutorial_contents.html", so you can close that file.

5. Adding Your First Input Applet

The steps in this section show how to add an input applet to your catalog. uShop^TM Input Applets provide the means by which customers can select items and "Add" them to the virtual shopping cart.

STEP 6 - Using your favorite HTML editor, open up the file "tutorial_page1.html" for editing. If you do not have an HTML editor, any simple text editor will do (such as Note Pad).

STEP 7 - To add an Input Applet for a bookcase, locate the following line of HTML code:

(The Input Applet for product 1 will go here.)

and replace it with the following lines:

<APPLET CODE="uShopInput1.class" CODEBASE="../classes/" WIDTH=100 HEIGHT=30>
<PARAM NAME="id"                 VALUE="P00001">
<PARAM NAME="name"               VALUE="Bookcase">
<PARAM NAME="description"        VALUE="Oak; glass doors; interior lighting">
<PARAM NAME="weight"             VALUE="120">
<PARAM NAME="price"              VALUE="$299.00">
<PARAM NAME="classification"     VALUE="NONE">
<PARAM NAME="shipping_modifier"  VALUE="$0.00">
<PARAM NAME="taxable"            VALUE="YES">
<PARAM NAME="label"              VALUE="Add To Cart">
<PARAM NAME="popup"              VALUE="NO">
</APPLET>

STEP 8 - Save the file and startup the store as we did in STEP 1 of this tutorial. (If your browser is already running, you many need to exit the browser and restart it to reload the newly modified page.)

You will notice by looking at page 1 that there is now an applet for adding the bookcase to the shopping cart. Select the "Add To Cart" button and notice that the product appears in the small shopping cart applet that we added in STEP 3.

Cool, huh? How did we do this? Again we used the standard HTML syntax to add an applet called "uShopInput1.class" to the page.

Taking a closer look at the lines you just added:

<APPLET CODE="uShopInput1.class" CODEBASE="../classes/" WIDTH=100 HEIGHT=30>

This line uses the standard HTML <APPLET> tag to add an applet called "uShopInput1.class" to the page. The "CODEBASE" setting indicates that the class file is located in the relative directory "../classes/". The "WIDTH=100" and "HEIGHT=30" settings indicate to make the applet 100 pixels wide and 30 pixels high.

<PARAM NAME="id" VALUE="P00001">

This line specifies a value of "P00001" for the "id" parameter. As defined in the uShop^TM Applet Reference, the "id" parameter corresponds to a unique id for the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="name" VALUE="Bookcase">

This line specifies a value of "Bookcase" for the "name" parameter. As defined in the uShop^TM Applet Reference, the "name" parameter corresponds to the name of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="description" VALUE="Oak; glass doors; interior lighting">

This line specifies a value for the "description" parameter. As defined in the uShop^TM Applet Reference, the "description" parameter corresponds to a brief description of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="weight" VALUE="120">

This line specifies a value of 120 for the "weight" parameter. As defined in the uShop^TM Applet Reference, the "weight" parameter corresponds to the weight of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="price" VALUE="$299.00">

This line specifies a value of "$299" for the "price" parameter. As defined in the uShop^TM Applet Reference, the "price" parameter corresponds to the price of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="classification" VALUE="NONE">

This line specifies a value of "NONE" for the "classification" parameter. As defined in the uShop^TM Applet Reference, the "classification" parameter corresponds to the classification (if any) of the product that gets added to the shopping cart each time this applet's "Add" button is pressed. Note that the "classification" parameter will normally be set to "NONE" unless you are setting up a price table as described in the uShop^TM Applet Reference.

<PARAM NAME="shipping_modifier" VALUE="$0.00">

This line specifies a value of "$0.00" for the "shipping_modifier" parameter. As defined in the uShop^TM Applet Reference, the "shipping_modifier" parameter corresponds to any shipping cost modifiers that are to be associated with the product that gets added to the shopping cart each time this applet's "Add" button is pressed. Note that typically the "shipping_modifier" parameter will be set to "$0.00"...unless you want to add any extra shipping fee for a particular product. See the description of the "shipping_modifier" parameter in the uShop^TM Applet Reference for more information.

<PARAM NAME="taxable" VALUE="YES">

This line specifies a value of "YES" for the "taxable" parameter. As defined in the uShop^TM Applet Reference, the "taxable" parameter corresponds to whether the product is taxable or not. In this case, the product will be taxed since the value is set to "YES" (taxable).

<PARAM NAME="label" VALUE="Add To Cart">

This line specifies a value of "Add To Cart" for the "label" parameter. As defined in the uShop^TM Applet Reference, the "label" parameter corresponds to the label that will be displayed on the applet's "Add" button. In this case, the label on the button will be displayed as "Add To Cart".

<PARAM NAME="popup" VALUE="NO">

This line specifies a value of "NO" for the "popup" parameter. As defined in the uShop^TM Applet Reference, the "popup" parameter corresponds to whether or not to display a popup window whenever the "Add" button has been pressed and the item has been added to the virtual shopping cart. In this case, a popup window will NOT be displayed when the "Add" button is pressed.

</APPLET>

This </APPLET> tag is the standard HTML syntax for indicating the end of an applet.

6. Adding An Input Applet With Options

The steps in this section show how to add an input applet that has options from which customers can select.

STEP 10 - The file "tutorial_page1.html" should still be open from the steps in the previous section, so to add an Input Applet for a T-shirt, locate the following line of HTML code:

(The Input Applet for product 2 will go here.)

and replace it with the following lines:

<APPLET CODE="uShopInput5.class" CODEBASE="../classes/" WIDTH=350 HEIGHT=30>
<PARAM NAME="id"                 VALUE="P00002">
<PARAM NAME="name"               VALUE="T-shirt">
<PARAM NAME="description"        VALUE="Short sleeve, crew-neck">
<PARAM NAME="option1"            VALUE="White,Black,Navy,Grey">
<PARAM NAME="option2"            VALUE="S,M,L,XL">
<PARAM NAME="weight"             VALUE="1">
<PARAM NAME="show_qty"           VALUE="NO">
<PARAM NAME="price"              VALUE="$ 15.00">
<PARAM NAME="classification"     VALUE="NONE">
<PARAM NAME="shipping_modifier"  VALUE="$0.00">
<PARAM NAME="taxable"            VALUE="YES">
<PARAM NAME="popup"              VALUE="NO">
<PARAM NAME="text_color"         VALUE="#000000">
<PARAM NAME="background_color"   VALUE="#FFFFFF">
</APPLET>

STEP 11 - Save the file and startup the store as we did in STEP 1 of this tutorial. (If your browser is already running, you many need to exit the browser and restart it to reload the newly modified page.)

You will notice by looking at page 1 that there is now a new applet for adding the T-shirt to the shopping cart. Select the "Add" button and notice that the product appears in the small shopping cart applet that we added back in STEP 3.

Taking a closer look at the lines you just added:

<APPLET CODE="uShopInput5.class" CODEBASE="../classes/" WIDTH=350 HEIGHT=30>

This line uses the standard HTML <APPLET> tag to add an applet called "uShopInput5.class" to the page. The "CODEBASE" setting indicates that the class file is located in the relative directory "../classes/". The "WIDTH=350" and "HEIGHT=30" settings indicate to make the applet 350 pixels wide and 30 pixels high.

<PARAM NAME="id" VALUE="P00002">

This line specifies a value of "P00002" for the "id" parameter. As defined in the uShop^TM Applet Reference, the "id" parameter corresponds to a unique id for the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="name" VALUE="T-shirt">

This line specifies a value of "T-shirt" for the "name" parameter. As defined in the uShop^TM Applet Reference, the "name" parameter corresponds to the name of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="description" VALUE="Short sleeve, crew-neck">

This line specifies a value for the "description" parameter. As defined in the uShop^TM Applet Reference, the "description" parameter corresponds to a brief description of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="option1" VALUE="White,Black,Navy,Grey">

This line specifies a list of values for the "option1" parameter. As defined in the uShop^TM Applet Reference, the "option1" parameter corresponds to a list of options that are available for the product. You can actually specify as many options in this list as you want - each separated by a comma.

<PARAM NAME="option2" VALUE="S,M,L,XL">

This line specifies a list of values for the "option2" parameter. As defined in the uShop^TM Applet Reference, the "option2" parameter corresponds to a list of options that are available for the product. You can actually specify as many options in this list as you want - each separated by a comma.

<PARAM NAME="weight" VALUE="1">

This line specifies a value of 1 for the "weight" parameter. As defined in the uShop^TM Applet Reference, the "weight" parameter corresponds to the weight of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="show_qty" VALUE="NO">

This line specifies a value of "NO" for the "show_qty" parameter. As defined in the uShop^TM Applet Reference, the "show_qty" parameter is used to specify whether or not to display a quantity entry box on the applet. In this case, no quantity entry box is displayed since the value is set to "NO".

<PARAM NAME="price" VALUE="$ 15.00">

This line specifies a value of "$15.00" for the "price" parameter. As defined in the uShop^TM Applet Reference, the "price" parameter corresponds to the price of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="classification" VALUE="NONE">

This line specifies a value of "NONE" for the "classification" parameter. As defined in the uShop^TM Applet Reference, the "classification" parameter corresponds to the classification (if any) of the product that gets added to the shopping cart each time this applet's "Add" button is pressed. Note that the "classification" parameter will normally be set to "NONE" unless you are setting up a price table as described in the uShop^TM Applet Reference.

<PARAM NAME="shipping_modifier" VALUE="$0.00">

This line specifies a value of "$0.00" for the "shipping_modifier" parameter. As defined in the uShop^TM Applet Reference, the "shipping_modifier" parameter corresponds to any shipping cost modifiers that are to be associated with the product that gets added to the shopping cart each time this applet's "Add" button is pressed. Note that typically the "shipping_modifier" parameter will be set to "$0.00"...unless you want to add any extra shipping fee for a particular product. See the description of the "shipping_modifier" parameter in the uShop^TM Applet Reference for more information.

<PARAM NAME="taxable" VALUE="YES">

This line specifies a value of "YES" for the "taxable" parameter. As defined in the uShop^TM Applet Reference, the "taxable" parameter corresponds to whether the product is taxable or not. In this case, the product will be taxed since the value is set to "YES" (taxable).

<PARAM NAME="popup" VALUE="NO">

This line specifies a value of "NO" for the "popup" parameter. As defined in the uShop^TM Applet Reference, the "popup" parameter corresponds to whether or not to display a popup window whenever the "Add" button has been pressed and the item has been added to the virtual shopping cart. In this case, a popup window will NOT be displayed when the "Add" button is pressed.

<PARAM NAME="text_color" VALUE="#000000">

This line specifies a value of "#000000" for the "text_color" parameter. As defined in the uShop^TM Applet Reference, the "text_color" parameter allows you to specify the color of the text of the applet. In this case, the text color of the applet is set to #000000 (black).

<PARAM NAME="background_color" VALUE="#FFFFFF">

This line specifies a value of "#FFFFFF" for the "background_color" parameter. As defined in the uShop^TM Applet Reference, the "background_color" parameter allows you to specify the color of the background of the applet, in general. In this case, the background color of the applet is set to #FFFFFF (white) in order to match the background color of the HTML page.

</APPLET>

This </APPLET> tag is the standard HTML syntax for indicating the end of an applet.

7. Adding An Input Applet With Various-Priced Options

The steps in this section show how to add an input applet that has various-priced options from which customers can select.

STEP 12 - The file "tutorial_page1.html" should still be open from the steps in the previous section, so to add an Input Applet for a Necklace, locate the following line of HTML code:

(The Input Applet for product 3 will go here.)

and replace it with the following lines:

<APPLET CODE="uShopInput4.class" CODEBASE="../classes/" WIDTH=350 HEIGHT=30>
<PARAM NAME="id"                 VALUE="P00003">
<PARAM NAME="name"               VALUE="Necklace">
<PARAM NAME="description"        VALUE="14K; 'No Tangle' chain">
<PARAM NAME="option1"            VALUE="16 inches, 18 inches + $30, 20 inches + $55">
<PARAM NAME="weight"             VALUE="0.5">
<PARAM NAME="show_qty"           VALUE="NO">
<PARAM NAME="price"              VALUE="$ 89.00">
<PARAM NAME="show_price"         VALUE="YES">
<PARAM NAME="classification"     VALUE="NONE">
<PARAM NAME="shipping_modifier"  VALUE="$0.00">
<PARAM NAME="taxable"            VALUE="YES">
<PARAM NAME="popup"              VALUE="NO">
<PARAM NAME="text_color"         VALUE="#000000">
<PARAM NAME="background_color"   VALUE="#FFFFFF">
</APPLET>

STEP 13 - Save the file and startup the store as we did in STEP 1 of this tutorial. (If your browser is already running, you many need to exit the browser and restart it to reload the newly modified page.)

You will notice by looking at page 1 that there is now a third applet for adding a Necklace to the shopping cart. Select various options for the length of the Necklace and notice how the price of the Necklace is automatically changed based on the selected option.

Note that you can do this with any of the "option" parameters simply using the special "+" character to add a value to the base price or by using the special "-" character to subtract a value from the base price. More information below.

Taking a closer look at the lines you just added:

<APPLET CODE="uShopInput4.class" CODEBASE="../classes/" WIDTH=350 HEIGHT=30>

This line uses the standard HTML <APPLET> tag to add an applet called "uShopInput4.class" to the page. The "CODEBASE" setting indicates that the class file is located in the relative directory "../classes/". The "WIDTH=350" and "HEIGHT=30" settings indicate to make the applet 350 pixels wide and 30 pixels high.

<PARAM NAME="id" VALUE="P00003">

This line specifies a value of "P00003" for the "id" parameter. As defined in the uShop^TM Applet Reference, the "id" parameter corresponds to a unique id for the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="name" VALUE="Necklace">

This line specifies a value of "Necklace" for the "name" parameter. As defined in the uShop^TM Applet Reference, the "name" parameter corresponds to the name of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="description" VALUE="14K; 'No Tangle' chain">

This line specifies a value for the "description" parameter. As defined in the uShop^TM Applet Reference, the "description" parameter corresponds to a brief description of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="option1" VALUE="16 inches, 18 inches + $30, 20 inches + $55">

This line specifies a list of values for the "option1" parameter. As defined in the uShop^TM Applet Reference, the "option1" parameter corresponds to a list of options that are available for the product. NOTE how the "18 inch" and "20 inch" options have a "+" character associated with them. This is how you can indicate that an option will affect the base price of the product. You can add to the base price of a product by specifying "+" followed by the price modifier. Or you can subtract from the base price of a product by specify "-" followed by the price modifier. In this example, the 16 inch necklace costs the base price, the 18 inch necklace costs the base price + $30, and the 20 inch necklace costs the base price + $55.

<PARAM NAME="weight" VALUE="1">

This line specifies a value of 1 for the "weight" parameter. As defined in the uShop^TM Applet Reference, the "weight" parameter corresponds to the weight of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="show_qty" VALUE="NO">

This line specifies a value of "NO" for the "show_qty" parameter. As defined in the uShop^TM Applet Reference, the "show_qty" parameter is used to specify whether or not to display a quantity entry box on the applet. In this case, no quantity entry box is displayed since the value is set to "NO".

<PARAM NAME="price" VALUE="$ 89.00">

This line specifies a value of "$89.00" for the "price" parameter. As defined in the uShop^TM Applet Reference, the "price" parameter corresponds to the price of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="show_price" VALUE="YES">

This line specifies a value of "YES" for the "show_price" parameter. As defined in the uShop^TM Applet Reference, the "show_price" parameter is used to specify whether or not to display the price on the applet itself. In this case, we specified the value as "YES" so that the price is displayed and so it is easy to see the price change based on the option selected.

<PARAM NAME="classification" VALUE="NONE">

This line specifies a value of "NONE" for the "classification" parameter. As defined in the uShop^TM Applet Reference, the "classification" parameter corresponds to the classification (if any) of the product that gets added to the shopping cart each time this applet's "Add" button is pressed. Note that the "classification" parameter will normally be set to "NONE" unless you are setting up a price table as described in the uShop^TM Applet Reference.

<PARAM NAME="shipping_modifier" VALUE="$0.00">

This line specifies a value of "$0.00" for the "shipping_modifier" parameter. As defined in the uShop^TM Applet Reference, the "shipping_modifier" parameter corresponds to any shipping cost modifiers that are to be associated with the product that gets added to the shopping cart each time this applet's "Add" button is pressed. Note that typically the "shipping_modifier" parameter will be set to "$0.00"...unless you want to add any extra shipping fee for a particular product. See the description of the "shipping_modifier" parameter in the uShop^TM Applet Reference for more information.

<PARAM NAME="taxable" VALUE="YES">

This line specifies a value of "YES" for the "taxable" parameter. As defined in the uShop^TM Applet Reference, the "taxable" parameter corresponds to whether the product is taxable or not. In this case, the product will be taxed since the value is set to "YES" (taxable).

<PARAM NAME="popup" VALUE="NO">

This line specifies a value of "NO" for the "popup" parameter. As defined in the uShop^TM Applet Reference, the "popup" parameter corresponds to whether or not to display a popup window whenever the "Add" button has been pressed and the item has been added to the virtual shopping cart. In this case, a popup window will NOT be displayed when the "Add" button is pressed.

<PARAM NAME="text_color" VALUE="#000000">

This line specifies a value of "#000000" for the "text_color" parameter. As defined in the uShop^TM Applet Reference, the "text_color" parameter allows you to specify the color of the text of the applet. In this case, the text color of the applet is set to #000000 (black).

<PARAM NAME="background_color" VALUE="#FFFFFF">

This line specifies a value of "#FFFFFF" for the "background_color" parameter. As defined in the uShop^TM Applet Reference, the "background_color" parameter allows you to specify the color of the background of the applet, in general. In this case, the background color of the applet is set to #FFFFFF (white) in order to match the background color of the HTML page.

</APPLET>

This </APPLET> tag is the standard HTML syntax for indicating the end of an applet.

STEP 14 - We are now done editing the file "tutorial_page1.html", so you can close that file.

8. Adding An Input Applet With A Quantity-Dependent Price

The steps in this section show how to add an input applet whose individual price is based on the quantity specified by the customer.

STEP 15 - Using your favorite HTML editor, open up the file "tutorial_page2.html" for editing. If you do not have an HTML editor, any simple text editor will do (such as Note Pad).

STEP 16 - To add an Input Applet for Golf Balls, locate the following line of HTML code:

(The Input Applet for product 4 will go here.)

and replace it with the following lines:

<APPLET CODE="uShopInput4.class" CODEBASE="../classes/" WIDTH=300 HEIGHT=30>
<PARAM NAME="id"                 VALUE="P00004">
<PARAM NAME="name"               VALUE="Golf Balls">
<PARAM NAME="description"        VALUE="Precision flight">
<PARAM NAME="option1"            VALUE="white,yellow,blue,red">
<PARAM NAME="weight"             VALUE="0.01">
<PARAM NAME="qty"                VALUE="1">
<PARAM NAME="show_qty"           VALUE="YES">
<PARAM NAME="price"              VALUE="1@$1.00,20@$0.75,50@$0.50">
<PARAM NAME="classification"     VALUE="GOLFBALL">
<PARAM NAME="shipping_modifier"  VALUE="$0.00">
<PARAM NAME="taxable"            VALUE="YES">
<PARAM NAME="popup"              VALUE="NO">
<PARAM NAME="text_color"         VALUE="#000000">
<PARAM NAME="background_color"   VALUE="#FFFFFF">
</APPLET>

STEP 17 - Save the file and startup the store as we did in STEP 1 of this tutorial. (If your browser is already running, you many need to exit the browser and restart it to reload the newly modified page.)

You will notice by looking at page 2 that there is now an applet for adding a Golf Balls to the shopping cart. In order to observe the quantity-price calculations, add a couple golf balls and observe the price is $1.00 each. Then go ahead and add some more golf balls ... so that the total number of golf balls in the shopping cart is between 20 and 50. Observe that the price is now $0.75 each. Finally, add some more golf balls so that the total quantity of golf balls in the cart is greater than 50. Note how the price is now $0.50 each.

Taking a closer look at the lines you just added:

<APPLET CODE="uShopInput4.class" CODEBASE="../classes/" WIDTH=300 HEIGHT=30>

This line uses the standard HTML <APPLET> tag to add an applet called "uShopInput4.class" to the page. The "CODEBASE" setting indicates that the class file is located in the relative directory "../classes/". The "WIDTH=300" and "HEIGHT=30" settings indicate to make the applet 300 pixels wide and 30 pixels high.

<PARAM NAME="id" VALUE="P00004">

This line specifies a value of "P00004" for the "id" parameter. As defined in the uShop^TM Applet Reference, the "id" parameter corresponds to a unique id for the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="name" VALUE="Golf Balls">

This line specifies a value of "Golf Balls" for the "name" parameter. As defined in the uShop^TM Applet Reference, the "name" parameter corresponds to the name of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="description" VALUE="Precision flight">

This line specifies a value for the "description" parameter. As defined in the uShop^TM Applet Reference, the "description" parameter corresponds to a brief description of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="option1" VALUE="white,yellow,blue,red">

This line specifies a list of values for the "option1" parameter. As defined in the uShop^TM Applet Reference, the "option1" parameter corresponds to a list of options that are available for the product. You can actually specify as many options in this list as you want - each separated by a comma.

<PARAM NAME="weight" VALUE="0.01">

This line specifies a value of 0.01 for the "weight" parameter. As defined in the uShop^TM Applet Reference, the "weight" parameter corresponds to the weight of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="qty" VALUE="1">

This line specifies a value of "1" for the "qty" parameter. As defined in the uShop^TM Applet Reference, the "qty" parameter is the default quantity used when adding an item to the shopping cart. In this case, a value of "1" will be the initial quantity displayed in the quantity entry box.

<PARAM NAME="show_qty" VALUE="YES">

This line specifies a value of "YES" for the "show_qty" parameter. As defined in the uShop^TM Applet Reference, the "show_qty" parameter is used to specify whether or not to display a quantity entry box on the applet. In this case, a quantity entry box is displayed since the value is set to "YES".

<PARAM NAME="price" VALUE="1@$1.00,20@$0.75,50@$0.50">

This line specifies a price table value as "1@$1.00,20@$0.75,50@$0.50" for the "price" parameter. As defined in the uShop^TM Applet Reference, the "price" parameter corresponds to the price of the product that gets added to the shopping cart each time this applet's "Add" button is pressed. For this example, the price is actually specified as a price table that is interpreted as:

QUANTITY           PRICE
1 - 19             $1.00 each
20 - 49            $0.75 each
50 or more         $0.50 each

You can specify as many quantity@price combinations as you like in the price table - each separated by a comma.

Note that the total quantity is determined by looking at the current contents of the shopping cart and summing the quantities of all items that have the same "GOLFBALL" classification. The "classification" is described more below.

<PARAM NAME="classification" VALUE="GOLFBALL">

This line specifies a value of "GOLFBALL" for the "classification" parameter. As defined in the uShop^TM Applet Reference, the "classification" parameter corresponds to the classification (if any) of the product that gets added to the shopping cart each time this applet's "Add" button is pressed. In this case, since we setup a quantity@price table, we gave this product a classification of "GOLFBALL". This way, the quantity@price calculation can be computed based on the total number of golf balls in the cart. That is, if a customer selects 15 blue golf balls and then selects 15 red golf balls, uShop^TM will be able to look at the current contents of the shopping cart and recognize that the blue and red golf balls have the same classification and therefore will be treated as a total quantity of 30 when determining the price from the quantity@price table.

<PARAM NAME="shipping_modifier" VALUE="$0.00">

This line specifies a value of "$0.00" for the "shipping_modifier" parameter. As defined in the uShop^TM Applet Reference, the "shipping_modifier" parameter corresponds to any shipping cost modifiers that are to be associated with the product that gets added to the shopping cart each time this applet's "Add" button is pressed. Note that typically the "shipping_modifier" parameter will be set to "$0.00"...unless you want to add any extra shipping fee for a particular product. See the description of the "shipping_modifier" parameter in the uShop^TM Applet Reference for more information.

<PARAM NAME="taxable" VALUE="YES">

This line specifies a value of "YES" for the "taxable" parameter. As defined in the uShop^TM Applet Reference, the "taxable" parameter corresponds to whether the product is taxable or not. In this case, the product will be taxed since the value is set to "YES" (taxable).

<PARAM NAME="popup" VALUE="NO">

This line specifies a value of "NO" for the "popup" parameter. As defined in the uShop^TM Applet Reference, the "popup" parameter corresponds to whether or not to display a popup window whenever the "Add" button has been pressed and the item has been added to the virtual shopping cart. In this case, a popup window will NOT be displayed when the "Add" button is pressed.

<PARAM NAME="text_color" VALUE="#000000">

This line specifies a value of "#000000" for the "text_color" parameter. As defined in the uShop^TM Applet Reference, the "text_color" parameter allows you to specify the color of the text of the applet. In this case, the text color of the applet is set to #000000 (black).

<PARAM NAME="background_color" VALUE="#FFFFFF">

This line specifies a value of "#FFFFFF" for the "background_color" parameter. As defined in the uShop^TM Applet Reference, the "background_color" parameter allows you to specify the color of the background of the applet, in general. In this case, the background color of the applet is set to #FFFFFF (white) in order to match the background color of the HTML page.

</APPLET>

This </APPLET> tag is the standard HTML syntax for indicating the end of an applet.

9. Adding Yet Another Input Applet

The steps in this section show how to add yet another Input Applet to the example store. Note, however, that uShop^TM comes with a large variety of Input Applets to handle all sorts of options and pricing for your store. See the uShop^TM Applet Reference for a complete list of uShop's applets.

STEP 18 - The file "tutorial_page2.html" should still be open from the steps in the previous section, so to add another Input Applet, locate the following line of HTML code:

(The Input Applet for product 5 will go here.)

and replace it with the following lines:

<APPLET CODE="uShopInput13.class" CODEBASE="../classes/" WIDTH=400 HEIGHT=80>
<PARAM NAME="name"               VALUE="Part">
<PARAM NAME="description"        VALUE="Electronic component">
<PARAM NAME="text_label"         VALUE="Part Number">
<PARAM NAME="weight"             VALUE="0">
<PARAM NAME="qty"                VALUE="1">
<PARAM NAME="show_qty"           VALUE="YES">
<PARAM NAME="min_price"          VALUE="$ 0.00">
<PARAM NAME="show_total"         VALUE="YES">
<PARAM NAME="classification"     VALUE="NONE">
<PARAM NAME="shipping_modifier"  VALUE="$0.00">
<PARAM NAME="taxable"            VALUE="YES">
<PARAM NAME="popup"              VALUE="NO">
<PARAM NAME="text_color"         VALUE="#000000">
<PARAM NAME="background_color"   VALUE="#FFFFFF">
</APPLET>

STEP 19 - Save the file and startup the store as we did in STEP 1 of this tutorial. (If your browser is already running, you many need to exit the browser and restart it to reload the newly modified page.)

You will notice by looking at page 2 that there is now a second applet on the page. This applet is actually a special applet for allowing customers to enter the desired part number, price, and quantity. It can be useful if you do not want to add a separate Input Applet for every item in your store.

Taking a closer look at the lines you just added:

<APPLET CODE="uShopInput13.class" CODEBASE="../classes/" WIDTH=400 HEIGHT=80>

This line uses the standard HTML <APPLET> tag to add an applet called "uShopInput13.class" to the page. The "CODEBASE" setting indicates that the class file is located in the relative directory "../classes/". The "WIDTH=400" and "HEIGHT=80" settings indicate to make the applet 400 pixels wide and 80 pixels high.

<PARAM NAME="name" VALUE="Golf Balls">

This line specifies a value of "Part" for the "name" parameter. As defined in the uShop^TM Applet Reference, the "name" parameter corresponds to the name of the product that gets added to the shopping cart each time this applet's "Add" button is pressed. (Note that a generic name of "Part" was used here since the customer will actually be entering what part it is.)

<PARAM NAME="description" VALUE="Electronic component">

This line specifies a value for the "description" parameter. As defined in the uShop^TM Applet Reference, the "description" parameter corresponds to a brief description of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="text_label" VALUE="Part Number">

This line specifies a value of "Part Number" for the "text_label" parameter. As defined in the uShop^TM Applet Reference, the "text_label" parameter corresponds to the label that will appear next to the Product ID entry box. In this case, the text "Part Number" will appear as the label next to the Product ID entry box.

<PARAM NAME="weight" VALUE="0">

This line specifies a value of 0 for the "weight" parameter. As defined in the uShop^TM Applet Reference, the "weight" parameter corresponds to the weight of the product that gets added to the shopping cart each time this applet's "Add" button is pressed.

<PARAM NAME="qty" VALUE="1">

This line specifies a value of "1" for the "qty" parameter. As defined in the uShop^TM Applet Reference, the "qty" parameter is the default quantity used when adding an item to the shopping cart. In this case, a value of "1" will be the initial quantity displayed in the quantity entry box.

<PARAM NAME="show_qty" VALUE="YES">

This line specifies a value of "YES" for the "show_qty" parameter. As defined in the uShop^TM Applet Reference, the "show_qty" parameter is used to specify whether or not to display a quantity entry box on the applet. In this case, a quantity entry box is displayed since the value is set to "YES".

<PARAM NAME="min_price" VALUE="$ 0.00">

This line specifies a value as "$ 0.00" for the "min_price" parameter. As defined in the uShop^TM Applet Reference, the "min_price" parameter corresponds to the minimum price that the customer can enter for the product.

<PARAM NAME="show_total" VALUE="YES">

This line specifies a value of "YES" for the "show_total" parameter. As defined in the uShop^TM Applet Reference, the "show_total" parameter is used to specify whether or not to display the current total based on the price entered and the quantity specified. In this case, the total is displayed since the value is set to "YES".

<PARAM NAME="classification" VALUE="NONE">

This line specifies a value of "NONE" for the "classification" parameter. As defined in the uShop^TM Applet Reference, the "classification" parameter corresponds to the classification (if any) of the product that gets added to the shopping cart each time this applet's "Add" button is pressed. Note that the "classification" parameter will normally be set to "NONE" unless you are setting up a price table as described in the uShop^TM Applet Reference.

<PARAM NAME="shipping_modifier" VALUE="$0.00">

This line specifies a value of "$0.00" for the "shipping_modifier" parameter. As defined in the uShop^TM Applet Reference, the "shipping_modifier" parameter corresponds to any shipping cost modifiers that are to be associated with the product that gets added to the shopping cart each time this applet's "Add" button is pressed. Note that typically the "shipping_modifier" parameter will be set to "$0.00"...unless you want to add any extra shipping fee for a particular product. See the description of the "shipping_modifier" parameter in the uShop^TM Applet Reference for more information.

<PARAM NAME="taxable" VALUE="YES">

This line specifies a value of "YES" for the "taxable" parameter. As defined in the uShop^TM Applet Reference, the "taxable" parameter corresponds to whether the product is taxable or not. In this case, the product will be taxed since the value is set to "YES" (taxable).

<PARAM NAME="popup" VALUE="NO">

This line specifies a value of "NO" for the "popup" parameter. As defined in the uShop^TM Applet Reference, the "popup" parameter corresponds to whether or not to display a popup window whenever the "Add" button has been pressed and the item has been added to the virtual shopping cart. In this case, a popup window will NOT be displayed when the "Add" button is pressed.

<PARAM NAME="text_color" VALUE="#000000">

This line specifies a value of "#000000" for the "text_color" parameter. As defined in the uShop^TM Applet Reference, the "text_color" parameter allows you to specify the color of the text of the applet. In this case, the text color of the applet is set to #000000 (black).

<PARAM NAME="background_color" VALUE="#FFFFFF">

This line specifies a value of "#FFFFFF" for the "background_color" parameter. As defined in the uShop^TM Applet Reference, the "background_color" parameter allows you to specify the color of the background of the applet, in general. In this case, the background color of the applet is set to #FFFFFF (white) in order to match the background color of the HTML page.

</APPLET>

This </APPLET> tag is the standard HTML syntax for indicating the end of an applet.

STEP 20 - We are now done editing the file "tutorial_page2.html", so you can close that file.

9. Adding A Large Shopping Cart Applet

The steps in this section show how to add a large shopping cart applet to the "View Cart" page.

STEP 21 - Using your favorite HTML editor, open up the file "tutorial_shoppingcart.html" for editing. If you do not have an HTML editor, any simple text editor will do (such as Note Pad).

STEP 22 - To add the large shopping cart applet to this page, locate the following line of HTML code:

(The Large Shopping Cart Applet will go here.)

and replace it with the following lines:

<APPLET CODE="uShopCart1.class" CODEBASE="../classes/" WIDTH=490 HEIGHT=340>
<PARAM NAME="columns_id"                 VALUE="9">
<PARAM NAME="columns_name"               VALUE="16">
<PARAM NAME="columns_description"        VALUE="25">
<PARAM NAME="columns_weight"             VALUE="0">
<PARAM NAME="columns_quantity"           VALUE="6">
<PARAM NAME="columns_price"              VALUE="10">
<PARAM NAME="show_subtotal"              VALUE="YES">
<PARAM NAME="list_font_size"             VALUE="12">
<PARAM NAME="list_text_color"            VALUE="#000000">
<PARAM NAME="list_background_color"      VALUE="#FFFFFF">
<PARAM NAME="background_color"           VALUE="#FFFFFF">
</APPLET>

STEP 23 - Save the file and startup the store as we did in STEP 1 of this tutorial. (If your browser is already running, you many need to exit the browser and restart it to reload the newly modified page.)

You will notice that there is now a large shopping cart applet on the "View Cart" page.

Taking a closer look at the lines you just added:

<APPLET CODE="uShopCart1.class" CODEBASE="../classes/" WIDTH=490 HEIGHT=340>

This line uses the standard HTML <APPLET> tag to add an applet called "uShopCart1.class" to the page. The "CODEBASE" setting indicates that the class file is located in the relative directory "../classes/". The "WIDTH=490" and "HEIGHT=340" settings indicate to make the applet 490 pixels wide and 340 pixels high.

<PARAM NAME="columns_id" VALUE="9">

This line specifies a value of 9 for the "COLUMNS_ID" parameter. As defined in the uShop^TM Applet Reference, the "COLUMNS_ID" parameter allows you to specify the number of columns (i.e., characters) used for the ID field in the shopping cart. In this case, the first 9 characters of the product's name will be displayed in the shopping cart applet.

<PARAM NAME="columns_name" VALUE="16">

This line specifies a value of 16 for the "COLUMNS_NAME" parameter. As defined in the uShop^TM Applet Reference, the "COLUMNS_NAME" parameter allows you to specify the number of columns (i.e., characters) used for the NAME field in the shopping cart. In this case, the first 16 characters of the product's name will be displayed in the shopping cart applet.

<PARAM NAME="columns_description" VALUE="25">

This line specifies a value of 16 for the "COLUMNS_DESCRIPTION" parameter. As defined in the uShop^TM Applet Reference, the "COLUMNS_DESCRIPTION" parameter allows you to specify the number of columns (i.e., characters) to display on each line for the DESCRIPTION field in the shopping cart. If the description is longer than the value specified here, then the description will automatically be wrapped to the next line the shopping cart. In this case, every 25 characters of the product's description will be displayed on it's own line in the shopping cart.

<PARAM NAME="columns_weight" VALUE="0">

This line specifies a value of 0 for the "COLUMNS_WEIGHT" parameter. As defined in the uShop^TM Applet Reference, the "COLUMNS_WEIGHT" parameter allows you to specify the number of columns (i.e., characters) used for the WEIGHT field in the shopping cart. In this case, the weight is actually hidden since the value is set to "0".

<PARAM NAME="columns_quantity" VALUE="6">

This line specifies a value of 6 for the "COLUMNS_QUANTITY" parameter. As defined in the uShop^TM Applet Reference, the "COLUMNS_QUANTITY" parameter allows you to specify the number of columns (i.e., characters) used for the QUANTITY field in the shopping cart. In this case, the first 6 characters of the product's quantity will be displayed in the shopping cart applet.

<PARAM NAME="columns_price" VALUE="10">

This line specifies a value of 10 for the "COLUMNS_PRICE" parameter. As defined in the uShop^TM Applet Reference, the "COLUMNS_PRICE" parameter allows you to specify the number of columns (i.e., characters) used for the PRICE field in the shopping cart. In this case, the first 10 characters of the product's price will be displayed in the shopping cart applet.

<PARAM NAME="show_subtotal" VALUE="YES">

This line specifies a value of "YES" for the "SHOW_SUBTOTAL" parameter. As defined in the uShop^TM Applet Reference, the "SHOW_SUBTOTAL" parameter allows you to specify whether or not to display the subtotal in the shopping cart. Since this is parameter is set to "YES", the subtotal is displayed in the shopping cart.

<PARAM NAME="list_font_size" VALUE="12">

This line specifies a value of 12 for the "LIST_FONT_SIZE" parameter. As defined in the uShop^TM Applet Reference, the "LIST_FONT_SIZE" parameter allows you to specify the font size of this large shopping cart. In this case, a font size of 12 is used.

<PARAM NAME="list_text_color" VALUE="#000000">

This line specifies a value of "#000000" for the "LIST_TEXT_COLOR" parameter. As defined in the uShop^TM Applet Reference, the "LIST_TEXT_COLOR" parameter allows you to specify the color of the text shown in this large shopping cart. In this case, a font color of #000000 (black) is used.

<PARAM NAME="list_background_color" VALUE="#FFFFFF">

This line specifies a value of "#FFFFFF" for the "LIST_BACKGROUND_COLOR" parameter. As defined in the uShop^TM Applet Reference, the "LIST_BACKGROUND_COLOR" parameter allows you to specify the color of the background behind the text in the large shopping cart. In this case, the background color of the shopping cart list is set to #FFFFFF (white).

<PARAM NAME="background_color" VALUE="#FFFFFF">

This line specifies a value of "#FFFFFF" for the "BACKGROUND_COLOR" parameter. As defined in the uShop^TM Applet Reference, the "BACKGROUND_COLOR" parameter allows you to specify the color of the background of the applet, in general. In this case, the background color of the applet is set to #FFFFFF (white) in order to match the background color of the HTML page.

</APPLET>

This </APPLET> tag is the standard HTML syntax for indicating the end of an applet.

STEP 24 - We are now done editing the file "tutorial_shoppingcart.html", so you can close that file.

10. Setting Up The Order Process

Setting up the order process for your online store, involves three main steps/components:

Setting up the uShopOrderButton applet as the means for customers to initiate the order process.
Creating/Customizing the order form template (order_template.html).
Configuring/Installing the uShop Perl CGI script (ushop.pl).

10.1 uShopOrderButton Applet

The uShopOrderButton Applet is the means by which customers can initiate the order process. That is, the uShopOrderButton Applet will appear as a button (or whatever image you specify) on the "Place Order" page. Once the customer presses that button, the order process is initiated and the uShop Perl CGI script (ushop.pl) takes over the final steps of securely collecting the customer's personal and payment information. In the next couple steps of this tutorial, we will add the "uShopOrderButton" to the "Place Order" page.

STEP 25 - Using your favorite HTML editor, open up the file "tutorial_orderform.html" for editing. If you do not have an HTML editor, any simple text editor will do (such as Note Pad).

STEP 26 - To add the uShopOrderButton applet to this page, locate the following line of HTML code:

(The Order Button Applet will go here.)

and replace it with the following lines:

<APPLET CODE="uShopOrderButton.class" CODEBASE="../classes/" WIDTH=206 HEIGHT=76>
<PARAM NAME="image"                        VALUE="example_order_button.gif">
<PARAM NAME="color1"                       VALUE="#FFFFFF">
<PARAM NAME="color2"                       VALUE="#0000FF">
<PARAM NAME="instructions"                 VALUE="Please take a moment to review the contents of your 
                                                  shopping cart. Press <B>BACK</B> to make changes or 
                                                  press <B>CONTINUE</B> to continue with the order process.">
<PARAM NAME="continue_button_label"        VALUE=" Continue ">
<PARAM NAME="continue_button_instructions" VALUE="Click here to <B>Continue</B> the order process.">
<PARAM NAME="back_button_label"            VALUE="  << Back  ">
<PARAM NAME="back_button_instructions"     VALUE="Click here to <B>Go Back</B> and make changes to your order.">
<PARAM NAME="cart_font"                    VALUE="Verdana,Arial,Helvetica">
<PARAM NAME="cart_font_color"              VALUE="#000000">
<PARAM NAME="cart_background_color"        VALUE="#FFFFFF">
<PARAM NAME="cart_title_color"             VALUE="#B3D9FF">
<PARAM NAME="script_url"                   VALUE="https://www.uburst.com/cgi-bin/ushop/ushop.pl">
</APPLET>

Taking a closer look at the lines you just added:

<APPLET CODE="uShopOrderButton.class" CODEBASE="../classes/" WIDTH=206 HEIGHT=76>

This line uses the standard HTML <APPLET> tag to add an applet called "uShopOrderButton.class" to the page. The "CODEBASE" setting indicates that the class file is located in the relative directory "../classes/". The "WIDTH=206" and "HEIGHT=76" settings indicate to make the applet 206 pixels wide and 76 pixels high.

<PARAM NAME="image" VALUE="example_order_button.gif">

This line specifies a value of "example_order_button.gif" for the "image" parameter. As defined in the uShop^TM Applet Reference, the "image" parameter allows you to specify the image that will be displayed by this applet. In this case, the image "example_order_button.gif" located in the default "classes" directory is specified.

<PARAM NAME="color1" VALUE="#FFFFFF">

This line specifies a value of "#FFFFFF" (white) for the "color1" parameter. As defined in the uShop^TM Applet Reference, the "color1" parameter allows you to specify the default color of the border drawn around the specified image. In this case, a value of "#FFFFFF" is specified to match the background color of the page.

<PARAM NAME="color2" VALUE="#0000FF">

This line specifies a value of "#0000FF" (blue) for the "color2" parameter. As defined in the uShop^TM Applet Reference, the "color2" parameter allows you to specify the border color when the mouse cursor is on top of this applet. In this case, a value of "#0000FF" (blue) is specified.

<PARAM NAME="instructions" VALUE="Please take a moment to review the contents of your shopping cart. Press BACK to make changes or press CONTINUE to continue with the order process.">

As defined in the uShop^TM Applet Reference, this line specifies the instructions that will appear on the first page of the order process. Note that HTML tags may be used in these instructions.

<PARAM NAME="continue_button_label" VALUE=" Continue ">

As defined in the uShop^TM Applet Reference, this line specifies the label that will appear on the "continue" button on the first page of the order process.

<PARAM NAME="continue_button_instructions" VALUE="Click here to Continue the order process.">

As defined in the uShop^TM Applet Reference, this line specifies the instructions that will appear next to the "continue" button on the first page of the order process. Note that HTML tags may be used in these instructions.

<PARAM NAME="back_button_label" VALUE=" << Back ">

As defined in the uShop^TM Applet Reference, this line specifies the label that will appear on the "back" button on the first page of the order process.

<PARAM NAME="back_button_instructions" VALUE="Click here to Go Back and make changes to your order.">

As defined in the uShop^TM Applet Reference, this line specifies the instructions that will appear next to the "back" button on the first page of the order process. Note that HTML tags may be used in these instructions.

<PARAM NAME="cart_font" VALUE="Verdana,Arial,Helvetica">

As defined in the uShop^TM Applet Reference, this line specifies the font that will be used on all HTML versions of the shopping cart that are displayed during the order process.

<PARAM NAME="cart_font_color" VALUE="#000000">

As defined in the uShop^TM Applet Reference, this line specifies the font color that will be used on all HTML versions of the shopping cart that are displayed during the order process.

<PARAM NAME="cart_background_color" VALUE="#FFFFFF">

As defined in the uShop^TM Applet Reference, this line specifies the background color that will be used on all HTML versions of the shopping cart that are displayed during the order process.

<PARAM NAME="cart_title_color" VALUE="#B3D9FF">

As defined in the uShop^TM Applet Reference, this line specifies the color that will be used for the column headers of all HTML versions of the shopping cart that are displayed during the order process.

<PARAM NAME="script_url" VALUE="https://www.uburst.com/cgi-bin/ushop/ushop.pl">

This line specifies a value for the "script_url" parameter. As defined in the uShop^TM Applet Reference, the "script_url" parameter allows you to specify the URL of the ushop.pl script on the your secure server. For this example/tutorial, it is set to just link to our website, but you will need to install the script on your server for your online store. See Section 10 in the uShop^TM User's Guide for more information about setting up the ushop.pl Perl script on your server.

</APPLET>

This </APPLET> tag is the standard HTML syntax for indicating the end of an applet.

STEP 27 - Save and close the "tutorial_orderform.html" file.

10.2 order_template.html

The "order_template.html" file is a template file for your order form. You can design this form to look almost anyway you want and to contain any fields you want ... using standard HTML. That is, providing you follow just a few simple guidelines, you can setup your order form to look virtually any way you want. For this tutorial, we will be using the example "order_template.html" file that is located on our https://www.uburst.com/ server, but you can create/customer the template however you like for use on your server. To see detailed instructions on how to modify or create your own "order_template.html" file, refer to Section 9 in the uShop^TM User's Guide.

10.3 The uShop^TM Perl CGI Script

The final steps of the order process are securely handled via uShop's Perl CGI script (ushop.pl), so you will need to install this script on your server for use with your store. Installation of this script is simple, however, it is beyond the scope of this tutorial. Refer to Section 10 in the uShop^TM User's Guide for more information about setting up the ushop.pl script on your server. For this tutorial, we will just be linking to the ushop.pl script installed on our server at https://www.uburst.com/cgi-bin/ushop/ushop.pl.

10.4 Putting Everything Together

STEP 28 - Start up the online by opening the "index.html" file in your browser. Go ahead and add some items to the cart and then try out the whole order process to see how it all works.

11. Summary

This concludes the uShop^TM Tutorial. For additional information, see the references listed below:

The uShop^TM Applet Reference

The uShop^TM User's Guide

The uShop^TM Programmer's Guide

The uShop^TM Reference Site