Design Patterns MVC

Model-View-Controller (MVC) splits an application into three parts: data, display, and control. Each part owns one job and talks to the others through clear paths. Teams change the look of a screen without touching business rules.

The Real-World Analogy

A restaurant has a kitchen, a dining room, and a waiter. The kitchen prepares food, which matches the model. Presenting plates to guests, the dining room matches the view. Carrying orders between the two, the waiter matches the controller.

The Three Parts

Model

Holds data and business rules. A Product model stores name and price and knows how to compute a discount. The model knows nothing about screens.

View

Shows data to the user. A page, a chart, or a mobile screen can serve as a view. The view contains no business decisions.

Controller

Receives user actions, updates the model, and picks the view to display. The controller acts as the traffic officer of the application.

How the Parts Connect

            user action
   ┌────────────────────────┐
   │                        ▼
┌──┴─────┐  selects   ┌────────────┐  updates  ┌─────────┐
│  View  │ ◀───────── │ Controller │ ────────▶ │  Model  │
└────────┘            └────────────┘           └────┬────┘
     ▲                                              │
     └──────────────── reads data ──────────────────┘

Request Flow Example

1. User clicks "Show Product 7"
2. Controller receives the click
3. Controller asks Model for Product 7
4. Model returns name = "Notebook", price = 4
5. Controller hands the data to ProductView
6. View draws the page
7. User sees the result

Code Example

class Product {                          // Model
    String name;
    double price;
    Product(String name, double price) { this.name = name; this.price = price; }
    double priceWithTax() { return price * 1.10; }
}

class ProductView {                      // View
    void show(String name, double total) {
        print("Item: " + name + " | Total: " + total);
    }
}

class ProductController {                // Controller
    private Product model;
    private ProductView view;

    ProductController(Product model, ProductView view) {
        this.model = model;
        this.view = view;
    }

    void display() {
        view.show(model.name, model.priceWithTax());
    }

    void changePrice(double newPrice) {
        model.price = newPrice;
        display();
    }
}

Product p = new Product("Notebook", 4);
ProductController c = new ProductController(p, new ProductView());
c.display();
c.changePrice(5);

MVC in Web Frameworks

Framework Area	Typical Location
Model	Classes mapped to database tables
View	Templates that produce HTML
Controller	Classes that handle web addresses

Popular frameworks such as Laravel, Django (with its own naming), Spring MVC, and ASP.NET MVC follow this layout.

Patterns Hiding Inside MVC

• Observer links the model to the views that must refresh.
• Strategy lets a view swap its controller behavior.
• Composite builds complex views from smaller pieces.

Common Mistakes

• Fat controllers: business rules belong in the model.
• Smart views: calculations belong outside templates.
• Direct view-to-database calls: always pass through the model.

Advantages and Disadvantages

Advantages	Disadvantages
Teams work on parts in parallel	More files for small apps
One model feeds many views	Beginners confuse part boundaries
Simpler testing of rules	Controllers grow bloated without discipline

Step-by-Step Walkthrough

Follow the code example. The main program creates a Product, a ProductView, and a ProductController, and links them together. Calling display() makes the controller ask the model for the price with tax. The controller passes that number to the view, which prints the result.

Calling changePrice(5) updates the model and refreshes the display. The view contains no calculation, and the model contains no printing code.

Keeping Roles Clean

• Ask "Is this about data or rules?" before writing code. If yes, place it in the model.
• Ask "Is this about appearance?" before touching a template. If yes, place it in the view.
• Ask "Is this about reacting to a user action?" before adding a method. If yes, place it in the controller.

Practice Idea

Plan a simple notes application on paper. List the model fields, the screens, and the actions each screen allows. Assign every item to one of the three roles.

Key Takeaways

• MVC separates data, display, and control into three roles.
• The controller connects user actions to model updates and view choices.
• Models hold rules, and views only present results.
• Keep controllers thin to protect the design.