MVC Design Pattern With Examples

MVC Design Pattern is one of the oldest architectural pattern for web applications. MVC stands for Model View Controller. MVC Design Pattern is used to separate the logic of different layers in a program in independent units. This is known as the principle of Separation of Concern.

MVC Design Pattern

With MVC design pattern, we have following components on which our design depends:

  • The model which is transferred from one layer to the other.
  • The View which is responsible to show the data present in the application.
  • The controller is responsible to accept a request from a user, modify a model and send it to the view which is shown to the user.

The idea behind MVC pattern is a very clear separation between domain objects which represents real-world entities and the presentation layer we see on the screen. Domain objects should be completely independent and should work without a View layer as well.

In this lesson, we will try to establish a strong MVC example with a Spring Boot application which uses Thymeleaf in the View layer.

MVC Application Architecture

Before we start building our application, it is always a good idea to structure it. Based on the MVC pattern, we will have following layers in our application:


MVC Pattern Example

As we will build a Spring Boot application based on MVC pattern, we start by making a Maven based project and added Spring Boot related dependencies to it.

Now, let’s start by defining our model.

MVC Model

Let’s start defining the pieces and move with our model first. The first step for a sample app is defining our Model class:

This is a simple model class which can contain a Person’s information. Let’s use the defined model in our Controller and Service.

MVC Controller

Now that we know what data to transmit in Model, let us define a Controller to allow user to request this data:

In the controller above, we defined two APIs:

  1. The base URL of the application presents a simple View we design next.
  2. The /person URL of the application presents a simple View which tabulates the person data.

We will see the Views in a minute. Before that, we need to provide the Service and Repository layer as well.

The interface implementation looks like:

Finally, The DAL layer, the repository interface looks like:

Excellent! Now that we’re done with the all the service and DB access logic, we can finally try our View.

MVC View

Let’s finally put our View in place. We first define our greetings.html page in src/main/resources/templates directory.

Next, we define our result.html page as well:

MVC Pattern Test

Now, we can finally run our application to see it in action. But the application was not the focus here. Focus was to keep the three components completely separate which was excellent to observe. However, below images show the project output.



Advantages of MVC Design pattern

There are many advantages for using MVC pattern. Let’s state some of them here:

  1. MVC allows rapid application development. If we simply define the Model layer in advance and pass this information to UI development team, they can start making the Views in paralles as Backend developers design the application Controllers and logic behind them resulting in faster development.
  2. While changing a View mechanism, Controller layer doesn’t even have to know where the data goes. It only knows a logical view name and not even the HTML extension. So, it is very easy to switch to an Angular based view without affecting the Controller.
  3. MVC pattern emphasis on the low coupling between different components of an application. So, the View layer have no dependency on service layer and only Controller depends on it, even that with the interfaces and not from concrete implementation.

MVC Pattern Conclusion

In this article, we learned how we can put MVC design pattern to use to emphasize on keeping different layers completely separate and so, our components loosely coupled.

Design patterns are just based on a way of programming and so, is language and framework independent. Feel free to leave your views in comments below. Download the MVC example project from the link below.

Reference: Wikipedia

By admin

Leave a Reply

%d bloggers like this: