Projeto Final LIP2

Prévia do material em texto

Projeto Login 
O projeto consiste em um aplicativo Web simples o qual fará um CRUD (acrónimo do inglês Create, 
Read, Update and delete) são as quatro operações básicas (criação, consulta, atualização e destruição de 
dados), em uma única tabela e o sistema simples de controle de acesso através de uma tela de login. 
Utilizaremos as seguintes tecnologias (ferramentas, linguagens e frameworks): 
ASP.NET MVC, SQL Server e BootStrap. 
Os detalhes dos conteúdos abordados neste tutorial, serão ministrados em sala de aula. 
A etapa inicial consiste em criar as páginas de CRUD, em segundo momento veremos a melhorias 
no Layout e na última etapa o Login. 
 
Abra o SQL Server Management Studio 
 
 
Digite e execute o Script Abaixo. (Script disponível na pasta pública) 
 
 
Logon : SA 
Senha: 123456 
Clique em Nova Consulta 
Crie um projeto ASP.NET  Vazio  MVC 
 
Model 
Camada de lógica da Aplicação - É o coração da aplicação. Responsável por tudo que a aplicação vai fazer. 
 modela os dados e o comportamento por atrás do processo de negócios 
 se preocupa apenas com o armazenamento, manipulação e geração de dados 
 É um encapsulamento de dados e de comportamento independente da apresentação. 
 
Adicione um novo Model em nosso projeto. 
 
 
Clique com o botão direito na pasta Model  
adicionar  Novo Item... 
 
Selecione as 
opções: 
Dados 
 
ADO.NET 
Nome: 
UsuarioModel 
 
Pressione 
adicionar 
 
 
 
 
Selecione a opção EF Designer from 
database 
 
Clique em New Connection ... 
 
Selecione a opção: Microsoft SQL Server 
Clique em Continuar. 
 
 
 
Nome do servidor: 
Podemos utilizar: 
 o nome do computador + 
instância 
Localhost 
Ou . (ponto) 
Digite localhost 
Autenticação: Autenticação 
do SQL Server 
Nome do usuário: sa 
Senha: 123456 
Selecione o banco de dados 
que iremos utilizar 
Pressione OK 
 
Tela de confirmação da 
conexão, essa string 
ficará salva no arquivo 
WEB.config 
Selecione a opção Yes 
Clique em avançar 
 
 
 
Clique em avançar 
Nesta tela selecionaremos os objetos 
que iremos “mapear” em nosso 
aplicativo ASP MVC. 
Marque a tabela que criamos 
Selecione a opção: Pluralize 
Mantenha o nome do NameSpace 
Clique em concluir 
Marque a opção: 
Não mostrar esta mensagem novamente 
Pressione OK 
 
 
Aguarde alguns instantes, será gerado um modelo semelhante a imagem abaixo 
 
 
 
 
 
 
 
 
 
 
 
 
Controller 
Camada de Controle - determina o fluxo da apresentação servindo como uma camada intermediária entre 
a camada de apresentação e a lógica. 
• controla e mapeia as ações 
 
Vamos adicionar um Controller (controlador). 
Clique com o botão direito na pasta Controllers  Adicionar  Controlador. 
 
 
 
 
 
, 
Marque a opção: 
Selecione um Controlador MVC5 – Vazio 
Clique em adicionar 
Nomeie como: PrincipalController 
VIEWS 
Camada de apresentação ou visualização - Não está preocupada em como a informação foi obtida ou 
onde ela foi obtida apenas exibe a informação. 
• inclui os elementos de exibição no cliente: HTML ,CSHTML, XML , ASPX , Applets . 
• É a camada de interface com o usuário. 
• É usada para receber a entrada de dados e apresentar o resultado 
 
 
 
Vamos adicionar uma nova View 
(Pagina de exibição) em nosso 
projeto. 
Com o arquivo PrincipalController 
aberto clique com o botão direito 
em cima do método public 
ActionResult Index(), no menu 
selecione a opção Adicionar 
Exibição 
 
