Assigned: Thursday, April 9
Due date (revised): Monday, April 20
The aim of this project is to develop a small but somewhat realistic application using PHP sessions.
In this project, you will further develop the small web shopping interface that you started in the PHP form exercise of Project 8. The visitor will get to select products, view them, and fill a shopping cart in a series of interactions. The final step will be to go to a checkout page that will display the cart contents. To keep it simple, a number of things that would be needed in a real shopping interface (like paying for things) will be left out.
Name the main page for this project project10.php. Base this on your project 8 form page. Recall that that page has two modes of operation:
Augment the page so that
Below I have attached some screenshots of what these pages might look like.
It is OK for the quantity to be input using either a textbox or a menu. In the case of the menu, obviously, the number of choices will be finite. A reasonable maximum number like 5 or 10 is OK.
Since this is a more elaborate project, include some nice styling in an external style sheet named project10.css.
little validation in the form itself.
The order form should allow the possibility for the visitor to
yet please!) to disable the submit button (setting
disabled property to true) when no positive number
for the quantity is selected.
In this design, it is possible for the visitor to select the same product as was selected in a previous pass through the form. This should have the effect of replacing the previously chosen quantity of that product in the cart.
As for project 8, the form processor should protect itself against erroneous (hostile) form data.
The form submission handler will store the order in a session
variable. Some suggestions on how to do that are given below. Both
the main page and the checkout page need to
session_start() at the top to connect to the
Shared data such as the prices of the products should be placed in a
PHP file that both pages include.
One way to implement the shopping cart is to have session variables
named for the different products (or product numbers). Each
variable gives the quantity of that product ordered. For
$_SESSION['product1'] could hold the quantity
of product1 ordered. In this implementation, a re-order of the same
product naturally replaces the previous quantity. Products that are not
ordered would simply have undefined session variables. The code for
saving the quantity of a product ordered might look like this:
$product = $_POST['product']; // product selected $quantity = $_POST['quantity']; // quantity ordered (checks for validity etc. go here) $_SESSION[$product] = $quantity; // remember the quantity ordered
Another implementation that is a little more complicated but also
more like a real-world solution would be to have a single session
$_SESSION['cart'], which would itself be
an array, with quantities keyed by product names or numbers. The
tricky part with this implementation is to make sure you can look up
the product prices based on the contents of the cart. For instance,
if the prices array is keyed by product names, the cart should be
too. This implementation also naturally handles replacement of
previous quantities by new selections.
During debugging it can be helpful to have a link to a page that
destroys the session, so you can start a fresh shopping session.
This can be your checkout page, but in case it is temporarily out of
order due to a bug, you can modify
example program from class. You may also want to
print_r to print the session variables. Such
debugging code should be removed or commented out when your project is finished.
If the href of the "Continue shopping" link from the response mode page
back to the shopping page (which is the same PHP file) is
"#", it does not cause the necessary page
$_SERVER['SCRIPT_NAME'] for that link.
Note: Your project page must pass the W3C validator with no more than the unavoidable warning about the experimental HTML5 conformance checker.
Here are some screenshots to illustrate how I want your project to function. Other choices can, of course, be made for the layout, the types of input elements used in the form, the styling, etc.
On first visit, present a form that might look like this:
If the quantity is 0, the "Order" button is greyed out.
On clicking "Order", go to a page like this giving the information about this product, with the subtotal.
Clicking "Continue shopping" gets you back to the first page. Clicking "Check out" gets to a page like this: