Assignment 2 continued the eCommerce store that I built for Assignment 1. In Assignment 2, the objective was to create a login page and registration page for website users. I used a JSON file to store existing user information. When a user registers a new account, the server will write their registration information to the JSON file. Before registration, the inputted data needed to be validated to check if it met predefined data formats. If inputted data was required to be corrected and modified, previous inputs would remain persistent (sticky) in the input textbox and users would be alerted of mistakes to correct.
The two main things that I learned from Assignment 2 were input validation and reading and writing to a JSON file. Input validation was implemented primarily for user registration functionality. The client makes a POST request to the server. The server checks to see if the input matches the predefined input format and also checks to see if the desired username already exists within the database. If any errors are detected, then the user is redirected back to the registration page, inputs are put back into the textboxes, and the user is alerted of any error. If registration information does not have any errors, then the data is written to the JSON, and the user now exists within the database.
I scheduled a meeting with Professor Port to discuss redirecting the user back to the registration page and making the input data sticky. The most difficult part was grabbing the registration data from the query string and placing those values back into the input textboxes. Below is the code to refill the input boxes from the query string.
for (let i in user_register_form.elements){
//for each element in the fom, get its corresponding value from params and replace the value
user_register_form.elements[i].value = params.get(user_register_form.elements[i].name);
}
The main difference I noticed in Assignment 2 from Assignment 1 is a greater emphasis placed on functionality rather than user interface and design. Both assignments require a clean user interface, but Assignment 2 required me to spend more time working with the server code. This was due to the data validation and reading and writing to JSON files.
I spent more time writing code than I spent thinking about what to write. I had a harder time figuring out how to implement the design plan that I had thought of. I knew that I needed to grab data from a query string and replace those values into the text boxes to make the form sticky. However, I did not know what the syntax was to implement that plan efficiently and in a general way. I spent (roughly) 25% thinking of a plan, 30% writing the code, and 45% debugging and testing.
I am especially happy with the user interface of Assignment 2. It is a simple user interface, but it makes it very clear what mistakes are being made to the user. As the user types in registration information, the interface will update automatically and instruct the user what input requirements need to be met. Once the user corrects their mistakes, then the alerts will disappear automatically. However, some of the alerts, such as the product quantity validation alerts, show up via an alert box. While the alert box works to notify users, it is not the nicest looking alert. I would have instead alerted the user of invalid quantities by directly alerting via the website rather than through a textbox.