How does MVC pattern work?

Learn how the Model-View-Controller (MVC) pattern works with our comprehensive guide. We’ll show you how this popular design pattern can help you organize your code, separate concerns, and build more scalable and maintainable web applications. Discover the benefits of MVC today!

Initially, the idea behind developing a web or software application was to simply separate the logic to functions or classes as the complexity increased, to produce a better abstract perspective of each component’s state and behavior. At some point just by creating functions and classes, engineers concluded that this approach wasn’t the answer, or at least the complete answer.

Before we dive into specifics let’s provide some details regarding the creator of that particular design pattern. MVC was created by Trygve Reenskaug, a Norwegian computer scientist with specialty on Object Oriented Programming, while working on Smalltalk-79 as a visiting scientist at the Xerox Palo Alto Research Center (PARC) in the late 1970s.

Trygve and many other computer scientists following his work, recognized that there’s no future to the conventional approach whilst building an application. The sequential approach almost gone from the modern stage, everything started to point towards the object oriented paradigm. MVC utilizes the tools to build and describe object relationships alongside the techniques that the data in-between is processed and passed to the next state.

MVC stands for Model-View-Controller and it’s the separation of logic between the data collection state, its process towards tangible information and its presentation to the end-user. Model components are responsible for fetching the data from a specific persistent medium (e.g. a database) so they can pass it to Controller components that will modify it accordingly into a meaningful format in order to move it to the final state of a view component. View components are the end-state of the application and the visible part of the architecture.

You may know what each component does and how it operates in terms of the whole system but just like most things in technology, there are certain rules that is good to follow to avoid unnecessary complexity. When crafting an application using the MVC pattern, you essentially work with a vast variety of different components. Those components should follow specific conventions in order to make the entire code base scalable and maintainable.

What is a Model in MVC?

Models as we mentioned before are components that interact with a database or a data holding medium. There are models that may have a more complicated structure than others and that’s because sometimes the data can be fetched using a very specific query that may be more demanding than the usual CRUD (Create, Read, Update Delete) ones. The simple rule that you need to remember it’s that within models, you shouldn’t do any major modifications to the data. Models collect and serve data, that’s it.

// model collects and serves the data
// User_model.php
function get_users() {
  $res = $this->db->select('select * from users');
  return $res->result();
}

// controller collects the served data
. . .
$this->load->model('User_model'); // load the model to use its functions
$users = $this->User_model->get_users();
. . .

What is a Controller

Controllers on the other hand are responsible for preparing and modifying the data served from models in order to make it eligible for the user’s interface, the view components. Controllers may execute major modifications and are really the meat of the web app. To write a good controller you need to have a clear understanding of the object oriented paradigm.

What is the function of a View

Views, are essentially the templating of the web app’s visual aids. Forms, styling, modals etc. are controlled via views. You may ask yourself, how do I get the data that I show to a view? Well, controllers are also responsible for serving the refined version of the data to a designated view. Controllers basically expose an array of values and that key of the array is accessible from the view as a variable.

// controller populates the variable
$data['phone'] = '343-221-3452';
$this->load->view('index', $data); // loader

// view uses it as a variable
<p><?= $phone ?></p>