John Fleischli, Levi Remington, Erik Stanton – CST 336 Final Project

12-11-19

For our final project we have designed a database-driven shopping

website based off the latest and largest entry in the popular action-
adventure videogame franchise The Legend of Zelda: Breath of the Wild.
At Hateno Goods & Gear, the user can search and sort through the
hundreds of items on offer in Hyrule, add them to a personal bag and
calculate the total price – in rupees of course! Users can keep track of
what’s in their bag with the creation of an account, and they can even
modify the contents of their bag by adjusting quantity or removing items
entirely. In addition, administrators can access tools on the site to create
new users, modify existing accounts, or view insightful data reports.
CST336 Final
H AT E N O G O O D S & G E A R

MOCKUP
We wanted our design to be simple and easy to navigate while also reflecting the overall mood and
aesthetic of the Breath of the Wild videogame. Our first reference was an airsoft website, Evike.com, which
gave us inspiration for our website’s header and “featured items” section.

Next, we wanted to create a visual representation for how each item would be displayed on the website.
Instead of text overlay atop a larger image like the airsoft website, we needed to design our item container
to display a small image adjacent to relevant item details. This was our initial Photoshop attempt:

Page 1
CST336 Final

Database Schema
Our website relies on four tables managed through Adminer in the provided cst336_db010 database. The
first table, items, was populated by a series of Python scripts we wrote to scrape the Zelda Gamepedia Wiki
for all obtainable items in the Breath of the Wild videogame. The assortment of items is assisted by the types
table, which aids in the processing of dynamic MySQL queries for category filters. The bags table keeps track
of what items each user has added to their bag. Finally, the users table stores each username and hashed
password of every admin and non-admin account.

Page 2
Screenshots
Homepage:

Category page:

Page 3
CST336 Final
About page:

Page 4
Adding to bag while logged in:

Adding to bag while not logged in:

Page 5
CST336 Final
Log-in page:

Bag:

Page 6
Page 7
CST336 Final

Remove from bag:

Page 8
Search with sort-by price low to high:

Account Page:

Page 9
CST336 Final
Admin Tools:

Reports:

Page 10
Page 11
CST336 Final
Insert:

Delete:

Page 12
Update:

Page 13