382 Project 3
Due 21:00 u 2/5

Project Description

For this project, you will activate the scripts in the two web pages you created for project 2. The example scripts are contained in user-prefs-pt3.html and welcome-v4.html.

a. 382 Information Architecture


If you have the same site architecture on both the local and remote hosts all pathnames and URL's will work correctly on both hosts, with no changes required as you move web pages from one to the other.

Local host: On your computer (or a USB drive, better yet), you should have a site root folder. named 382 containing subfolders css, js, cookies, examples, html, images and php.

 Remote host: On shell.uoregon.edu,you should have a directory named 382 containing subdirectories css, js, cookies, examples, html, images and php. Since this is a Unix host (running Red Hat Linux), folders are known as directories.

When naming files of any kind use No Blanks, Punctuation or Special Characters (dashes and underscores are OK).

b. Home Page.

  1. Create a blog for your eCommerce site. Follow the six steps given on the 110 Project 1 web page.

    A nice benefit of this is you'll be able to post comments on our 382 Projects blog.

  2. Create a post on your blog that serves as a welcome message. Add an image to the post.
  3. Modify BH-home.html content so that it looks similar to this screenshot: BH-home.png. Add a home page link to either the top navigation or sidebar. Add a link to the blog you created, above.
  4. Add a JavaScript Database to a script in the head section. The database should include nine "records," one for each of your film (or product) categories.

    The catURL for each record will use a relative URL to connect to the same target or landing page.

    Example: Each catURL connects to the same landing page but includes a different value for the query string (URL parameter): "php/products.php?catID=1"

  5. Add a script to the body section that generates dynamic hyperlinks for each film category the user has selected. If the script finds no cookies, then it generates all nine category links by default.
  6. When complete, upload BH-home.html to /382/BH-home.html on shell.uoregon.edu.

c. Sign-In Page.

  1. Modify BH-sign-in.html content so that it looks similar to this screenshot: BH-sign-in.png.

  2. Edit the script so that it correctly sets the cookies for the user's name and preferences.

  3. Immediate personalization: When the user clicks the Sign In button, the form information written to the cookie file should be used immediately to personalize the page. You can do this by copying both scripts from BH-home.html into BH-sign-in.html. To personalize the page you can reload it when the user clicks Sign In: just add the following statement as the last line in saveUserInfo():

    location.href = "BH-sign-in.html"

  4. When complete, upload to /382/html/BH-sign-in.html on shell.uoregon.edu.

Layout for Form Elements

 

You can use an HTML table inside the form to control layout of form elements; that's Web 1.0.

Or you can use absolute positioning in CSS. That's the Web 2.0 way, but it's not a flat learning curve.

CSS resources for positioned elements:

W3.org
W3Schools
WestCiv Quick Tutorial

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 a lot of time.

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

Project 3 Grading Rubric

Don't Forget: Turn-in Project 3 in Blackboard

Project Help

The 382 Projects blog is a forum for communicating and collaborating to resolve any difficulties you may be having with the project. Although your instructor and GTF will regularly read and post to the blog, all students are encouraged to post answers to questions.

Credits


CSS & images: Eric A. Meyer on CSS (New Riders), ch. 12. Used by permission.