Introduction

Using Animal Crossing (a popular video game I like to play) characters as a starting point, this project shows the current residents I have on my island. All items in this collection have shared properties, and I'm looping through them so that I can create a card per character that displays its information.

I created two types of residents: villagers and NPCs (non-playable characters). The project makes use of a parent class, that's used to create two child classes, allowing for variations amongst the displayed data. The page was built making use of partials for its different sections.

Project Structure

The first step was to create the basic folder structure and initiate the project with init.php, index.php and functions.php files. The init folder contains the project's constants, like the project's directory and localhost locations, to be able to run the application using MAMP. The Classes are also placed on this file, so they can be accessed globally. The index.php file acts as a container for the page's body. Here I'm importing the head tag, header and footer via global partials. The dynamic data is also included via the resident's card partial. Two foreach() loops were used on this file, to read both child classes and create a card for every item on those two collections.

Parent Class

The first thing was to declare the parent Class properties, they all remained public, except for their fun facts, in which case a setter method was used to assign those. Inside the Class Methods section, a constructor was created. This Class expects a relational array to be passed as a parameter to be able to create an instance of it. There are two properties that remained optional, that were declared making use of the Null Coalescing operator.

Child Classes

Two child classes were created for this project, Villager and an NPC. These two make use of the keyword extends to have access to their parent Class of Resident properties and methods. Each of these classes has a distinctive property and constructor method.

Data

Inside the data folder, two files were created to contain the instances of the Villagers and Npc's classes accordingly. Each resident is built making use of the “new” keyword, the name of the Class, and is passing a relational array as a parameter. All these instances are then included in a Villager or NPC array.

Card Partial

Once all the data has been created, we're ready to access and display it. A partial called card was created to display all the residents' information. This partial contains an if statement, to display their personality if the resident is a Villager or the service they offer if the resident is an NPC.

Final Result

The page loads a card for each resident and displays its distinctive information for Villagers and NPCs. All cards contain the character's name, image and other general details like species and birthday. I was pleased with the final result, considering it was my first PHP project. For future iterations, I would like to expand on this project and have the ability to filter residents per type of offer and the possibility to click on each card to access a resident's individual profile page with more information.

Learn more

• GitHub Repository