Link to website: Comfy Mice: Gaming Mice Store
Link to assignment: Assignment 2
For this assignment, we were tasked with editing our previous website to accommodate for more personalization. Building upon our previous assignment to create a website for a company that can process purchase information and give feedback regarding the quantity the user desires, we’ve added a couple of changes regarding user personalization and purchases.
Here are the three main changes below:
We were tasked with adding a registration and login page. The server would update with the registration information posted and the user would be able to sign in using the login page. With the registration, we added a couple of security requirements. The email, password, and name input would have to follow certain criteria.
When it comes to the password, the password was made to be case-sensitive and would have to be retyped into a “confirm password” input to verify the password. The login page had an email and password input. The email would be case-insensitive and the password would be case-sensitive.
If there were errors regarding any of the inputs, the user would be returned to the page they were on with a list of errors regarding their information. The user, afterward, would be able to edit their information to their liking before turning the form in.
One of the main requirements for the assignment included a requirement for the user to be logged in when they try to purchase a product. If they aren’t logged in, they are given a choice to go back or they can be sent to the login page. If the user is logged in beforehand, they are taken to the invoice instead.
The invoice includes a personalized thank you message and the shipping address that they inputted when they first registered.
The website, when not logged in, will only show a certain amount of tabs that the user can access. These include the homepage, the product display, the registration, and the login. The user would not be able to see the same things that a logged-in user would be able to see.
When a user logs in, they are welcomed with a message stating their full name and they can see how many users are logged in. When a user logs out, the number will change. This means that the amount of users logged in is being updated currently.
I’ve learned quite a bit from this assignment. I feel like I’ve gotten a little more familiar with server-side coding and how to restrict access to certain pages using a variety of methods. I also feel like I’ve gotten a little bit better at keeping my code organized.
I did 100% of the work. I didn’t work with a partner.
I used different AIs to help or went online to see if there were any blogs or web pages that explained what I was looking for in detail to get a better understanding of what I was trying to do. Some of these AIs include ChatGPT and Blackbox.ai. I also got some help from a couple of blogs.
I got them to help a little bit with the processing of the registration and login form. These two sections took a lot of time to figure out. It was moderately easy to get the basics of the form processed, but getting the information to the website to be processed and updating the website itself for personalization was hard.
For the blog, I mainly just wanted a way for the user, when registering, to see their password with the eye-icon. I usually see these a lot when registering for different websites, so I wanted to include it in my website but I didn’t know how. There was one blog that explained in perfect detail what needed to be done.
Developing this assignment didn’t take as much time as the first assignment. I believe this may have been due to the styling. From the previous assignment, I already had CSS developed for all pages, so it wasn’t hard to get similar formatting for the new pages I’ve made. Furthermore, I didn’t spend a lot of time having to redo all the navbars as I’ve made a function to apply the navbar (personalized as well) for each page.
Another thing that was different about developing this assignment was that I was focused more on server-side processing than client-side processing. I needed to find ways to get the server to process the information inputted and to store the information in a variety of places to get the requirements done. In the previous assignment, it was mainly just the purchase processing that needed to be done on the server side.
I think I’ve had to spend quite a bit of time trying to figure out how to get the information processed and apply the information to each web page. I also needed to spend some time figuring out how I wanted the signed-in user to get each personalized page ( going from one tab to another).
When it came to writing code, it wasn’t too hard when I figured out what I needed to get done and how it could be done. I think the part that took the most time to code was the server-side coding as I wanted to see what kind of requirements I could include into the processing of the form.
If I had to say anything, it took way too long to test and debug everything. When I thought I got one part done, it would create another problem in a different tab depending on the functions I used and how it was called upon. I had to make sure everything worked properly. If something went wrong, I’d have to fix it and restart the process of testing and debugging to make sure no new problems came up.
Some of the things that worked well were the functions that I did. I liked how I could change the navbar to accommodate specific users. The navbar would change depending on whether the user was signed in or not and it would follow the user throughout each page. Other functions included displaying the errors that the form included when a user turned in the form.
One of the other things that worked out well would be the eye icon. I had to import new symbols and get the style sheet for it. I did have to fix the positioning on the page, but other than that it worked out well.
One of the things that didn’t work well was the user processing form. I had trouble trying to get the form to process and transfer the user to the page I wanted them to go to with the information appended to the website.
Another thing that didn’t work well was trying to get the user’s email appended to wherever the user was trying to go. I didn’t know how to make it easier, so I ended up just appending the email to the link of wherever they went.
If I could go back in time and do something different, there is one thing that comes to mind. I would try not to complicate the login code on the server side. When I started, I took a long way around trying to process the login information. I’d try to get the email checked and the password checked, then when it goes through, the user would be sent back or to whichever page they were trying to go to. I was trying to add the verification of being logged in into the login code when there was an easier solution of keeping the code separate from one another.