This Website

Back to Project Overviews

Background

I originally created this website in April 2020 to test my coding skills, as well as share my games and music with my friends. Unfortunately, the Covid-19 pandemic hit and I didn't get a chance to show my friends from school this website. However, I continued to improve it, adding the ability to log in, adding better security, making it look much nicer, etc. Anyways, as I was getting ready for university and considering what my resume and portfolio would look like, I realized that this website would be a great platform to showoff my skills, and here we are today!

Interesting Features

You obviously can see for yourself many of the features of the website, but I will still showcase those and others which you cannot see.

To start, I think the most interesting and challenging part of this website was the user login system. This was my first table in the database, and to start with, I had to add users by editing the table itself. This wasn't very good, so I made an add/remove user page for myself, and to do that I added roles to my user table - admin, employer, and user. To access my portfolio, an employer account used to be required, and I would provide the user name and password on my resume. However, I decided that it was too big of a barrier to viewing my website that was not worth the increased security it provided. So the employer account type is no longer in use, I have the only admin account, and regular users have access to games, music, and the messaging system. As you can see in the screenshots below, there is no username field for a new user, and that is because a regular user's username is generated in this format: (first four letters of first name)(first four letters of last name)(current number of user with identical names in database). For example, if there were already six Remy Lamberts in the system, and if I added one more, their username would be remylamb007. The employer checkbox determines the new user's role. If it is unchecked the new user becomes a regular user, as this website will never need more admins than me. Also, as a disclaimer, all the passwords in the website are stored in plain text format. I know this is bad practice, but in case of a security breach, I want to have complete control. Plus none of the passwords that I use or assign are used in any other websites.

Another interesting feature is the messaging system. It was difficult because I had to generate a lot of divs, forms, and javascript event listeners for each user, and that required a lot of manipulation of data from the database, which was actually kind of fun to code. Since I didn't want to mess around with any addons like jquery, there's no asynchronous functionality so to see new messages a user must refresh the page. Otherwise, this works fairly simply, so when a message is sent, the sender, recipiant, time, and message (obviously) is recorded in the database, and the page loads all messages related to the currently logged in user.

When I started allowing others to access my website, I wanted a feature which would allow me to see who was visiting. So, I created an analytics page that only admins have access to, where you can view page requests. I made this so that I could check how many people were accessing my website, and what pages were most frequently used. One thing that I noticed early on was that some employers were going to the home page, but not logging in, and leaving immediately. This was what inspired me to remove the login requirement to view my portfolio. When a user visits a page, I store their username, the time, the page, and their public IP. I use the IP to determine how many unique visitors are coming and the average time that they are staying. This information is emailed to me once per week so that I can easily monitor the website for suspicious activity.

The most recent interesting feature is the portfolio home page. In the beginning, that page was written manually, but I soon realized that I was copying and pasting too much, which usually means that it's time to be automated. So, the title, image name, and bullet points for each portfolio section (mechanical, software, co-op, and UWFM projects) is stored in an array for each section. Using this data, I wrote a function that generates the table, links and fading image for each project. This was pretty fun to do, because I enjoy automation, especially when it requires a lot of data manipulation. Successfully using a computer to make my life easier is one of the greatest feelings ever.

Outcomes

In creating this website I learned quite a lot. When I was working on the Golf Website, the basic framework was already put into place, so I missed a lot of the website set-up processes. However, in creating this website from scratch, I was able to teach myself a lot more of the basics, and really deepen my understanding of things like PHP sessions, initializing database connections, and website planning. Combining my experience from the Golf Website and this one, I have a pretty good range of website development skills and experience.

Screenshots

add/remove user page analytics page
Back to top
Back to Project Overviews