Internet Tools Project
SJHA Fitness Center Website
COSC-2206 EL
Course Instructor: Dr. Ratvinder Grewal
Submitted by:
Jakob Fahey (0459240)
April 4, 2025
Project Overview
In this project, I took on the task of creating a website for a fictional center called
the SJHA Fitness Center. The goal was to provide a seamless and simple interactive
experience for both new users, and regular gym goers, allowing them to easily register for a
membership, browse available classes, book personal training sessions and meet their
fitness goals. This website aimed to do this using HTML5, CSS3, PHP, MySQL, as well as
JavaScript, and was designed using these tools to ensure a clean user experience for users
of the site. This project was also developed locally using XAMPP and phpMyAdmin as well,
to ensure I was able to simulate a live deployment environment.
Project Structure (Frontend)
The website is organized into several key pages, starting with a homepage that
features a slideshow showcasing the various amenities offered at the SJHA Fitness Center.
It also includes a brief introduction to the gym and outlines the available membership
pricing options. When a user first visits the site, they have the option to sign up via the
navigation menu in the header. The signup form collects not only standard details like name
and email, but also height, weight, short- and long-term fitness goals, and preferred
membership tier.
Once registered and logged in, users can explore the Classes and Trainers pages,
which pull dynamic data from the database and present it in a clean, responsive grid layout.
This allows users to easily browse available options and book sessions. After booking,
users gain access to the My Bookings dashboard, where they can view upcoming group
classes or 1-on-1 personal training. Here they can modify or cancel bookings as needed.
Some of the other additional site content includes the About Us page, which
highlights SJHA’s mission, values, hours of operation, and locations in a neat and readable
format. Finally, a Log Out option is provided in the navigation menu to allow users to
securely exit their account when finished.
Project Structure (Backend)
Behind the scenes, the website uses PHP to handle the core functionality. All form
submissions, such as signing up, logging in, booking sessions are all handled through PHP
scripts that interact with a MySQL database through PDO and prepared statements. The
website uses sessions to keep track of the login state for the user, which also aids in
ensuring that users of the site can only access certain pages after they have logged in.
Some key examples of this include the book_process.php and signup_process.php
scripts, which take user submitted data, validate it, and insert it into their respective tables
while making sure data integrity and security is still priority. Additionally, bookings are
validated to prevent duplicate bookings, and users are only able to modify or cancel their
own trainer sessions or group classes through the edit_booking.php and
cancel_booking.php pages. All these backend processes work together in harmony
alongside the database to provide the best user experience possible.
Database Design
The database for this website was designed using a relational structure which
consists of four tables: users, trainers, classes, and bookings. The users table is used to
store all user information, which includes the members name, email, height, weight,
membership tier and fitness goals. The trainers table holds information related to each
trainer, including name, specialization, a short bio, and an image of them. The classes
table stores the information for scheduled group classes, such as the specific class, their
description, assigned instructor, as well as a preview image of the class to give the user a
good idea of what they are signing up for. At the center of all this is the bookings table,
which links a user to either a class or a one-on-one training session. It includes all of the
essential information regarding the booking of the class such as the userID of the user who
booked the session, the session name, the instructor, and the date and time of the class or
training session. The system booking system uses nullable foreign keys and conditional
logic to handle these two types of bookings within a single unified structure. This schema
allows the website to retrieve and display the relevant booking details from one place,
making this efficient and maintaining the integrity and flexibility of the data.
ER-Diagram
HTML5 & CSS3 Features
Location: index.php
Location: style.css
Explanation: In these code snippets, the code demonstrates the use of semantic HTML
elements like <main> and <section> and applies responsive layout techniques using CSS
Flexbox and Grid. The Flexbox layout is used to organize elements on the page such as the
slideshow and the content of the homepage into columns to include as much important
content in the first view of the website as possible. Additionally, this was structured in a
way to ensure that the homepage will adjust across many different devices, meeting
modern HTML5 and CSS3 standards.
PHP Logic and Form Handling
Location: booking_process.php
Explanation: This PHP snippet demonstrates how the form data is securely handled after a
booking request is submitted by the user. The snippet above uses PHP’s built-in function
filter_input() to clean and validate the user input, which ensures that we are maintaining
data integrity and security. This code checks to see if the booking created by the user is a
one-on-one training session, and if so, it will combine the date, hour, and minute selected
for the booking and create one string containing the date and time. We are also handling
validation for incomplete requests, to prevent incorrect or incomplete data to the
database.
Location: signup_process.php
Explanation: This code snippet above is part of the user signup process, and like the last
case it takes in the input, cleans it, and validates each of the fields to ensure they are
receiving the correct data type. This helps protect the website from any invalid data being
entered as well as any malicious inputs. Once the values are collected, the script makes
sure that all of the required fields are filled in, and if any of the fields are missing the form
will not be accepted and give the user an error message.
Database Integration & PDO
Location: database_jakobfahey.php
Explanation: This code snippet is where the database connection is handled using PHP’s
PDO (PHP Data Objects). The database credentials are set up here and attempts to
establish a secure connection. If there are any issues, the catch block will display an error
message and stop the script from running. This allows for better error handling and
preventing SQL Injection when a user is interacting with the database.
Location: view_classes.php
Explanation: This code snippet showcases how the website dynamically loads all available
classes from the database using PDO. A query is prepared and executed and then loops
through the returned results to display each class in its own card style layout. To safely
output the data, htmlspecialchars() is used, and dates are formatted to display in a proper
readable format. All of this ensures that the data and logic remain separated, and the
content from the database is displayed safely.
Location: book_process.php
Explanation: This snippet showcases a section of the booking process where prepared
statements are used to query the database and prevent duplicate bookings from
happening. It first checks if the user has already booked the selected class or trainer by
running a query using bound values. If there is a matching record found, the user is shown a
message and then brought back to their bookings page. This helps us maintain data
integrity and avoid any sort of mishaps with double bookings in the database.
CRUD Operations and User Bookings
Location: my_bookings.php
Explanation: Here, the code dynamically displays the upcoming bookings that the user has
created, by looping through each of the bookings retrieved from the database. Using some
conditional logic, we can identify which sessions are a one-one-one session and which are
a group class session. The card layout will change depending on which session type it is
and will only show the Modify button for the one-on-one sessions, since you are unable to
modify the time of a group class, only cancel your attendance. The cancel button will
always be available and allow the user to cancel any booking. This demonstrates the CRUD
functionality built into this website.
Location: edit_bookings.php + update_booking.php
Explanation: These two code snippets work in tandem, as they allow users to update the
date and time of the one-on-one training sessions. The first screenshot shows the form
located on the edit booking page. It will prefill the current booking data, which includes the
date, and time of the session. This uses the date() and strtotime() functions for formatting.
The second snippet is from the update_booking.php process, which handles the
submission of the form from edit_bookings.php page. First, it will verify that the booking
exists and belongs to the user that is currently logged in using a query with PDO and bound
parameters to make sure there is no unauthorized access. Then, the new booking date and
time are updated in the database using a prepared update query. Once this is successful,
the user is sent to a confirmation page.
User Authentication & Sessions
Location: login_process.php
Explanation: In this snippet, the code shown is handling the login process for users. It
starts by cleaning and validating the user input using the filter_input() function used
throughout the website, which will ensure that the email and password fields are safe to
process. It then uses a prepared SQL query to securely retrieve the user based on their
email address. The users password is also verified against the hashed password which is
stored in the database using the password_verify() function, so we can protect the users
password and data. If the credentials are valid, the script will start a session that stores the
users ID and email address so they will not have to relog in when they revisit the page.
Location: signup_process.php
Explanation: In this section of the code in signup_process.php, its main purpose is to
gather and validate the user form submitted data, as well as hashing the password before it
is stored in the database using the PASSWORD_DEFAULT algorithm. This ensures that the
password is not stored in plain text and adds an extra level of security to the account.
Responsive Media & Enhancements
Location: index.php
Explanation: In this code snippet we have some JavaScript that creates a simple image
slideshow for the homepage that showcases all the highlighted features at the SJHA Fitness
Center. It cycles through the elements with the class slide, displaying them one by one in a
loop using a set timer. Although it is not super complex, it serves its purpose by cleanly
showcasing all the gym has to offer to the user.
Location: style.css
Explanation: This snapshot of my CSS file shows the styles used for the slideshow layout
and transitions. The container centers the slideshow with rounded corners and a hidden
overflow which crops the images. Each .slide starts hidden until Javascript displays it. The
.caption class creates a small text overly which lets the user know what part of the gym they
are looking at, and the .fade class adds a clean fade effect so the slideshow isn’t so harsh
to look at.
Challenges Faced
Throughout the project, I ran into a few roadblocks that took a bit of google
searching and browsing through stack overflow to solve. One of the biggest issues I ran into
early on was getting the PHP form validation to work properly without breaking the page.
This required a few attempts and some careful debugging to fix, but in the end, it was a
simple mistake that I had overlooked early on. Another key challenge I had was making sure
that there was login protection across all the pages necessary, ensuring users could not
book a session without being logged in as that would not work well with the database.
On the frontend side, the styling did take quite a bit of time to get right, and I still
haven’t been able to solve the issue of my header not scaling properly on mobile devices.
I’ve done plenty of troubleshooting and I can’t seem to get it to fill across the screen right,
and to top it all off, no PHP project would be complete without battling the dreaded missing
semicolon.
Future Improvements
If I were to keep working on this, some of the improvements I would like to make to
the website in the future are:
•
Profile editing so users can update their info such as their goals, weight, etc.
•
Email confirmation or reminders for upcoming bookings
•
Implement more JS elements into the UI, to make it more visually appealing
•
Admin panel to manage trainers, classes, and bookings, as this would be very
useful to gym staff.
•
Let users upload profile photos and communicate with their trainers or fellow gym
goers through the website.
•
Improve mobile navigation/menu for better small-screen experience, as of now
there are some small kinks in the mobile functionality.
Conclusion
Building the SJHA Fitness Center website was a fun project to take on, as it gave me
a chance to actually apply the HTML and PHP skills we’ve been working on all year in an
applicable way. I enjoyed having the creative freedom to build something from the ground
up, instead of just completing our assignments and exercises like we’ve done throughout
the semester.
Even though I’m not 100% satisfied with the final product, I do think I’ve come a long
way when it comes to building a website with PHP, HTML, CSS, and tying it all together with
a database. I feel way more confident in my ability to create full-stack web apps now, and I
plan to use these skills again, whether it’s for a personal project or down the line in the
professional world.