Author

Samia Alam
Abdus Salam

MVC Design Pattern

The MVC (Model-View-Controller) design pattern is a software architecture pattern that separates an application into three main components: Model, View, and Controller. This separation makes it easier to manage and maintain the codebase, promotes the reusability of components, and encourages a more modular approach to software development.

---

Components of MVC

1. Model
2. View
3. Controller

Model

The Model component in the MVC design pattern represents the data and business logic of an application. It is responsible for managing the application’s data, processing business rules, and responding to requests for information from other components, such as the View and the Controller.

View

The View displays the data from the Model to the user and sends user inputs to the Controller. It is passive and does not directly interact with the Model. Instead, it receives data from the Model and sends user inputs to the Controller for processing.

Controller

The Controller acts as an intermediary between the Model and the View. It handles user input, updates the Model accordingly, and updates the View to reflect changes in the Model. It contains application logic, such as input validation and data transformation.

---

Communication Between Components

The communication flow between the components ensures that each one is responsible for a specific aspect of the application’s functionality, leading to a more maintainable and scalable architecture.

1. User Interaction with View: The user interacts with the View (e.g., clicking a button or entering text into a form).
2. View Receives User Input: The View receives the user input and forwards it to the Controller.
3. Controller Processes User Input: The Controller receives the user input from the View, interprets it, performs necessary operations (such as updating the Model), and decides how to respond.
4. Controller Updates Model: The Controller updates the Model based on the user input or application logic.
5. Model Notifies View of Changes: If the Model changes, it notifies the View.
6. View Requests Data from Model: The View requests data from the Model to update its display.
7. Controller Updates View: The Controller updates the View based on changes in the Model or in response to user input.
8. View Renders Updated UI: The View renders the updated UI based on the changes made by the Controller.

---

Example of the MVC Design Pattern

Code Example

Batch.js(Model)

const sequelize = require('../DBConfig/Config');

const Batch = sequelize.define('batch', {
    id: { type: DataTypes.INTEGER, primaryKey: true, autoIncrement: true },
    name: { type: DataTypes.STRING },
    email: { type: DataTypes.STRING },
    password: { type: DataTypes.STRING },
    profilePic: { type: DataTypes.STRING },
    coverPic: { type: DataTypes.STRING }
}, { timestamps: false });

module.exports = Batch;

view.js

const Batch = require("../Model/Batch");

const getAllBatch = async (req, res) => {
    try {
        const batches = await Batch.findAll();
        return res.status(200).json(batches);
    } catch (err) {
        console.error(err);
        return res.status(500).json({ error: "Internal server error" });
    }
}

const login = async (req, res) => {
    const { email, password } = req.body;
    if (!email || !password) {
        return res.status(400).json({ message: 'Email and password is required' });
    }
    const batch = await Batch.findOne({where: {
            email: email,
            password: password,
        }})
    if(batch){
        return res.status(200).json({batch});
    }
    return res.status(404).json({ error: "Email or password is incorrect." });
}

module.exports = {getAllBatch,login };

controller.js

const express = require("express");
const upload = require("../StorageConfig");
const {getAllBatch, createBatch, login} = require("../Service/BatchService");

const batchRouter = express.Router();

batchRouter.get("/allBatch", getAllBatch);
batchRouter.post("/createBatch", upload.fields([
    { name: 'profilePic', maxCount: 1 },
    { name: 'coverPic', maxCount: 1 }
]), createBatch);

batchRouter.post("/login",login);

module.exports = { batchRouter };

When to Use the MVC Design Pattern

1. Building Web Applications: When creating dynamic, interactive web applications.
2. Complex Applications: For projects with intricate business logic and multiple user interactions.
3. Collaborative Development: When multiple developers or teams are involved in the project.
4. Rapid Development: When you need to iterate quickly and implement frequent updates.
5. Maintaining Clean Code: To ensure a clear structure that enhances readability and maintainability.
6. Test-Driven Development: If you plan to implement unit tests and need isolated components for testing.
7. Reusability Needs: When you want to build components that can be reused across different parts of the application or in future projects.

---

Reference

1. https://www.ramotion.com/blog/mvc-architecture-in-web-application/