Projects

Music Album Catalogue Project

PHP
HTML
Bootstrap

A CRUD web application project.

An image of a CRUD web app for a music album catalogue.

Project Overview

For my NAIT PHP/MySQL class final project, we were tasked to build a CRUD (create, read, upload, delete) catalogue web application where a user can browse items from a chosen topic, add, edit, and delete entries where the items are stored in a database. I chose some of my favourite music albums as the topic, where you can browse all albums and view individual albums to see more information about them.

A screenshot of the add album page for a crud app.

Features and Process

The first part of the process was to choose our topic, create a database table structure, and a list of expected pages and features. My chosen topic of my favourite music albums had database columns in MySQL such as artist name, album name, album artwork, and genre. Using PHP to build the project, some of the features are to have a random featured album from the catalogue on the home page, the browse page will have 9 album cards listed with pagination, a button to view each individual album for more information, and a login page to access adding, editing, and deleting album entries. The next part was to include image upload functionality, advanced search features with filters, form validation, and a random featured song from an album from the catalogue displayed on the home page.

A screenshot of a single album page for a crud app.

Challenge and Solution

One of the challenges I faced towards the end of the project was that the website was not a responsive one, especially on mobile screens. Because we were learning it around the same time, I decided to use Bootstrap to implement something that I had newly learned. Their grid system and mobile-first approach across devices were the perfect solution to the problem.

Results and Learnings

With all the features implemented, I received an A grade for the project. I learned that I am capable of implementing new technologies like Bootstrap and further strengthened my knowledge of PHP and MySQL databases.