382 Project 4
Going Dynamic

TOC

1. Project 4 Requirements
2. Project Resources & Readings
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 4 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. As usual, you must have the identical information architecture on the local and remote hosts.
   
   Copy all .html files from /382/p3/ folder to /382/p4/.
   
   Create a folder for your web applications: /382/asp/.
   
   
3. Web fonts. Select a web font (or fonts) to use for your site. Web-Safe Fonts for Your Site (from the Internet Digest)

   
4. Dynamically-generated hyperlinks in the left navBar. When a page loads, a script in the nav-secondary div checks the cookie file for the user's savePrefs cookie. If the savePrefs cookie is set, the category cookies are used to display dynamic category hyperlinks. Since these links are created by a JavaScript, they are called "dynamically generated" hyperlinks.
   
   The cookies (category1, category2, etc.) are mapped onto category names (Surf, Comedy, etc.) using a JavaScript database (i.e., an array of category objects, or records).
   
   Study URL-params-1.html (called from user-prefs-pt3.html) for an example of a script that generates links using cookies and a JavaScript db. Note that the for loop in the script builds the link, using only the catName attribute from the JavaScript db, so the catURL is not used in the example.
   
   A better design is to add both the landing page and the parameter to the catURL property in the JavaScript database. E.g., "../asp/products.asp?catID=1". This will simplify the for loop that builds the dynamic links.

(Frameset note: target='main' will have to be added to the link if you are using a frameset for this project, but this does not apply to Mollio templates.)
   
   If the user did not specify that her/his preferences be saved, then no category cookies will be in the cookie file; in this case, display all 6 product categories in the navigation bar.
   
   Try to keep all key navigation elements "above the fold" if possible (think "Proximity"). You are designing for the 382 intranet target platform: a desktop PC with a 17"-21" monitor set for 1024x768 resolution. You don't have to concern yourself with smaller displays.
   
   All of the dynamically generated links will connect to the same target or landing page, with relative URL "../asp/products.asp".
   
   Example:
   <a href='../asp/products.asp?catID=3'>Surf</a>
   
   products.asp is a called a Master Page by Dreamweaver, and will return a dynamically generated Product Guide for all products in the Access database matching the catID; you will implement products.asp on the next project.
   
   
5. Immediate personalization. When the user clicks the Save Info button in acme-prefs.html, the information written to the cookie file should be used immediately to personalize the site. You can do this by reloading the page. To reload the page, add the following statement as the last line in saveUserInfo():
   
   location.href = "acme-prefs.html"
   
   
6. Set up a Testing Server for Dynamic Web Pages (ASPs) using DW, IIS, and Access.
   Instructions: Setting up a Testing Server in DW. Your GTF will guide you through this process in your week 7 lab.
   
   
7. Create a web/database connection in DW with a connection string. In DW, create a connection string for your site database. Instructions: Creating a Connection String in DW. Your GTF will guide you through this process in your week 7 lab.
   
   
8. File: /382/asp/create-acct.asp. For your first ASP, create a dynamic web page named create-acct.asp using DW's Record Insertion form. Create-acct.asp uses a record insertion form in DW to gather all necessary information from the user to add a new record to the Customer table.
   
   Your GTF will guide you through this process in your week 7 lab.
   
   
9. The "New Customers > Create Account" link on your site's top navBar connects to "../asp/create-acct.asp". No create-acct.asp page is needed for this project.
   
   
10. The New Customers Start Here link at the top of sign-in.html connects to create-acct.asp.
    
    
11. All JavaScript alerts() used for development should be turned off for the delivered project.
    
    
12. Install your project 4 files on the remote host. When complete, install project files in /382/ on uoregon.edu.
    
    
13. project 4 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 4. In Blackboard, open Tools -> Communication -> Discussion Board -> project 4 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.
  
  
• Dreamweaver Documentation: Although we are not using a textbook for this course, we are not without high-quality readings online. Please spend some time scanning the following topics in DW > Help > Getting Started & Tutorials:
  
  
  • Understanding Web Applications
  • Developing a Web Application
  • Installing a Web Server
  • Setup for Sample ASP Site > Configuring your system (ASP) > Creating a root folder

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.