Assignment

In this essay, I will discuss my code for Assignment 1 Task 2, which involved building a
website and managing data using node.js and MySQL. I found strengths in effectively using
node.js and MySQL for creating a website and handling basic data operations. However, I
encountered challenges in managing tasks and managing my time correctly. While I aimed
for perfect code, theres room for improvement in readability, overall, I plan to go over these
challenges that I faced and if I overcame them.
Games.js file

The "getAllGames" function retrieves all the data from a table named "game". Once the data
is retrieved, it is sent back to the web browser. If an error occurs during this process, the
function throws an error to assist in bug finding and debugging. However, if the function
works successfully, it renders the webpage to the user or client. This function plays a crucial
role in fetching and displaying game data, enhancing the functionality and user experience
of the web application.
The "renderEditGameForm" function is used to generate a form for a specific game by
retrieving its details using the "game_id". This form allows users to modify various aspects of
the game, such as its name, the number of players per team, and match duration.
Additionally, users have the option to delete the game from the database directly from this
page. Its functionality makes it essential for managing game data, enabling smooth editing
and deletion operations within the application.

The "deleteGame" function is responsible for removing a game from the database using its
"game_id". Similar to previous functions, it throws an error if there's an issue during the
deletion process. Upon successful deletion, it redirects the user back to the "/games" page
where other games can be found. The most challenging aspect of this task was figuring out
how to redirect the user back to the "/games" page, as it required some research to
implement correctly.
Validator.js
The "validateAddGameForm" function plays a critical role in ensuring data accuracy before
adding a new game to the database. It looks at three essential elements the games name,
duration, and team size. If any of these fields are left empty or invalid values, the function
prompts an error, indicating the missing information so the user knows what to fix, once all
required fields are filled out, the function proceeds to validate the form, enabling the game
to be successfully added to the database. This validation makes sure no errors happen to the
website and it doesnt crash so it serves as a safeguard, making sure data is stored correctly,
This function makes the user experience easier as the website wont crash and data wont be
lost as the user gets told what is missing.
.ejs files
Addgame.ejs

This ejs file is used to display the "addGame" form, allows users to add a new game to the
website. It uses the "validateGameForm" function to make sure that all of the fields are filled
out correctly, preventing potential errors. The page has two buttons, one for returning to the
"/games" page, removing any progress, and another for adding the game. When the user
clicks the add game button, the form verifies that all fields are complete before redirecting
the user back to "/games" and adding the game to the database and to the “/games”
webpage. This form simplifies the process of adding new games, improving user experience.
Deletegame.ejs

This ejs file renders the "deleteGame" form, serving as the opposite functionality of
"addGame". It generates the form based on the unique "game_id". The delete game button
is styled in red, following typical website conventions to prevent user confusion. This colour
choice corresponds to other common design patterns, such as using green for confirmation
actions. Upon deletion, the game is permanently removed from the database, emphasizing
its irreversible nature. Notably, this page also lacks automatic redirection to "/games" after
deletion. This was because of the use of a button class so I couldn’t use a href, this lack of
implementation creates a bad user experience and would be annoying and complained
about.
Games.ejs

The games.ejs file presents all the games stored in the database using a simple and
organized "card" layout. Towards the bottom of the page, there's a button called “Add
Game” that directs users to the "/games/add" page. This button allows users to add more
games to the database, which can then be displayed on the webpage. This simple design
makes easy navigation and encourages users to interact with the websites features.
Gamedisplay.ejs

The Gamedisplay.ejs page displays the games individually, identified by their unique
"game_id". It shows the team size, game name, and match duration. Below this there is a
back button to return to "/games", and an edit game button. Clicking the edit button takes
users to the “editgameform”, where they can change the game's name, team size, and match
duration. The “editgameform” uses the “validateEditGameForm” code to make sure all data
is entered correctly and tells the user if there is any missing fields. This setup makes it easy
for users to navigate and update game information.

Usability test
My usability test concluded that my website wasn’t the easiest to navigate as it was hard to
find certain aspects like the delete game button, I was also told that my website didn’t have
a good colour scheme. The majority agreed that it was easy to add games though and easy
to edit, it was made clear when the user didn’t full a field correctly, the games were added
to the data table and the website. I tried fixing the negatives from the usability test but I ran
out of time and those aspects didn’t change. The usability test also showed me a different
way of testing your projects, as other people have different ways of doing things so they
could find different bugs you haven’t found. The usability test also highlights what people do
and don’t like about your website, and this average could be taken to help understand what
you should actually focus time on.

Improvement
There is a lot I can improve on but the most important to me I think is time management, I
misused my time a lot and that caused my project to be underdeveloped. If I focussed myself
and my capabilities the project would’ve been completed. I could also improve on self-
teaching, as I learnt in my last project, self-teaching is a more quality way of learning as you
are actively finding information rather than passively being taught it, self-teaching could be
as easy as going through a website to find information, or could be as hard as finding your
own way to do a part of the project, finding your own way always ended up being more
useful and I would learn more.

Conclusion
In conclusion, my website works and does what it is meant to do, but it has its flaws like not
returning the user to “/games” after deleting a game and my website not being visually
appealing and sort of an eyesore, I also had complaints about my delete game button being
in the edit game part but I thought it would be a better place to put it as to remove
accidental deletion of data, these flaws were due to time mismanagement and not focussing
myself onto the task, if I could do it again I would do more research into buttons and hrefs to
remove the user experience problem (not returning the user when deleting a game), but I
would not move the delete game button. Throughout this assignment I asked my friends for
help along with doing my own personal research when they couldn’t help, doing personal
research is better than just asking friends for help as I expanded my knowledge more and I
actually understood what I was doing rather than being told what to do and not learning at
all. The most helpful part of this assignment was the usability test, I will be doing a few of
them in every project I do from now going on forwards.

References
https://uxplanet.org/using-red-and-green-in-ui-design-66b39e13de91?gi=670be953b5d3
(common design patterns in UI)
https://www.w3docs.com/snippets/html/how-to-create-an-html-button-that-acts-like-a-
link.html
(href button)
https://usersnap.com/blog/color-web-design/#:~:text=Researchers%20claim%20that
%20bright%20warm,of%20doing%20the%20right%20thing.
(colour schemes)