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" />&nbsp;&nbsp;&nbsp;
<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" />&nbsp;&nbsp;&nbsp;
<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.