In the past couple of years, my professional life has been blessed with the knowledge of the MVC pattern. What in the world is this MVC I speak of? MVC stands for Model-View-Controller, and it’s an idea behind application development to separate the 3 main pieces of the application into their own isolated environments.

What does this mean exactly? There are three major components of any given application, be it a desktop application, mobile application, or a web-based application. These three components are the Controller, the View, and the Model. Now let’s get a more concrete idea of what each of these three components actually does within an application.

The Controller is essentially the traffic cop of the application, directing traffic to where it needs to go, figuring out which view it needs to load up, and interacting with the appropriate models. For example, when you go to login to your email on a website, the controller is going to tell the application that it needs to load the login form view. Upon attempting to login, the controller will load the model that handles logins, which will check if the username and password match what exists within the system. If successful, the controller will then pass you off to the first page you enter when logging in, such as your inbox. Once there, the inbox controller will further handle that request.

In a web-based application, the view is exactly what it sounds like: the visible interface that the user interacts with, displaying buttons, forms, and information. Generally speaking, the controller calls up the view after interacting with the model, which is what gathers the information to display in the particular view.

 

The Model is where data from the controller and sometimes the view is actually passed into, out of, and manipulated. Keeping in mind our last example of logging into your web-based email, the model will take the username and password given to it from the controller, check that data against the stored information in the database, and then render the view accordingly. For example, if you enter in an incorrect password, the model will tell the controller that it was incorrect, and the controller will tell the view to display an error message saying something to the effect of “Your username or password is incorrect.”

Now that you know the basic concepts of the MVC pattern, you’re probably wondering what makes it so special? Essentially, it allows for the programmer to isolate these very separate pieces of code into their own domain, which makes code maintenance and debugging much simpler than if all of these items were chunked into one massive piece. If I have a problem with an application not displaying an error message when it should, I have a very specific set of locations to look to see why this is not happening. First I would look at the “Login Controller” to see if it is telling the view to display the error. If that’s fine, I would look at the “Login Model” to see if it is passing the data back to the controller to tell it that it needs to show an error. Then if that’s correct, the last place it could be happening would be in the “Login View.”

Using this development pattern allows for very easy maintenance, as well as independent development of pieces of the same system by different programmers, which makes for quick turnover of applications all while still maintaining a very high standard of quality for the application.

22 responses to “What is MVC Architecture in a Web-Based Application?

Posted by manu

MVC is explained in a very easily understandable way. Thanks to you

Posted on February 19, 2013 at 1:01 pm

Posted by Benjamin

A clear and helpful introduction – thank you :D

Posted on March 7, 2013 at 7:49 am

Posted by anushan jee

i got a clear definition about mvc thank u very much :)

Posted on May 21, 2013 at 1:02 pm

Posted by emmolos

Thanks for this great article. Well explained.

Posted on June 11, 2013 at 11:12 am

Posted by karthik

Great explanation, your explanation is as simple as having a cup of coffee…….

Posted on December 7, 2013 at 4:52 pm

Posted by elango

Nice explanation. Every product or applications including human/animal actions are functioning as MVC in a way. I wonder is there any other pattern or architecture than MVC?

Posted on December 25, 2013 at 8:42 pm

Posted by Fundsly

Thank you very much have been studying this at uni and its funny how you have broken it down simplistically, better than lecturers who waffle on for hours!! Cheers Mate

Posted on January 21, 2014 at 5:38 pm

Posted by sinidu

wonderfull explanation..thanx a lot.. :)

Posted on January 30, 2014 at 8:20 am

Posted by dhuthy

nice explanation..

Posted on March 14, 2014 at 5:53 am

Posted by kaveri

even from non-IT background, u made my life so eassy to understand this. Thank u.

Posted on April 18, 2014 at 2:27 am

Posted by khushi mistry

nice explanation..
even from non-IT background, u made my life so eassy to understand this. Thank u.

Posted on June 30, 2014 at 7:38 am

Posted by Heir

Most useful for me bro and many thx

Posted on July 30, 2014 at 5:13 am

Posted by Hoz

Best definition of what MVC is. Thanks.

Posted on August 23, 2014 at 1:20 pm

Posted by Eletta Adeola

This is a very helpful piece, thank you.

Posted on October 20, 2014 at 4:42 am

Posted by Ashley

You’re welcome. We are glad it was useful to you.

Posted on October 21, 2014 at 10:45 am

Posted by Sarika Arora

Great Explanation… You have explained it in a very simple and clear way. Very helpful piece. Thanks a lot.

Posted on December 8, 2014 at 9:24 pm

Mystery Man - Default Avatar

Posted by #Orbital 2015#Lift Off – Day 1 | yollyhideout

[…] https://www.tmprod.com/blog/2012/what-is-mvc-architecture-in-a-web-based-application/ […]

Posted on May 14, 2015 at 5:33 am

Posted by daph

hi, cool. thanks !

what is the database environment used? mysql, oracle ?!
thanks

Posted on March 22, 2016 at 5:27 pm

Posted by Alay

Loved it..!!!

Posted on August 30, 2016 at 10:21 pm

Posted by Tushar Jadhav

Thanks!! good explanation…was very helpful…

Posted on September 10, 2016 at 5:40 am

Posted by ssebetta

nice intro. understood it well

Posted on March 20, 2017 at 6:34 am

Posted by Biplab Rout

Great content with simple example.

Posted on March 21, 2017 at 1:27 pm

Leave a Reply

Your email address will not be published. Required fields are marked *

Read Related Posts