The second coding project for Phase 2 of Flatiron School’s Software Engineering Course required the cohort to create their own web application that uses Sinatra, sqlite3, and ActiveRecord. The project also required us to use a MVC pattern which is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller.
Check out my Phase 2 Web App Here! My simple web app allows new users to sign up/create an account, view cars for sale that were posted by other users, create their own car for sale listings, edit only their own listings, delete only their own listings, (users cannot edit/delete other users listings) and logout.
In this blog post, I am going to write about the big concept/design pattern when building web apps — MVC.
The MVC pattern is a widely accepted way of building framework for web apps as it provides a separation of concerns. This means that a group of files and the code within have specific duties and “talk” with one another in an established way.
Models hold all of the data related logic of the web application that the user works with. Models define data structure and that data is transferred between the View and the Controller pieces of the application.
Views are what the user see in the browser or defines display (UI). Views will display data to a user in an easy to understand format based on the user’s actions.
Controllers take user input, then they send that input to the model for data manipulation, then the controller takes the manipulated data and send instructions to the View to update what the user sees.
A great way of thinking about the MVC pattern is to put it into a restaurant example. This is my favorite way of understanding MVC.
When you go to a restaurant, you don’t go in the kitchen and prepare your food. You wait for the waiter to come and take your order. When the waiter arrives, you order what you want to eat. The waiter writes down the details of your order and takes it to the kitchen. The waiter does not prepare the food, the cook does. The cook then start to prepare the food for you. He/She uses ingredients to cook your order and the ingredients are stored in the refrigerator. So the cook will go to the refrigerator, gather the ingredients and prepare your order. After the order is prepared, the waiter will get your food order from the cook/kitchen and bring it too you.
In this example, You are the View, the Waiter is the Controller, the Cook/Kitchen is the Model, and the Refrigerator/Ingredients is the Database/Data.
Final Thoughts
Overall, I feel good about how my Sinatra Web Application turned out but I know there was a problem with the Update CRUD Action (Create, Read, Update, Delete). My problem is that when the user updates/edits one of their car listings, the listing itself does not get updated. Instead, when the user clicks the update button after entering in new details, a new car listing gets created. I’m sure after my Assessment this problem will get figured out but I was a little annoyed I could not get the update action to perform the way I wanted. But like I said, I feel good about first Sinatra Web App and I look forward to the third phase, RAILS.
