CSCI 4230Homework #3

Group Three

Samer Al Jefri * Kevin Odom * David Hood * JD *

Philippe Gambling

Agenda

1. Site Walkthrough

2. User Interface Design

3. Site Requirements & Code Implementation

4. Collaboration & Development Tools

5. Conclusion – Q&A

SITE WALKTHROUGHSection One:

USER INTERFACE DESIGNSection Two:

Phase IIDesign Elements (#1)Home Page (#2)

Phase III

Navigation (#2)

SITE REQUIREMENTS & IMPLEMENTATION OF CODE

Section Three:

Sign-in Page

Sign-in Components

•Use Valid E-mail Address

•Store Info In Session

•Initiate Shopping Session

•Return To Previous Page

Input Field

<asp:TextBox runat="server" ID="txtUserName" />

Validation Controls

<asp:RegularExpressionValidator ID="loginRegExValidator" runat="server" ControlToValidate="txtUserName" ErrorMessage="Please, enter a valid email address."

ValidationExpression="^\w+[\w\.]*\@(\w+\.)+((com)|(net)|(org)|(edu))$" />

<asp:RequiredFieldValidator ID="loginRequiredFieldValidator" runat="server" ControlToValidate="txtUserName" ErrorMessage="This field is required." />

Submission Button

<asp:Button ID="cmdLogin" runat="server" Text="Login“ onclick="cmdLogin_Click"/>

protected void cmdLogin_Click(object sender, EventArgs e) { //Clear session for new user Session.Clear();

//Save the user id to the Session Session["userID"] = txtUserName.Text;

// Goto default page unless a different path is requested string path = "Default.aspx"; if (Request.Params["returnTo"] != null) { path = Request.Params["returnTo"]; }

Response.Redirect(path); }

Shipping Page

Shipping Components

•Remove Leading & Trailing Whitespace

•Reject Invalid Characters From Input

•Ensure Input Length is Reasonable

•Use Server-side Code For Field Validation

Input Field

<asp:TextBox ID="txtName" runat="server" Columns="65" />

Validation Controls

<asp:RequiredFieldValidator ID="nameRequiredFieldValidator" runat="server" ErrorMessage="Required“ ControlToValidate="txtName“ Display="Dynamic"/>

<asp:RegularExpressionValidator ID="nameRegExValidator" runat="server" ErrorMessage="Please only enter letters, numbers, spaces, or periods." ControlToValidate="txtName“ ValidationExpression="\s*[a-zA-Z\s\.]+\s*" Display="Dynamic" />

<asp:RegularExpressionValidator ID="nameRegExFirstLast" runat="server" Display="Dynamic" ErrorMessage="Please enter a first and last name, no middle names" ControlToValidate="txtName“ ValidationExpression="\s*[A-Za-z]+\s+[A-Za-z]+\s*" />

<asp:TextBox ID="txtStreet1" runat="server" Columns="65" />

<asp:RequiredFieldValidator ID="street1RequiredFieldValidator" runat="server" ErrorMessage="Required” ControlToValidate="txtStreet1" Display="Dynamic" />

<asp:RegularExpressionValidator ID="street1RegExValidator" runat="server" ErrorMessage="Please enter a street number and name“ ControlToValidate="txtStreet1“ ValidationExpression="^\d+\s+[A-Za-z\s\.]+“

Display="Dynamic" />

<asp:TextBox ID="txtZip" runat="server" />

<asp:RequiredFieldValidator ID="zipRequiredFieldValidator" runat="server“ErrorMessage="Required“ ControlToValidate="txtZip“ Display="Dynamic" />

<asp:RegularExpressionValidator ID="zipRegExValidator" runat="server"

ErrorMessage="Please enter in the form of #####.“ ControlToValidate="txtZip“ ValidationExpression="^\d{5}\s*$“ Display="Dynamic" />

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Page.Form.DefaultFocus = txtName.ClientID; Page.Form.DefaultButton = cmdShipFormSubmit.UniqueID;

// Populate fields with existing shipping info if (Session["ShippingData"] != null) { ShippingData shipping = (ShippingData)Session["ShippingData"]; txtName.Text = shipping.FullName; txtStreet1.Text = shipping.Street1; txtStreet2.Text = shipping.Street2; txtCity.Text = shipping.City; ddState.SelectedValue = shipping.State; txtZip.Text = shipping.Zip; }}}

protected void cmdShipFormSubmit_Click(object sender, EventArgs e) { //check for valid page if (!Page.IsValid) { return; }

ShippingData shipping = new ShippingData(); shipping.FullName = txtName.Text.ToString(); shipping.Street1 = txtStreet1.Text.ToString(); shipping.Street2 = txtStreet2.Text.ToString(); shipping.City = txtCity.Text.ToString(); shipping.State = ddState.SelectedValue.ToString(); shipping.Zip = txtZip.Text.ToString();

Session["ShippingData"] = shipping;

Response.Redirect("Checkout.aspx"); }

Invalid Submission

Phase IIIDATABASE ACCESS & SESSION TRACKING

SLIDES HERE

(1, 3, 4, and 5 – David)

(6, 7, and 8 – Samer)

David Hood

Default Page * Sign-in Page * Shopping Cart * CartData class

The CartData Class

• Static Methods– getCartFromSession()– saveCartToSession()

• Public Methods– addItem()– removeItem()– reset()– setQuantity()– getTotal()– exists()– getCartTable()

Default Page

User Not Logged In

User Logged in

Default Page

• Login Restriction

Returns Boolean value indicating if user is logged in.

Default Page

• Adding an item to the cart

The Shopping Cart

The Shopping Cart

• Cart GridView control binding

Checkout - Features

• Confirms user shipping information and ordered items.

• Redirects user to sign-in page and/or shipping form not already in session.

• Creates new order record in database.• Clears shopping cart data.• Passes new order number to the Thank

You page.

Checkout – Views

• The user’s address, shopping cart, and order total are displayed.

• Options are provided to “Continue Shopping”, “Edit Address”, “Edit Cart”, and “Place Order”

• Placing an order will create the database records and take the user to the thank you page.

• A user who tries to checkout with an empty shopping cart only has the options to “Continue Shopping” or “Edit Address”

Checkout - CodeExamples from Page_Load function for Checkout.aspx• Redirecting user to sign-in page or shipping form:        if (!Master.CheckLogin()) {

                Server.Transfer("Login.aspx?returnTo=Checkout.aspx");            }            else if (Session["ShippingData"] == null) { // Get shipping info first if not already in session                Server.Transfer("Shipping.aspx");            }

• Used GridView control to display order contents:            <asp:GridView ID="cartGridView" runat="server"

                AutoGenerateColumns="False"                 EmptyDataText="Your shopping cart is empty. Please select some items before placing your order."

CssClass="table">                <Columns>                    <asp:BoundField DataField="Title" HeaderText="Title" />                    <asp:BoundField DataField="Price" HeaderText="Price" DataFormatString="{0:c}" />                    <asp:BoundField DataField="Quantity" HeaderText="Quantity" />                </Columns>                <HeaderStyle BackColor="#9F89B6" />                <AlternatingRowStyle BackColor="Silver" />            </asp:GridView>

– GridView DataSource set in Page_Load: cartGridView.DataSource = this.cart.getCartTable();

• Hiding specific checkout elements if the shopping cart is empty:                // Allow the user to see total price, edit cart, and place order if the cart isn't empty.

                bool completeOrder = cartGridView.Rows.Count > 0;                lblLabelTotal.Visible = completeOrder;                lblTotal.Visible = completeOrder;                cmdEditCart.Visible = completeOrder;                cmdPlaceOrder.Visible = completeOrder;

Checkout – New Order Record•     private int createOrderInDB(string userId, ShippingData address)

    {        // Define DB objects        string connectionString = ConfigurationManager.ConnectionStrings["BooksDataSet"].ConnectionString;

        string insertSQL = "INSERT INTO Orders (";        insertSQL += "UserName, FirstName, LastName, Address, Address2,";        insertSQL += "City, State, Zip, TransactionDate)";        insertSQL += "VALUES (";        insertSQL += "@UserName, @FirstName, @LastName, @Address, @Address2,";        insertSQL += "@City, @State, @Zip, @TransactionDate)";

        OleDbConnection conn = new OleDbConnection(connectionString);        OleDbCommand cmd = new OleDbCommand(insertSQL, conn);

        cmd.Parameters.AddWithValue("@UserName", userId); /* OMIITTED SEVERAL cmd.Parameters.AddWithValue for brevity */        cmd.Parameters.AddWithValue("@TransactionDate", DateTime.Now.Date);

        int orderId = 0;        try        {            conn.Open();            cmd.ExecuteNonQuery();            cmd.CommandText = "SELECT @@Identity"; // Get the new OrderID            orderId = (int)cmd.ExecuteScalar();        }        catch (Exception err)        {            lblStatus.Text = "Error creating order record.";            lblStatus.Text += err.Message;        }        finally        {            conn.Close();        }        return orderId;    }

COLLABORATION & DEVELOPMENT TOOLS

Section Four:

Yahoo Discussion Board

• Created a “CSCI4230_Group3” board on Yahoo groups.

• Allowed the team to meet virtually outside of class.

• Tracked team ideas, questions, and concerns.

Google Code Project Hosting

• Created a project on Google Code.• Google provides free hosting for open source projects• Services Include:

– Version control via Subversion– Issue Tracking– Wiki Pages– Source code browsing– Downloads page

• Our team primarily used the version control and issue tracking features.

• See http://code.google.com/hosting for more information.

Google Code Project Hosting

Issue Tracking View• List issues by priority,

milestone, owner, and more.• Helped to track overall

progress• Updating issue status

through Google code rather than email.

Source Browsing View• Users can view and

download project files without checking out entire project.

• Shows SVN status per file.

Team Workflow

• Discussed tasks on Yahoo board.• Used Subversion to share files and

updates.– SVN workflow: check out->modify->update->commit– Team can work on all files concurrently. SVN merges

all the file updates for you.

• Published files to DCM server.– SVN always has the latest files, so we could

safely overwrite anything on DCM.

CONCLUSIONSection Five:

Thank you!

•Questions?