Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/iansteyn/cosc-304-project

A simple shopping website built with JSPs that connects to a SQL Server database. Rowan and Ian's final project for COSC 304 (Intro to Databases).
https://github.com/iansteyn/cosc-304-project

jsp sqlserver university-project

Last synced: 9 months ago
JSON representation

A simple shopping website built with JSPs that connects to a SQL Server database. Rowan and Ian's final project for COSC 304 (Intro to Databases).

Awesome Lists containing this project

README 

          
# **PUZZLE PLACE**



# **Lab 10 Project Report**



---



# **COSC 304 \- Introduction To Databases**



Group 42  

Ian Steyn  

Rowan Fortier



---



## **Executive Summary**



#### **Mission Statement**



Puzzle Place is the best (and first) BC-based online seller of Rubik’s Cubes, twisty puzzles and related accessory items.



#### **Executive Summary Paragraph**



Our project has been to build a simple shopping website for Rubik’s cubes. British Columbia does not yet have a dedicated store for selling Rubik’s Cubes. We will cater to enthusiasts across the province and expand from there. We sell items in a few categories, including speedcubes, hypercubes, collector puzzles, and accessories. 



### **Where to find the website**



Our project code can be downloaded from our github repository at [github.com/iansteyn/cosc-304-project](http://github.com/iansteyn/cosc-304-project).  

It is not cloud-hosted, so we cannot provide a general link.



## **System Features & Project Description**



Puzzle Place is a simple online shopping website built using Jakarta Server Pages and a locally hosted SQL Server database. It allows users to log in and “shop” for puzzle products. They can browse the full list, search by name, or search by category. After adding products to their cart, the user can “checkout” to order their items. Any user can log in as an administrator to view the sales report, and a list of all the customers.



We have not added a ton of new features since the last lab. Both of us had higher priority software engineering projects in other classes worth far more to our overall grades. However, we added a site header, some fun colours, some nicer tables and our own products to make the project our own and differentiate it from “Ray’s Grocery”. 



There may not be many features, but what is here, works. We believe this is because we tried our best to use good software development practices, and used Git and Github to effectively do version and quality control. For proof, you can look at our Git repository history, where you will see several pull requests and reviews. 



Core features:



- Browse selection of products  

  - Search by name, or filter by category  

  - See product details with images  

- Add products to cart and checkout or clear cart  

- Log in to a user account, and view account information  

- Log in as an admin to view sales report and list of all customers  

- List all orders  

- Ship orders



## **Sources Used**



Since we didn’t do anything crazy complicated in this lab, we didn’t use many web sources. We did not use AI generated code or coding companions at all.



Here are the few sources we could think of:



- [92 CSS Buttons](https://getcssscan.com/css-buttons-examples) (for the orange buttons on the product details page)  

- [W3 Schools](https://www.w3schools.com/) (for general CSS help)  

- [(Java Platform SE 8 Docs)](https://docs.oracle.com/javase/8/docs/api/java/sql/Timestamp.html) (for general Java help)  

- Course slides and Ray’s example website



## 



## **Site Walkthrough**

_Note: this section should have images, but in the Google docs -> markdwon conversion they got lost._



### **Main Page & Header**



The main page (index.jsp) has all the commonly used links. Here you can also see our site header, which is at the top of every page and contains many of the same links. The index page can always be reached by clicking on “PUZZLE PLACE” in the header.  

![][image1]



### **Shopping**



Clicking on Begin shopping in the header or index page takes you to the page where you can browse a list of all our products.  

![][image2]



You can search for specific products by using the search bar…Or you can filter by specific categories (or both).  

![][image3]![][image4]



Clicking on the name of a product takes you to a product detail page which can have an image and description.  

![][image5]



Clicking Add to cart on either the product list page or product details page will add that product to your cart, and take you to the cart page. Clicking Continue shopping from here (or from the product details view) takes you back to the product list page.  

![][image6]



This page is also a good opportunity to show how we have improved the UI and made it unique to us since lab 8\. Lab 8:  

![][image7]



You can remove all items from the cart by clicking clear cart.  

![][image8]



Clicking checkout on the cart page will allow you to confirm checkout with your customer id.  

![][image9]



After entering a valid customer ID, the order summary page shows all the items in your order, as well as some reference and customer information.  

![][image10]



### **List all orders**



We weren’t really sure where else to put this page, so you can access it by clicking “List All Orders” on the index page or the site header. Table rows are highlighted with fun colours as you roll over them.   

![][image11]![][image12]



### **Admin**



This page can be accessed by clicking on “Admin” in the header or index page, and requires that you be logged in before accessing it (See Login section below). The admin page shows two tables:



- Sales report by day: the total dollar amount made from orders for each day  

- List of all customers (with some of their personal info)



![][image13]



### **Login and Customer Pages**



The login page is accessed by clicking “Login” in the header while logged out, or “Login” on the index page at any time.  

![][image14]



If an incorrect username or password is entered, an error message will display.  

![][image15]



The following usernames and passwords can be used to log in to our system:



| Username | Passwords |

| :---- | :---- |

| arnold | 304Arnold\! |

| bobby | 304Bobby\! |

| candace | 304Candace\! |

| darren | 304Darren\! |

| beth | 304Beth\! |



When the user is logged in, their username will be displayed on the header and index pages. They can log out by clicking on “Logout” in the header (only displayed while someone is logged in) or by clicking “Logout” on the index page, (which is always displayed).  

![][image16]



While logged in, the user can click on their username in the header (or “Customer Info” on the index page) to see their personal information. If the user is from the US, the table will say “State” and “Zip Code”. If they are from Canada, it will say “Province” and “Postal Code”.   

![][image17]![][image18]



### **Shipping**



You can test the shipping of an order by clicking “Test ship orderid=1” on the main page.   

![][image19]



Reloading this page will cause the inventory to go down, showing how this page actually interacts with the database.  

![][image20]



Setting orderId=3 will show what happens when a shipment is unsuccessful.  

![][image21]



## **Feature Checklist**



| Final Overall System Features | Category | Points | Comments / Code Files |

| :---- | ----- | :---: | ----- |

| **Documentation (15 total points)** |  |  |  |

| Executive Summary (up to 1 page) | Core | 2 | In this document |

| System Features (2 pages) | Core | 2 | In this document |

| List of Web and AI sources used | Core | 3 | In this document |

| Walkthrough with screenshots (up to 15 pages) | Core | 8 | In this document |

|  |  |  |  |

| **Main/Home Page (up to 14 total points)** |  |  |  |

| Search for a product by name | Core | 1 | listprod.jsp |

| Browse products by category | Core | 1 | listprod.jsp |

| List products (by search/browse) | Core | 1 | listprod.jsp |

| Page header with menu | Basic | 1 | header.jsp |

| Page header shows current logged in user | Basic | 1 | header.jsp |

|  |  |  |  |

| **Shopping Cart (up to 8 total points)** |  |  |  |

| Add to shopping cart | Core | 1 | listprod.jsp, product.jsp, addcart.jsp |

| View shopping cart | Core | 1 | showcart.jsp |

| Improved formatting/UI (e.g. in header bar) | Basic | 1 | showcart.jsp //see site walkthrough for comparison to Lab 8 |

|  |  |  |  |

| **Checkout (up to 9 total points)** |  |  |  |

| Checkout with customer id | Core | 1 | checkout.jsp |

|  |  |  |  |

| **Product Detail Page (up to 2 total points)** |  |  |  |

| Product detail page and item description | Core | 1 | product.jsp |

| Product detail has an image from database | Core | 1 | product.jsp |

|  |  |  |  |

| User Accounts/Login (up to 12 total points) |  |  |  |

| Login/logout | Core | 1 | auth.jsp, login.jsp, validateLogin.jsp |

| Page listing all orders for user | Core | 1 | listorder.jsp |

|  |  |  |  |

| **Administrator Portal (up to 19 total points)** |  |  |  |

| Secured by login | Core | 1 | auth.jsp, admin.jsp |

| List all customers | Core | 1 | admin.jsp |

| List report showing total sales/orders | Core | 1 | admin.jsp |

|  |  |  |  |

| User interface and navigation/usability | Basic | 1 | style.css // fun colours\! \+ Links to return to previous pages |

| *Ability to clear shopping cart* | *Suggested* | 1  | clearcart.jsp |

| *Good development practices using Git/GitHub* | *Suggested* | 1 | // we know this has nothing to do with features, but we think it shows our promise as good developers. If you check the repo history you will see several pull requests and reviews. |

| **Total** |  | **34** |  |



[image1]: 



[image2]: 



[image3]: 



[image4]: 



[image5]: