Syllabus Schedule Project Labs Canvas Server Access CSS Tutorial Assignment 1 Assignment 2 Assignment 3 Assignment 4 Assignment 5 Assignment 6 Assignment 7 Assignment 8 Assignment 9

Assignment 8 - Music Store - SignIn.aspx, Checkout.aspx (part 1)

The checkout process is the single most complex portion of the music store. It needs to:

  1. Add and update customer information
    1. Retrieve customer information based upon email address.
    2. Write new customer information to the database.
    3. Update returning customer information if it has changed.
  2. Add order information
    1. Create a new order ID in the database
    2. Store the order information
  3. Send order confirmation information to the browser and via an html email.

The primary design objectives for organizing the code in the checkout page are simplicity and maintainability. This is achieved by breaking the process into discrete activities and organizing the code in a logical manner. Because the checkout page is relatively complex we will use a 3-tier architecture to separate duties. Specifically, page events will be handled within the .aspx page, the business side of things will be handled by business objects and all database access with be via a data tier, as shown in the following table.

Tier Files Function
User Interface SignIn.aspx
Handle page events. Validate user inputs. Trigger methods of business tier and display results.
Business/data tier checkout.cs Provide checkout process logic and interacts with the database.
Database SQL Server Express Store data & execute SQL commands.

Database tables: Add a new table, tblCustomers, to your music store database with the following properties. Use the database's autonumber feature to assign unique IDs to new customers.



The sample pages have the trace feature turned on and include "Trace.Write" statements to provide information on page execution.

SignIn.aspx - This page displays a textbox for email address. It validates the address using a RequiredFieldValidator and a RegularExpressionValidator. SignIn.aspx also displays a checkbox with the text "Keep Me signed in." If the user leaves the checkbox checked an expiration date is assigned to the cookie. This allows it to persist on the computer after the browser is closed.

The SignIn page has two handlers: Page_Load and onTextChanged_click.

The Page_Load handler checks a cookie to see if the user is already signed in. If they are signed in then they are automatically redirected to CheckOut.aspx. The syntax to check if a cookies exists is:

if (Request.Cookies["customer"] != null) ..
//cookie exists

The textbox's onTextChanged handler does three things:

  1. Validates the textbox. ASP.NET's server-side validation is automatically activated when the user clicks the form button but not when they simply press the Enter key. You can force validation on the server side by including the following two lines in the event handler:

    if (!Page.IsValid) return;

  2. When the user clicks the submit button the customer's email is written to a cookie. Syntax:

    Response.Cookies["customer"]["email"] = ...

  3. If the "Keep Me Signed In" checkbox is checked an expiration date is assigned to the cookie.
  4. It uses Response.Redirect to send the user to CheckOut.aspx

ASP.NET includes two features that should be used to improve the user experience. The first feature automatically sets the focus to the textbox. In the Page_Load handler include:


(assuming that your textbox is named tbEmail.)

The second feature sets the default button. This allows the user to submit the form by either pressing the submit button or the enter key. In the Page_Load method include the statement:

Page.Form.DefaultButton = btSubmit.UniqueID;"

where btSubmit is the name of your submit button.

CheckOut.aspx This page:
  1. Retrieves the customer's email from a cookie, retrieves their information from the database and displays textboxes where the customer can input or update shipping information. It uses validation on all textboxes.
  2. Updates or adds customer information in the database. It updates ONLY when the customer changes their information. If no changes are made then the customer record is not updated.
  3. Writes order information to the database.
  4. Writes order information to the browser and sends in in HTML formatted eMail confirmation..

This page is divided into two assignments. This week you will provide an interface for creating, retrieving, and updating customer information. This is very similar to EditCustomers.aspx in A05. Next week you will do the last two items, which relate storing order information.

Note: Winter 2014: For checkout.cs please use the revised template dbCustomers.cs and dbGetConnectionString.cs in assignment 5, Exercise 1, part b.

Suggested methods for the checkout.cs class are as follows:

