CSCI 4230 Homework #3

1. CSCI 4230Homework #3 Group Three Samer Al Jefri * Kevin Odom * David Hood * JD * Philippe Gambling

2. Agenda • Site Walkthrough • User Interface Design • Site Requirements & Code Implementation • Collaboration & Development Tools • Conclusion – Q&A

3. Section One: Site walkthrough

5. Section Two: User Interface design

6. Phase II Design Elements (#1) Home Page (#2) Phase III Navigation (#2)

7. Section Three: site requirements & implementation of code

8. Sign-in Page Sign-in Components Use Valid E-mail Address Store Info In Session Initiate Shopping Session Return To Previous Page

9. Input Field <asp:TextBoxrunat="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"/>

10. 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); }

11. 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

12. 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*" />

13. <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" />

14. 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; }}}

15. 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"); }

16. Invalid Submission

17. Phase IIIDATABASE ACCESS & SESSION TRACKING SLIDES HERE (1, 3, 4, and 5 – David) (6, 7, and 8 – Samer)

18. David Hood Default Page * Sign-in Page * Shopping Cart * CartData class

19. The CartData Class • Static Methods • getCartFromSession() • saveCartToSession() • Public Methods • addItem() • removeItem() • reset() • setQuantity() • getTotal() • exists() • getCartTable()

20. Default Page User Not Logged In User Logged in

21. Default Page • Login Restriction Returns Boolean value indicating if user is logged in.

22. Default Page • Adding an item to the cart

23. The Shopping Cart

24. The Shopping Cart • Cart GridView control binding

25. 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.

26. 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”

27. Checkout - Code Examples 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 sessionServer.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:BoundFieldDataField="Title" HeaderText="Title" />                    <asp:BoundFieldDataField="Price" HeaderText="Price" DataFormatString="{0:c}" />                    <asp:BoundFieldDataField="Quantity" HeaderText="Quantity" />                </Columns>                <HeaderStyleBackColor="#9F89B6" />                <AlternatingRowStyleBackColor="Silver" />            </asp:GridView> • GridViewDataSource 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.boolcompleteOrder = cartGridView.Rows.Count > 0;lblLabelTotal.Visible = completeOrder;lblTotal.Visible = completeOrder;cmdEditCart.Visible = completeOrder;cmdPlaceOrder.Visible = completeOrder;

28. Checkout – New Order Record •     private intcreateOrderInDB(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)";OleDbConnectionconn = new OleDbConnection(connectionString);OleDbCommandcmd = new OleDbCommand(insertSQL, conn);cmd.Parameters.AddWithValue("@UserName", userId);/* OMIITTED SEVERAL cmd.Parameters.AddWithValue for brevity */cmd.Parameters.AddWithValue("@TransactionDate", DateTime.Now.Date);intorderId = 0;        try        {conn.Open();cmd.ExecuteNonQuery();cmd.CommandText = "SELECT @@Identity"; // Get the new OrderIDorderId = (int)cmd.ExecuteScalar();        }        catch (Exception err)        {lblStatus.Text = "Error creating order record.";lblStatus.Text += err.Message;        }        finally        {conn.Close();}        return orderId;    }

29. Section Four: Collaboration & Development tools

30. 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.

31. 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.

32. 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.

33. 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.

34. Section Five: Conclusion

35. Thank you! • Questions?