CGI and Perl

Setting Up Your Order Page

The order page probably has the most raw HTML code. This page defines all the fields pertaining to customer information, as well as a list of items to be ordered. Fortunately, MiniVend maintains the item list for you, and you can extract it by using a few simple MiniVend tags. You define the customer input fields, which are contained in your order reports. You can maintain persistent values for these fields by using the [value] tag. This means that when a user fills out the order form page, leaves it to find another item, and then comes back to the order page, all the information he or she originally entered is not lost. The order page code is shown in Listing 13.5.

Listing 13.5. The order page.

<HTML><HEAD>
 <TITLE>Place an Order</TITLE>
 </HEAD>
 <BODY>
 <H1>Place an Order</H1>
 <FORM ACTION="[process-order]" METHOD=POST>
 <H2>Items to be ordered</H2>
 <PRE>
 [item-list]
 [row 80]
    [col 10]
       [item-code]
    [/col]
    [col align=i width=10 gutter=1]
       <input type="text" name=[quantity-name] value="[item-quantity]" size=4>
    [/col]
    [col 40]
       [item-description]
    [/col]
    [col 16 align=r]
       $[item-price]
    [/col]
 [/row]
 [/item-list]
 [row 80]
    [col 10][/col]
    [col 10][/col]
    [col width=40 align=r wrap=no]
       SUBTOTAL
    [/col]
    [col width=16 align=r]
       [subtotal]
    [/col]
 [/row]
 [row 80]
    [col 10][/col]
    [col 10][/col]
    [col width=40 align=r wrap=no]
       Sales Tax
    [/col]
    [col width=16 align=r]
       [salestax]
    [/col]
 [/row]
 [row 80]
    [col 10][/col]
    [col 10][/col]
    [col width=40 align=r wrap=no]
       Shipping
    [/col]
    [col width=16 align=r]
       [shipping]
    [/col]
 [/row]
 [row 80]
    [col 10][/col]
    [col 10][/col]
    [col width=40 align=r wrap=no]
       TOTAL
    [/col]
    [col width=16 align=r]
       [total-cost]
    [/col]
 [/row]
 </PRE>
 <I>(If you wish to cancel the order on an item, simply enter
 "0" in the quantity field of that item.)</I>
 <P>
 <I>
 (If you change the quantity field of an item, you can recalculate the
 new total by selecting "Refresh" below).
 </I>
 <P>
 <B>Shipping via</B>
 <INPUT TYPE=RADIO NAME=mv_shipmode
 VALUE=UPSG [checked mv_shipmode UPSG]> UPS Ground
 <INPUT TYPE=RADIO NAME=mv_shipmode
 VALUE=UPSB [checked mv_shipmode UPSB]> UPS Blue
 <INPUT TYPE=RADIO NAME=mv_shipmode
 VALUE=UPSR [checked mv_shipmode UPSR]> UPS Red
 <P>
 <CENTER>
 <input type="hidden" name="mv_doit" value="refresh">
 <input type="hidden" name="mv_order_report" value="report">
 <input type="submit" name="mv_todo" value="Submit Order">
 <input type="submit" name="mv_todo" value="Refresh">
 <input type="submit" name="mv_todo" value="Cancel">
 </CENTER>
 <H2>Shipping and Billing Information</H2>
 <PRE>
 * Name            <input type="text" name="name"
                    value="[value name]" size=40>
   Company Name    <input type="text" name="company"
                    value="[value company]" size=40>
   Email Address   <input type="text" name="email"
                    value="[value email]" size=40>
 * Billing address <input type="text" name="address"
                    value="[value address]" size=40>
 * City            <input type="text" name="city"
                    value="[value city]" size=20>
 * State/Province  <input type="text" name="state"
                    value="[value state]" size=10>
 * Zip/Postal Code <input type="text" name="zip"
                    value="[value zip]" size=10>
 * Country         <input type="text" name="country"
                    value="[value country]" size=20>
   Daytime Phone   <input type="text" name="phone_day"
                    value="[value phone_day]" size=16>
   Evening Phone   <input type="text" name="phone_night"
                    value="[value phone_night]" size=16>
 </PRE>
 <P>
 <B>*</B> <I>
 These fields are required for us to be able to place your order
 </I>
 <P>
 <HR>
 <CENTER>
 <H2> Shipping Address</H2>
 <I>(if different than the billing address)</I>
 </CENTER>
 <PRE>
   Address          <input type="text" name="s_address"
                     value="[value s_address]" size=40>
   City             <input type="text" name="s_city"
                     value="[value s_city]" size=20>
   State/Province   <input type="text" name="s_state"
                     value="[value s_state]" size=10>
   Zip/Postal Code  <input type="text" name="s_zip"
                     value="[value s_zip]" size=10>
   Country          <input type="text" name="s_country"
                     value="[value s_country]" size=20><p>
 </PRE>
 <P>
 <CENTER>
 <input type="submit" name="mv_todo" value="Submit Order" checked>
 <input type="submit" name="mv_todo" value="Refresh Page">
 <input type="submit" name="mv_todo" value="Cancel">
 </CENTER>
 </FORM>
 <P>
 </BODY></HTML>

