Adobe Dreamweaver CS3 Unleashed- P27 potx

Creating the Employee Store Shopping Cart Using ASP This chapter focuses on the UltraDev Shopping Cart server behavior.. Aside fromthe central UltraDev Shopping Cart server behavior, the

The next few steps outline creating a new recordset to retrieve the Employees information as well as acustomized way to create a randomized order number.

Obtaining the Customer ID

Probably the most crucial piece of the puzzle is the session variable created when the user logs in So far,you've been adding items to your cart and modifying quantities without any concern for who is purchasingthem If the user decided to purchase the items added to the cart, how would the application—or you themerchant—know to whom to send the final merchandise? Retrieving and setting that information in thecheckout page allows us to process that information and eventually create an entry for that customer withinthe Orders table Before we jump ahead of ourselves, let's look at how to retrieve the user's information intothe checkout page:

1. Before we create the recordset that will retrieve the data from the database based on the sessionvariable, let's create a new query in our database (Access/MySQL) (If you're using SQL Server, youcan create a new view.) To do this, open the vectacorp.mdb file located in the Database folder andimmediately switch to the Queries category If you're using MySQL, you'd open MySQL Query Browser.Alternatively, if you're using SQL Server 2005 Express Edition, you'd open Management Studio ExpressEdition to create a new view

2. Select the Query Design option The Show Table dialog appears

3. Select both the CreditCards and the Employees tables and click Add

4. Choose both the Employees.* and the CreditCards.* options from the field menus as shown in Figure27.16

Figure 27.16 Select both the Employees.* and the CreditCards.* options from the

field menus.

[View full size image]

5 Save the query by choosing the Save As option from the File menu and typing EmployeesCreditCards

when the Save As dialog appears Click OK to save the query

6. Close Access

7. With the checkout.asp page open, create a new recordset by choosing the Recordset option from theBinding panel's Add (+) menu The Recordset dialog appears

8 Name the new Recordset rsEmployee.

9. Select the connVectaCorp option from the Connection menu

10 Select the EmployeesCreditCards option from the Table menu This is the query that we just created in

Access

11 Create a new filter for Username and set that equal to the session variable MM_Username The result isshown in Figure 27.17 The MM_Username session variable is what's created when you log in; more onthis in the next chapter

Figure 27.17 Create a new recordset for the customer Also, add a filter that

retrieves the value from the MM_Username session.

12 Click OK to create the new recordset.

13 With the recordset created, drag all the appropriate bindings from the Bindings panel list into their

respective fields in the table The result looks similar to Figure 27.18

Figure 27.18 Drag all the data elements into their respective positions in the table.

[View full size image]

For simplicity's sake, we'll assume that Vecta Corp has credit card information on file In a real-worldscenario, however, you would most likely add text boxes here and allow the user to enter them manuallybefore checking out.

Generating an Order Number

The creation of a randomly generated order number is always a good idea This gives you a unique way ofdistinguishing the vast number of orders that you will eventually receive It also provides a way for users toreference their orders if they ever need to contact you with a question or concern You can create a

randomly generated number by inserting some simple ASP code into your page To do so, follow thesesteps:

1. Place your cursor inside the cell that will display the order number and switch to Code view

2. Insert the following code:

%

Set oTools = Server.CreateObject("MSWC.Tools")

intNum1 = Abs(oTools.Random) Mod 9 + 1

intNum2 = Abs(oTools.Random) Mod 10

intNum3 = Abs(oTools.Random) Mod 10

intNum4 = Abs(oTools.Random) Mod 10

intNum5 = Abs(oTools.Random) Mod 10

intNum = (intNum1 & intNum2 & intNum3 & intNum4 & intNum5)

Response.Write(intNum)

%>

The result of the code insertion will resemble Figure 27.19

Figure 27.19 The randomization code programmatically generates a five-digit number that we'll

store as an order number.

[View full size image]

You can test the randomized code by launching the employeestore.asp page in the browser Find an itemand immediately add it to add to your cart Click Check Out As you'll see, the randomization code

programmatically generates a five-digit number Every time the user comes to this page, the randomizationcode kicks in and a new five-digit number is generated on-the-fly

Writing to the Orders Table

The last order of business is to save all the information that the Shipping and Receiving department willneed into the Orders table To fully process orders (accept credit card numbers, automatically transfer funds

to your bank account, and so on), you would want to integrate some third-party merchant software Forsimplicity's sake, however, you are going to write all the order information to the Orders database, allowingthe Shipping and Receiving department to extract the data as they see fit and process orders accordingly Aquick review of the Orders table, shown in Figure 27.20, shows the data for which you need to account

