Live Demo (Use zipcode 49010 to place an order)
This project serves as a “final project” in my path to learning the Laravel framework for web application development. After reading through the entire official documentation, I wanted to get my hands dirty with the framework, so this is what I came up with. I made it a point to touch on nearly every major available feature included with Laravel. This is an app for a hypothetical pizza delivery restaurant.
This project took about seven or eight months to complete. I was figuring a lot of stuff out as I went along. Future projects shouldn’t take nearly as long. I’ll become more proficient with this set of technologies and frameworks the more I use them. Speed of delivery and quality of work will only improve with experience.
Below you will find an overview video and information with more detailed videos demonstrating every major feature of the project. Some of the main features include: An interactive menu system with shopping cart, photo gallery, gift card system, employment applications, live order tracker, full-featured employee dashboard interface, sales report generation via separate data-mart database rendered out to an interactive line graph, and more.
Technologies used: PHP Laravel 5.5, Bootstrap 3, CSS3, JQuery, Vue.js, Vue.js frontend router used in employee dashboard, RESTful application routing, Websockets via Socket.io and laravel echo server, Redis for managing queued tasks and needed for socket.io, MySQL for operational and data mart databases, hosted on a Digital Ocean virtual private server (VPS) running the LAMP stack, SSL encryption, and Supervisor for managing websocket server and queue worker on the VPS.
Project Overview
Interactive Menu
The ordering menu was written in vanilla JavaScript and uses HTML5 canvas to render graphics. It calculates the item prices on the fly as you build them as well as the cart total as items are added and removed. I created the graphics using GIMP. The pricing system uses “price multipliers” and “base prices” for complex items and just “item prices” for simpler items. These prices can be changed in the employee dashboard admin settings when logged in as a “Store Owner.” Below is a video demonstration that explores the menu system.
Ordering
At checkout, the customer enters their details for where the delivery is going and contact info. The payment type is also selected and credit card or gift card details are entered as well. Once the order is placed, the customer is emailed a receipt and is redirected to the order tracker page. The order tracker page receives live updates on the status of the order via a websocket. If the customer navigates away from the tracker page, a cookie stores their details and the main page displays a link back to the tracking page indicating how many pending orders the customer has. The customer can place multiple orders and each of them are added to a list of pending orders on the tracking page.
The orders are received in the “Orders” section of the employee dashboard. A websocket is also set up on that page to notify employees when new orders come in. When this notification is clicked on, the new orders populate into the list of all orders. Each order can be viewed and managed individually. Employees update the status of the order on the order’s page. That update is communicated back to the customer’s order tracker page via websocket.
At the end of each day a scheduled job runs that crunches the daily report and dumps the important sales data for each order into a separate data mart database. The daily report is an Excel spreadsheet that is emailed to all Managers and above. The latest daily report can also be downloaded in the “Reports” section of the dashboard. The data mart can also be queried from this section and various types of sales reports can be generated (more on that in the “Reporting” section of this page). All of the orders for the day are removed from the database so everything starts fresh at the start of each business day.
Gift Cards
Gift cards are ordered via the gift card order form. The same checkout process is used for purchasing as the one used for delivery orders. The giftcard is delivered via email to the recipient. Each giftcard is identified by a 60 character token found in the recipient’s email. Giftcards are used by placing an order for delivery, as usual, and selecting “gift card” as the payment method. It will then ask for the email where the giftcard was received and the secret token. The order total is then deducted from the remaining balance of the giftcard. If the total amount exceeds what remains on the giftcard, then another payment method must be used to pay the remainder of the order.
Photo Gallery
This is a basic photo gallery displayed on the public facing page. Each image has a caption displayed with it. The controls are really simple for browsing through the photos. I used Vue components to create this gallery. Images are uploaded and managed via the dashboard by Managers and above.
Employment Applications
In the footer of the main public page is a link to the employment application form. This form is filled out and submitted. It is received in the “Employment Applications” section of the dashboard. Managers and above have access to this section and can mark applications as interviewed or hired. The Store Owner sets the number of days until applications expire and are automatically removed from the system. When an applicant is interviewed, this expiration period resets for that application. When an application is marked as “hired”, the expiration period no longer applies and that application remains in the system until the cooresponding user account is removed from the system. This way we keep current employees’ applications on record.
Employee Invitation System
Employees must receive an email invite from a manager or above in order to register an account into the system. Managers can invite Shift Supervisors and below and Store Owners can invite any level of employee. The same applies to who they’re authorized to delete.
When the invitation is created, a 60 character token is generated and stored in the “invitations” table within the database. This token is also attached to the registration url in the email to be sent. When the recipient of the email clicks the link, the token is matched against the database record before allowing access to the registration form. This is a security measure to prevent anybody from attempting to register an employee account without an authentic invitation.
Once registered, the new employee is logged in and redirected to the Employee Dashboard. A confirmation email is then sent to the employee who sent the invitation, notifying them that the person had completed the registration.
Sales Reports
The Store Owner sets a time at the end of each business day when the sales reports are to be crunched. All completed orders for the day are factored into this report before being removed from the system. Two main things happen with these reports: A daily report is crunched and saved as an Excel spreadsheet, and all sales are dumped into a separate “data mart” database for dynamic report generation via data analysis queries. The Excel spreadsheet is emailed out to all Managers and above. The latest daily report can also be downloaded from the reports section of the dashboard. The data mart is also queried from the reports section and the results are displayed in an interactive line graph.
Database Models
