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:
- Add and update customer information
- Retrieve customer information based upon email address.
- New customers: write their information to the database
- Existing customers: update their information if it has changed
- Add order information
- Create a new order ID in the database
- Store the order information
- 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
Checkout.aspx
OrderHistory.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.
|
|
tblCustomers
|
The sql to create the table:
CREATE TABLE tblCustomers
(
[CustID] INT NOT NULL PRIMARY KEY IDENTITY,
[email] VARCHAR(100) NOT NULL,
[nameL] VARCHAR(50) NOT NULL,
[nameF] VARCHAR(50) NOT NULL,
[street] VARCHAR(50) NOT NULL,
[city] VARCHAR(50) NOT NULL,
[state] VARCHAR(5) NOT NULL,
[zip] VARCHAR(10) NOT NULL
)
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:
- 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:
Page.Validate;
if (!Page.IsValid) return;
- When the user clicks the submit button the customer's email is written to a cookie.
Syntax:
Response.Cookies["Customer"]["email"] = ...
- If the "Keep Me Signed In" checkbox is checked an expiration date is assigned to
the cookie.
- 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:
tbEmail.Focus();
(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:
- 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.
- 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.
- Writes order information to the database.
- 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.
Suggested methods for the checkout.cs class are as follows:

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.
Steps:
- Create the textboxes for the customer's shipping information.
- Each field should have a required field validator.
- Email should also use a RegularExpressionValidator as in SignIn.aspx.
- 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.
- 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.
- 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.
- 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) ...
- If a customer record is found then assign the values retrieved from the database
to the textboxes
- 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"];
- 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.
- 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.
- 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.
- 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:
- 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.
- Create a method named AddressChanged that contains one line of code:
bolAddressChanged = true;
- Add to each textbox an OnTextChanged event that points to handler named
"AddressChanged."
- Each textbox with modified text will throw an OnTextChanged event. This event fires
before the button click handler.
- The ShipOrder_onclick handler will check if bolAddressChanged is true and if so
call "UpdateCustomerAddress".
- "This is Not Me" LinkButton provides a way for customers to get to SignIn.aspx.
The 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. Steps:
- 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.
- 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.
To submit your assignment for grading send an email with the URLs for your assignment
to:
- Professor Sandvig and the TA at
(note: this address is for homework assignments only. Please send correspondence
to
)
- cc. a copy to yourself
The subject line of your email should read "MIS324 AXX YourName"
where XX is the assignment number. Please check that your URLs are correct before
submitting them for grading. Files with incorrect URLs will not be graded.
When pages are connected via navigation (as in your Music store project) it is only
necessary to submit the URL of the first page.