MVC Model

The MVC model is employed in the web development, desktop applications and Mobile applications to break the code base in such a way that it becomes easier to manage, modulated and easier to maintain.

The MVC stands for Model View Controller

Where and Why we use MVC model?

the MVC model is basically used for design and implementing the user interfaces, data, and controlling logic. As it divides the components into three interconnected segments so it is allow us for modular development, easier maintenance, and better scalability. This "separation of concerns" provides for a better division of labor and improved maintenance. Some other design patterns are based on MVC, such as MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter), and MVW (Model-View-Whatever).

What are the three parts of MVC model and there functionality

The three parts of the MVC software-design pattern can be described as follows:

1. Model: Manages data and business logic.

2. View: Handles layout and display.

3. Controller: Routes commands to the model and view parts.

How it Works??

Imagine a simple shopping list app. All we want is a list of the name, quantity and price of each item we need to buy this week. Below we'll describe how we could implement some of this functionality using MVC.

1. The Model

What it does: The Model represents the data and business rules of the application. It manages the data, logic, rules, and flow of the application.

Responsibilities:

• Fetching data from a database or an external service.

• Performing business operations on the data, such as calculations or validation.

• Notifying the View when data changes, so the View can update itself accordingly.

Example: In a blog application, the Model is responsible for retrieving posts and providing an interface for creating, updating, or deleting a post.

2. The View

What it does: The View is responsible for presenting the data to the user. It represents the graphical or visual part of the user interface.

Responsibilities:

• Displaying data from the Model.

• Interacting with users by receiving input through mouse clicks or keyboard typing and passing it to the Controller.

• Ensuring the user interface updates according to the data.

Example: In a blog app, the View would display the list of posts, including headings and descriptions, on the web page.

3. The Controller

What it does: The Controller sits between the Model and the View, and both would be ineffective without it. It receives user inputs, processes them through the Model, and then updates the View.

Responsibilities:

• Receiving data from the View (like buttons and forms).

• Accessing the Model to retrieve or modify data to perform actions or business logic.

• Updating the View with new data entered into the user interface.

Example: In a blog application, the Controller might receive a request to add a new blog post. It forwards the post data to the Model to store this information in the database. Then, it could redirect to the page displaying the newly created post if the post was successfully created.

MVC on the web

As a web developer, you might be familiar with this pattern, even if you haven't intentionally used it before. Your data model is likely stored in a database, whether it's a traditional server-side database like MySQL or a client-side solution like IndexedDB [en-US]. Your app's controlling code is probably written in HTML/JavaScript, and your user interface is likely created using HTML/CSS or any other tools you prefer. This setup resembles MVC, but MVC requires these components to follow a more structured pattern.

In the early days of the web, MVC architecture was mostly used on the server side. The client would request updates through forms or links and receive updated views to display in the browser. Nowadays, more logic is handled on the client side, thanks to client-side data stores and the Fetch API, which allows for partial page updates as needed.