Figure 27.20 The Orders table contains an ID from all the necessary tables.

A quick glance at the data within the table shows that only numeric values are present within the fields, andnot all of the fields contained within the checkout.asp page (name, address, city, state, and so on) Thebeauty in relationships is that they let you account for the rest of the data items in a given page by using aunique ID Later, when you want to extract all the information from a given table, you look it up by the IDcontained in the Orders table (This will make more sense toward the end of the section.) For now, let'sconcentrate on checking out the user and subsequently writing that data to the Orders table You can do this

by following these steps:

1. Review how the information will be written to the Orders table: You will use the Insert Record

behavior, but remember that the Insert Record behavior requires form objects with data in them toextract You can solve this problem by inserting hidden form fields in the checkout.asp page You willneed hidden form fields for the EmployeeID, ItemID, and Quantity fields Insert new hidden form fields

by placing your cursor next to the Checkout button and selecting Insert, Form, Hidden Field Name the

Hidden Form fields hiddenEmployeeID, hiddenItemID, and hiddenQuantity The result is shown in

3. Now that the form fields are inserted, you can create your Insert Record behavior Select InsertRecord from the Server Behaviors drop-down menu The Insert Record dialog appears.

4. Select the connVectaCorp option from the Connection menu Select the Orders option from the Insertinto Table menu Select the form1 option from the Get values from menu

5. Finally, notice how only the hidden form fields appear in the Form elements list box Match up theappropriate form objects with their respective field names in the Orders table, as shown in Figure27.22

Figure 27.22 Modify the Form elements list box to match up the hidden text fields

with the recordset field names.

[View full size image]

6. Click OK to close the Insert Record dialog

7. Save your work

8. Open the employeestore.asp page and press F12 (Option+F12) to launch the page in the browser.Select an item from the employeestore.asp page You are redirected to the viewcatalog.asp page,and the item appears in your cart

9. Click the Check Out hyperlink You are redirected to the checkout.asp page Finally, click the CheckOut button to process the order

Now check the Orders table in the Access database to see the appropriate information written to the table

If you open the Employees table, you will find that the user was, in fact, the user whose EmployeeID

appears in the EmployeeID column If you open the EmployeeStore table, you will notice that the ItemIDselected is the ItemID that appears in the Orders table Later, if you need to query the tables for productsand employees, you can filter the results based on the IDs that appear in the Orders table

In the next chapter, we'll discuss security and authentication In this chapter, we actually set the

MM_Username session variable that we reference throughout the chapter Doing so enables you to display thecheckout.asp page and ultimately process the order for the appropriate logged-in user

Chapter 27 Adding Shopping Cart Functionality

IN THIS CHAPTER

Creating the Employee Store Shopping Cart Using ASP

Creating the Employee Store Shopping Cart Using ASP.NET

Welcome to the chapter that covers the heart of all dynamic web applications: the shopping cart Mostdynamic web applications are created for the sole purpose of making money on the web Let's face it—why

go through all the work of creating a dynamic web application if you don't plan to make money through it?Sure, companies employ dynamic intranet sites and granted, there are still some (although very few) freeweb applications you can use In the real world, however, dynamic web applications are created in anattempt to make money by selling merchandise on the web Providing the capability to add items to avirtual shopping cart as you browse through a website is still very much a business that commands goodmoney Companies such as VeriSign, WebAssist, and LinkPoint charge to provide developers with thecapability to add this virtual shopping cart functionality to their own websites Fortunately for you,

Dreamweaver comes through by providing the capability to interact with shopping cart features by usingfeature-rich extensions you can download right from the Adobe Exchange

This chapter discusses the creation of an online shopping cart for the Vecta Corp application The topicscovered in this chapter include the following:

A shopping cart definition

An overview of the UltraDev Shopping Cart

Installing the UltraDev Shopping Cart

Building the Employee Store shopping cart in both ASP and ASP.NET

Note

This chapter covers adding shopping cart functionality to the Vecta Corp site under only the ASP andASP.NET server models In the ASP server model, we'll use the free UltraDev Shopping Cart serverbehaviors suite, and the ASP.NET model covers building a shopping cart by hand The UltraDev

Shopping Cart server behavior is but one example of a set of server behaviors for adding shoppingcart functionality to your web applications If you're using the ColdFusion or PHP server models,

