Scribd
Upload
123 views

LAB # 14 MVC (Model View Controller) Pattern Objective

This document describes the Model-View-Controller (MVC) pattern. It defines the three layers of MVC - the model, view, and controller. The model manages the data, the view displays it to the user, and the controller handles input and invokes changes to the model and view. The document then provides an example implementation of MVC in Java code to manage course data, with classes to represent the model (Course), view (CourseView), and controller (CourseController). Main.java ties these together by retrieving sample data and updating the view before and after changing the course name.

Uploaded by

ayan khan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
123 views

LAB # 14 MVC (Model View Controller) Pattern Objective

This document describes the Model-View-Controller (MVC) pattern. It defines the three layers of MVC - the model, view, and controller. The model manages the data, the view displays it to the user, and the controller handles input and invokes changes to the model and view. The document then provides an example implementation of MVC in Java code to manage course data, with classes to represent the model (Course), view (CourseView), and controller (CourseController). Main.java ties these together by retrieving sample data and updating the view before and after changing the course name.

Uploaded by

ayan khan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Lab # 14 SSUET/QR/114

LAB # 14

MVC (Model View Controller) Pattern

OBJECTIVE
Implementation of MVC (Model View Controller) Pattern.

THEORY:
The Model-View-Controller (MVC) software design pattern is a method for separating
concerns within a software application. In principle, the application logic, or controller, is
separated from the technology used to display information to the user, or the view layer.
As the name implies, the MVC pattern has three layers: The Model defines the business layer
of the application, the Controller manages the flow of the application, and the View defines
the presentation layer of the application.

Key Features of the MVC Pattern:


1. It separates the presentation layer from the business layer.
2. The Controller performs the action of invoking the Model and sending data to View.
3. The Model is not even aware that it is used by some web application or a desktop
application.

1. The browser on the client sends a request for a page to the controller present on the
server.
2. The controller performs the action of invoking the model, thereby, retrieving the data it
needs in response to the request.
3. The controller then gives the retrieved data to the view.
4. The view is rendered and sent back to the client for the browser to display.

Separating a software application into these three distinct components is a good idea for a
number of reasons. Let’s take a look at what those are.

SWE-208: Software Design and Architecture


Lab # 14 SSUET/QR/114

Advantages of MVC Architecture in Java:


MVC architecture offers a lot of advantages for a programmer when developing applications,
which include:
 Multiple developers can work with the three layers (Model, View, and Controller)
simultaneously.
 Offers improved scalability, which supplements the ability of the application to grow.
 As components have a low dependency on each other, they are easy to maintain.
 A model can be reused by multiple views which provides reusability of code.
 Adoption of MVC makes an application more expressive and easy to understand.
 Extending and testing of the application becomes easy.

Implementation of MVC using Java:


To implement a web application based on MVC design pattern, we will create,
 Course Class, which acts as the model layer.
 CourseView Class, which defines the presentation layer (view layer).
 CourseContoller Class, which acts as a controller.

Java Code:
Step 1
Create the Model Layer.

In the MVC design pattern, the model is the data layer which defines the business logic of the
system and also represents the state of the application. The model objects retrieve and store the
state of the model in a database. Through this layer, we apply rules to data, which eventually
represents the concepts our application manages. Now, let’s create a model using Course Class.

Course.java

public class Course {


private String CourseName;
private String CourseId;
private String CourseCategory;

public String getId() {


return CourseId;
}

public void setId(String id) {


this.CourseId = id;
}

public String getName() {


return CourseName;
}

public void setName(String name) {


this.CourseName = name;
}

SWE-208: Software Design and Architecture


Lab # 14 SSUET/QR/114

public String getCategory() {


return CourseCategory;
}

public void setCategory(String category) {


this.CourseCategory = category;
}

The code is easy to understand and is self-explanatory. It consists of functions to get/set course
details.

Step 2
Create the View Layer.

This layer of the MVC design pattern represents the output of the application or the user interface.
It displays the data fetched from the model layer by the controller and presents the data to the user
whenever asked for. It receives all the information it needs from the controller and it doesn’t need
to interact with the business layer directly. Let’s create a view using CourseView Class.

Here we have used JFrame. The javax.swing.JFrame class is a type of container which inherits
the java.awt.Frame class. JFrame works like the main window where components like labels,
buttons, textfields are added to create a GUI (Graphical User Interface).

CourseView.java
import java.awt.FlowLayout;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class CourseView {


public void printCourseDetails(String CourseName, String CourseId, String
CourseCategory){

JFrame frame = new JFrame("JFrame Example");


JPanel panel = new JPanel();
panel.setLayout(new FlowLayout());
JLabel label = new JLabel("<html>Course Details: <br/>"+"Name: " +
CourseName+"<br/>"+"Course ID: " + CourseId+"<br/>"+"Course Category: " +
CourseCategory);
panel.add(label);
frame.add(panel);
frame.setSize(500, 500);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

SWE-208: Software Design and Architecture


Lab # 14 SSUET/QR/114

frame.setVisible(true);
//System.out.println("Course Details: ");
//System.out.println("Name: " + CourseName);
//System.out.println("Course ID: " + CourseId);
//System.out.println("Course Category: " + CourseCategory);
}
}

Step 3
Create the Controller Layer.

The Controller is like an interface between Model and View. Let’s create CourseContoller
Class which acts as a controller.

CourseController.java
public class CourseController {
private Course model;
private CourseView view;

public CourseController(Course model, CourseView view){


this.model = model;
this.view = view;
}

public void setCourseName(String name){


model.setName(name);
}

public String getCourseName(){


return model.getName();
}

public void setCourseId(String id){


model.setId(id);
}

public String getCourseId(){


return model.getId();
}

public void setCourseCategory(String category){


model.setCategory(category);
}

public String getCourseCategory(){


return model.getCategory();
}
public void updateView(){
view.printCourseDetails(model.getName(), model.getId(), model.getCategory());
}

SWE-208: Software Design and Architecture


Lab # 14 SSUET/QR/114

}
A glance at the code will tell us that this controller class is just responsible for calling the model
to get/set the data and updating the view based on that. Now let’s have a look at how all of these
are tied together.

Step 4
Main Java Class.
public class MVCPattern {

public static void main(String[] args) {


//fetch student record based on his roll no from the database
Course model = retrieveCourseFromDatabase();

//Create a view : to write course details on console


CourseView view = new CourseView();

CourseController controller = new CourseController(model, view);

controller.updateView();

//update model data


controller.setCourseName("Python");
//System.out.println("After updating, Course Details are as follows:");

controller.updateView();
}

private static Course retrieveCourseFromDatabase(){


Course course = new Course();
course.setName("Java");
course.setId("01");
course.setCategory("Programming");
return course;
}

Output:

SWE-208: Software Design and Architecture


Lab # 14 SSUET/QR/114

After updating the CourseName, the updated view will be,

Exercise:
Consider the scenario of online shopping. New Year celebrations are going on and different
brands are offering discounts on their websites. Select a brand of your choice. (Clothing, shoe,
jewelry, toys, etc.). Implement MVC design pattern and display the view with first the original
items prices and then the updated view with the discounted prices.

SWE-208: Software Design and Architecture

You might also like