Imprimir Post

Arquitetura em Camadas (Parte 3.6) – Modelo em 3 camadas (3-tier)

Resumo:

O objetivo não se aplica a este post.

Uma vez que o conteúdo total desta série foi dividido em 4 partes, deve-se considerar absoluto o resumo da primeira postagem até o momento presente.

Modelo em 3 camadas (3-tier) - Relembre - Link Primeiro Post

Este tema da série Arquitetura em Camadas encerra-se nesta publicação. Sendo assim, a numeração sequencial desta parte da série finaliza-se de 3.5 para 3.6 (vide título).

Palavras-chaves:

3 camadas, 3-tier, Arquitetura, Desenvolvimento, Modelo.

Texto:

Com o projeto BLL agora criado (vide post anterior), o próximo passo no desenvolvimento do Modelo em 3 camadas (3-tierserá criar o projeto WebUI.

Modelo em 3 camadas (3-tier) - Relembre - Link Post Anterior

Criando o Projeto WebUI

Localizar e clicar no menu: File, em seguida selecionar Add e clicar sobre a opção New Web Site…:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Criação de Novo Projeto

Microsoft Visual Studio 2010 Ultimate – Criação de Novo Projeto

Tela após clicar na opção New Web Site…:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Janela Central

Microsoft Visual Studio 2010 Ultimate – Janela Central

A janela central está intitulada como Add New Web Site.

Contendo 3 áreas divididas na vertical e 1 área dividida na horizontal, na primeira área à esquerda nomeada como: Installed Templates, clicar na opção Visual C#. Em seguida na área central, localizar e clicar na opção: ASP.NET Empty Web Site. Por fim, na área que representa a divisão horizontal, manter as informações de acordo com a imagem abaixo e clicar no botão Ok:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Janela Central

Microsoft Visual Studio 2010 Ultimate – Janela Central

Vale destacar as configurações:

  • Web location: determina-se o caminho ou diretório no qual o projeto ficará armazenado.

Observação: Diferentemente dos outros projetos, criados como camadas até agora, o modelo Web Site não contém a configuração Name disponível. Sendo assim, e, por padrão, utiliza-se do caminho definido em Web location para representar seu nome na solução (C:\LinkSinergia\WebUI). De toda forma, ao longo da postagem será referido como WebUI.

Tela após clicar no botão Ok:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Tela após Criação do Projeto

Microsoft Visual Studio 2010 Ultimate – Tela após Criação do Projeto

O próximo passo é referenciar o Projeto DTO, DAL e BLL no Projeto WebUI, estabelecendo o vínculo entre estes.

Localizar e clicar com o botão direito no projeto WebUI, em seguida selecionar e clicar na opção Add Reference…:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Referenciação de Projetos

Microsoft Visual Studio 2010 Ultimate – Referenciação de Projetos

Tela ao clicar na opção Add Reference…:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Referenciação de Projetos

Microsoft Visual Studio 2010 Ultimate – Referenciação de Projetos

A janela central está intitulada como Add Reference.

Contendo 5 opções em abas, localizar e clicar sobre a aba Projects, na sequencia selecionar as linhas presentes abaixo das colunas Project Name e Project Directory de acordo com a imagem acima e clicar no botão Ok.

Tela ao clicar no botão OK:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Tela após Referenciação de Projetos

Microsoft Visual Studio 2010 Ultimate – Tela após Referenciação de Projetos

Com o vínculo estabelecido (vide imagem acima), deve-se novamente clicar com o botão direito no projeto WebUI, em seguida selecionar e clicar na opção Add New Item…:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Criação de Novo Item

Microsoft Visual Studio 2010 Ultimate – Criação de Novo Item

Tela após clicar na opção Add New Item…:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Janela Central

Microsoft Visual Studio 2010 Ultimate – Janela Central

A janela central está intitulada como Add New Item – C:\LinkSinergia\WebUI\.

Contendo 3 áreas divididas na vertical e 1 área dividida na horizontal, na primeira área à esquerda nomeada como: Installed Templates, clicar na opção Visual C#. Em seguida na área central, localizar e clicar na opção: Web Form. Por fim, na área que representa a divisão horizontal, manter as informações de acordo com a imagem abaixo e clicar no botão Add:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Janela Central

Microsoft Visual Studio 2010 Ultimate – Janela Central

Vale destacar as configurações:

  • Name: determina-se o nome do Formulário Web.

Tela após clicar no botão Add:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Tela após Criação do Formulário Web

Microsoft Visual Studio 2010 Ultimate – Tela após Criação do Formulário Web

Nota-se que ao criar o Formulário Web Login.aspx, o Microsoft Visual Studio se encarrega automaticamente de disponibilizá-lo em sua área Source (código que gerará a Tela de visualização para o Usuário Final).

Deve-se clicar e modificar a área do formulário web Login.aspx alterando-o para o seguinte código:

Tela ao colar o código:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Tela após Alteração do Formulário Web

Microsoft Visual Studio 2010 Ultimate – Tela após Alteração do Formulário Web

Por fim, deve-se salvar o projeto WebUI e suas alterações clicando no botão Salvar.

Tela com a confirmação positiva (ver rodapé da janela) ao clicar no botão Salvar:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Tela após Salvar o Projeto

Microsoft Visual Studio 2010 Ultimate – Tela após Salvar o Projeto

Existe um segundo arquivo que nasce imediatamente vinculado na criação do arquivo Login.aspx que é a classe Login.aspx.cs, responsável por armazenar a programação dos itens (mais conhecidos como componentes) que estarão presentes na área Source (vide imagem acima) do arquivo Login.aspx.

À direita na área Solution Explorer, o arquivo Login.aspx contém uma seta que ao ser expandida, revela a classe Login.aspx.cs:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Solution Explorer

Microsoft Visual Studio 2010 Ultimate – Solution Explorer

Porém esta é apenas a exibição da classe, para acessá-la deve-se clicar duas vezes (2x) sobre esta, agora revelada.

Tela ao clicar duas vezes (2x) na classe Login.aspx.cs:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Tela após Acessar a Classe

Microsoft Visual Studio 2010 Ultimate – Tela após Acessar a Classe

Deve-se clicar e modificar a área da classe Login.aspx.cs alterando-a para o seguinte código:

Tela ao colar o código:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Tela após Alteração da Classe

Microsoft Visual Studio 2010 Ultimate – Tela após Alteração da Classe

Repetir o passo clicando com o botão direito no projeto WebUI, em seguida selecionar e clicar na opção Add New Item…:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Criação de Novo Item

Microsoft Visual Studio 2010 Ultimate – Criação de Novo Item

Tela após clicar na opção Add New Item…:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Janela Central

Microsoft Visual Studio 2010 Ultimate – Janela Central

A janela central está intitulada como Add New Item – C:\LinkSinergia\WebUI\.

Contendo 3 áreas divididas na vertical e 1 área dividida na horizontal, na primeira área à esquerda nomeada como: Installed Templates, clicar na opção Visual C#. Em seguida na área central, localizar e clicar na opção: Web Form. Por fim na área que representa a divisão horizontal, manter as informações de acordo com a imagem abaixo e clicar no botão Add:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Janela Central

Microsoft Visual Studio 2010 Ultimate – Janela Central

Vale destacar as configurações:

  • Name: determina-se o nome do Formulário Web.

Tela após clicar no botão Add:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Tela após Criação do Formulário Web

Microsoft Visual Studio 2010 Ultimate – Tela após Criação do Formulário Web

Nota-se que ao criar o Formulário Web Proxima.aspx, o Microsoft Visual Studio se encarrega automaticamente de disponibilizá-lo em sua área Source (código que gerará a Tela de visualização para o Usuário Final).

Deve-se clicar e modificar a área do formulário web Proxima.aspx alterando-o para o seguinte código:

Tela ao colar o código:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Tela após Alteração do Formulário Web

Microsoft Visual Studio 2010 Ultimate – Tela após Alteração do Formulário Web

Por fim, deve-se salvar o projeto WebUI e suas alterações clicando no botão Salvar.

Testando a Aplicação

Antes de executar a Aplicação com o botão Start Debugging (F5), deve-se configurar o projeto WebUI para que este seja o projeto Padrão de Inicialização. Para tanto, deve-se clicar com o botão direito sobre o projeto WebUI, em seguida selecionar e clicar na opção Set as StartUp Project :

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Configuração de Projeto Padrão de Inicialização

Microsoft Visual Studio 2010 Ultimate – Configuração de Projeto Padrão de Inicialização

Tela após clicar na opção Set as StartUp Project:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate -Tela após Configuração do Projeto Padrão de Inicialização

Microsoft Visual Studio 2010 Ultimate -Tela após Configuração do Projeto Padrão de Inicialização

Vale destacar:

  • O primeiro projeto criado da solução (Solution) se torna sempre o projeto Padrão de Inicialização, no caso, em exemplo, era DTO. Com a configuração realizada acima, o projeto Padrão de Inicialização passou a ser WebUI.

Modelo em 3 camadas (3-tier) - Relembre - Solution

Modelo em 3 camadas (3-tier) - Atenção - Class Library

Modelo em 3 camadas (3-tier) - Atenção - Class Library

O próximo passo é configurar o Formulário Web (também conhecido popularmente como Página Web) Login.aspx para que este seja o formulário Padrão de Visualização ao executar a aplicação. Para tanto, deve-se localizar a Solution Explorer, clicar com o botão direito sobre o formulário web Login.aspxem seguida selecionar e clicar na opção Set As Start Page:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Configuração de Página Padrão de Inicialização

Microsoft Visual Studio 2010 Ultimate – Configuração de Página Padrão de Inicialização

Por fim, deve-se salvar o projeto WebUI e suas alterações clicando no botão Salvar.

Finalizando o exemplo, resta apenas executar a Aplicação, deve-se então clicar no botão Start Debugging (F5), que, ao ser pressionando, levará a exibição da seguinte tela:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Execução da Aplicação

Microsoft Visual Studio 2010 Ultimate – Execução da Aplicação

Manter as informações de acordo com a imagem acima e clicar no botão OK.

Tela ao clicar no botão OK:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Execução da Aplicação

Microsoft Visual Studio 2010 Ultimate – Execução da Aplicação

Como teste de valores incorretos, inserir um valor qualquer nos campos Login e Senha, como por exemplo Login: 123 e Senha: 123, em seguida clicar no botão Logar.

Tela ao inserir os valores testes e clicar no botão Logar:

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Execução da Aplicação

Microsoft Visual Studio 2010 Ultimate – Execução da Aplicação

Como teste de valores corretos, inserir nos campos Login: admin e Senha: admin, em seguida clicar no botão Logar.

Tela ao inserir os valores corretos e clicar no botão Logar.

Modelo em 3 camadas (3-Tier) - Microsoft Visual Studio 2010 Ultimate - Execução da Aplicação

Microsoft Visual Studio 2010 Ultimate – Execução da Aplicação

Considerações Finais:

As considerações finais não se aplicam a este post. Na próxima publicação, quarta parte da série: Arquitetura em Camadas, será apresentada a Provisão da Aplicação de maneira prática.

Referências Bibliográficas:

As referências bibliográficas serão apresentadas no último post desta série.

Sobre o autor

Thiago Richard Vanicore

Thiago Richard Vanicore formou-se em análise e desenvolvimento de sistemas, possui certificação ITIL Foundation V2 e entre seus conhecimentos estão: ASP .Net (WebForms/MVC5/Web API) C#, HTML5, Html/XHtml, CSS3, JQuery, JQuey Mobile, JavaScript, Xml, Ajax, Json, Microsoft SqlServer, MySql, Firebird, Azure, Visual Studio Online, Scrum, UML, CRM, Quality Assurance, CTI (Computer Telephony Integration) MPSBR (Melhoria de Processos do Software Brasileiro).

Link permanente para este artigo: http://linksinergia.com.br/2014/10/06/arquitetura-em-camadas-parte-3-6-modelo-em-3-camadas-3-tier/