review the process as it's covered in ASP, then browse through the Adobe Exchange and pick out aserver behavior suite that outlines the topics covered here in your server model of choice The goal isnot to pick ASP over other server models, but rather to demonstrate the overall functionality using afree set of server behaviors in the UltraDev Shopping Cart that just happens to run only under theASP model

As you've done with the rest of the chapters in this book, you can work with the examples in this chapter by

downloading the files from www.dreamweaverunleashed.com Remember that you'll want to save the filesfor Chapter 27 (not the folder) in the C:\Inetpub\wwwroot\VectaCorp<technology> directory, where

<technology> represents the server technology (ASP or ASPX) you plan to use You should also make sure

that your site is also properly defined within Dreamweaver, including the appropriate server-side technologyyou plan to use in the Testing Server category For your convenience, the free UltraDev Shopping Cartserver behavior and patch are available as downloads from the website

Creating the Employee Store Shopping Cart Using ASP

This chapter focuses on the UltraDev Shopping Cart server behavior The next few sections provide you with

a brief description of shopping cart technologies, an overview of the Shopping Cart behavior, and finally,how to integrate the Shopping Cart behavior with the Vecta Corp web application

What Is a Shopping Cart?

The term shopping cart has been thrown around for quite some time now But what exactly is a shopping

cart? We know a shopping cart to be the physical basket on wheels that you push around at a grocery store.Think about why you use the grocery store shopping cart You go to your local grocery store, you pusharound the cart, and you add items from shelves as you see fit When your shopping cart is full or youdecide that you are finished shopping, you push your shopping cart all the way to the front of the store tothe checkout counter At the checkout counter, you provide your debit card, cash, or check to the cashier,finish the transaction, and off you go Sound familiar? The web is no different; rather than a physical

shopping cart, however, you are provided with a virtual shopping cart, which is little more than a client-sidecookie, server-side user session, or combination of both A virtual table, if you will, that takes items yourequest from the database and stores them in a temporary location (a cookie, a session, or both) until youare ready to check out If you decide that you want another item or more of the same item, you keepadding to the cart Similar to the grocery store checkout counters, virtual checkouts enable you to enteryour credit card information for purchase The major difference is that, rather than you physically walkingaway with the items, the items are conveniently mailed to your doorstep

Most people think of shopping carts in the terms of the preceding example But the same methodology isused in websites such as Microsoft's Clip Art Gallery, iTunes, Photodisc, and more These websites use thesame idea of a shopping cart, but rather than purchasing the items within your shopping cart, you downloadthem Think of online shopping carts as a virtual table that stores information the user requests for

downloading or purchasing

The UltraDev Shopping Cart

The UltraDev Shopping Cart (so named because of its original integration with Dreamweaver UltraDev) isthe perfect example of Dreamweaver's flexibility and extensibility in terms of shopping cart integration.Written purely in JavaScript by Rick Crawford, the UltraDev Shopping Cart consists of some powerful

behaviors that enable you to create and manipulate merchandise within your web application Aside fromthe central UltraDev Shopping Cart server behavior, the UltraDev Shopping Cart server behavior suiteconsists of the following functionality:

Add to Cart Via Form— Enables the user to select a form object within a page to manually insert an

item into the shopping cart

Add to Cart Via Link— Enables the user to select a link within a page to manually insert an item into

the shopping cart

Repeat Cart Region— Similar to the Repeat Region server behavior, the Repeat Cart Region repeats

a table with multiple contents

Update Cart— Updates items within the cart using a form object contained in the shopping cart page.

Save Cart to Table— Enables the user to save the order to a database table so that an administrator

can later look through orders received for a particular day and mail out merchandise accordingly This

is where the Vecta Corp database's Orders table comes into play

Get Unique ID from Table— Enables the cart to dynamically retrieve a unique ID from a database

table

Empty Cart— Selecting a link on the page empties the cart of its contents.

Redirect if Empty— Redirects the user to a different page if the shopping cart is empty.

The UltraDev Shopping Cart's functionality begins with the UltraDev Shopping Cart server behavior Verysimilar to a recordset, the UltraDev Shopping Cart allows for dynamic text binding within form objects,tables, and so on The UltraDev Shopping Cart server behavior is created in either the Server Behaviors orthe Bindings panel, again similar to the recordset Shopping cart items appear within the drop-down list,available by selecting the Add (+) button, along with the capability to bind the number of items within thecart, the sum of the quantity of all items in the cart, and the sum of the prices of all the items in the cart.Now that you have a firm understanding of what constitutes the UltraDev Shopping Cart, let's go over theinstallation process

