Advertisement
  1. Code
  2. Web Development
Code

MVC para iniciantes (noobs)

by
Difficulty:BeginnerLength:MediumLanguages:

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

Model-View-Controller (MVC) provavelmente é modelo de desenvolvimento mais utilizado na web nos ultimos anos. Qualquer pessoal atualmente relacionada ao desenvolvimento de alguma solução para a web já teve ter esbarrado algumas vezes no conceito. Hoje, vamos entender o que significa MVC, e porque ele tem se tornado tão popular.

Inicio...

MVC não é um padrão de design, é uma padrão de arquitetura que descreve como devemos estruturar nossa aplicação, bem como as responsabilidade e interações dentro de cada parte dessa estrutura.

Foi citado pela primeira vez em 1979 e, obviamente, o contexto hoje está um pouco diferente. O conceito de aplicação web não existia. Tim Berners Lee semeou as sementes da World Wide Web, ou internet, no começo dos anos 90 e mudou o mundo para sempre. O padrão que utilizamos hoje para desenvolvimento web é uma adaptação do padrão original.

A grande popularização dessa estrutura para aplicações web está relacionada com a inclusão da mesma em framewoks bastante populares: Struts e Ruby on Rails. Esses dois ambientes de desenvolvimento criou o caminho para as centenas de frameworks criados posteriormente.

MVC para aplicações web

A ideia por trás do padrão model-view-controller, ou modelo-visualização-controlador (MVC) é simples: temos que ter as seguintes responsabilidades ao desenvolver nossa aplicação:

Nossa aplicação é dividida entre três componentes principais, cada um com uma tarefa diferente. Vamos analisar uma explicação detalhada e um exemplo.

Controller ou Controlador

O controller/controlador gerencia as requisições do usuário (basicamente se traduz na requisição HTTP GET ou POST quando o usuário interage com algum elemento ou executa alguma ação). Sua principal função é requisitar e coordenar os recursos ou objetos necessários para executar a ação do usuário. Normalmente o controlador requisita o modelo apropriado para a tarefa, e depois seleciona a view/visualização apropriedada.

Model/Modelo

O model/modelo representa a informação e a regras aplicadas a esta, que represprenta os conceitos que a aplicação gerencia. Em qualquer software, tudo é modelado como informação que tratamos de determinada maneira. O que é um usuário, uma mensagem ou um livro para uma aplicação? Apenas informações podem ser manipuladas de acordo com regras especificas (data não pode estar no futuro, o email precisa requer um formato especifico, nome não pode ter mais de x caracteres, etc).

O modelo da ao controlador a representação da informação de qualquer que seja a solicitação do usuário (uma mensagem, uma lista de livros, um album de fotos, etc). Essa informação vai ser a mesma não importa como pretendemos apresenta-la para o usuário, é por isso que podemos escolher qualquer view para renderizar a informação.

O modelo contém as informações mais importantes sobre a logica da aplicação, a logica que está aplica ao problema que estamos lidando (um forum, uma loja, um banco, etc). O controlador carrega uma logica mais organizacional-interna para a aplicação.

View/Visualização

A view/visualização disponibiliza diferentes maneiras de apresentar a informação recebido do modelo. Eles podem ser templates onde a informação é preenchida. Podem existir diferentes views e o controller é responsável por decidir qual deve ser utilizada.

Uma aplicação web é normalmente composta por um conjunto de controllers, models e views. O controller pode ser estruturado como um controlador padrão que recebe as requisições e requisita controllers especificos que manipulam ações para cada caso.

Vamos analisar um exemplo

Vamos suport que estamos desenvolvendo uma loja de livros. O usuário pode executar ações como: visualizar livros, registrar, comprar, e adicionar itens a compra atual, criar ou deletar livros (se for um administrador, etc.). Vamos ver o que acontece quando o usuário clica na categoria fantasy para visualizar os titulos que temos disponíveis.

Vamos ter um determinado controller para manipular todas as ações relacionadas ao livro (visualizar, editar, criar, etc). Neste exemplo, vamos chamar este arquivo de books_controller.php. Também temos um modelo, por exemplo book_model.php, manipulando as informações e logica relacionada ao itens na loja. Finalmente, temos uma série de views para apresentar, por exemplo, uma lista de livros, uma pagina para editar livros, etc.

A imagem a seguir mostra como a requisição para visualizar a lista de livros fantasy é manipulada.

O controller (books_controller.php) recebe a requisição do usuário [1] como uma requisição HTTP GET ou POST (também podemos ter um controlador central, por exemplo um index.php, recebendo a requisição e chamando o books_controller.php).

O controller examina a requisição e os parametros, e requisita o modelo (book_model.php) solicitando que seja retornada a lista de livros disponiveis na categoria fantasy [2].

O modelo é responsável por pegar determinada informação na base dados (ou onde esta estiver alocada) [3], aplicar filtros ou a lógica necessária, e depois retornar a informação apresentando a listra de livros [4].

O controle vai utilizar a view apropriada [5] para apresentar essa informação para o usuário [6-7]. Se a requisição for feita a partir de um celular, uma view para mobile vai ser utilizada, se o usuário tiver uma skin selecionada, determinada views vai ser escolhida, e assim por diante.

Quais são as vantagens?

A vantagem mais óbvia do MVC é uma separação clara da apresentação da aplicação (neste caso, a interface do usuário) e a lógica.

Suporte para difrentes tipos de usuário utilizando diferentes tipos de dispositivos é um problema comum nos dias atuais. A interface apresentada deve ser diferente se a requisição vier de um desktop ou de um celular. O modelo retorna exatamente a mesma informação, a unica diferença é que o controller vai selecionar um view diferente para renderizar a informação (basicamente será utilizado outro template).

Apesar de isolar a view da parte lógica do negócio, a separação criada pelo padrão MVC reduz a complexidade quando estamos criando grandes aplicações. O código é muito mais estruturado e de facil manutenção, testes e reutilização.

Ok, mas porque um framework?

Quando utilizamos um framework, a estrutura basica do MVC já está pronta, basta extender a estrutura, colocando os arquivos nos diretórios apropriados, para bater com o padrão model-view-controller  aplicado. Além disso, você tem a disposição uma serie de funcionalidades já desenvolvidas e testadas.

Pegue o framework cakePHP como exemplo. Uma vez instalado, ele deve apresentar três diretórios principais:

  • app/
  • cake/
  • vendors/

A pasta app é onde você coloca os seus arquivos. É o lugar onde você pode desenvolver a sua parte da aplicação, que seria a aplicação em si em cima do framework.

A pasta cake é onde o cakePHP guarda seus arquivos, consequentemente é a parte onde ficam os arquivos de configuração do framework em si.

A pasta vendors seria para seria para soluções de terceiros, caso necessário.

O seu local de trabalho tem a seguinte estrutura:

  • app/
    • config/
    • controllers/
    • locale/
    • models/
    • plugins/
    • tests/
    • tmp/
    • vendors/
    • views/
    • webroot/

Agora você precisa colocar os seus controles na pasta controllers, os modelos na pasta models e as visualizações/paginas na pasta views.

Assim que você se acostumar com o framework, seja ele qualquer for, você vai saber onde está cada parte do código quando precisar atualizar ou aplicar manutenção. Só a organização dos arquivos já facilita e muito a manutenção.

Vamos testar nosso exemplo com o framework

A intenção do tutorial não é mostrar como criar uma aplicação com o CakePHP, mas vamos utilizar o framework para criar um exemplo de código utilizando os componentes model, view e controller, enquanto comentamos sobre os beneficios do MVC. O código é bem simples e não é recomendada a utilização em aplicações reais.

Lembre-se, temos uma lova de livros e um usuário curioso querendo saber qualquer a lista completa de livros na categoria fantasy. Anteriormente foi dito que o controller seria o responsável por receber as requisições e coordenar as ações necessárias.

Então, quando o usuário clicar, o navegador vai requisitar a seguinte URL:

O CakePHP formata a URL no formato /controller/action/param1/param2, onde o action indica a função que será executada no controller. No formato clássico ficaria da seguinte maneira:

Controller/Controlador

Com auxílio do CakePHP, nosso controlador deve ser parecido com o exemplo abaixo:

Simples, não? Vamos salvar o controlador como books_controller.php na pasta /app/controllers. Este arquivo contém a lista de funções, que executa a ação no nosso exemplo, mas também pode executar outras ações relacinadas aos livros (adicionar novo livro, deletar, etc).

O framework disponibiliza varios recursos para nós e apenas uma linha é necessária para listar os livros. Nós temos classes de apoio junto ao controller criado, que já estão definidas e podemos e devemos utilizar.

Tudo que precisamos fazer na lista de ações é chamar o model para receber a informação e escolher uma view para apresentar a informação ao usuário. Vamos ver como isso funciona.

this->Book é o nosso Model, e essa parte:

diz ao model para retornar a lista de livros na categoria selecionada (vamos ver o model a seguir).

o método set na linha:

é a maneira do controller de passar a informação para a view. Isso define a variável books na informação retornada pelo modelo e torna essa acessível na view.

Agora apenas é necessário renderizar a view no navegador, mas isso o CakePHP faz automaticamente. Se precisarmos de outra view, bastar requisitar a mesma utilizando o método render.

Modelo/Modelo

O model é ainda mais simples:

Porque está vazio? Porque está atrelado a class base que disponibiliza as funcionalidades necessárias no framework, e utilizamos os nomes relacionados a funcionalidades também com base nas configurações do framework, o que permite ao framework executar tarefas automaticamente. Por exemplo, o CakePHP sabe, baseado nestes nomes, que este model é utilizado no BooksController e que ele vai acessar uma base de dados chamada books.

Com essa declaração nos temos um book model capaz de ler, deletar ou salvar informações na base de dados.

Salvamos o arquivo como book.php na pasta /app/models.

View/Visualização

Agora precisamos criar uma view (pelo menos uma) para listar as ações. A view vai ser composta por código HTML e algumas linhas (o quanto for necessário) de PHP, para executar o laço criado no modelo.

Como podemos ver, a view não produz uma página completa, apenas um fragmento em HTML (uma tablea neste caso). Isso é porque o CakePHP disponibiliza outra maneira de definir o layout da página, e as views são inseridas nesse layout. O framework também disponibiliza alguns helper objects (objetos de auxílio pré criados) para facilitar tarefas comuns quando estamos trabalhando com HTML (formulários de inserção, links, Ajax ou JavaScript).

Fazemos dela a view padrão salvando com o nome list.ctp (list é o nome da ação e ctp indica que o arquivo é um template do CakePHP) na pasta /app/views/books (dentro de books porque essas são views para as ações do controller books).

E com isso completamos a lista de componentes do MVC, com ajuda do framework CakePHP.

Conclusão

Aprendemos como o padrão mais utilizado para arquitetura de software funciona. Temos que ter noção de que quando falamos em padrões, no mundo da programação, estamos falando sobre frames flexiveis, focados em um determinado problema. Voce pode se deparar com variações em relação a estrutura que analisamos, mas o mais importante é que, no fim, o padrão nos ajuda a entender e trabalhar melhor o projeto.

Também analisamos as vantegens do MVC, em relação ao esqueleto que ele dispobiliza, com uma serie de recursos, para aumentar a produtividade e tornar o processo de desenvolvimento mais simples. Obrigado pela leitura!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.