Untitled Document

Project 1

Web-Site Deliverable(1&2 below) - Due May 1 (start of class and on blackboard start of class)

Points 200

The Front-End w/Simple sessions PhP Cart

Create a web-site for a ficticious company that sells some kind of products. Your web-site should have the following important information and features. Please be carefull to design your web-site with a series of forms to collect user's order information. You MUST use a shopping-cart model as we will be doing persistent-data programming using PHP and sessions.

YOU MUST USE CSS styles and use CSS for a navigation bar that has a Homepage link a Products Page link

Homepage = Attractive entrance to site that contains some images and some information about the website
Products Page= page that contains a table or some organizaiton of 25 links (linked on the product name) to the individual product pages
Individual Product Pages = You need a minimum of 25 product pages that will give an image of the product and details about the product in addition to a "add to cart" button (this will mean a minimum of 25 individual product pages).

SERIES of Checkout Forms discussed below that are generated by PHP programs

SHOPPING CHECKOUT FORMS AND EXPERIENCE

You should have a form (or series of forms) that lets the user select which (and if appropriate how many) products they wish to purchase. The exact product options and products you select to offer are up to you, but the number of them must be adhered to.

Your web shoppers will shop using the following sequence::

1. Go from HOMEPAGE -> To PRODUCT PAGE ->Select an individual Product which takes you to -> INDIVIDUAL PRODUCT PAGE.

Individual product pages are static html pages (each called productXXX.html - for 25 products you will have 25 product html pages). The pages should look all the same in style just different images and product description and price. An image, brief product description, cost are required on each page. Each INDIVIDUAL product page must have as part of an "Add to cart" button (or as shown below Add to Bag) that will have as an action statement of its form call the static shopping cart page, cart.php

Note a user can return to a product page to make an additional order. If the user orders a product that is already in the cart you MUST not make it a separate item but, simply increase the quantity.

ALSO note - we are not going to the sake of this project sell items with different options (like colors or sizes)

ALSO note - for the sake of our educational project you can borrow images from real products (like I have) but, ofcourse you can't really deploy this.

<form action="cart.php" method="POST">

     ******whatever form elements you want go here like quantity*******

     <input type="hidden" name="productid" value="1234"> ****** you put YOUR product ID here not 1234, unique ID Of product*****

     <input type="hidden" name="name" value="Echo"> ****** you put YOUR product name here, not Echo*****

     <input type="submit" value="Add to bag"> ******or can say add to cart******

</form>

2. SHOPPING CART INTERFACE (cart.php)- It is shopping cart that shows the products the user has so far selected(see image below). IT has a check out button that takes you to a static Personal Information Form (step 3), IMPORTANT the php program must add the new items into the cart which is maintained in the session. NOTE: the checkout button will be inside an HTML form that points to userInfo.php and uses POST method.

1) cart.php: will display the current items saved to the cart (stored in session) and has a checkout button that must work as described above. The project does not require the edit or remove of items from the cart (see extra credit below)

2) formatting should appear APPROXIMATELY as shown above ---but, does not have to be exact ---I am looking for well formatted forms that have the elements described above and clearly formatted.

Extra Credit options -- worth an increase of 10% up to a maximum of 100% (you can not exceed 100% on this project) is if you add the functionality of editing the shopping cart to change the quantity and to be able to remove an item

3. PERSONAL INFORMATION FORM (userInfo.php) Enter name, address, email address and other information. This form has a continue/submit button that takes you to step 4 a Payment Information Form. YOU MUST INCLUDE email too! Note if users want different billing address you must have form elements for this. ALL of this information must be added to the session information. NOTE: the form below is a sample design but it does NOT include email as required.. NOTE this is an HTML form that uses POST method and points to payment.php

personal information form

4. PAYMENT INFORMATION FORM (payment.php) This is the html form that will collect the payment information including Name on Credit Card, Credit Card Type (Visa, AMEX, etc), Credit Card Number, Expiration Date. This form also has a Continue button that calls the Order Summary page. This form will be processed and take you to step 5 but, first saves all this information in the session.

I am NOT showing you any design for this page. I will be grading you on how good of a design you create. You might consider modeling it after a popular shopping site whose design you like for this page.

NOTE: this again is an HTML form that uses POST method and points to finalOrder.php

5.ORDER SUMMARY PAGE.(finalOrder.php) This page shows the user a summary of their order. It must contain the following information it retrieves from the session AND dynamically displays to the client:

DISPLAY the following:

ALL User Information
ALL Payment Information
ALL Products in Shopping Cart along with details (name,productid, quantity, etc as appropriate) AND total COST including tax

THEN finalOrder.php clears the ShoppingCart and other session information.

Also note -You can assume a tax rate of 8% and shipping fee of $2 for ALL orders.

The following is the file structure of your Project1 directory on your server account (NOT including media files)

Evaluation Guidelines -approximate guidelines only

Deliverables

HTML code and related media, etc. posted on your class server account. You must fully test (with Chrome, Mozilla, IE)!!

HTMLWorking.doc: containing (you must use the following section titles)

SECTION 1:SCREENSHOTS: screen shot of one Product page and each of the shopping cart and checkout pages

SECTION 2: STATUS: here you must state what pages and requirements you have implmemented and ESPECIALLY TELL ME what you have not finished or is not working

SECTION 3) ADD TO CART PROCESS: give series of screen shots showing a) empty shopping cart, b) product page with "add to cart button" c) cart with product added to it.

SECTION 4) CHECKOUT PROCESS: containing series of screen shots from web-browsers showing the processing of the series of forms used in the check out process.

Upload the FOLLOWING 3 times to Blackboard->Projects->Project 1

HTMLWorking.doc,

Code.zip (zipped up project directory that has all html, css, php, etc)

specify the URL to a homepage

Project 1