A Detailed Overview of the Model-View-Controller (MVC) Coding Structure

by in Development on 14th Mar 2012 · Comments

The model-view-controller or MVC is software architecture commonly used for creating web applications or software. In other words, it's a structure for web applications to follow in order to ensure efficiency and consistency. Many of the most popular frameworks use the MVC architecture, including ASP.NET, CodeIgniter, Zend, Django, and Ruby on Rails. At the same time, there are many web developers who don't use a coding framework yet still set up their applications to follow the MVC structure.

A Detailed Overview of the Model-View-Controller (MVC) Coding Structure


In this article we'll look in more depth at what the MVC architecture is in detail, and what each part is, and why you should be using it.

Why You Should Use It

Without a good reason to use a new structure, framework, technology, or trend, many developers may have a hard time getting motivated to learn a new topic. So, to begin, we'll first introduce why the model-view-controller architecture is so important, and why you should begin adopting its practices in your next web application.

With the separation of the use of code between the three file types, you obtain a separation in web application logic. You obtain an almost complete separation in programming logic and the interface code (markup and styles), and further separation in the type of logical code for the application.

Basically, a web application or piece of software that follows the MVC structure separates the three main types of functionality into three types of files: models, views, and controllers (as you may have guessed). This allows for each portion to be designed, implemented, and tested independently from any other one, keeping code organized. Keeping the code organized means being able to find what is needed quickly, test features, correct or alter them quicker, and add new functionality with ease. It also means more efficient code, and a better way to re-use code for faster applications.

Probably one of the greatest benefits however is that many developers understand and use the MVC structure for creating web applications. If developers use any of the popular web development frameworks, then they understand and use the MVC structure as well. Because of this consistency, managing a project between several developers can be easier as well.

Now you know why it's important and basically what the structure's purpose is, so let's now look into each portion:

Controllers

The controller can be considered the "middle man" of the application. It works with the user, taking in data, and then working with the model to get the appropriate data or calculation, and then working with the view to show the response to the user.

Controller

When the user carries out any action, it first goes to the controller. It will take in any data, for example $_GET and $_POST variables in PHP, and determine what should be done with the data. In short, models deal with handling data and extended functionality. Therefore, the controller's job at this point is to determine which model should be called, and then call the appropriate function within that model. After calling the function, it will catch the result (usually in a variable).

After it gets whatever information it needs from the model, it will determine what view to send that feedback to, and send the user there.

Models

A model is simply a representation of something we need to deal within our application. It is a "model" for something we must represent in code, such as a book, user, bank account, or whatever. The model is responsible for holding the functions and variables that are involved with whatever it's representing. You can think of a model's logic as the core concept to object oriented programming — models are just our "classes". However, don't let this confuse you as controllers are technically structured as classes as well.

Model

For example, a "User" model would be a class that represents our user. (It models our user.) It holds variables that pertain to the user's information, and functions that get the user’s info, set it, update it, get their profile picture, update their status, or do anything else that would require interaction with the database, or otherwise an extensive function (like making a calculation based on user input).

Just like a class in traditional object oriented programming, a model simply contains a collection of similar functions, or functions that deal with whatever the model is representing.

Views

Finally, after the controller requests information from the model it sends it to a view. A view is just like the application's templating system — there might be a view for a certain type of page layout (profile page), a mobile view, or a view for a particular theme/skin. A view will contain all of the markup, CSS, and etc. that you traditionally use with creating a static web page.

View

It's what the user sees, and what the controller turns to the user. The controller simply forwards the user to the correct view, based on what they're trying to do, but after they've received data from the model and forwarded this information to the view. The view then displays the information it's given, in the format it's structured with.

MVC Diagram

Sometimes seeing something makes it easier to understand. Below is a visual diagram of how the model-view-controller architecture works, starting from the user's view (which would be a template, or view in MVC), sending the requested action through the architecture, and ending back at the view with the completed request.

MVC Model

File Structure

The file structure for using MVC in the standard way is quite simple — there are simply folders for views, models, and controllers, and they all link to each other via one directory up. Of course, with any web application you'll also have other folders and files, such as an index file (shown below), a folder for images, includes, and etc.

Below is a simple MVC directory structure with some example files. These follow my general naming conventions, and while each developer may have their own, it's smart to have some standard naming convention of some sort. The files in the example structure below are merely examples, and developers may choose to structure or name their files slightly differently.

controllers/
	updateUserController.php
	showUserController.php
	manageContentController.php
	manageBlogController.php
models/
	User.php
	Blog.php
	Content.php
views/
	userProfile.php
	userEditProfile.php
	contentPage.php
	postPage.php
index.php

More Resources

This tutorial has just been a primer to the MVC architecture, but of course there are many more tutorials on the subject. Whether you want to learn more, or are looking for more clarity on the subject, below are some more tutorials, videos, and resources for undertanding this software architecture.

Written Tutorials

Video Tutorials

Build your First Tiny PHP MVC Framework

PHP OOP Tutorial 21 | MVC Pattern

PHP Login System Using OOP and MVC - Introduction

PHP Login System Using OOP and MVC - File and Database Setup

ASP.NET from Scratch: MVC

Conclusion

The model-view-controller architecture is a software structure that any developer should learn. I've unfortunately seen myself how some developers will use coding frameworks that use MVC, such as CodeIgniter or CakePHP and not use the MVC concept correctly. These frameworks use this architecture for a reason, and it is meant to keep logic and design separate, while maintaining efficiency. Even without frameworks, developers should apply this architecture to an extent, and understand it for larger projects in the least.

Do you have any other great resources for learning the MVC architecture? Any tips on understanding it, or tips for using it?

Kayla Knight is freelance web designer and developer with several years of experience. In her spare time she enjoys the busy college life, and writes for some top design blogs.