382 Project 3
Categories & DBs

TOC

1. Project 3 Requirements
2. Project Resources
3. Debugging JavaScripts
4. Office Hour Help

Our project for the term is to construct a database-backed eCommerce virtual storefront similar to BigHit Video Online.

As an alternative you are free to create any database-backed website you would like, based on your interests, but you must clear the project with your instructor. Students in past courses have created db-backed websites for their band, for a friend's business, for their schools, etc.

Project 3 Requirements

Complete the following exercises, in the order shown, by the project due-date:

1. Project Time Managment -- Sanity Tip: Allocate time for getting project assistance during office hours. Get started on this project immediately-- most of it you can solve right now. Plan on needing some assistance to complete all aspects of the project, and budget time for office hour visits.
   
   
2. Site Architecture. All .html files modified or created for this project should reside in /382/p3/.
   
   
3. acme-prefs.html. On the My Account menu in the top navBar, include a "change preferences" list item that connects to acme-prefs.html. acme-prefs.html uses the same Type B template as the acme home page. The content section includes your form from project 2, that allows the user to select preferences.
   
   Add six checkboxes for project categories. Add checkboxes for at least six product categories. Use product categories appropriate for what your site will be marketing to customers online. Example: Saving User State Part 3.
   
   
4. HTML support for database retrieval. The name (or id) attribute of the six category checkboxes should be "catCB":
   
   <input type="checkbox" name="catCB" value="category1" />
   <input type="checkbox" name="catCB" value="category2" />
   . . .
   
5. Modify saveUserInfo() in acme-prefs.html: this function could set category cookies as follows:
   

   //set a category cookie for each checkbox
   //(eg) category1=true, category2=false, . . .
   var cbArr = document.getElementsByName("catCB")
   for(var i = 0; i < 6; i++){
      addCookie(cbArr[i].value, cbArr[i].checked);
   }
   
   

6. Modify getUserInfo() in acme-prefs.html: this function should read the cookies as follows:
   

   //initialize 6 checkboxes using cookie data
   var cbChecked
   var cbArr = document.getElementsByName("catCB")
   for(var j = 1; j <= 6; j++){
      cbChecked = getCookie("category" + j)
   	 if(cbChecked == "true"){
   	    cbArr[j-1].checked = true
   	 }
   }

7. Modify deleteUserCookies() in acme-prefs.html: this function should delete all cookies set by acme-prefs.html, including the category cookies.
   
   
8. Top navigation bar, acme-home.html and acme-prefs.html. Add a Sign In link to the My Account drop-down list in the top navigation bar. This link connects to sign-in.html.
   
   
9. sign-in.html. This page describes the benefits of membership (personalized recommendations, 1-click shopping, etc.) and gets the user's email address and a password created by the user. The email address is used as a "userID" for signing in to the site and turning on 1-Click Shopping, etc.
   
   The top of the content section of this page displays a New Customers Start Here link; this link connects to ./asp/create-acct.asp which you will create in the next project.
   
   A form includes the following elements:
   
   Two textboxes: (A) userID -- the user's email address. ( B) password.
   
   A click-button labeled Sign In.
   
   When the Sign In button is clicked: an event handler calls addSessionCookie(). This functions writes a session cookie with tag "userID" and value equal to the user's email address.
   
   Cookie Notes: addCookie() sets a persistent cookie with an expiration date in the future. If an expiration date is not specifically defined, the cookie will expire when the browser is closed. Therefore, to create addSessionCookie(), simply modify addCookie() by eliminating the code that sets the expiration date.
   
   
10. Exam Review Question: why does a session cookie including the user's password NOT compromise the user's information privacy?
    
    
11. Access 2000 database. For this project, you will need to create a simple Access2000 database with just two tables, a customer table and a product table. This is all you will need to infringe Amazon's patent for 1-Click Shopping (it's simpler than BigHit makes it look).
    
    Customer table. For an example of the two tables you will need to create for an online studio, copy the BigHit Online database, which you should already have from CIT 381, and look at the Customer table and the Movie table. In the spirit of keeping it simple, the many other tables in BigHit Online can be safely ignored.
    
    For this project, modify the Customer table as follows:
    
    Add fields to the Customer table to support 1-Click Ordering: shipping method, credit card number/type/expiration date. For simplicity, use the customer address as the shipping address.
    
    Add fields (email-address, password ) to the Customer table. These fields support Signing In to the website, and 1-Click Shopping will require the customer to be signed in.
    
    Product Table. The Movie table in the BigHit Online database has a Genre field of type text. In your table, change this to a catID field of type number, as it will make your SQL queries easier to write.
    
    You can do this by replacing each field value with an appropriate category number (1-6) and then, in Design View, change the Data Type from Text to Number. You can also change the column name from Genre to CatID.
    
    The title field will contain the title for each product.
    
    Add an Image field and a Thumbnail field of type Text. These will contain the Unix path for the art object's image files. Examples of the values stored in these fields: ../images/lotr/rivendell.jpg and ../images/lotr/rivendell-th.jpg
    
    Add fields to support three different kinds of search. For example at a movie site, your customers will search by actor, title, and director; therefore, add the fields necessary to support web site search.
    
    
12. Install your project 3 files on the remote host. When complete, install your .html files in /382/p3/ on uoregon.edu.
    
    
13. Project 3 Grading Rubric. This document describes how your lab instructor (GTF) will grade your project. You should assess your project using this rubric before turning in your project. Also, this would be a good exercise for each member of your VLT: assess the project using this rubric before submitting it.
    
    The rubric page will describe how to submit this project for grading using Blackboard.

Project Resources

• Blackboard Discussion Forum for Project 3. In Blackboard, open Tools -> Communication -> Discussion Board -> Project 3 for a forum where you can post questions.
  
• Consulting Hours. In Blackboard, open the Staff Info folder to see the times and locations for programming assistance.

Debugging JavaScripts

1. Regularly use calls to alert() to printing the values of variables, cookies, etc. This allows you to follow the execution of a script line by line, and will save you much weeping and gnashing of teeth.
   
   
2. If a script is not working for any reason, check Firefox > Tools > Error Console for error messages. Hit the Clear button in the console to clear old error messages, then reload your page to execute the script. (The evaluate bar at the top of the console allows you to type in arbitrary JavaScript code and have it evaluated immediately, without a script.)

Office Hour Help

Bring your site folder on a USB drive. An equally good alternative is to copy your site folder to uoregon.edu. When you come to office hours, the project folder can be downloaded quickly for debugging.