Jun 13, 2024 5 minute read
Model-View-Controller
Table of Contents
- What is MVC?
- Components of MVC
- Communication between the components
- Advantages of Using MVC
- MVC in Popular Frameworks
What is MVC?
Model-View-Controller (MVC) is a software design pattern commonly used for developing user interfaces. It divides an application into three interconnected components to separate internal representations of information from the ways that information is presented to and accepted by the user.
Components of MVC
Model
The Model represents the data and the business logic of the application. It directly manages the data, logic, and rules of the application. The Model retrieves data from the database, processes it, and sends it to the View for presentation.
View
The View represents the presentation layer of the application. It gets data from the Model and renders it in a way that is understandable to the user. It receives user inputs and sends them to the Controller.
Controller
The Controller acts as an intermediary between the Model and the View. It handles the user's input, interacts with the Model to update the data, and renders the appropriate View with the updated data.
Communication between the components
This communication flow below shows the communication between the components:
-
User Interaction with View: The user interacts with the View, such as clicking a button or entering text into a form.
-
View Receives User Input: The View receives the user input and forwards it to the Controller.
-
Controller Processes User Input: The Controller receives the user input from the View. It interprets the input, performs any necessary operations (such as updating the Model), and decides how to respond.
-
Controller Updates Model: The Controller updates the Model based on the user input or application logic.
-
Model Notifies View of Changes: If the Model changes, it notifies the View.
-
View Requests Data from Model: The View requests data from the Model to update its display.
-
Controller Updates View: The Controller updates the View based on the changes in the Model or in response to user input.
-
View Renders Updated User Interface: The View renders the updated User Interface based on the changes made by the Controller.
Advantages of Using MVC
-
Separation of Concerns:
The three components are independent, making it easier to manage and modify each part without affecting the others.
-
Facilitates Parallel Development:
Developers can work simultaneously on the user interface (View), the business logic (Model), and the control logic (Controller) without stepping on each other's toes.
-
Scalability:
The application can be scaled more easily by adding new Views, Controllers, or extending Models without significant changes to the existing codebase.
-
Reusability:
Components of MVC can be reused across different parts of the application. For instance, the same Model can be used with different Views or Controllers without modification.
-
Maintainability:
The clear separation makes it easier to locate and fix bugs, update features, and maintain the code.
-
Improved Testability:
Each component can be tested independently, improving the robustness of the application through better unit testing and debugging. Changes in one component (like updating the View) do not affect the others (Model and Controller).
MVC in Popular Frameworks
The MVC Design Pattern is used in many popular Frameworks as Laravel (PHP), Ruby on Rails (Ruby), Django (Python) and ASP.NET (C#).
Laravel MVC Implementation
Here is an example of how Laravel implements the MVC pattern in a Blog Application.
Model
The Model represents the data and business logic. In this case, we'll create a "Post" Model.
Post Model (app/Models/Post.php)
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Post extends Model {
protected $fillable = ['title', 'content'];
}
This model corresponds to a "posts" table in the database.
View
The View handles the presentation of the data. For that, we'll create a Blade template to display a list of blog posts.
View (resources/views/posts/index.blade.php)
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
</head>
<body>
<h1>Blog Posts</h1>
<ul>
@foreach ($posts as $post)
<li>
<h2>{{ $post->title }}</h2>
<p>{{ $post->content }}</p>
</li>
@endforeach
</ul>
</body>
</html>
Controller
The Controller handles user input and interacts with the Model to retrieve data and pass it to the View.
PostController (app/Http/Controllers/PostController.php)
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
class PostController extends Controller {
public function index() {
$posts = Post::all();
return view('posts.index', ['posts' => $posts]);
}
public function show($id) {
$post = Post::find($id);
return view('posts.show', ['post' => $post]);
}
}
Routes
Define the routes to map URLs to the Controller actions.
Routes (routes/web.php)
use App\Http\Controllers\PostController;
Route::get('/posts', [PostController::class, 'index']);
Route::get('/posts/{id}', [PostController::class, 'show']);
Workflow Example
-
User Request: A user navigates to /posts.
-
Routing: The request is routed to the index method of PostController.
-
Controller: The index method retrieves all posts from the database using the Post model.
-
View: The index method returns the posts.index view, passing the retrieved posts as data.
-
View Rendering: The posts.index view iterates over the posts and displays them in HTML.