Fordham, the Jesuit University of New York

CISC 3300 L01

Internet & Web Programming

Spring, 2015

Dr. Robert K. Moniot


back Back to course home page

Web Project 10: PHP Sessions

Assigned: Thursday, April 9
Due date (revised): Monday, April 20
Points: 25

The aim of this project is to develop a small but somewhat realistic application using PHP sessions.

Background

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.

Specifications

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:

  1. On first visit, it displays a form that allows the visitor to select a product.
  2. When the form is submitted, it displays information about the selected product.

Augment the page so that

  1. The form mode includes the price of the product and also lets the user select a quantity to order.
  2. The response mode displays the quantity ordered and the cost of that portion of the order (price times quantity), in addition to the product information. This page also includes two links:
    • Continue shopping, which takes the visitor back to the form mode to select another product
    • Check out, which takes the visitor to a page that summarizes the order: it lists the items ordered, with the quantity and cost of each, and the total. This page is to be a separate file from the main page. Name this page checkout10.php.
Communication between pages is to be handled using a PHP session. After listing the order, the checkout page ends the session.

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.

Styling

Since this is a more elaborate project, include some nice styling in an external style sheet named project10.css.

JavaScript

So as not to let your JavaScript skills rust either, let's include a little validation in the form itself. The order form should allow the possibility for the visitor to select no quantity or quantity 0. Use unobtrusive JavaScript (plain, no jQuery yet please!) to disable the submit button (setting its disabled property to true) when no positive number for the quantity is selected. Place the JavaScript in an external script file named project10.js.

Notes

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.

Implementation hints

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 use session_start() at the top to connect to the session. 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 example, $_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 variable, say $_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 this this example program from class. You may also want to use 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 simply "#", it does not cause the necessary page reload. Use $_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.

More hints

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:

Choose product

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.

Product Subtotal

Clicking "Continue shopping" gets you back to the first page. Clicking "Check out" gets to a page like this:

Checkout