Agora Adicione o código abaixo: 
 
 
Vamos criar uma página para listar os funcionários cadastrados. 
Abra o arquivo PrincipalController. 
 
Antes de criarmos a 
View, vamos criar o 
um método no 
Controller o qual 
quando o usuário 
solicitar a página de 
Listar funcionário 
ele irá redirecionar 
par a View 
correspondente. 
 
Agora Vamos Criar A View para Listar. 
 
Adicione um novo método no 
Controller. 
 
Clique com o botão 
direito em cima do 
método public 
ActionResult Listar() 
Selecione a opção 
Adicionar Exibição ... 
 
 
 
 
 
Altere o código como na imagem baixo 
Nome : Listar 
Clique em Adicionar 
 
 
 
 
 
Vamos programar nosso Controler para listar os dados do banco de dados, 
através da utilização do model. 
 
 
Alterando a página de Layout. 
Abra o arquivo do seu projeto chamado _Layout.cshtm localizado na pasta Shared. 
 
Altere seu código para que fique semelhante a imagem abaixo: 
ATENÇÃO!! Não é para digitar tudo, compare com o seu código e adicione somente os 
itens que estão diferentes. 
Adicione a biblioteca do Model. 
Insira os seguintes códigos. 
using Login.Models; 
onde: 
• Login é o nome do seu projeto. 
• Models é a pasta que está 
localizado seus models. 
 
funcionarioEntities db = new 
funcionarioEntities(); 
 
O código acima irá criar uma 
“cópia” do banco de dados em 
memória com o nome de db. 
 
return 
View(db.usuarios.ToList()); 
 
O código acima irá retornar 
uma lista (ToList()) da 
tabela usuários do banco db. 
 
 
 
 
 
Cadastrar 
Vamos adicionar um novo controlador ao nosso projeto com o objetivo de gerenciar a 
administração interna do site, como cadastrar um novo funcionário e alterar os já cadastrados. 
Veja imagem abaixo: 
1. Clique com o botão direito na pasta Controller 
2. Selecione Adicionar Controlador 
 
Nomeie como AdmControlador 
 
Altere o método public ActionResult Index para public ActionResult Cadastrar, veja imagem abaixo. 
 
 
 
 
 
 
 
 
 
 
Vamos adicionar uma View. 
1. Clique com o botão direito em cima do método Cadastrar. 
2. Selecione a opção Adicionar exibição.... 
 
 
Nomeie a exibição com o nome Cadastrar, clique em adicionar, veja imagem abaixo: 
 
 
 
Adicione os códigos abaixo: 
 
 
 
 
 
 
 
 
 
Agora vamos alterar nosso Controller, AdmController, para receber uma 
lista com os cargos e popular o dropdownList. Adicione os códigos necessários 
conforme imagem abaixo. 
 
Realize um teste, a pagina deverá ser semelhante a abaixo: 
 
Vamos alterar novamente nosso Controller, AdmController, para que ao clicar no botão Cadastrar 
(“Submit”), os dados do formulário sejam enviados via post para o Controller e o mesmo irá enviar os 
dados via Model para o banco de dados. 
Abra o Controller, AdmController e adicione um novo método chamado Cadastrar. Imagem abaixo: 
 
Alterar 
Vamos criar uma view com a finalidade de alterar os dados cadastrados no banco de dados. 
 Abra o arquivo AdmController e adicione o método para alterar, conforme imagem abaixo: 
 
O método ao lado irá receber os 
dados vindo da View através do 
método POST. 
 Linha 30 - Esses dados serão 
armazenados na variável user 
(cujo tipo é igual ao model 
usuário). 
Linha 35- Estamos adicionando 
o conteúdo a variável user no 
BD de Contexto. 
Linha 36 – o método 
SaveChances(), fara o 
entityFramwork salvar os itens 
no Banco de dados SQL. 
 
 
 
Agora Vamos criar nossa view. 
Clique com o botão direito em cima 
do método Alterar  Adicionar 
Exibição (add View). (imagem ao 
lado) 
Nomeie a view como Alterar. 
Imagem abaixo. 
 
 
 
Vamos implementar o código da View Alterar, veja o código baixo: 
 
 
 
Para testar digite na barra de endereço /Adm/Alterar/1 
 
Ao clicar no Botão Alterar aconteceu algo? 
Não, pois não criamos o método no controller que irá responder ao método Post do HTML. 
Vamos adicionar o método no Controller Adm para que ao existir um POST na view ele seja executado. 
Abra novamente o arquivo AdmController e adicione o seguinte método: 
 
Notem que antes da declaração do método na linha 73 temos o comando [HttpPost], este indica que o 
método logo abaixo dele será executado quando o controller receber um POST vindo da view (no caso 
ao clicar no botão Submit. 
Agora Sim, execute novamente o projeto (como na página anterior). 
DELETE 
Nessa nova View que iremos criar, ela irá deletar um registro do banco de dados de modo permanente ( 
igual a instrução delete do SQL com Where).Nota: Em muitas aplicações profissionais, não se deleta um registro de modo permanente, para isso utilize 
uma view e métodos semelhantes ao de atualizar (update) onde haverá um campo para indicar se o registro 
está ativo ou inativo, por exemplo. 
Abra o arquivo AdmController e adicione o método de deletar. Figura abaixo. 
 
 
Adicionando a View de Delete. 
 Clique com o botão direito do mouse em cima do método Delete. 
 No menu selecione a opção Adiciona Exibição. Figura abaixo: 
O método ao lado irá carregar em 
uma view os dados do item que 
será deletado, com a finalidade de 
que o usuário esteja apagando o 
registro correto. 
 
 
 
 
Nomeie Como Delete. 
Clique em Adicionar 
Altere a View Delete Conforme imagem Abaixo: 
 
A execução será semelhante a pagina abaixo: 
 
Até agora Criamos somente a View e podemos carregar com um registro, o botão Delete está sem método, vamos 
retornar ao AdmController e adicionar um método que será executado ao clicarmos no botão Delete da View. 
 
Para testar execute a página e adicione /3 no endereço da página. 
Imagem Abaixo: 
 
Clique em Delete, nosso registro será removido do banco de dados. 
 
Antes do delete. 
 
Depois do Delete. 
Rotas (RouteConfig) 
No modelo de desenvolvimento ASP .NET MVC as requisições do navegador são mapeadas para ações do 
Controlador (Controller). O desenvolvimento é centrado na lógica da aplicação. (leia-se mapeamento) 
Assim, em uma aplicação MVC, uma requisição feita pelo navegador está mapeada para uma ação de um 
controlador (Controller Action) através de um recurso do ASP.NET Framework chamado ASP.NET Routing 
(roteamento ASP .NET). 
Para fazer o roteamento o ASP .NET Rounting usa uma tabela de rotas para lidar com as requisições recebidas. 
Esta tabela de rotas está presente no arquivo RouteConfig na pasta App_Start: 
using System.Web.Mvc; 
using System.Web.Routing; 
namespace Mvc_Rotas 
{ 
 public class RouteConfig 
 { 
 public static void RegisterRoutes(RouteCollection routes) 
 { 
 routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 
 routes.MapRoute( 
 name: "Default", 
 url: "{controller}/{action}/{id}", 
 defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } 
 ); 
 } 
 } 
} 
Quando uma aplicação ASP .NET MVC é iniciada pela primeira vez o método Application_Start() do 
arquivo Global.asax é chamado, e, o método RegisterRoutes(RouteTable.Routes) é invocado e assim cria a tabela de 
rotas padrão. 
A tabela de rotas padrão possui uma rota, e, esta rota padrão divide todas as requisições de entrada em três 
segmentos:("{controller}/{action}/{id}",) 
• O primeiro segmento é mapeado para o nome de um Controlador; {controller} 
• O segundo segmento é mapeado para o nome de uma ação; {action} 
• O terceiro segmento é mapeado para um parâmetro passado para ação chamado id; {id} 
 
Vamos agora configurar o routeconfig de nossa aplicação, para isso abra o arquivo RouteConfig.cs que está 
localizado na pasta App_Start. 
 
 
Vamos alterar o controller inicial de Home para Principal, que é o nosso controlador inicial. Altere a linha 19, 
conforme imagem abaixo: 
 
 
Pronto, definimos qual será a ação inicial. 
 
