382 Project 4
Due 21:00 f 2/22

Project Description

Creating a web application, part I. Framework: Adobe Dreamweaver CS3. Platform: LAMP (Linux/Apache/MySQL/PHP).

Read the following web pages (covered in class and lab week 5):

setup.html
mySQL-conn.html
record-insert.html

1. 382 Information Architecture


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. DW will automatically create a /382/Connections folder, as well.

Remote host: On webdav.cs.uoregon.edu, use your home directory in /cit381/ as the site root folder.

For example, if CIT 382 student Bonzo Whalen's home directory is /cit381/bonzow/, then that is what she would use for the remote folder and testing server folder in Dreamweaver.

You can use Dreamweaver to create subdirectories css, js, cookies, examples, html, images and php on the remote host. DW will automatically create a Connections folder when you upload connBH.php. DW automatically creates a folder whenever you upload a file, if the folder containing that file does not exist on the server.

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

2. XHTML & CSS.

  1. BH-home.html and BH-sign-in.html.Change the topNav of these pages so that the New Customers Start Here link has /382/php/createAcct.php as its landing page.

  2. BH-sign-in.html. Add a message informing new customers that they can create an account by going to the create account page. State the advantages of registering with your enterprise. Add a link to /382/createAcct.php.

  3. BH.css. Cut the CSS style rules from the head sections of BH-home.html and BH-sign-in.html, and paste them into an external style sheet named BH.css. (You can replace BH with the name or acronym of your eCommerce site.)

    Connect your .html pages to BH.css using a link element.

  4. BH-cat-db.js. Cut the JavaScript database code (only) from the head sections of BH-home.html and BH-sign-in.html, and paste one copy into an external JavaScript File named BH-cat-db.js.

    Connect your .html pages to BH-cat-db.js. Depending on how you implemented your JavaScript database, you may need to slightly modify the script in the leftNav of BH-home.html and/or BH-sign-in.html to work correctly with the external JavaScript file.

  5. createAcct.php.

    In class and lab you worked on this web application that uses a Record Insertion Form to add a new record to the Customer table in your BH MySQL database.


    Change the value of the Submit button in createAcct.php so that it reads, Create My Account.

    Connect createAcct.php to BH.css and BH-cat-db.js. Then modify this web page so that it's design, layout and personalization is identical to BH-home.html and BH-sign-in.html.

    Use an xhtml fieldset element to draw a border on the customer data.


  6. /382/html/welcome.html. In createAcct.php when the user clicks the Create My Account button, the php executes and then does a page transition to /382/html/welcome.html, which welcomes the new customer to your organization.

    Create welcome.html using the same design and layout of your other pages.

  7. Remember to install all your files (.css, .js, .html, .php) on ix.cs.uoregon.edu.

3. MySQL.

For this project, you will need just two tables (Customer and Product) to infringe Amazon's software patent for 1-Click Shopping.

  1. Movie Table. Insert two records for each of your nine categories.

    For each movie, locate an image and a thumbnail, and store them in /382/images/.

    You can store an image element as the value of the thumbPath field. For example:

    <img src="../images/es-th.jpg" alt="endless summer" />.


  2. Customer table.

    Add a custID field that auto increments. Make it the primary key.


4. PHP.

  1. Read how to create a product guide, "Building Master/Detail Pages in One Operation."

    Read how to create a recordset.

    Then create a product guide consisting of a Master and Detail page.

    Name the master page /382/php/products.php. (Plural.)

    Name the detail page /382/php/product.php. (Singular.)

  2. Your dynamic category links in the leftNav use /382/php/products.php as the landing page. Verify that your category links open the product guide.

5. Project 4 Grading Rubric (Coming Soon.)

6. Turn-in Project 4 in Blackboard.

Remember to formally submit your project in Blackboard, to create your entry in the gradebook.

For the Project URL in the Comments section, submit the URL of your web application on the cs server.

Example: https://ix.cs.uoregon.edu/cit381/bonzow/

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

 

Extra Credit Option: Meet the Original Due Date

If you've worked to make the original 2/15 deadline, go ahead and turn it by this date: 5 pts will be added to your project score. To qualify for these points you must also state "Extra Credit Option completed," in the Comments section when you submit your project in Blackboard.

Credits


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