Installing the UltraDev Shopping Cart

If you haven't done so already, you'll have to download the free UltraDev Shopping Cart and UltraCart Patchfor UD4 extensions from www.dreamweaverunleashed.com After you've downloaded the extensions, unzipthe MXP files and double-click them one at a time to install them using the Adobe Extension Manager CS3 asshown in Figure 27.1 The UltraDev Shopping Cart and UltraCart Patch for UD4 appear in the DreamweaverCS3 extensions list when installed successfully

Figure 27.1 Install the Shopping Cart extension by double-clicking the MXP file, which is located

in the Downloaded Extensions folder.

[View full size image]

You'll no doubt receive complaints from Adobe Extension Manager CS3 regarding the install of theseextensions that are nearly eight years old Fear not, however; although Adobe Extension ManagerCS3 balks at the installation, rest assured that the installation will proceed and the extensions willwork flawlessly in Dreamweaver

Integrating the Shopping Cart with the Employee Store

Now that the UltraDev Shopping Cart has been installed, you can access it from either the Server Behaviorspanel or the Bindings panel The next few sections go over the UltraDev Shopping Cart in more detail as itrelates to the Employee Store application in ASP You can begin by opening Dreamweaver if you have notalready done so already Select the VectaCorpASP defined site, open any ASP page, and then click the Add(+) button from either the Server Behaviors panel or the Bindings panel to reveal the UltraDev ShoppingCart, as shown in Figure 27.2

Figure 27.2 Select the Add (+) button to reveal the newly installed UltraDev Shopping Cart.

Building the Employee Store Shopping Cart

Oddly enough, we build the Employee Store shopping cart starting with a View Cart page The reasons forthis are simple: first, to demonstrate how the UltraDev Shopping Cart behavior is utilized, and second,because it is the only page that uses the binding features within it You can begin building the EmployeeStore shopping cart by following these steps:

1. Create a new page by selecting New from the File menu Choose the Page from Template category,choose the VectaCorpASP site, select the template titled template, and then click Create The newdocument window instance appears

2 Immediately save the page as viewcart.asp.

3. Add the Shopping Cart behavior by clicking the Add (+) button and selecting the UltraDev ShoppingCart option from the Bindings panel's submenu The UltraDev Shopping Cart dialog appears

4. Although you'll need to customize certain options in this dialog, first and foremost, you must nameyour cart Like a recordset, it's best to name the cart something relevant to your site For our

purposes, enter the name cartVectaCorp into the Cart Name text box.

5. The next option after Cart Name is the Days text box To store the information that users place in theircarts, a cookie is written to the user's computer You can set the number of days to store the cookie or

select 0 for none For now, enter 0 This setting guarantees that when the browser is closed, the user's

information is not stored It is important to note that by setting the number of days you want to storethe cookie, you are essentially allowing users to come back and still have the same items inside theircarts The cart does not empty until either the user physically empties it or the cookie expires

6. Define the columns the cart will use to store data in the Define Shopping Cart Columns list box Bydefault, ProductID, Quantity, Price, and Total appear as fixed columns and cannot be removed ormodified These columns are part of the functions used by the Shopping Cart behavior Because thedefault cart columns suffice for our example, leave this list box as is After the list box is the EditColumn Name and Compute By text box and drop-down menu Should you need to create your owncustom column, name it here and choose how it should be computed (if it needs to be computed) fromthe Compute By menu For instance, the Total field multiplies the Price column by the Quantity column

to obtain a result You can set these computations by hand for your custom columns using this

selection When you are finished configuring the dialog, the result should look similar to Figure 27.3

Figure 27.3 Configure your cart accordingly.

7. Click OK to create the cart The Bindings panel displays the cart, appearing similar to that of a

recordset Notice that the names of the columns match the EmployeeStore table almost exactly Thesecolumns will eventually be read from the dynamic text inserted in the employeestore.asp page that

we created in Chapter 24

8. Now that you've created the shopping cart, you are ready to begin building the table that will displaythe dynamic data Begin by removing the text that appears in the Content editable region and replace

it with a new form by choosing Insert, Form, Form

9. Place your cursor in the form and choose the Table option from the Insert menu Give your new table 4rows, 5 columns, a width of 475 pixels, a cell spacing and cell padding of 1, and a border thickness of

