Assignments 2-3: Store (server-side)

In these next two assignments you are going to build an e-commerce site. These assignments build on your solution from FWP. If you did not take FWP, do not have your previous solution, or just don’t like your previous solution, you can use our solution. Our (boring) store is here: demo. You can use this a starting point but we ask that you customize it with some more meaningful products and descriptions (from your browser, “View Source” to extract the underlying HTML code that you can then copy and paste into your own file).

To remind you, the client portion of the store consists of the following parts: a single page with four main sections: (1) banner; (2) storefront; (3) product details; and (4) cart. Here is how these parts operate:

Select a name for your company. Design an attractive and informative banner that runs across the top of your site. This should be done with Javascript and the drawing functions provided by processing.js.

Storefront

Select a range of products that you will sell. These can be anything: clothing, motorcycles, food, music, services, etc. You should have at least 16 distinct products in your inventory. Create a virtual storefront that highlights each product. This should include, at a minimum, a photo of the product and the name of the product.

Product Details

When a user selects a product in the storefront, more details about that product should appear in this section. This should include the picture, name, price, description, and anything else that you’d like to add (ratings, suggestions for other products, shipping information, etc). This section should also have a “add to cart” button which when selected will add a product to the user’s cart.

Cart

This section shows an enumerated list of all items in the user’s cart including the item name and price. At the end of this list is the total cost of all items in the cart and a “checkout” button which when selected will reveal the checkout section.


Assignment 2 – Checkout

Complete the final checkout portion of the store. This section should consist of a single form that allows a user to enter their name, address, email, and credit card information. A “submit” button should send the form to a server-side PHP script that you will write. This script should extract the order information and send a thank you notice back to the user. The thank you notice should read “Dear NAME, thank you for your order of N items, totalling D dollars.”, where you will fill in NAME, N, and D from the user submitted data.

Suggestion: in my solution, when the “checkout” button is selected, I call a javascript function that makes visible the checkout section. This final section consists of a single form that will be sent back to the server when the submit button is selected. In order to send the order information, you will also need to send to the server the contents of the cart (in any type of format). You can do this by creating an input field of type “hidden”, putting the contents of the cart in this field, and then this information will be sent to the server, but the user won’t see its contents in the checkout form (which would be redundant with the information in the cart section). When creating this input field, remember that you need to use “name” to refer to the input field on the server and “id” to refer to the input field in the javascript code – you’ll need both in this case.


Assignment 3 – Database

Building on your solution to Assignment #2 (above), your server-side script should populate a SQLite database with the customer information. Your SQLite database should consist of two tables: “customers” and “orders”.

The “customers” table should consist of four columns: name, address (all combined into a single string), email, and date of order. This table should utilize an auto-incrementing primary key so that repeat customers each occupy a separate row in the “customers” table.

The “orders” table should consist of two columns: item and count, where “item” corresponds to each item in your store and “count” corresponds to the number of times each item was purchased. Your server-side code should check to see if an item is in this table. If so, then you should increment the item’s count by one; if not, then you should add a row to the table with the item name and set the item’s count count to one.

You should also write an “administrative” php script “orderFrequency.php” that when called returns in sorted order the most frequently to least frequently ordered items (you can run this script at the shell in c9.io, or by navigating to the same site that hosts your store and replacing, for example, store.html, with orderFrequency.php.

Hints:

  1. You might consider adding a new hidden field to your form that lists the names of the items in a single string – this will make it easier to extract this required information in your server-side PHP script.

  1. The php command “explode” may be useful to you. This command converts a string into an array

  1. You will need to query a SQL database from within your PHP script. I suggest that you first create the required tables directly in SQL. Then, in your PHP script you can insert, update, and query your database as folllows. “Open” the database (mine is called mydb) so that you can access it using the following command:
  1. Once your database is open, you can, for example, insert an item into a table as follows (notice the fussy quotes: the entire command is enclosed with single quotes ('') and the double qutoes ("") are used to delimit the values of variables:
  1. SQL allows you to increment the value of an integer-valued column as follows: