When building modern web applications, one of the most influential and widely adopted architectural patterns is MVC — short for Model-View-Controller.
MVC is an architectural pattern used to organize code in software applications. It separates the application into three main components, each with a clear responsibility:
- Model: This is typically a class or set of classes that handle the application’s data and business logic. The Model manages retrieving, processing, and updating data, often by interacting with a database or other storage. It knows how to work with data but does not deal with how the data is presented or how users interact.
- View: The View is responsible for presenting data to the user. It is usually a template, a file, or a function that generates the user interface, such as HTML markup in a web app. The View receives data prepared by the Controller and renders it. Importantly, the View contains no business logic; its sole purpose is to display information.
- Controller: The Controller is a class or function that acts as the intermediary between the user, the Model, and the View. It handles user input (such as HTTP requests), calls the appropriate Model methods to process data, and selects which View to display. The Controller organizes the application flow but does not manage the data itself nor directly format output.
How MVC Works
Sponsored
Consider a simple web app where a user requests a list of products.
- The user makes an HTTP request, for example, to
/products. - The Controller receives this request.
- It then asks the Model to fetch the product data.
- The Model queries the database and returns an array of products.
- The Controller passes this data to the View.
- The View renders the HTML page with the list of products,
- which is then sent back to the user’s browser.
Code Example (in PHP-like psuedocode)
ProductModel.php
PHP
// Model: handles data and business logic
class ProductModel
{
public function getAllProducts(): array
{
// Normally, this would query the database like:
// SELECT * FROM products
return [
['id' => 1, 'name' => 'Phone', 'price' => 299],
['id' => 2, 'name' => 'Laptop', 'price' => 999],
];
}
}product-view.blade.php
PHP
<!doctype html>
<head>...</head>
<body>
<h1>Product List</h1>
<ul>
@foreach ($products as $product)
<li>{{ $product['name'] }} - {{ $product['price'] }}</li>
@endforeach
</ul>
</body>ProductController.php
PHP
// Controller: orchestrates the workflow
class ProductController
{
private DatabaseModel $model;
public function __construct($model) {
$this->model = $model;
}
public function showProductList()
{
// Controller calls the Model to fetch products
$products = $this->model->getAllProducts();
// Controller calls the view to display products
echo (new Blade(...))->render('product-view', [
'products' => $products
]);
}
}Now when user sends a request to /product
PHP
// M: The business logic class is initialized and ready to use
$productModel = new ProductModel();
// C: The controller receives it and uses it to process the view
$productController = new ProductController($productModel);
// V: The view is rendered to the user
$productController->showProductList();Explanation of the Workflow
- When the user requests the product list, the
ProductControllerhandles the request. - It calls
getAllProducts()on theProductModelto retrieve data. - After the data is fetched, the controller utilizes a template engine called Blade which formats the product data into HTML and displays it.
Key Points
- The Model does not know how the data will be displayed, it only handles logic.
- The View does not interact with the database or control application logic, it only displays HTML content.
- The Controller connects the two and manages the application’s flow.
Why Use MVC?
By separating data management (Model), user interface (View), and application logic (Controller), MVC makes your codebase easier to maintain and scale. Changes in the user interface don’t affect how data is handled, and changes in data structure don’t require rewriting the display logic.
