Video Game Catalog

Introduction

As the final project for my PHP/MySQL course, we were tasked with creating a full-CRUD catalog website. The project pages and its database were hosted on the institution's server, and the database would be administered via phpMyAdmin. The catalog could be on any topic, so long as it had the necessary features outlined below.

Required Features

  • Introductory homepage explaining the catalog
  • Entries with an image, title, category, at least one number field, and 8-10 fields in total
  • Login to make changes to the database
  • Insert functionality with validation and required image
  • Ability to edit and delete existing catalog items
  • Main page that can show all entries and filter by 3 factors
  • Random entry widget
  • Search feature
  • Single-item display page

Additional features were encouraged and no limits were given with what we could add to our project.

I chose a video game catalog as it was easy to implement several categories to the entries including: genre, platform, price, and multiplayer availability. Furthermore, it was easy to add extra fields such as the developer, publisher, and release date.

Technology

PHP
MySQL
Bootstrap

The website is built using PHP v7.3 and MySQL queries. As previously mentioned, phpMyAdmin was used to manage the database. For time and ease of creation, Bootstrap v4.0 was used to style the pages. A Bootstrap template was used for the main page. Custom CSS was used sparingly to style the HTML.

Tasks

Fulfilling Requirements

My project had all the mandatory requirements outlined above. Each entry contained the following information given below.

Entry Information

  • Title
  • Description
  • Developer
  • Publisher
  • Release Date
  • Price (CAD)
  • Platform
  • Genre
  • Multiplayer/Co-op
  • Cover image (stored with a unique filename using uuid)
  • Optional YouTube trailer video code

Platform and genre are comma-separated fields as entries can have multiple platforms/genres. The platforms for this project are: Windows, Mac OS, Linux, PS4, Xbox One, Nintendo Switch, Android, and iOS. The genres for this project are Puzzle, Point and Click, Action, Adventure, and Platformer. The Multiplayer/Co-op field is a boolean. The YouTube trailer code, if provided, will show the trailer video on the game's page.

By default, all entries will be displayed on the main page. The user can filter by platform, genre, and price (under $10, between $10-$20, over $20). They can also filter to view games with multiplayer/co-op.

Going Above and Beyond

Based off my experiences on catalog websites such as online stores and stock media site, I knew that a sorting option was necessary for a project like this. I added a sorting feature in the form of links across the top of the main page. There are three ways to sort, each with two options.

Sorting Options

  • Alphabetical (A-Z)
  • Alphabetical (Z-A)
  • Price (low-high)
  • Price (high-low)
  • Release Date (newest-oldest)
  • Release Date (oldest-newest)

The sorting feature works with and without filtering. This feature took the most time to troubleshoot as it gave way to numerous bugs.

While a search feature was required, the only way we were taught to implement it via a search page with a search form inside. From my time as a user on other websites, I knew that a site-wide search bar would give a better experience. Compared to the sorting feature, this was relatively easy to implement following a little research and practice.

Reflections

Challenges

This was the most comprehensive project I'd ever created on my own. I wore many hats including front-end developer, back-end developer, designer, tester, etc. There weren't any big issues during the creation of this website, however hosting it later on became a challenge. Despite using the same version of PHP, many functions broke or operated differently. I had to use different logic for my back-end code and learn new functions or versions of existing functions to get the website to operate the same way it did on the institution's server. Thankfully, the hosted website works as intended.

Final Thoughts

This project was pleasant from beginning to end. Despite being an old language, I enjoyed using PHP to create a full-CRUD website. Because it uses vanilla PHP, it didn't have unnecessary complications you'd encounter with modern frameworks like Laravel, React, or Vue. PHP was therefore a breeze, along with MySQL because of my familiarity with SQL prior. The project felt like the right size for a solo endeavor and is one of my favorite accomplishments so far.