ASP.NET 2.0 Everyday Apps For Dummies (2006)

118 Part III: Building E-Commerce Applications

Adding some test data

When you run the CreateProduct script, the database will be created, but it will be empty. Your online store will look pretty bare! To add some test data, run the InsertProducts.sql script that’s included on this book’s CD along with the CreateProduct.sql script. It creates the sample data shown in Tables 5-4, 5-5, and 5-6. (Note that to keep Table 5-5 presentable, I omitted the shorttext and longtext columns. Don’t worry — the script does create data for these columns.)

To run the script, open a command window, change to the directory that contains the script, and then run this command:

sqlcmd -S localhost\SQLExpress -i InsertProducts.sql

Once again, you’ll need to change the server name if you’re not running SQL

Server Express on your own computer.

You’ll know the script works if you see a series of messages like this one:

(1 rows affected)

120 Part III: Building E-Commerce Applications

The query to retrieve all rows from the Categories table uses this SQL statement:

SELECT catid, name, [desc]

FROM Categories ORDER BY name

Note that because desc is a SQL keyword, it must be enclosed in brackets. (Some SQL programmers like to enclose all column names in brackets just to be safe.)

The query to retrieve the featured product rows requires a join to retrieve data from the FeaturedProducts table as well as the Products table:

SELECT FeaturedProducts.productid,

FeaturedProducts.featuretext,

FeaturedProducts.saleprice,

Products.name,

Products.price

FROM FeaturedProducts

INNER JOIN Products

ON FeaturedProducts.productid = Products.productid

This query retrieves all rows from the FeaturedProducts table, and joins the corresponding rows from the Products table to get the name and price columns.

The query to retrieve the products for a given category also requires a join:

SELECT Products.productid,

Products.catid,

Products.name,

Products.shorttext,

Products.longtext,

Products.price,

Products.image,

Products.thumbnail,

FeaturedProducts.saleprice

FROM Products

LEFT OUTER JOIN FeaturedProducts

ON Products.productid = FeaturedProducts.productid

WHERE (Products.catid = @catid)

Chapter 5: Building a Product Catalog Application 121

Here, the outer join retrieves data from the FeaturedProducts table and provides nulls for the saleprice column of any product that doesn’t have a row in the FeaturedProducts table. Notice also that the WHERE clause specifies a parameter. As you’ll see later in this chapter, the @catid parameter will be set to the category ID value selected by the user via the drop-down list.

The last query used by the program retrieves the data for a specific product:

SELECT Products.productid, Products.catid, Products.name, Products.shorttext, Products.longtext, Products.price, Products.image, FeaturedProducts.saleprice, FeaturedProducts.featuretext

FROM Products

LEFT OUTER JOIN FeaturedProducts

ON Products.productid = FeaturedProducts.productid WHERE (Products.productid = @productid)”

Here, a parameter named @productid indicates which product to retrieve. This parameter’s value will be obtained from the prod query string field that’s passed to the Product.aspx page.

Notice also that an outer join is used to retrieve the saleprice and featuretext columns from the FeaturedProducts table. If there is no corresponding product in the FeaturedProducts table, these columns will be set to null.

Connecting to the database

The connection string used to access the Products database is stored in the application’s web.config file, like this:

<connectionStrings>

<add name=”ConnectionString” connectionString=”Data

Source=localhost\SQLExpress;

Initial Catalog=Products;Integrated Security=True”/> </connectionStrings>

122 Part III: Building E-Commerce Applications

These lines should go right after the opening <system.web> tag in the web. config file. Note that the connection string is the only place in the application that references the database name and the server information. As a result, you can move the database to a different server or use a different database simply by changing the connection string specified in the web.config file.

The Application’s Folders

Like most ASP.NET applications, the Product Catalog application includes several folders. The following folders are particularly important:

(Root): The application’s root folder contains the application’s three pages (Default.aspx, Product.aspx, and Cart.aspx) as well as the Master Page (Default.master).

App_Data: This folder is created by default by Visual Studio when the application is created. However, because the database may be used by other applications, it’s stored in a folder that isn’t part of the application’s folder hierarchy.

Images: This folder contains the banner graphic that’s displayed by the Master Page as well as image files that picture the various products. For each product, the Images folder contains two image files: one is a larger image that’s approximately 200 pixels square; the other is a thumbnail image that’s about 30 pixels square. Note that not all the images are perfectly square. For the rectangular images, the height is held at 200 pixels (or less) for the large image and 30 pixels for the thumbnail images.

Building the Master Page

Listing 5-2 shows the code for the master page (MasterPage.master), which is used by both the Default.aspx and the Product.aspx pages. It simply displays a banner at the top of each page. In an actual application, you’d probably want to provide a more developed Master Page. But for this application, the simple Master Page shown here will do.

Listing 5-2: The Master Page (MasterPage.master)

<%@ Master Language=”C#”

AutoEventWireup=”true” 1

CodeFile=”MasterPage.master.cs”

Inherits=”MasterPage” %>

Chapter 5: Building a Product Catalog Application 123

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” > <head runat=”server”>

<title>Acme Pirate Supply</title> </head>

<body>

<form id=”form1” runat=”server”> <div>

<img src=”Images/Banner.jpg” /> 2 <br /><br />

<asp:contentplaceholder 3 id=”ContentPlaceHolder1” runat=”server”>

</asp:contentplaceholder>

</div>

</form>

</body>

</html>

The following paragraphs describe the key lines of the Master Page:

1 The Master directive identifies the file as a Master Page.

2 The Image control displays a banner image at the top of each page. The Banner.jpg file is stored in the Images folder.

3 The ContentPlaceHolder control provides the area where the content for the application’s content pages will be displayed.

Building the Product List Page

The Product List page (Default.aspx) is the default page for the Product Catalog application. It displays a drop-down list that lets the user select a product category as well as a list of all products for the category selected by the user. In addition, this page displays a list of all featured products.

The Product List page includes the following controls:

DataList1: A DataList control that lists the products in the FeaturedProducts table. The DataList control is a templated control that renders an instance of its ItemTempate for each row in the data source. The controls in the ItemTemplate can use special binding expressions to bind to data in the data source. The ItemTemplate for this DataList control contains the following bound controls:

126 Part III: Building E-Commerce Applications

Listing 5-3 (continued)