Program 2:  PHP/MySQL - WebPro shopping cart


You have just been hired as the web programmer for a new startup company called, WebProWebPro wants to sell books about web programming on the web (makes sense, doesn't it).  They have asked you to design their web site using PHP and MySQL.  They want the following abilities:

Note:  Because WebPro is a startup, they have a limited inventory.

You have decided to build the WebPro website incrementally in the following steps.

Grading Information:


Step 1:    Design the look of WebPro

Part A:

The design you choose will carry throughout the whole web site.  Therefore, you may want to keep it simple. WebPro hired a graphics consultant who came up with the following design .  Your boss definitely wants you to keep the sidebar design, but gives you the freedom to change the graphic, wording, and/or colors (if desired). Part B:

Because you need to carry your webpage design throughout the whole website you will need to replicate the html for the table in Part A to every page you create.  One way to avoid typing/copying this multiple times, is to write PHP functions to do this for you.  So, in your PHP code, you will call a function and it will print out the necessary html.  One benefit of doing this is that if you decide to change something later on, you only need to change it in one location.

Important Notes: Check out the demo of step1!


Step 2:  Display categories

Part A:

WebPro has designed a database system for keeping track of their inventory.  Each of their books is placed in a category based on its content.  WebPro currently supplies books in 7 categories:

These entries are stored in a table called categories. Part B:

WebPro wants to display the list of categories as soon as the user enters the website.

Check out the demo of step2!


Step 3:  Displaying books

Part A:

WebPro wants to be able to display all the books related to category.  So, instead of just displaying the name of the category (what we did in step2), we want to display the name of the category as a link.  When the user clicks on the link, it will print all the books in that category.

Part B:

The WebPro database stores the following data with each book in the table books  they provide:

Check out the demo of step3!


Step 4:   A search engine (a small one)

WebPro wants their customers to be able to find a book based on a keyword in either the author or title.

Part A:

Create a small form in the sidebar of your webpage (i.e., place code within print_sidebar function in your html_util.php3 file...see html_util.php3 ).  Your form will point to a script called search.php3 and will need to include the following:

Part B:

Copy  search.php3  to your WebPro directory.  Using the information you learned in lecture, fill in the code at the places indicated in the comments.  Use your list_books.php3 script as a guide on how to print the results of your search.  Test it out!

Hint:  There are two authors with Mark as their first name.  Together they published 4 books.

Extra Credit:

list_books.php3 and search.php3 use the same code to display the list of books.  Rather than replicating the code twice in both locations, we will use a function.  Create a function in your mysql_util.php3 file called print_books which takes one argument, the results returned from the mysql query.  Add the following function declaration in your mysql_util.php3 file.

function print_books( $books ) {
}

Identify the common code in list_books.php3 and search.php3 and fill in the definition of print_books.  Modify your list_books.php3 and search.php3 file accordingly.

Check out the demo of step4!


Step 5(a):  Buying one book - Creating a form

You will first enable customers to buy only one book at a time.

Part A:

WebPro wants their customers to be able to buy a book by clicking on the book title.

Part B:

Copy buy.php3 and form.php3 to your WebPro directory.  Add code into buy.php3 at places indicated with comments using the scripts you've written in the other steps and the information you learned during lecture.  Be sure to add a couple of lines of comments at the top of form.php3.

Part C:

It is often convenient for customers if you place links to pages they are likely to need to access again.  Therefore, we want to add a link on the sidebar that takes customers back to the list_categories.php3 script.  Modify your print_sidebar function in your html_util.php3 file so that it contains a link to list_categories.php3.  Look at html_util.php3  for a hint.

Check out the demo of step 5a!


EXTRA CREDIT( Step 5(b):  Buying one book  - Checking data in a form)

It is often the case that people make mistakes when filling out forms.  For example they skip fields or make a typo in one of the fields. WebPro is happy if you just put in checks for the following: Part A:

First we want to put in the checks for user input.

Part B:

Then we want to check that they gave us a vaild credit card number. WebPro only takes credit cards of type XCard (which by the way only have 4 digit credit card numbers).  ValidCredit is a company that provides a database of valid credit card numbers (including XCard). WebPro has gained access to the ValidCredit database and wants you to add a check for valid XCard numbers.

More Extra Credit:

Add an email adress to the form.

Check out the demo of step 5b!


Step 6:  Identifying your customer

In order to allow the customer to purchase multiple books at a time, we're going to track the books they've ordered so far on our server.  Because we need someway of identifying which books belong to which customer (there could be multiple customers shopping at a time), we're going to need to associate a unique shopper id with each customer when they enter the web site.  This shopper id will follow the customer everywhere they go as they browse the WebPro inventory.

Part A:

We're going to use a random integer for our shopper id.  To generate our random shopper ids, we're going to use the srand and rand functions provided by PHP.

Part B:

Now we want to generate the shopper id as soon as the customer enters the site.

Part C:

Now we want to propagate the shopper id everywhere.  This means that whenever the customer submits a form or clicks on a link, we need to pass the shopper id to the new script.

Part D:

Recall that variables declared outside of a function will not be available inside that function.  Therefore, we need to add

global $sid;

at the top of functions print_sidebar (html_util.php3) and if you implemented the extra credit in Part 4, print_books (mysql_util.php3).

Check out the demo of step 6!


Step 7:  Filling a shopping cart

Part A:

Now that you have a unique shopper id (and all your books have ids), we can create a shopping cart for each customer.  We do this by entering data into a database table.  The table at a minimum needs to contain a column for shopper ids and a column for book ids.  When a customer purchases a book, we enter an tuple into the table.  So, essentially, the table will contain multiple shopping carts, one for each unique shopper id in the table.

Part B:

Now when the user clicks on a book title, it will add the book to their cart (i.e., enter a (sid, id) tuple to the cart table.

Check out the demo of step 7!


Step 8:  Viewing the shopping cart

Part A:

We want the customer to be able to view the contents of their shopping cart at any time.

Part B:

When the customer wants to view their shopping cart, we want to retrieve the books they have in our cart database.  We will then display all the books they've added to their cart and their total amount.

Check out the demo of step 8!


EXTRA CREDIT( Step 9:  Deleting an item from the shopping cart)

Part A:

Customers may decide to not to buy a book.  Therefore we must allow users to delete items in their shopping cart.

Part B:

When the customer clicks the link to delete the book, we want to remove the ($sid, $id) tuple from the cart database.

Check out the demo of step 9!


Step 10:  Checking out

Part A:

Once the customer has finished shopping they'll need to checkout (just like you do in a grocery store).

Part B:

When the customer goes to checkout, we display their order (so they can verify it) and then display the order form.

Part C:

Once the customer has clicked the order form, you should list the books that will be sent to them in the receipt you print out.

Check out the demo of step 10!


EXTRA CREDIT( Step 11:  Clear shopping cart)

Once you have printed out the receipt, you should delete the customer's data in your cart (not needed anymore).

Congratulations!!  You have completed your first shopping cart application!