As you can see, this page contains the most information of all the MiniVend pages. The page starts with a list of items that are being ordered. This list is specified using the [item-list], which is similar to the [search-list] tag you saw earlier. The difference is that this list contains those items the customer has placed in his or her shopping cart rather than a list obtained from searching the database. The semantics of how this tag works are the same. Within the [item-list], you again see the [item-code], [item-description], and [item-price] tags. One new tag contained within this list is [item-quantity], which is a user-specified value. To cancel the order of an item, the user must enter a zero in this field as the informational text describes.

You might be curious about the [row] and [col] tags. They are general formatting tags provided by MiniVend for displaying a table look within a preformatted text <PRE> section of your HTML. The value specified in the [row] tag tells the number of total columns in the row. Each column can then be given a certain size and alignment. For more detailed information, refer to the MiniVend documentation.

Of more importance are the [subtotal], [salestax], [shipping], and [total-cost] tags. These tags demonstrate the power and simplicity of MiniVend. A large part of the MiniVend package deals with the dynamic creation of HTML based on your product database; the other, perhaps even more useful, part deals with maintaining the running subtotals, tax, and shipping costs. The subtotal is a fairly easy one to figure out by simply adding up the item prices while taking quantity into account. The tax is figured using a special database file called salestax.asc. Tax percentage is looked up using the state or optionally the zip code. A default percentage, which is normally 0, also is supplied. You can even designate certain items to be tax exempt by specifying a NonTaxableField in your minivend.cfg file and setting that field value to true for the tax-exempt item.

Shipping can be determined based on a field designated with the CustomShipping variable in the minivend.cfg file. In this example, you use the weight field. This field value is then used in conjunction with the shipping cost database, which is another ASCII database file with the following fields:

  • code: A unique identifier for the shipping method.
  • description: Description of the shipping method, accessed using the [shipping_description] tag
  • criteria: The criteria for shipping charge (for example, weight, quantity, or country). This field is for information only; it is not used by MiniVend for any calculations.
  • minimum: The low bound of quantity or weight to which this entry applies.
  • maximum: The high bound of quantity or weight to which this entry applies.
  • cost: The total shipping cost (specified as a formula if it begins with "f" or as a multiplier if it begins with "x").

The customer chooses the shipping method by using the radio buttons listed in this example under Shipping Via. You can specify a default shipping by using the DefaultShipping variable in the minivend.cfg file. The [total-cost] is then calculated by adding up all these values. Figure 13.6 shows the section of the form containing a list of items that have been ordered.

Figure 13.6. The ordered items part of the order form.

The remaining HTML in this example is simply the order form for gathering information from the customer. The only MiniVend tag used within this text is the [value] tag, which was described previously. This form is contained within a preformatted text <PRE> section for better alignment. Figure 13.7 shows this form as it appears in your Web browser. Again, you can include as many fields as you find necessary. MiniVend imposes no restrictions on the kind of data you can request from your customers.

Figure 13.7. The customer information part of the order form.