ASP.NET 2.0 Everyday Apps For Dumies 2006 phần 4 doc

The following paragraphs describe some of the more interesting details about

this page:

Like the Product List page, this page also uses the default.Master Page

as its Master Page. However, I scrolled down a bit to show the entire

contents of the page. As a result, the banner that appears at the top of

the page isn’t visible in the figure.

Because this product is listed as one of the featured products, its sale

price is shown.

The buttons at the bottom of the page let the user add the current prod￾uct to the shopping cart or return to the Product List page.

Notice that the URL that appears in the browser’s address bar includes

two query string fields: prod=sword01 and cat=weap. The first field

indicates which product the user selected in the Product List page. The

Product Detail page uses this field to retrieve the correct product from

the database. The second field saves the category selected by the user

on the Product List page (the Product Detail page doesn’t use this field).

However, if the user clicks the Back to List button to return to the Product

List page, the cat field is passed back to the Product List page. Then the

Product List page uses it to select the category that the user had previ￾ously selected.

Figure 5-3:

The Product

Detail page.

110 Part III: Building E-Commerce Applications

11_597760 ch05.qxp 1/11/06 9:55 PM Page 110

The Cart page

This application provides a dummy Cart page, as shown in Figure 5-4. As you

can see, this page simply indicates that the shopping cart function hasn’t yet

been implemented. For an implementation of the shopping-cart page, refer to

the next chapter.

Notice that the URL in this figure includes a query string that indicates which

product the user wants to add to the cart. The dummy Cart page used in

this application doesn’t do anything with this query string — but the actual

Shopping Cart application (presented in Chapter 6) has plenty of use for it.

Designing the Product

Catalog Application

The Product Catalog Application is designed to be simple enough to present

in this book, yet complicated enough to realistically address some of the

design considerations that go into this type of application. There are several

important decisions that need to be made for any application of this sort.

Figure 5-4:

The Cart

page.

Chapter 5: Building a Product Catalog Application 111

11_597760 ch05.qxp 1/11/06 9:55 PM Page 111

For example, how will the database be designed to store the product informa￾tion? In particular, how will the database represent products and categories,

and how will the products featured on sale be represented? In addition, the

database design must address how images of the product will be accessed.

For more details on the database design for this application, refer to the sec￾tion “Designing the Product Database” later in this chapter.

Another important aspect of the design is how the application keeps track of

the state information, such as which product the user is viewing. For exam￾ple, when the user chooses to see more detail for a specific product, how will

the application pass the selected product from the Product List page to the

Product Detail page so the Product Detail page knows which product to display?

And how will the application remember which product category was being

viewed, so the same category can be redisplayed when the user returns to

the Product List page?

Although there are several alternatives for storing this type of state informa￾tion in ASP.NET, this application saves the product and category information

in query strings appended to the end of the URLs used to request the applica￾tion’s pages. Two query-string fields are used:

prod: Passes the ID of the product to be displayed by the Product

Detail page.

cat: Passes the ID of the category that’s selected on the Product List page.

For example, suppose the user selects the Weapons category and clicks the

View link for the first sword. Then the URL used to display the Product.aspx

page will look like this:

~\Product.aspx?prod=sword01&cat=weap

Here, the ID of the product to be displayed is sword01 and the ID of the

selected category is weap.

If the user clicks the Back to List button, the application returns to the

Default.aspx page via the following URL:

~\Default.aspx?cat=weap

That way, the Default.aspx page will know to set the category drop-down

list to Weapons.

If, on the other hand, the user clicks the Add to Cart button to order the

product, this URL will be used to display the Cart.aspx page:

~\Product.aspx?prod=sword01&cat=weap

112 Part III: Building E-Commerce Applications

11_597760 ch05.qxp 1/11/06 9:55 PM Page 112

Thus, the product and category ID values are passed from the Product.aspx

page to the Cart.aspx page. (For more information about what the actual

Cart page does with these values, refer to Chapter 6.)

Note that when the application is first started, the URL used to display

the Default.aspx page doesn’t include any query strings. As a result, the

Default.aspx page is designed so that if it isn’t passed a cat query-string

field, it defaults to the first category.

Designing the Product Database

The Product Catalog application requires a database to store the information

about the products to be displayed. Figure 5-5 shows a diagram of the database.

As you can see, it consists of three tables:

Categories

Products

FeaturedProducts

The following sections describe the details of each of these tables.

The Categories table

The Categories table contains one row for each category of product repre￾sented in the database. Table 5-1 lists the columns defined for this table.

Categories

catid

name

[desc]

Products

productid

catid

name

shorttext

longtext

price

thumbnail

image

FeaturedProducts

productid

featuretext

saleprice

Figure 5-5:

The Product

Catalog

application’s

database.

Chapter 5: Building a Product Catalog Application 113

11_597760 ch05.qxp 1/11/06 9:55 PM Page 113

Table 5-1 The Categories Table

Column name Type Description

catid VARCHAR(10) An alphanumeric code (up to 10 characters)

that uniquely identifies each category. This is

the primary key for the Categories table.

name VARCHAR(50) A text field that provides the name of the

category.

desc VARCHAR(MAX) A text field that provides a description of the

category.

The Products table

The Products table contains one row for each product represented in the

database. Table 5-2 lists the columns used by the Products table.

Table 5-2 The Products Table

Column name Type Description

productid VARCHAR(10) An alphanumeric code (up to 10 characters)

that uniquely identifies each product. This is

the primary key for the Products table.

catid VARCHAR(10) A code that identifies the product’s category.

A foreign-key constraint ensures that only

values present in the Categories table

can be used for this column.

name VARCHAR(50) A text field that provides the name of the

product.

shorttext VARCHAR(MAX) A text field that provides a short description

of the product.

longtext VARCHAR(MAX) A text field that provides a longer description

of the product.

price MONEY The price for a single unit of the product.

thumbnail VARCHAR(40) The name of the thumbnail image file.

image VARCHAR(40) The name of the main image file.

114 Part III: Building E-Commerce Applications

11_597760 ch05.qxp 1/11/06 9:55 PM Page 114