Checkout class

The Checkout page also uses the ShoppingCart class to get cart information.

The steps below provide details on the overall structure of the code. You will also need to add some panels to your page to control the display. These instructions do not discuss the panels.


  1. Create the textboxes for the customer's shipping information.
    1. Each field should have a required field validator.
    2. Email should also use a RegularExpressionValidator as in SignIn.aspx.
    3. The button at the bottom of the page should display either "Ship my Order" or "Update my Information" depending upon whether the shopping cart contains items.
    4. Set the default button as you did on the signin page.
  2. Retrieve customer data from the database. The textboxes need to be populated only the first time the page loads(i.e. if (!Page.IsPostBack)). Repopulating them on page postbacks will overwrite the users entries.
    1. In the Page_Load method check to make sure that customer email has been written to a cookie by SignIn.aspx. (syntax:

      if (Request.Cookies["customer"] != null)...

      If a cookie is not found redirect back to SignIn.aspx.
    2. Retrieve the customer's data from the database based upon email address. Create a method called GetCustomerDetails(string email) in checkout.cs. This method returns a datatable. If a customer is found the returned datatable will contain one row if not found it will contain 0 rows. The syntax to check is:

      if (dt.Rows.Count == 0) ...

    3. If a customer record is found then assign the values retrieved from the database to the textboxes
    4. From the results of the query we now know if this is a new or returning customer. If returning then we want to use their customer ID for updating their information and writing order information. When the user clicks the update button the page will postback and the values in variables are lost. The ViewState is a convenient place to store the custID between page postbacks. Syntax:

      ViewState["CustID"] = dt.Rows[0]["CustID"];

  3. Update the customer's information in the database. When the customer clicks the submit button the page posts back and calls a page method named "ShipOrder_onclick."

    The first thing this method does is retrieve the customer ID from the ViewState. If the CustID is = 0 it is a new customer and if CustID is null it is a returning customer.

    1. If the customer is new (no CustID in ViewState) call checkout.AddNewCustomer(). This method adds (inserts) the user's info to the database. You will modify the method next week to return CustID but do not need CustID for this assignment.
    2. If a the customer is returning then update their address ONLY if it has changed. Use the onTextChanged event of the textboxes to see if information has changed.
    3. The customer may change several textboxes and each will throw an onTextChanged event. However the database should only be updated once. Create a "flag" to indicate that the database needs to be updated. Specifically:
      1. Create a Boolean variable with page-level scope named bolAddressChanged and set it to false. This variable will act as a flag that one or more textboxs have changed.
      2. Create a method named AddressChanged that contains one line of code:

        bolAddressChanged = true;

      3. Add to each textbox an OnTextChanged event that points to handler named "AddressChanged."
      4. Each textbox with modified text will throw an OnTextChanged event. This event fires before the button click handler.
      5. The ShipOrder_onclick handler will check if bolAddressChanged is true and if so call "UpdateCustomerAddress".

  4. "This is Not Me" LinkButton provides a way for customers to get to SignIn.aspx. The handler for this button erases the Customer email cookie by setting the expiration date to -1 days and redirects the customer to SignIn.aspx. This documentation describes how to delete a cookie.
  5. After the customer's info has been added/updated use panels to hide the textboxes and display a message to verifying that the customer's information has been updated or added.
  6. Test your code using both new and returning customers.

You now have a working program for adding and editing customer data. In Assignment 9 you will add code for writing the order to the database.

Submission instructions: Submit assignments via the Canvas course management system. Submit the full URL for each exercise in the assignment, listing the URLs in the same order that they are listed in the assignment. To minimize typos in URLs it is strongly recommended that you copy the URLs from the address bar of the browser rather than trying to type them. Incorrect URLs will not be graded and no credit will be given.

When pages are connected via navigation (as in your music store project) it is only necessary to submit the URL of the first page.

Regular Expressions HTML Color Names Color Picker ASCII Character Codes Unicode Character Codes