PORTFOLIO SAMPLE

Workout-Tracking Database

Challenge

For my CS340: Introduction to Databases class at Oregon State University, we were asked to create a simple database-driven web application from scratch. The goal of the application was to perform CRUD operations on a handful of related tables.

Solution

Working with a partner, I used mySQL, Express.js, and Node.js to develop a site for a gym administrator to track the workouts of the gym’s members.

The mySQL database contained both one-to-many and many-to-many relationships. Its structure resembled a star schema commonly used in business intelligence databases, with workouts as the fact table, surrounded by athletes, muscle groups, gyms, and trainers as the dimension tables.

The front end used Handlebars as the templating framework, AJAX for the interactivity, and Bootstrap for the styling. We went through three iterations of how to update the pages after create, update, and delete operations:

• First, we tried a non-AJAX method of simply refreshing the page to show the new data. As our peers noted, this led to a poor user experience, since the user would have to wait for the page to reload after every operation.

• Next, we implemented AJAX by inserting, editing, or removing the affected rows in the HTML table. While this improved the user experience, it made the code harder to maintain. In particular, it violated the DRY (do not repeat yourself) principle by having one block of code generate the original table and another very similar block of code generate updated rows for the table. It also led to some awkward calls between the server side and client side, since the code for updating the database was server side and the code for updating the HTML tables was client side.

• Finally, we settled on an AJAX method of regenerating the entire HTML table after an operation. This approach allowed us to use the same server-side code for generating the original table and the updated tables.