Tsarbucks
Summary

Using PHP, HTML, and a connection to a MySQL database, create an e-commerce system for a fictional coffee company. This involves a shopping cart for a customer, a menu of items that can be added to the cart, and a separate screen for a barista to mark ordered items as complete.

Make sure you have an understanding of form submissions, mysqli or PDO, sessions, strings, and arrays.

Check out the screenshots (comp484-project-3-screenshots.zipView in a new window) for an idea of how the system works.

You may also create your own database schema or use the same one I made for my implementation (tsarbucks.sqlPreview the documentView in a new window).

If you create your own database schema, please also submit it as a .sql file (SQL dump) along with all data in your database in the same ZIP file as your assignment submission. You can do this in one fell swoop in both phpMyAdmin (Export tab) and Sequel Pro (File > Export).

Finally, you MUST do the server-side components in vanilla PHP; you may not use a framework on this project. This is an exercise in development using vanilla PHP.
Specification

The Tsarbucks e-commerce system provides a way for a customer to log-in, see their order history, select drinks from a menu, add the desired drinks to their shopping cart, and submit the order to be prepared. It also provides a way for a barista to log-in and mark the items in an order as completed (i.e. when they have finished making a drink for a customer).
User Interface

The user interface should contain the following:

General

    Login screen that takes a username and password
    Logout functionality (link, screen, etc) that logs-out the current user
    Navigation bar that has all available options for the logged-in user

Customer Component

    Home screen that displays information (this can be the same as the My Orders screen)
    My Orders screen that displays the details of past and current orders
        If an item in an order has been completed, it should show that it has been completed. Otherwise it should show as pending.
    Menu screen that gives the customer a set of items to add to the cart
    My Cart screen that displays everything currently in the customer's cart
        Each item on the screen should have the option to remove it
        There should also be a button that allows the customer to submit their order

Barista Component

    Home screen that displays information (this can be the same as the Pending Orders screen)
    Pending Orders screen that displays all orders that are currently pending
        All non-completed (pending) items in all orders should be shown
        Each item should have the option for the barista to mark it as completed

I'm not looking for anything stellar for the UI but just make sure all of the components are there.
Functionality

Redirecting with PHP

// redirect to the home page and then exit the script
header("Location: index.php");
exit();

General

    The Login functionality needs to take a username and password, check it against the database, and then log the user in. The username and user ID should be saved to the session and then the user should be redirected to the home page.
    The Logout functionality needs to destroy the entire session upon logout and then redirect the user back to the home page.
    The navigation bar needs to link to all the relevant pages based on the logged-in user

Customer Component

    The My Orders screen needs to show the details of each order both past and current from the database. The details are the following:
        Cost of the entire order
        The name of each item in the order
        Whether each item in the order has been completed or is still pending
    The Menu screen needs to do the following:
        Display all items available for purchase
        Each item available needs to show its price
        Each item needs to have a way for the user to add it to his cart
    The My Cart screen needs to do the following:
        Display all items currently in the user's cart
        Each item in the cart needs to show its price
        Each item in the cart needs to have a way for the user to remove it from his cart
        Provide a way for the user to submit the order in his cart
            This should save the data of the order to the database

Barista Component

    The Pending Orders screen needs to do the following:
        Show only items that are pending in the orders (i.e. not completed) from the database
        Each pending item needs to show its price
        Each pending item needs to have a way for the barista to mark it as completed
            Marking an item as completed should update the order item in the database

Grading

This project is worth 20 points, weighted at 20% of the grade. Implementing all of the functionality is considerably more important than how the UI looks.

I'm going to be using Chrome to run everything since Firefox can be funky sometimes.
Extra Credit

The extra credit for this project involves integrating AJAX and Socket.io with the customer's My Orders screen and the barista's Pending Orders screen.

Upon the barista marking an item as complete (you'll probably want to do that with an AJAX call now) a socket message should fire to the Socket.io server (after the database update is successful) and then a message should be sent to the customer from the server in response.

When the customer receives the message (only while on the My Orders screen), the relevant order item that was just completed should change visually somehow. My implementation involves changing the background color of the table row containing the item in the order.

The extra credit is worth 2 points.