0 Click OK to insert the new table into the form

10 Insert the captions Product #, Name, Quantity, Price, and Total into the cells of the first row of the

table Select all the captions and make them bold The result is shown in Figure 27.4 You might decide

to format the color scheme of the table to coincide with the color scheme of the Vecta Corp site It's up

to you

Figure 27.4 Create a new table that displays the items in the cart.

[View full size image]

11 Drag the field names from the Bindings panel into the appropriate cells of the second row of the newly

created table, as shown in Figure 27.5

Figure 27.5 Drag the shopping cart columns into the appropriate cells in the table.

[View full size image]

12 To calculate the grand total of all the items in the cart, merge the three bottom-right cells, add the caption Grand Total, and drag the sum[total] field from the Bindings panel into the table cell The

result is shown in Figure 27.6

Figure 27.6 Create a cell for the grand total and drag the column from the shopping

cart into it.

[View full size image]

13 You can also format how the total appears within that cell by clicking the drop-down arrow from the

sum[Total] column in the shopping cart From the Currency submenu, select 2 Decimal Places, asshown in Figure 27.7

Figure 27.7 Format the text in the cell to the Currency data type.

[View full size image]

Although it doesn't seem like we've accomplished much, believe it or not, the majority of the work is done.The next few sections walk you through other options available in the Shopping Cart server behavior.

Repeating Cart Regions

Similar to the binding fields in a recordset, the UltraDev Shopping Cart displays only the first item addedunless you allow for regions to repeat You can insert the Repeat Cart Region to accomplish this task Toinsert the Repeat Cart Region behavior, follow these steps:

1. Select the entire second row of the table in the viewcart.asp page, similar to Figure 27.8

Figure 27.8 Select the second row of the table.

[View full size image]

2. Select the Repeat Cart Region behavior from the UltraDev Shopping Cart submenu.

Making Quantities Editable

You've probably noticed that the quantities are currently hard-coded, meaning that when the user adds anitem to the cart, the cart automatically inserts a single item Rather than binding the Quantity column to thetable cell (as it currently stands), you can add a text box to enable users to modify the quantity value ontheir own Then by clicking an Update Cart button, users can change the quantities in the cart You can addthis functionality by following these steps:

1. Start by creating a new column in your cart table just after the Total column: Place your cursor in a cell

in the last column and choose Modify, Table, Insert Rows or Columns When the Insert Rows or

Columns dialog appears, choose the Columns option button, enter 1 into the Number of Columns text

box, and choose the After Current Column option button Click OK to create the column

2. With the new column in the table, you're now ready to insert a new button This is the button users willinteract with when they want to update a quantity To add the button, place your cursor in the newlycreated cell (next to the cart.Total field) and choose Insert, Form, Button Give the button the value

Update and make sure that the button is set to Submit.

3. Create the text field that will display the quantities and ultimately allow the user to make edits To dothis, start by removing the cart.Quantity binding from the Quantity column Then insert a new text

field by choosing Insert, Form, Text Field Name the text field txtQuantity and assign it a Char Width

[View full size image]

5. To get the cart update functionality to work, add the Update Cart server behavior To do this, choosethe Update Cart option from the UltraDev Shopping Cart submenu available by clicking the Add (+)button in the Server Behaviors panel The Update Cart dialog appears

6. The Update Cart dialog enables you to specify the form and form object to use for the cart update aswell as a URL to redirect to after the update takes place For our purposes, choose the form1 optionfrom the Form menu and select the txtQuantity option from the Form element menu The result isshown in Figure 27.10

Figure 27.10 Configure the Update Cart dialog to handle your update.

[View full size image]

Adding Items to the Cart

So far, you've learned how to display the items contained in the cart But you can't stop there You need to

be able to add items to the cart before you can actually view them This section introduces you to the Add toCart Via Form server behavior contained in the UltraDev Shopping Cart submenu

As previously mentioned, there are two ways of adding items to the cart: Add to Cart Via Form and Add toCart Via Link Because both do virtually the same thing, this section focuses primarily on the Add to Cart ViaForm server behavior To add an item to the cart, follow these steps:

1. Close the viewcart.asp page if you still have it open and then open employeestore.asp

2. To add items to the cart, you'll need to add a Button form element This is the object that employeeswill use to initiate the addition of the particular item to the cart To do this, start by creating two newrows under the current Cost binding: Place your cursor in the Cost cell and press the Tab key twice

