/assets/blog-posts/Model.png George Botley George Botley 2020-04-12 2020-04-12 silverstripe,php
...
Apr 12, 2020, 11:37 AM

An introduction to Model-View-Controller (MVC)

MVC, standing for Model-View-Controller, is one of many architectural patterns which can be used for the development of software. 

You might be thinking why does this apply to the internet and web development as surely websites are not software and while I can certainly see why you might think that, the advancement of the internet has seen an advancement in the capabilities of web focussed programming / scripting languages. For example, WordPress, Shopify, SilverStripe, Intuit's Quickbooks etc are all software built for the web. 

So... back to MVC. The focus of architectural patterns like MVC is to break up the logic of an application into separate components. It's worth noting that MVC is by no means the only option when it comes to achieving this aim but it is perhaps one of the more common in many web-based frameworks such as Laravel and SilverStripe with the latter of which being my framework of choice.

I'll now take you through each of the components of MVC.

What is the Model?

A Model is part of the application which stores data about something and handles the manipulation of said data. It is standalone to the Controller and View portions of the application. In web-based applications the Model is more often than not tied to an associated database table. In the SilverStripe framework Models include SiteTree (for website pages) and DataObject (for your own Model definitions).

What is the View?

The View is typically a part of the application which produces a visual representation of a Model. A view can also permit the interaction between the end-user and the Model via a Controller, which we will come to in a moment. It is also possible for an individual Model to have several different views depending on the application requirements. For example, model data could be presented in a table, a graph or any other form required. In SilverStripe a View is typically Model by a .ss template file.

What is the Controller?

Controllers are parts of the application which handle user interaction and alter the view accordingly. There can be more than one controller within an application as each instance will only be responsible for carrying out tasks within the boundaries of its responsibility. For example, on a website there might be a PageController to handle showing users web pages but there may also be a BlogController to handle the display of blog posts and blog categories etc. 

Real World Example

Now you know the basics of the different MVC components let's provide an example of it working in real-life.

  1. Let's presume you're a builder and need some items to continue working on your latest job so you pay a visit to the builders merchants.

  2. You go to the counter and speak to a member of staff. When you approach the member of staff he doesn't know who you are and nor does he know what you are looking for but he is happy to help you. He asks you to fill out an order form. The clerk is therefore the Controller in this example and the order form is a View.

  3. The store clerk picks up the phone and calls one of the shop floor team. You'll notice here that it is not the store clerk responsible for fulfilling your order, he is simply passing your request to the team that can help fetch your order from the warehouse. The shop floor team are the Model in this example.

  4. The shop floor team member takes note of your requested item(s) and says he will call back if he can find them machinery in the warehouse. The contents of the warehouse can be seen as the Data stored within a Model, also known as DataObject.

  5. The shop floor team member could not find your requested items in the warehouse but did find two product which can act as an alternative. He picks up the phone and calls the store clerk on the front desk to tell him he's out of stock of the requested item but has the alternative items available if required.

  6. The store clerk now tells you the bad news and offers you the alternatives. The outcome of your original enquiry is known as the View.

So looking at that request again:

  • View: You complete the order form.
  • Controller: Takes your order form submission and queries the Model.
  • Model: No matching results found. Alternatives offered.
  • Controller: Takes Model response and generates a View.
  • View: You are told they're out of stock, but are offered the alternatives.

Here's another example, using this blog as an example:

  • View: You view the blog homepage and click on a blog post to read.
  • Controller: Takes the requested blog post and queries the model.
  • Model: A blog post is found, the data is handed back to the Model.
  • Controller: Takes the Model data and generates a View.
  • View: You are then able to view the blog post content.

I hope this helped

Hopefully this basic introduction has helped you to understand the concept behind the MVC pattern. I will soon publish a few follow-up blog posts which detail MVC in action within the SilverStripe framework and how you can handle the interaction between them. 


Comments

Join the conversation and share your thoughts.