ch13.htm

Web_Programming_with_Perl5,一个不错的Perl语言教程。

<BR>

</TT><A HREF="14wpp02.jpg" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/14wpp02.jpg"><TT><B>Figure 13.2.</B></TT></A> The description

search page. <BR>

<BR>

The next page to look at is the browse page. The code for it is shown in Listing

13.3. This page is similar to the <TT>descsrch</TT> page except that it gives the

user some categories from which to choose. Many of the MiniVend tags may look familiar

to you after seeing the search page.

<H3 ALIGN="CENTER"><A NAME="Heading17"></A><FONT COLOR="#000077">Listing 13.3. The

browse page.</FONT></H3>

<PRE><FONT COLOR="#0066FF">&lt;HTML&gt;&lt;HEAD&gt;

&lt;TITLE&gt;Browse the Web Shopping Network by Category&lt;/TITLE&gt;

&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt;

Browse the Web Shopping Network by Category

&lt;/H1&gt;

&lt;P&gt;

&lt;FORM ACTION=&quot;[process-search]&quot; METHOD=POST&gt;

&lt;STRONG&gt;Category&lt;/STRONG&gt;&lt;BR&gt;

&lt;SELECT NAME=&quot;mv_searchspec&quot;&gt;

   &lt;OPTION VALUE=&quot;HomeAudio$&quot;&gt; Home Audio

   &lt;OPTION VALUE=&quot;HomeVideo$&quot;&gt; Home Video

   &lt;OPTION VALUE=&quot;CarAudio$&quot;&gt; Car Audio

   &lt;OPTION VALUE=&quot;Computers$&quot;&gt; Computers

   &lt;OPTION VALUE=&quot;Accessories$&quot;&gt; Accessories

&lt;/SELECT&gt;

&lt;INPUT TYPE=HIDDEN NAME=&quot;mv_case&quot; VALUE=&quot;yes&quot;&gt;

&lt;INPUT TYPE=HIDDEN NAME=&quot;mv_orsearch&quot; VALUE=&quot;yes&quot;&gt;

&lt;INPUT TYPE=&quot;hidden&quot; NAME=&quot;mv_search_page&quot; VALUE=&quot;results&quot;&gt;

&lt;P&gt;

&lt;INPUT TYPE=&quot;submit&quot; NAME=&quot;mv_todo&quot; VALUE=&quot;Search&quot;&gt;

&lt;INPUT TYPE=&quot;hidden&quot; NAME=&quot;mv_doit&quot; VALUE=&quot;search&quot;&gt;&lt;BR&gt;

&lt;P&gt;

[finish-order]

Matches per page:

&lt;SELECT NAME=&quot;mv_matchlimit&quot;&gt;

   &lt;OPTION&gt;5

   &lt;OPTION&gt;10

   &lt;OPTION SELECTED&gt;25

   &lt;OPTION&gt;50

&lt;/SELECT&gt;&lt;BR&gt;

&lt;/FORM&gt;

Just select one or more categories you wish to browse, then press the

&lt;B&gt;Search&lt;/B&gt; button.

&lt;P&gt;

&lt;/BODY&gt; &lt;/HTML&gt;

</FONT></PRE>

<P>As you see, the only real difference with this page is the <TT>mv_searchspec</TT>

field. Rather than provide an empty text field here, you assist the user by providing

a list of categories from which to choose, as you can see in Figure 13.3. You might

be curious about the <TT>[finish-order]</TT> MiniVend tag in these last two HTML

files. I explain this tag in the next section on displaying the search results. <BR>

<BR>

<A HREF="14wpp03.jpg" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/14wpp03.jpg"><TT><B>Figure 13.3.</B></TT></A> The Browse by Category

page.

<H4 ALIGN="CENTER"><A NAME="Heading18"></A><FONT COLOR="#000077">Displaying Search

Results</FONT></H4>

<P>Now that you've seen how to set up the search pages, you need to figure out how

to display the results from the search operation. To display results, you need a

few more MiniVend tags that enable you to display a list of items. This page, coded

in Listing 13.4, can be kept fairly generic as you will see. Most of the text on

the page is filled in by MiniVend based on the contents of your product database.

<H3 ALIGN="CENTER"><A NAME="Heading19"></A><FONT COLOR="#000077">Listing 13.4. The

results display page.</FONT></H3>

<PRE><FONT COLOR="#0066FF">&lt;HTML&gt;&lt;HEAD&gt;

&lt;TITLE&gt;Search Results&lt;/TITLE&gt;

&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt;

Search Results

&lt;/H1&gt;

&lt;P&gt;

[finish-order]

&lt;P&gt;

&lt;H2&gt;

[more-list]

Matches [matches] of

[/more-list]

[value mv_search_match_count]

items found&lt;/H2&gt;

&lt;P&gt;

&lt;TABLE BORDER&gt;

&lt;TR&gt;

&lt;TH&gt;Item #&lt;/TH&gt;&lt;TH&gt;Description&lt;/TH&gt;&lt;TH&gt;&lt;/TH&gt;&lt;TH&gt;&lt;/TH&gt;&lt;TH&gt;Everyday Low Price&lt;/TH&gt;

&lt;/TR&gt;

[search-list]

&lt;TR&gt;

&lt;TD&gt;&lt;B&gt;[item_increment]&lt;/B&gt;&lt;/TD&gt;

&lt;TD&gt;[item-description]&lt;BR&gt;&lt;/TD&gt;

