Linguagem Java para Web - JSP Estudo Dirigido
Transcrição
Linguagem Java para Web - JSP Estudo Dirigido
Linguagem Java para Web - JSP Professora Lucélia Estudo Dirigido - Parte 1 Na primeira parte deste tutorial, vamos receber os dados de um formulário e verificar se os dados foram ou não preenchidos. Se os dados não forem preenchidos, o usuário será redirecionado para o formulário, solicitando que o mesmo preencha todos os campos. 1. Primeiro vamos criar um formulário para que o usuário informe seu login e senha: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html> <head> <title>...Tela de Login....</title> </head> <body> index.jsp <div id="geral"> <div id="lista">IDENTIFIQUE-SE</div> <div id="login"> <form action="controle.jsp"> <br /><br /><br /> ....Login..... <input type="text" size="20" name="login" /><br /><br /> ....Senha.... <input type="password" size="20" name="Senha" /><br /><br /> <input type="submit" value="Entrar" /> <input type="reset" value="Limpar" /> </form> </div> </div> </body> </html> 2. Agora vamos criar uma folha de estilo (CSS) para tornar mais agradável o visual para o usuário. 3. Crie um diretório chamado “comum” e salve o arquivo abaixo dentro dele. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 #geral{ position:absolute; left:50%; margin-left:-200px; top:40%; margin-top:-110; } #lista{ background-color:#0000FF; color:white; width:400px; height:20px; position:absolute; top:0px; left:0px; text-align:center; } #login{ background-color:#cccccc; color:green; width:400px; height:200px; position:absolute; top:20px; left:0px; text-align:center; } 4. Acrescente a linha abaixo dentro do <head> do arquivo index.jsp: <link rel="stylesheet" type="text/css" href="comum/estilo.css" /> estilo.css 5. O seu formulário deverá estar assim: 6. Vamos criar o arquivo controle.jsp, mencionado no index. Ele deverá receber o login e a senha enviados pelo formulário, verificar se ambos os campos estão preenchidos, se não tiver, emitir mensagem de erro. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Controle JSP</title> </head> <body> <% String login = request.getParameter("login"); String senha = request.getParameter("senha"); if (!(login.equals("") || (senha.equals("")))) { out.println("<h1>Dados enviados:</h1>"); out.println("<p> Login: " + login + "</p>"); out.println("<p> Senha: " + senha + "</p>"); } else { out.println("<h1 style=\"color:red;\"> Todos os dados devem ser preenchidos! </h1>"); } %> </body> </html> Nota: O código acima está misturando código JSP com HTML. Isso não é uma boa prática. A melhor opção seria criar mais uma camada de interface com o usuário. 7. Podemos mostrar a mensagem de erro no próprio index.jsp após a verificação de dados em branco, por exemplo. Altere o código do controle.jsp, mudando a linha 16 e acrescentando o as linhas 17 e 18, conforme mostrado abaixo: 1 2 3 4 5 6 7 8 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Controle JSP</title> </head> <body> <% String login = request.getParameter("login"); 9 10 11 12 13 14 15 16 17 18 19 20 21 22 String senha = request.getParameter("senha"); if (!(login.equals("") || (senha.equals("")))) { out.println("<h1>Dados enviados:</h1>"); out.println("<p> Login: " + login + "</p>"); out.println("<p> Senha: " + senha + "</p>"); } else { String msg = "<h1 style=\"color:red;text-align:center;\"> Todos os dados devem ser preenchidos! </h1>"; session.setAttribute("msg", msg); response.sendRedirect("index.jsp"); } %> </body> </html> 8. Devemos alterar também o documento index.jsp. Acrescente as linhas de 21 a 29 nesse documento. Observe que não havia nenhum código JSP na página anteriormente, quando fizemos a alteração não foi necessário alterarmos o nome do arquivo . 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <html> <head> <title>...Tela de Login....</title> <link rel="stylesheet" type="text/css" href="comum/layout.css" /> </head> <body> <div id="geral"> index.jsp <div id="lista">IDENTIFIQUE-SE</div> <div id="login"> <form action="controle.jsp"> <br /><br /><br /> ....Login..... <input type="text" size="20" name="login" /><br /><br /> ....Senha.... <input type="password" size="20" name="senha" /><br /><br /> <input type="submit" value="Entrar" /> <input type="reset" value="Limpar" /> </form> </div> </div> <% String mensagem = (String) session.getAttribute("msg"); if (mensagem == null){ mensagem = ""; }else{ mensagem = mensagem; } out.println(mensagem); %> </body> </html> Estudo Dirigido - Parte 2 Na segunda parte deste tutorial, vamos receber os dados do formulário já visto e vamos encerrar a sessão caso o usuário não tenha se identificado corretamente, caso contrário, o usuário será encaminhado para sua página específica 9. Acrescentando a camada Model à aplicação Nesta camada estará presentes a classe JavaBean ou simplesmente o bean. Um componente JavaBeans, ou simplesmente um bean, é uma classe Java que, quando chamada por um JSP, por exemplo, segue certas regras a serem observadas nos próximos exemplos. Vamos criar um novo pacote chamado modelo e, dentro dele, vamos criar um bean para que possamos ampliar as funcionalidades do nosso sistema web. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 package modelo; public class Pessoa { private String nome; private String login; private String senha; Pessoa.java public Pessoa(){ } public String getNome() { return nome; } public void setNome(String nome) { this.nome = nome; } public String getLogin() { return login; } public void setLogin(String login) { this.login = login; } public String getSenha() { return senha; } public void setSenha(String senha) { this.senha = senha; } } 10. Usando o bean criado: Para usar um bean em uma página JSP, é necessário usar a diretiva <%@ page import = “pacote.NomeDaClasse” %> ou a tag jsp. Para usar uma tag jsp devem ser fornecidos três atributos: um identificador que provê um nome local para o bean, o nome da classe do bean que é usado para instanciá-lo e um escopo que especifica o tempo de vida do bean, como mostra o exemplo a seguir. Este exemplo irá verificar se o login e a senha informados são iguais ao usuário e senha requeridos. Se não for, irá encerrar a sessão. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <jsp:useBean class="modelo.Pessoa" id="usuario" scope="session" /> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Controle JSP</title> </head> <body> <% controle.jsp String login = request.getParameter("login"); String senha = request.getParameter("senha"); %> </body> </html> if (!login.equals("lucelia") || !senha.equals("123456")) { session.invalidate(); response.sendRedirect("menu1.jsp"); } else { usuario.setLogin(login); usuario.setSenha(senha); usuario.setNome("Lucélia!!!"); session.setAttribute("usuario", usuario); response.sendRedirect("menu1.jsp"); } 11. Se o usuário digitar o login e a senha corretamente, o sistema irá mostrar o extrato da pessoa identificada, caso contrário irá mostrar apenas a mensagem “usuário não autorizado”, conforme o código abaixo: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <jsp:useBean id="usuario" class="modelo.Pessoa" scope="session" /> <% if (usuario.getNome() == null) { out.print("<h1>Usuario nao Autorizado!!!</h1>"); } else { menu1.jsp %> <html> <head> <link rel="stylesheet" type="text/css" href="comum/layout.css" /> <title>Pagina de Menus</title> </head> <body> <div id="geral"> <div id="lista">Extrato do(a) ${usuario.nome}</div> //Expression language <div id="login" style="text-align:left;"> <br /><br /><br /> CPF.................111111 <br /> Endereço............SQS 910 Sul <br /> Cartao..............33352020<br /> <hr /><br /> Farmacia Sta Maria..150,00<br /> Americanas.com......100,00<br /> Posto Gasol.........78,00<br /> Posto Texaco II.....62,00<br /> Extra...............180,00<br /> <hr /> Total.............R$570,00 </div> </div> </body> </html> <% } %> 12. Podemos ainda criar outra opção: · Se o usuário informar a senha de um determinado usuário, mostra o seu extrato, se informar usuário e senha de outro usuário, mostra o extrato desse outro usuário. Se não for de nenhum dos dois, mostra a mensagem “usuário não autorizado”. Nota 1: O arquivo controle.jsp deverá ser alterado 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <jsp:useBean class="modelo.Pessoa" id="usuario" scope="session" /> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Controle JSP</title> </head> <body> controle.jsp <% String login = request.getParameter("login"); String senha = request.getParameter("senha"); if (login.equals("lucelia") && senha.equals("123456")) { usuario.setLogin(login); usuario.setSenha(senha); usuario.setNome("Lucélia!!!"); session.setAttribute("usuario", usuario); response.sendRedirect("menu1.jsp"); } else if (login.equals("maria") && senha.equals("654321")) { usuario.setLogin(login); usuario.setSenha(senha); usuario.setNome("Maria!!!"); session.setAttribute("usuario", usuario); response.sendRedirect("menu2.jsp"); 25 26 27 28 29 30 31 }else{ session.invalidate(); response.sendRedirect("menu.jsp"); } %> </body> </html> Nota 2: Deverá ser criado um novo arquivo chamado menu2: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <jsp:useBean id="usuario" class="modelo.Pessoa" scope="session" /> <% if (usuario.getNome() == null) { out.print("Usuario nao Autorizado!!!"); } else { menu2.jsp %> <html> <head> <link rel="stylesheet" type="text/css" href="comum/layout.css" /> <title>Pagina de Menus</title> </head> <body> <div id="geral"> <div id="lista">Extrato do(a) ${usuario.nome}</div> <div id="login" style="text-align:left;"> <br /><br /><br /> CPF.................2222222 <br /> Endereço............SQN 907 Norte <br /> Cartao..............1111111111<br /> <hr /><br /> Carrefour...........200,00<br /> Submarino.com.......150,00<br /> Restaurante China...50,00<br /> Posto Texaco........60,00<br /> Giraffas............25,00<br /> <hr /> Total.............R$485,00 </div> </div> </body> </html> <% } %> Exercícios Crie uma aplicação web que solicite ao usuário que informe o seu nome. Construa um bean com os campos: nome, telefone e endereço. Construa um arquivo de controle que compare o nome informado pelo usuário com dois nomes distintos. Se o usuário informar o nome de um dos dois dados comparados, exibir o seu endereço e telefone. Caso contrário, bloquear o usuário para visualizar qualquer informação.
Documentos relacionados
Exemplo completo Utilização Servlet VR 1.1