What is MVC Framework?
● The Model-View-Controller (MVC) framework is an architectural
pattern that separates an application into three main logical
components Model, View, and Controller.
● Each architecture component is built to handle specific development
aspects of an application.
● MVC separates the business logic and presentation layer from each
other. It was traditionally used for desktop graphical user interfaces
(GUIs). MVC architecture has become popular for designing web
applications as well as mobile apps.
History of MVC
● MVC architecture first discussed in 1979 by Trygve Reenskaug
● MVC model was first introduced in 1987 in the Smalltalk
programming language.
● MVC was first time accepted as a general concept, in a 1988 article
● In the recent time, MVC pattern is widely used in modern web
applications
Features of MVC
● Easy and frictionless testability. Highly testable, extensible and
pluggable framework
● Offers full control over your HTML as well as your URLs
● Leverage existing features provided by ASP.NET, JSP, Django, etc.
● Clear separation of logic: Model, View, Controller. Separation of
application tasks viz. business logic, Ul logic, and input logic
● URL Routing for SEO Friendly URLs. Powerful URL- mapping for
comprehensible and searchable URLs
● Supports for Test Driven Development (TDD)
MVC Architecture
MVC Architecture Diagram
Three important MVC the components are:
● Model: It includes all the data and its related logic
● View: Present data to the user or handles user interaction
● Controller: An interface between Model and View components
View
● A View is that part of the application that represents the presentation
of data.
● Views are created by the data collected from the model data. A view
requests the model to give information so that it resents the output
presentation to the user.
● The view also represents the data from chats, diagrams, and tables.
For example, any customer view will include all the UI components
like text boxes, drop downs, etc.
Controller
● The Controller is that part of the application that handles the user
interaction.
● The controller interprets the mouse and keyboard inputs from the
user, informing the model and the view to change as appropriate.
● A Controller send's commands to the model to update its state(E.g.,
Saving a specific document).
● The controller also sends commands to its associated view to change
the view's presentation (For example scrolling a particular
document).
Model
● The model component stores data and its related logic. It represents
data that is being transferred between controller components or any
other related business logic.
● For example, a Controller object will retrieve the customer info from
the database. It manipulates data and sends it back to the database
or uses it to render the same data.
● It responds to the request from the views and also responds to
instructions from the controller to update itself.
● It is also the lowest level of the pattern which is responsible for
maintaining data.
MVC Examples
Let's see Model View Controller from daily life:
Example 1:
● Let's assume you go to a restaurant. You will not go to the kitchen
and prepare food which you can surely do at your home. Instead,
you just go there and wait for the waiter to come on.
● Now the waiter comes to you, and you just order the food. The
waiter doesn't know who you are and what you want. He just wrote
down the details of your food order.
● Then, the waiter moves to the kitchen. In the kitchen, the waiter does
not prepare your food.
● The cook prepares your food. The waiter is given your order to him
along with your table number.
● Cook then prepared food for you. He uses ingredients to cook the
food. Let's assume that you order a vegetable sandwich. Then he
needs bread, tomato, potato, capsicum, onion, bit, cheese, etc.
which he sources from the refrigerator
● Cook the final hand over the food to the waiter. Now it is the job of
the waiter to move this food outside the kitchen.
● Now the waiter knows which food you have ordered and how they
are served.
In this case,
View= You
Waiter= Controller
Cook= Model
Refrigerator= Data
Example 2:
Car driving mechanism is another example of the MVC model.
● Every car consists of three main parts.
● View= User interface : ( Gear lever, panels, steering wheel, brake,
etc.)
● Controller- Mechanism ( Engine)
● Model- Storage ( Petrol or Diesel tank)
● Car runs from the engine take fuel from storage, but it runs only
using mentioned user interface devices.
Model Layer:
● Model Layer is the data layer.
● It consists of all the data of our web application.
● It represents a state of an application.
● The Model Layer is responsible to connect with the database as well as stores
the data into a database.
● It consists of all the classes in our application which have the connection to
the database
View Layer:
● It represents the presentation layer
● It normally represents the User Interface (UI) of the application.
● We can use HTML,CSS,JS etc to create presentation layer.
Controller Layer:
● It is an interface between the view layer and the model layer.
● It receives the request from View Layer.
● It read the data which is coming from the presentation layer.
● To read data from the presentation layer, we can use Servlet, JSP, Filter, etc.
Popular MVC web frameworks
● Ruby on Rails
● Django
● CakePHP
● Yii
● CherryPy
● Spring MVC
● Catalyst
● Rails
● Zend Framework
● CodeIgniter
● Laravel
● Fuel PHP
● Symphony
Advantages of MVC: Key Benefits
● Easy code maintenance easy to extend and grow
● MVC Model component can be tested separately from the user
● Easier support for new type of clients
● Development of the various components can be performed
parallelly.
● It helps you to avoid complexity by dividing an application into the
three units. Model, view, and controller
● It only uses a Front Controller pattern which process web application
requests through a single controller.
● Offers the best support for test-driven development
● It works well for Web apps which are supported by large teams of
web designers and developers.
● Provides clean separation of concerns(SoC).
● Search Engine Optimization (SEO) Friendly.
● All classes and objects are independent of each other so that you
can test them separately.
● MVC allows logical grouping of related actions on a controller
together.
Disadvantages of using MVC
● Difficult to read, change, to unit test, and reuse this model
● The framework navigation can sometimes be time complex as it
introduces new layers of abstraction which requires users to adapt to
the decomposition criteria of MVC.
● No formal validation support
● Increased complexity and Inefficiency of data
● The difficulty of using MVC with the modern user interface
● There is a need for multiple programmers to conduct parallel
programming.
● Knowledge of multiple technologies is required.
● Maintenance of lots of codes in Controller
3-tier Architecture vs. MVC Architecture
Parameter 3-Tier Architecture MVC Architecture
Communication This type of architecture pattern All layers
never communicates directly with communicate
the data layer. directly using
triangle topology.
Usage 3-tier: widely used in web Generally used on
applications where the client, data applications that run
tiers, and middleware run on on a single graphical
physically separate platforms. workstation.
Summary
● The MVC is an architectural pattern that separates an application
into 1) Model, 2) View and 3) Controller
● Model: It includes all the data and its related logic
● View: Present data to the user or handles user interaction
● Controller: An interface between Model and View components
● MVC architecture first discussed in 1979 by Trygve Reenskaug
● MVC is a highly testable, extensible and pluggable framework
● Some popular MVC frameworks are Rails, Zend Framework,
CodeIgniter, Laravel, Fuel PHP, etc.
MVC Example in JSP
In this example, we are using servlet as a controller, jsp as a view component, Java
Bean class as a model.
In this example, we have created 5 pages:
● index.jsp a page that gets input from the user.
● ControllerServlet.java a servlet that acts as a controller.
● login-success.jsp and login-error.jsp files act as view components.
● web.xml file for mapping the servlet.
File: index.jsp (a
page that gets input from the user)
1. <form action="ControllerServlet" method="post">
2. Name:<input type="text" name="name"><br>
3. Password:<input type="password" name="password"><br>
4. <input type="submit" value="login">
5. </form>
File: ControllerServlet ( a servlet that acts as a controller)
1. package com.javatpoint;
2. import java.io.IOException;
3. import java.io.PrintWriter;
4. import javax.servlet.RequestDispatcher;
5. import javax.servlet.ServletException;
6. import javax.servlet.http.HttpServlet;
7. import javax.servlet.http.HttpServletRequest;
8. import javax.servlet.http.HttpServletResponse;
9. public class ControllerServlet extends HttpServlet {
10. protected void doPost(HttpServletRequest request, HttpServletResponse
response)
11. throws ServletException, IOException {
12. response.setContentType("text/html");
13. PrintWriter out=response.getWriter();
14. String name=request.getParameter("name");
15. String password=request.getParameter("password");
16. LoginBean bean=new LoginBean();
17. bean.setName(name);
18. bean.setPassword(password);
19. request.setAttribute("bean",bean);
20. boolean status=bean.validate();
21. if(status){
22. RequestDispatcher
rd=request.getRequestDispatcher("login-success.jsp");
23. rd.forward(request, response);
24. }
25. else{
26. RequestDispatcher rd=request.getRequestDispatcher("login-error.jsp");
27. rd.forward(request, response);
28. }
29. }
30. @Override
31. protected void doGet(HttpServletRequest req, HttpServletResponse resp)
32. throws ServletException, IOException {
33. doPost(req, resp);
34. }
35.}
File: LoginBean.java (files act as view components)
1. package com.javatpoint;
2. public class LoginBean {
3. private String name,password;
4.
5. public String getName() {
6. return name;
7. }
8. public void setName(String name) {
9. this.name = name;
10.}
11.public String getPassword() {
12. return password;
13.}
14.public void setPassword(String password) {
15. this.password = password;
16.}
17.public boolean validate(){
18. if(password.equals("admin")){
19. return true;
20. }
21. else{
22. return false;
23. }
24.}
25.}
File: login-success.jsp
1. <%@page import="com.javatpoint.LoginBean"%>
2.
3. <p>You are successfully logged in!</p>
4. <%
5. LoginBean bean=(LoginBean)request.getAttribute("bean");
6. out.print("Welcome, "+bean.getName());
7. %>
File: login-error.jsp (f iles act as view components)
1. <p>Sorry! username or password error</p>
2. <%@ include file="index.jsp" %>
File: web.xml (file for mapping the servlet)
1. <?xml version="1.0" encoding="UTF-8"?>
2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3. xmlns=" http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
5. id="WebApp_ID" version="3.0">
6.
7. <servlet>
8. <servlet-name>s1</servlet-name>
9. <servlet-class>com.javatpoint.ControllerServlet</servlet-class>
10. </servlet>
11. <servlet-mapping>
12. <servlet-name>s1</servlet-name>
13. <url-pattern>/ControllerServlet</url-pattern>
14. </servlet-mapping>
15.</web-app>
Output
MVC Example in JSP
● To implement a web application based on MVC design pattern, we’ll
create the Employee and EmployeeService classes which will act as
our Model layer.
● EmployeeServlet class will act as a Controller, and for the
presentation layer, we’ll create employees.jsp page.
Model Layer
Employee
package net.javaguides.mvc.model;
public class Employee {
private int id;
private String firstName;
private String lastName;
public Employee(int id, String firstName, String lastName) {
super();
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
}
EmployeeService
package net.javaguides.mvc.service;
import java.util.Arrays;
import java.util.List;
import net.javaguides.mvc.model.Employee;
public class EmployeeService {
public List < Employee > getEmployees() {
return Arrays.asList(new Employee(1, "Ramesh", "Fadatare"), new
Employee(2, "Tony", "Stark"),
new Employee(3, "Tom", "Cruise"));
}
}
Controller Layer
class EmployeeServlet:
package net.javaguides.mvc.controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.javaguides.mvc.service.EmployeeService;
@WebServlet(name = "EmployeeServlet", urlPatterns = "/employees")
public class EmployeeServlet extends HttpServlet {
private static final long serialVersionUID = 1 L;
private EmployeeService employeeService = null;
public void init() {
employeeService = new EmployeeService();
}
private void processRequest(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setAttribute("employees", employeeService.getEmployees());
RequestDispatcher dispatcher =
request.getRequestDispatcher("/WEB-INF/jsp/employees.jsp");
dispatcher.forward(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}
}
View Layer
Presentation layer employees.jsp:
<%@page import="java.util.List"%>
<%@page import="net.javaguides.mvc.model.Employee"%>
<%@ page language="java" contentType="text/html;
charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Student Record</title>
</head>
<body>
<% List<Employee> employees =
(List<Employee>)request.getAttribute("employees"); %>
<table border="1" style="width: 50%" height="50%">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<!-- for (Todo todo: todos) { -->
<% for(Employee employee : employees){ %>
<tr>
<td><%=employee.getId()%></td>
<td><%=employee.getFirstName()%></td>
<td><%=employee.getLastName()%></td>
</tr>
<%} %>
</tbody>
</table>
</body>
</html>