&lt;TD&gt;[item-link]&lt;/TD&gt;

&lt;TD&gt;[order [item-code]]&lt;STRONG&gt;Order&lt;/STRONG&gt;[/order]&lt;/TD&gt;

&lt;TD&gt;&lt;B&gt;Our Everyday Low Price $[item-price]&lt;/B&gt;&lt;p&gt;&lt;/TD&gt;

&lt;/TR&gt;

[/search-list]

&lt;/TABLE&gt;

&lt;HR&gt;

[more-list]

&lt;B&gt;There's even more to choose from!:&lt;/B&gt;&lt;BR&gt;

[more]

&lt;HR&gt;

[/more-list]

&lt;TABLE&gt;

&lt;TR&gt;

&lt;TD&gt;[page browse]Browse by Category[/page]&lt;/TD&gt;

&lt;TD&gt;[page search]Search[/page]&lt;/TD&gt;

&lt;TD&gt;[page catalog]Home[/page]&lt;/TD&gt;

&lt;/TR&gt;

&lt;/TABLE&gt;

&lt;P&gt;

&lt;/BODY&gt;&lt;/HTML&gt;

</FONT></PRE>

<P>The first tag that needs explanation here is the<TT> [finish-order]</TT> tag.

This tag inserts a link to the order page, giving the customer a quick way to place

his or her order. If no items are in the customer's shopping cart, this tag is ignored.

Another interesting tag in this page is <TT>[more-list]</TT>. This tag directly relates

to the <TT>mv_matchlimit</TT> of the previous page. It provides the user with a scrollable

list of items. Of course, this list comes into play only if the <TT>mv_matchlimit</TT>

value is exceeded. The <TT>[matches]</TT> tag displays the current range the customer

is viewing. If you've done any kind of Web searching, you should already be familiar

with this concept.</P>

<P>After displaying the number of items found using the <TT>[value]</TT> tag along

with the <TT>mv_search_match_count</TT> variable, you begin listing the items by

using the<TT> [search-list]</TT> tag. Once inside the <TT>[search-list]</TT>, you

can represent each item in any way that HTML allows. One of the best ways to display

this type of list is to use a table, as done in Listing 13.4. <TT>[item-increment]</TT>

specifies the index number of the item within the search results. <TT>[item-description]</TT>

displays the item's Description field value from your product database. <TT>[item-link]</TT>

provides a quick link to more information about that item. The way this link works

is pretty cool. You can create a page called <TT>flypage.html</TT>, which will be

the template for generating this page on the fly from the information in your database.

The next column gives the user a link to be able to order the item. It uses the <TT>[order]</TT>

tag together with the <TT>[item-code]</TT> tag. The <TT>[order]</TT> tag provides

a link to the order page, enabling the user to place his or her order. The <TT>[item-code]</TT>

is a necessary parameter to the <TT>[order]</TT> tag, which is extracted from the

product database. This parameter tells MiniVend which item is being ordered. The

last tag within the search list is <TT>[item-price]</TT>, which, of course, displays

the price of the item as listed in the product database. Figure 13.4 shows search

results using a textual search on the database, and Figure 13.5 shows results using

a category search. <BR>

<BR>

<A HREF="14wpp04.jpg" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/14wpp04.jpg"><TT><B>Figure 13.4.</B></TT></A> The search results

from a textual search. <BR>

<BR>

<A HREF="14wpp05.jpg" tppabs="http://210.32.137.15/ebook/Web%20Programming%20with%20Perl%205/14wpp05.jpg"><TT><B>Figure 13.5.</B></TT></A> The search results

from a category search. <BR>

<BR>

You are now close to finished with your shopping site. The last major page to define

is your order page. On this page, you specify what information you want to obtain

from the customers when they place their orders and get information about items in

their virtual shopping carts.

<H4 ALIGN="CENTER"><A NAME="Heading20"></A><FONT COLOR="#000077">Setting Up Your

Order Page</FONT></H4>

<P>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 <TT>[value]</TT> 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.

<H3 ALIGN="CENTER"><A NAME="Heading21"></A><FONT COLOR="#000077">Listing 13.5. The

order page.</FONT></H3>

<PRE><FONT COLOR="#0066FF">&lt;HTML&gt;&lt;HEAD&gt;

&lt;TITLE&gt;Place an Order&lt;/TITLE&gt;

&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;H1&gt;Place an Order&lt;/H1&gt;

&lt;FORM ACTION=&quot;[process-order]&quot; METHOD=POST&gt;

&lt;H2&gt;Items to be ordered&lt;/H2&gt;

&lt;PRE&gt;

[item-list]

[row 80]

   [col 10]

      [item-code]

   [/col]

   [col align=i width=10 gutter=1]

      &lt;input type=&quot;text&quot; name=[quantity-name] value=&quot;[item-quantity]&quot; size=4&gt;

   [/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]



&lt;/PRE&gt;

&lt;I&gt;(If you wish to cancel the order on an item, simply enter

&quot;0&quot; in the quantity field of that item.)&lt;/I&gt;

&lt;P&gt;

&lt;I&gt;

(If you change the quantity field of an item, you can recalculate the

new total by selecting &quot;Refresh&quot; below).

&lt;/I&gt;

&lt;P&gt;

&lt;B&gt;Shipping via&lt;/B&gt;

&lt;INPUT TYPE=RADIO NAME=mv_shipmode