The Real MVC

How to successfully navigate the Model-View-Controller (MVC) framework.

When coding with the more powerful coding languages that generate folders, documents, and hundreds of lines of code, with a single command line in your terminal, it makes sense for there to be framework put into place to help with the organization of these dynamic parts. One of most popular frameworks is called the Model-View-Controller (MVC) framework.

The Model-View-Controller (MVC) framework is a way to organize your code with three components(Model, View, Controller). In the simplest of terms, the model is used to store the data used in your application, the view is used to make your application look nice, and the controller is used to set how the application functions. However, before we go deeper into how the three components work it is really important to understand how the components communicate with each other. 

Referencing the chart above, the user of a browser actually has much more power than one would think and employs the power of all three components of the MVC structure just by typing the name of a website(a browser request). This is really what makes the MVC structure so powerful. 

With the intercommunication of the all of the components of the MVC understood, let's now break down what exactly lies in each component. For this example, we will be using the language Ruby on Rails to walk through a simple pizza shop database. We will assume that you have:

• The rails app created (use rails new command) 
• The model, controller, and viewer files created for each user type and user capability (use rails g resource command to do this all at once)
• Your files migrated (use rails db:migrate command)
• Your seed file built out so that you can play around with fake users (run rails db:seed to ensure that the seed data is logged once the seed data is created)
• Your associations are working properly (you can find your associations in the model files then you check that your associations are working in your terminal using the rails c command)
• Your routes created in the routes folder (resources :model_names command is a good catch all for most of the routes you many need. However, it is best to be specific with the routes that you need if you know them from the start)

When you are done with the above steps, the files in your terminal should look a little like this:

Now that the set up is all complete we now reach the fun part. The navigation through MVC!

I know for me, the way that I was best able to conceptualize the respective MVC components is to understand exactly what goes into each of them. So starting with the model, lets jump back into VS Code. 

Model:

The model is where you will make direct manipulations to the data. For a simple application like a pizza shop database the model is where you would find the associations and validations.

As well as create any unique methods that you would like to call on the data within the controller or viewer.

Controller:

It is understood that the MVC format places the view second ;however, it is recommended you update the controller files first so that your view will have a place it can render the data to. Referencing the MVC architecture chart we saw earlier, you will see that the controller is the middle-person between the model and the viewer so one must format the data that is being processed from the model before it can be rendered by the viewer. 

As you can see, the controller is almost like a placeholder/formatter for the data it receives from the model so that it can be handed over to the viewer in way that the viewer can understand and then render. 

View: 

Lastly, the view is the final presentation that the user ends up seeing when the initial browser request is made. This is really just the HTML formatting of the data that the viewer receives from the controller.

As you can see, the viewer pulls important information from methods created in the controller to render it to a page. 

With everything done correctly you will be left with the rendered page of your very own website!