3. Add a new form to the cell by choosing Insert, Form, Form In that form, add a new Button form

element by selecting Insert, Form, Button Change the value of the button to read Add to Cart The

result is shown in Figure 27.11

Figure 27.11 Insert a new form and then a form button to the newly created row.

[View full size image]

4. Before we select the Add to Cart Via Form server behavior, we'll need to add an instance of the

UltraDev Shopping Cart recordset Do this by switching to the Bindings tab, clicking the Add (+)button, and selecting the UltraDev Shopping Cart option from the Bindings panel's submenu The

UltraDev Shopping Cart dialog appears Enter the cart name as cartVectaCorp and click OK.

5. Insert the Add to Cart Via Form server behavior by selecting it from the UltraDev Shopping Cart

submenu, available by clicking the Add (+) button in the Server Behaviors panel The Add to Cart ViaForm dialog appears

6. The dialog enables you to configure all the data items that will be sent into the cart You can select theform from which the data is coming, all the cart columns and their corresponding data elements in therecordset, the actual recordset to use, and the URL to redirect to after the addition takes place Before

we jump ahead, however, select the form1 option from the Form menu

7. You'll want to match up the corresponding cart items to their respective fields in the recordset You can

do this by selecting a cart column from the Cart Columns list and then selecting the appropriate optionbutton from the group that appears just below the list In our case, we'll want to select the Recset Coloption button and select the appropriate recordset field from the menu The exception is the Quantity

column; for this column, use a numeric literal 1, guaranteeing that only one item is inserted at a time.

The following table illustrates the data elements to which you should point your cart columns Theresulting dialog looks similar to Figure 27.12

Figure 27.12 Configure the Add to Cart Via Form dialog, matching the appropriate

cart columns to their respective data elements.

[View full size image]

Column

DataElement

Value

ProductID Recset col ItemID

Quantity Literal 1

Name Recset col ItemName

Price Recset col Cost

8 Enter the value viewcart.asp into the Go to URL text box and click OK.

Save your work and test the results in the browser by pressing F12 (Option+F12) Log in to the site andnavigate to the Employee Store link Find an item to place into your cart and click the Add to Cart button.You're immediately redirected to the viewcart.asp page where one item appears in your cart Select theEmployee Store link in the navigation bar to be redirected back to the employee store page Try adding adifferent item Again you're redirected to the viewcart.asp page, but this time two items appear in yourcart Try modifying the quantity and then click the Update Cart button Notice how the grand total changes

to compensate for the added quantity

Checking Out the Customer

Now that the customer has selected items to order, the customer may want to continue with the purchase

This section covers creating a checkout page so that a particular customer can verify items in the cart aswell as personal and credit card information.

as VeriSign or PayPal for automatic electronic payment deductions

Creating the Checkout Page

When you're working with shopping carts, it's generally a good idea to provide a quick synopsis of the user'sinformation as well as a detailed overview of all the items the user is purchasing All this data can be

integrated into a checkout page of some sort On this page, you might also want to provide randomlygenerated order numbers that users can reference whenever they contact your customer support

department Another benefit to creating a checkout page is the capability for the user to track and print outthe summary as an invoice You can create the checkout page for the employee store by following thesesteps:

1. Rather than creating a new page from a template in this case, we'll use the same viewcart.asp page,

save it as checkout.asp, and then create a new table under the existing cart table that represents the

checkout functionality Open viewcart.asp if it's not open already and select Save As from the File

menu Name the file checkout.asp and click Save.

2. With checkout.asp open, add a new table with seven rows and two columns with the captions OrderNumber, Employee ID, Name, Address, Credit Card, Number, and Expiration Place this table directlyunderneath the existing cart table Format the table to match the color scheme you provided for thecart table

3. Remove the Update Cart button and corresponding column Also, remove the txtQuantity text field andassociated Update Cart behavior Rebind the Quantity column as a dynamic text element The resultwill resemble Figure 27.13

Figure 27.13 Remove the Update Cart functionality including Update Cart behavior, Text Box, and Update Cart button and rebind the cart.Quantity field to the table's

cell.

[View full size image]

4. Place your cursor just after the newly created table and add a Submit button by choosing Insert, Form,

Button Give it the text value Check Out and leave the Action as Submit The result is shown in Figure27.14 (shown with Invisible Elements turned off so that you can clearly see the table structure andscheme)

Figure 27.14 Add a form Submit button to the page.

[View full size image]