MVC Design Pattern | Complete and simple explanation

Introduction

Hello, good morning, my name is Daniela Barazarte and I want to welcome you to this complete explanation of the model-view-controller design pattern, this explanation will be so simple and direct that even a 5 year old child could explain it to understand.

If you prefer videos, here's a complete tutorial made by me on YouTube, it's in Spanish but has subtitles: https://www.youtube.com/watch?v=b2tPRbQJing

Theory

Logic

**Drawing pattern

• Pattern": is a type of repeating events or objects.

• Design": creative activity aimed at designing useful and aesthetic objects.

**Model-View-Controller".

• Model**: object that serves as a guide to be imitated, reproduced or copied.
• Vision**: sense of the body that allows us to see material things.
• Controller": that which serves to control something or someone.

Simple definition

• The model that handles the data and business logic (eg classes).
• The view that presents data to the user (eg templates, files).
• The controller contains the classes responsible for linking the model and view, processing user requests and updating data in the model accordingly.

The Model-View-Controller design pattern is so called because it divides the program into a "Model" that serves to be used in different parts of the system, a "View" that can be seen, since it is made with HTML and CSS code, and a "Controller", as it controls what happens between the model and the view.

Structure

A project will have each of its components separated into:

• Model
• View
• Controller

The separation of responsibilities between these components allows greater modularity and code reuse, as well as greater ease of maintenance and scalability of the application.

In addition, the MVC pattern encourages the development of web-based and mobile applications, as it allows the separation of server and client logic in a clear and efficient way.

Practice

Exercise

You have the task of creating a website for a gym, in that gym you can register members and you can also register the different equipment that exists, the inventory for sales, sales, etc. Its task is to allow an administrator to register gym equipment from the website.

There are two methods to solve this task:

• Put everything in the same folder/projects.
• Use MVC to structure everything in different folders/projects.

Method: no MVC design pattern

Methods, views, classes, code and many other components would all be in the same place.

Method: with MVC design pattern

Now, methods, views, classes and so on are separated into each of the model, view and controller projects.

Importance

The MVC design pattern has a number of benefits:

• Facilitates code reuse and application modularity.
• Makes the code easier to maintain and update.
• Allows a clear separation of responsibilities between the different components of the application.
• Facilitates teamwork and collaboration between programmers.
• Allows greater flexibility and scalability in application design.

Thanks

Thanks so much for reading. If this post helped you, I appreciate you liking it, commenting on any questions you have and following me so that this post can help many other people.

You can find me on my other networks like Twitter, GitHub and LinkedIn