Understanding the Model, View, and Controller

by Chris Maloney
Published 11-6-2014

I started my journey the same way web developers used to start (and should in my opinion). I initially learned 'web development' in 1997 when I was studying computer science at MTSU. I learned basic HTML and managed a set of web pages for what was called distance learning classes for my college. CSS had just been invented, so it wasn't really being used yet. My code consisted of nested tables, endless lists of inline font and color calls, and of course, tacky animated GIFs.

I eventually moved on to master CSS, learned content management systems, javascript/jQuery, and I got pretty handy with PHP. The one hurdle that I remember being the most difficult for me was understanding back end application development, and more specifically the MVC (model-view-controller) pattern.

I read explanations about the MVC pattern and had more experienced programmers give me the run down, but it just didn't stick. I couldn't relate what they were saying to something I understood. It wasn't until I dove in and started actually performing back end programming that I began to grasp the MVC.

So with that said, I'd like to try out an analogy to possibly help others get a better understanding of the MVC that are new or have no experience with programming.

I like to think of it in terms of pizza.

Pizza Customer: User at the computer typing in a web address
Customer Rep / Delivery Driver: The Controller
Pizza Cook: The Model
The Pizza: The View

The Scenario

Pizza: Stanley calls Domino's pizza and the customer service representative (CSR) answers the call. Stanley asks the CSR for 10 medium pepperoni pizzas.
MVC: Stanley sits down at his computer and types in the web address for a blog site. The web address he types in is a request that is received by the controller, and the request is to see the home page for the blog.

Pizza: The CSR tells the kitchen staff that a request has come in for 10 medium pepperoni pizzas, and he needs them to serve that order up as quickly as possible. The kitchen has methods in place to prepare that many pizzas, so they begin performing the standard tasks to produce 10 pizzas.
MVC: The home page to the blog site contains the most recent 10 blog entries, so the controller makes that request to the model. The model has pre-built database queries to pull those entries, and the controller will specify how many are needed.

Pizza: Once the pizzas are completed, the delivery driver heads across town and gives Stanley the 10 pizzas he asked for.
MVC: The blog entries are retrieved from the database and handed back over to the controller which then displays the blog entries using the View that is specified in the code. Stanley can now see blog entries displayed on his computer screen and the request is complete.

So that's my explanation of the MVC pattern that hopefully makes sense. It's simplified for sure, but the basic concepts are present. You can always reach out with questions!