Padrão de Desenho MVC | Explicação completa e simples
Tags: braziliandevs, designpatterns, tutorial, codenewbie
Published: 2023-06-07 18:25:20

## Introdução

Olá, bom dia, o meu nome é Daniela Barazarte e quero dar-vos as boas-vindas a esta explicação completa do padrão de desenho modelo-visão-controlador, esta explicação será tão simples e directa que até uma criança de 5 anos a poderia entender.

Se preferir vídeos, aqui tem um tutorial completo feito por mim no YouTube, está em espanhol mas tem legendas: https://www.youtube.com/watch?v=b2tPRbQJing

## <u>Teoria</u>
### Lógica
**Padrão de desenho
- Pattern": é um tipo de eventos ou objetos repetitivos.

![Design Pattern maçã verde-vermelha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/512k82wf0e1fzr5h8jwg.png)
- Design": actividade criativa destinada a conceber objectos úteis e estéticos.

**Modelo-Visão-Controlador".
- Modelo**: objecto que serve de orientação para ser imitado, reproduzido ou copiado.
- Visão**: sentido do corpo que nos permite ver coisas materiais.
- Controlador": aquilo que serve para controlar algo ou alguém.

### Definição simples
- O modelo que lida com os dados e a lógica de negócios (por exemplo, classes).
- A vista que apresenta os dados ao utilizador (por exemplo, modelos, ficheiros).
- O controlador contém as classes responsáveis por ligar o modelo e a vista, processar os pedidos do utilizador e actualizar os dados no modelo em conformidade.

O padrão de desenho Model-View-Controller é assim chamado porque divide o programa num "Modelo" que serve para ser utilizado em diferentes partes do sistema, uma "Vista" que pode ser vista, pois é feita com código HTML e CSS, e um "Controlador", pois é ele que controla o que acontece entre o modelo e a vista.


### Estrutura
![Estrutura MVC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwc5f5moinxgsxjnt5rn.png)


Um projecto terá cada um dos seus componentes separados em:
- Modelo
- Vista
- Controlador

A separação de responsabilidades entre estes componentes permite uma maior modularidade e reutilização de código, bem como uma maior facilidade de manutenção e escalabilidade da aplicação.

Além disso, o padrão MVC incentiva o desenvolvimento de aplicações baseadas na web e em dispositivos móveis, pois permite a separação da lógica do servidor e do cliente de forma clara e eficiente.

## <u>Prática</u>
### Exercício
Tens a tarefa de criar um Website para um ginásio, nesse ginásio podes registar membros e também podes registar os diferentes equipamentos que existem, o inventário para vendas, vendas, etc. A sua tarefa consiste em permitir que um administrador registe o equipamento do ginásio a partir do sítio Web.

Existem dois métodos para resolver esta tarefa:
- Colocar tudo na mesma pasta/projectos.
- Utilizar o MVC para estruturar tudo em pastas/projectos diferentes.


**<u>Método: sem padrão de projeto MVC
</u>**

![Exemplo sem o padrão MVC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggsfgeldioq9lwse7b20.png)


Métodos, views, classes, código e muitos outros componentes estariam no mesmo lugar.

**<u>Método: com padrão de projeto MVC</u>** !

![Exemplo com o padrão MVC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enzg95hsgr5wqnf07xa9.png)

Agora, métodos, views, classes e assim por diante são separados em cada um dos projetos de model, view e controller.

## Importância

**O padrão de projeto MVC tem uma série de benefícios:**

- Facilita a reutilização de código e a modularidade da aplicação.
- Torna o código mais fácil de manter e actualizar.
- Permite uma separação clara de responsabilidades entre os diferentes componentes da aplicação.
- Facilita o trabalho em equipa e a colaboração entre os programadores.
- Permite maior flexibilidade e escalabilidade no design da aplicação.


## Agradecimentos

Muito obrigada pela leitura. Se este post te ajudou, agradeço que gostes, que comentes qualquer dúvida que tenhas e que me sigas para que este post possa ajudar muitas outras pessoas.

Você pode me encontrar nas minhas outras redes como [Twitter](https://twitter.com/danibarazarteg), [GitHub ](https://github.com/danielabarazarte) e [LinkedIn](https://www.linkedin.com/in/danielabarazarteg/)