Modificando o Layout. 
 
Vamos modificar nossa página de Layout, melhorar a estética e adicionar novos recursos. 
Abra o arquivo _Layout localizado na pasta Shared. 
 
 
 
Deixe o código conforme imagem abaixo: 
 
 
 
 
 
Para saber mais sobre BootStrap utilize os links: 
https://www.w3schools.com/bootstrap/ 
https://getbootstrap.com/docs/4.3/getting-started/introduction/ 
https://getbootstrap.com.br/ 
 
A execução de nossa página: 
 
https://www.w3schools.com/bootstrap/
https://getbootstrap.com/docs/4.3/getting-started/introduction/
https://getbootstrap.com.br/
Criando o LOGIN 
 Neste projeto a função do login será bem simples, diferenciar quem irá administrar o site 
(gerenciar) e quem é um usuário comum (funcionário ou estagiário). 
O administrador ou gerente será o único com acesso as páginas de Cadastro, Alteração e Delete. 
 Primeiro passo será criar uma tela de login, que irá verificar o login e a senha. 
 
Abra o controller Principal. 
 
Vamos adicionar um novo método, o de Login e após a criação do método vamos criar a View Login. 
 
Vamos Adicionar uma View, clique com o botão direito em cima do método Login e selecione a opção 
Adicionar Exibição. 
 
 
 
 
 
Criamos a View Login, o método criado no controller Principal ele apenas direciona 
(utiliza o método GET do HTML), para que nossa página de login funcione ao pressionarmos 
o Submit, vamos adicionar um método no Controller Principal o qual será executado quando 
houver um evento de POST na página de login. 
Abra o arquivo PrincipalController e vamos adicionar um novo método, veja o código 
abaixo: 
 
 
Criando um segundo Layout 
Vamos criar um layout que será utilizado nas páginas do administrador dos 
sistemas, esse layout será diferenciado pois contém um menu especifico para as 
funções de administrador. 
Abra a pasta View  Shared, clique com o botão direito em cima da pasta 
Shared. Imagem Abaixo: 
No menu selecione Adicionar  Pagina de exibição MVC5 com layout 
 
 
 
 
Nomeie como _Layout2 
 
 
Pressione OK 
 
Apague as linhas 1,2 e 3. Adicione o código abaixo: 
 
 
Abra o arquivo _ViewStart.cshtml e adicione 
O código abaixo: 
 
 
 
 
 
 
 
 
 
Vamos alterar o AdmController para adicionar as seguintes views: Administrar, 
Listar e um método Sair que irá limpar a Session de administrador e 
redirecionar para a index no controller Principal. 
 
 Vamos Criar a Página principal do Administrador. 
Clique com o Botão direito em cima do método Administrar (linha 113 imagem 
acima). 
No Menu selecione a opção Adicionar Exibição (Add View). 
 
 
 
Clique em Adicionar 
Adicione o Código da imagem abaixo na View Administrar 
 
 
 
Criando a View Listar 
Abra o AdmController, clique com o botão direito no método Listar e adicionar 
Exibição. 
Atenção: Nesta View iremo utilizar o assistente da Microsoft para a criação da 
View, esse assistente irá criar uma view padrão de edição e já irá conectar ao 
model. Veja a imagem abaixo: 
 
 
O código gerado será semelhante a imagem abaixo: 
 
 
 
Altere a linha 56 apague a linha 57. Deverá ficar como a imagem abaixo: 
 
Remova as linhas 9,10 e 11. 
 
 
Abra o AdmController e altere as seguintes linhas: 
 
 
 
 
 
 
 
 
Captura das telas finais: 
 
 
Index 
 
 
 
Listar 
 
 
Login. Com nível de acesso. 
 
 
Tela do ADM. 
 
 
Cadastro 
 
 
Listar do ADM 
 
 
Alterar um usuário já cadastrado 
 
Remover um registro (Exclusão do banco de dados)