Novice to MVC? Read this…

Introduction

This post is meant for beginners in MVC pattern (do not confuse yourself with ASP.NET MVC; if you want to learn ASP.NET MVC then please read this post of mine). If you’re novice to this framework then read this post of mine. I will cover most of the parts of MVC framework itself and how can you implement this framework in your applications.

Understanding the Model-View-Controller

MVC stands for Model-View-Controller. If you have developed a few applications in OOP model then you will understand this easily. Otherwise, you might have some tough time understand this MVC pattern. But you will synchronize as we continue.

First of all, you should get rid of any other programming model that or framework that is inside your head. Also, (as mentioned earlier) do not confuse MVC with ASP.NET MVC. This pattern is very common among other patterns of software architecture. MVC is just the term used to develop the software in a pattern such that it is divided into three sub-categories.

1. Model — The data source for your application.
2. View — Your application’s views, putting it simply graphical user interface.
3. Controller — Controller the is actual background logic for your application.

Above are the three categories in which code is distributed efficiently. How application programming is made simpler, I will explain in further sections. Let us first talk about the concepts of MVC, then I will walk through implementation of MVC in different programming languages and frameworks.

Diving into MVC

Let us first consider MVC as our subject of talk. How can we use it and what it actually is. MVC is just the framework, architecture or a pattern, what so ever you want to call it. It is just the model for your software development process. Which is targeted to maintain your source code and data sources. Also, this framework is targeted to reduce ambiguity and complexity found in enterprise software. Usually when an application reaches enterprise level of complexity it is a lot harder to debug it.

Now let us dissect the MVC into three sections and study it thoroughly.

1. Model

Model part of this architecture puts the focus on the data of the application. You data might come through different methods,

1. Database
2. Reports
3. Data sources such as files; JSON is a major example
4. User input

These compose the model section for your application. Model is responsible for updating the user interfaces and indicating a trigger to an event (if any) in the application to demonstrate that the data has now changed. Usually these are just fancy names given to a simple model of the data. In most of the programming languages it can be a simple class, with a few members (trailing the properties or the attributes in database table for the object) and a few functions to store the data in the data source and extract it. This must be kept secure and away from user interactions. Keeping it separate would help in minimizing unauthorized access attempts.

Note: The function part can also be implemented inside the controller to save the data or extract the data. 

2. View

View is the user-interface part of the software application. All of the interface design such as buttons, input fields etc. are to be added to this category. In most of the applications (such as web applications) HTML pages are the View where as in other applications and frameworks other methods are used to create an interface such as XAML files in WPF applications.

The main purpose of having a view is to get the data from model and represent it to the user. All of the styles and other UI and UX techniques must be applied here. Views are usually called by the the controllers and returned to the users as a response after being filled up by the data from a model.

3. Controller

Coming to the most important part of this framework. It is the actual software logic running underground. It is mostly composed of, functions that your application runs, other underlying logical code for the users and such other code that has to run throughout the initial stage to the very last line when the application ends.

In web applications, a controller is responsible for handling the requests coming from a user and then returns the response to the user after merging the data from the model in to the required view. Although the process is similar to getting request and returning the response. But under the hood process is something like,

1. Request is made.
2. Controller handles the request.
3. Url is read and then appropriate functions are triggered.
4. Inside those functions, model is asked for data and data is filled in to the view.
5. View is then returned as a response.

The overall framework is something like this following image.

The user must not be allowed to interact with Model himself, instead a Controller must be used to connect to the Model to get the data for the user's View that would be shown to him. 

As I have mentioned earlier, the user must not be allowed to interact with the model. User must be provided all of the required tools and buttons on the view. View can interact with the controller to download data (if required). This is the MVC pattern of software development. Now in the next section I will give you other helpful resources that you might find helpful.

Other material…

As I had already mentioned that I would provide other tools and materials for developers in a particular framework or language.

Any framework or type

This section is meant for everyone. If you’re developing an application and want to implement MVC pattern then read this section and you will understand how to develop this pattern in your own application development process.

Default language used is C#, you can use your own particular language also. C, C++ and Java are quite similar to the language.

Creating a Model

Creating the model is a very easy task. It is just the wrapper for your data sources. Which can be converted to an object and then interacted with in the application. Think of it as a simple object.

class Model {
   public string Name { get; set; }
   public int Age { get; set; }
   public string Email { get; set; }
   public string Message { get; set; }

   // Functions
   public static List<Model> GetData() { /* code */ }
   public static void SaveData(List<Model> data) { /* code */ }
}

The above code is the model for your own application. It has a few attributes (from the database) and 2 functions. One to retrieve the data and other to store the data.

You can now connect this with database, file or other resource in the functions and fill up your data using the data sources that you have right now.

Creating a View

This is simple (another) task. It contains building up the user-interface. If you’re using web application, then you would create the HTML web pages and add the required elements in the web page. Same process has to be applied to the software applications, where you can design the user-interface for your application and show it using (back-end) code.

Creating a Controller

Now coming to the necessary part. Controller is the entire code that runs the logic for your application, its interaction with events and underlying operating system. What happens when your application is to be started, what should be done when your application has to terminate and what happens in between them. All of this code is Controller.

You can create classes which handle the start up events, and also the classes which handle other interaction event with your View. Controller also has the code to trigger the model; such as the code to trigger either one of the method in our model (See above the “Creating a Model” part).

MVC in web applications

If you are going to develop a new web application, you can develop your application in a very similar manner discussed above. Write your code in a manner that it categorizes itself into three categories.

1. Model
2. View
3. Controller

It is helpful once your application reaches an enterprise level of complexity. So that at that time you won’t have to scratch your head twice to think like, “What was I thinking?”

If (however) you are going to use ASP.NET, then there is already an MVC framework built for you with all of the underlying code done and an IDE ready to serve your needs. For more on that for learning purposes, please read this another thread of mine. That article of mine has all of the required information that a beginner requires to kick start his ASP.NET MVC web application development.

Offline applications

If you are using Java… Then I have another major thread for the same purpose. You can read it to learn how to implement the same pattern in your Java application development. You can also download and try the samples included in it.

Other software languages and framework can also implement the MVC pattern, you just have to categorize the code of your software application.

Points of interest

That said, now I might give you other helpful points for secure applications and frameworks. Following might be helpful for you,

1. MVC pattern helps you in sorting your code and categorizing same types of code under a single lable M-V-or-C.
2. You should never allow your user to interact with model. Model contains the data or the definition for your data. If potential user is able to interact with your application’s model he might also get through the security checks. That is why, always use controller to validate the requests and then access the data from model.
3. I have used databases, JSON files and all kind of other data sources available. So your model is capable of interacting with any kind of data source present (provided you have enough code to make it work).
4. You can also use Ajax to run Controller partially on the views. If you are interested in learning how to use Ajax in MVC pattern then please read this another article of mine.
5. MVC pattern is a software designing and developing architecture. It does not require you to be in web or offline context.

I hope this post must have helped you out. :)

History

First post... If you find something missing, or something has a problem. Please do comment below. I will update (or add more details) if required. :)

Version 2: Removed an error and a duplicate line.