Exemplos de programas JSP: formulário de registro e login
Neste tutorial, mostrarei como desenvolver programas de exemplo com JSP e implementar a arquitetura MVC.
Os seguintes exemplos de programas serão desenvolvidos:
- Formulário de Cadastro
- Formulário de login e logout
- Formulário JSP
Usando formulário de registro através de JSP
No Formulário de Cadastro, teremos um formulário para preencher todos os dados que conterão nome, nome de usuário, senha, endereço, número de contato, etc.
Este formulário nos ajudará a registrar-se no aplicativo. Eles pegam todos os nossos dados e os armazenam em um banco de dados ou cache.
Neste exemplo, pegaremos o “Formulário de Registro de Guru” que possui os seguintes campos:
- Nome
- Sobrenome
- Nome de Utilizador
- Senha
- Endereço
- Número de contato
Após preencher todos esses dados temos o botão enviar, ao clicar nesse botão todos os dados serão armazenados.
Exemplo 1: Register_1.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Guru Registration Form</title> </head> <body> <h1>Guru Register Form</h1> <form action="guru_register" method="post"> <table style="with: 50%"> <tr> <td>First Name</td> <td><input type="text" name="first_name" /></td> </tr> <tr> <td>Last Name</td> <td><input type="text" name="last_name" /></td> </tr> <tr> <td>UserName</td> <td><input type="text" name="username" /></td> </tr> <tr> <td>Password</td> <td><input type="password" name="password" /></td> </tr> <tr> <td>Address</td> <td><input type="text" name="address" /></td> </tr> <tr> <td>Contact No</td> <td><input type="text" name="contact" /></td> </tr></table> <input type="submit" value="Submit" /></form> </body> </html>
Explicação do código:
Linha de código 11: Aqui estamos pegando um nome de formulário que tem ação, ou seja, o servlet para o qual a solicitação será processada e o nome do servlet é guru_register.java. A solicitação será processada através do método POST.
Linha de código 14-16: Aqui estamos considerando o tipo de entrada como texto e o nome é o primeiro nome
Linha de código 18-20: Aqui estamos considerando o tipo de entrada como texto e o nome é o sobrenome
Linha de código 22-24: Aqui estamos considerando o tipo de entrada como texto e o nome é nome de usuário
Linha de código 26-28: Aqui estamos considerando o tipo de entrada como senha (isso ocultará a senha quando digitada) e o nome como senha
Linha de código 30-32: Aqui estamos considerando o tipo de entrada como texto e o nome como endereço
Linha de código 34-36: Aqui estamos considerando o tipo de entrada como texto e o nome como contato
Linha de código 37: Aqui pegamos um botão do tipo enviar e o valor também é enviar. Ao clicar neste botão a ação irá para o servlet guru_register correspondente onde todos os valores dos parâmetros serão passados na solicitação.
Exemplo 2: Guru_register.java
package demotest; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class guru_register */ public class guru_register extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String first_name = request.getParameter("first_name"); String last_name = request.getParameter("last_name"); String username = request.getParameter("username"); String password = request.getParameter("password"); String address = request.getParameter("address"); String contact = request.getParameter("contact"); if(first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || password.isEmpty() || address.isEmpty() || contact.isEmpty()) { RequestDispatcher req = request.getRequestDispatcher("register_1.jsp"); req.include(request, response); } else { RequestDispatcher req = request.getRequestDispatcher("register_2.jsp"); req.forward(request, response); } } }
Explicação do código:
Linha de código 14: Aqui definimos guru_servlet que estende o HttpServlet.
Linha de código 18: Esta acção doPost()
método que será chamado quando mencionarmos POST no atributo action no formulário JSP acima.
Linha de código 20-25: Aqui estamos buscando os valores da solicitação, ou seja, primeiro_nome, sobrenome, nome de usuário, senha, endereço e contato usando request.getParameter.
Linha de código 27-32: Aqui estamos tomando a condição if onde verificamos qualquer um dos parâmetros que são buscados na solicitação se estão vazios ou não. Se algum parâmetro estiver vazio, ele entrará nesta condição ( first_name.isEmpty() || last_name.isEmpty || username.isEmpty || password.isEmpty || address.isEmpty || contact.isEmpty()) e temos para buscar o objeto RequestDispatcher usando o objeto request que encaminhará a solicitação para Register_1.jsp. Aqui também incluímos objetos de solicitação e resposta.
Linha de código 33-37: Este caso será executado quando algum dos parâmetros não estiver vazio. Teremos que buscar o objeto requestDispatcher usando o objeto request que encaminhará a solicitação para Register_2.jsp.Aqui estamos encaminhando objetos de solicitação e resposta.
Exemplo 3: Register_2.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Guru Success Page</title> </head> <body> <a><b>Welcome User!!!!</b></a> </body> </html>
Explicação do código:
Linha de código 10: Aqui estamos dizendo bem-vindo usuário. Este JSP será chamado quando todos os parâmetros forem preenchidos.
Ao executar o código acima, você obtém a seguinte saída:
Saída:
Ao clicar em Register_1.jsp, obteremos um formulário que conterá detalhes como nome, sobrenome, nome de usuário, senha, endereço, contato. Todos os detalhes foram preenchidos. Quando clicamos no botão enviar, recebemos a mensagem “Bem-vindo, usuário”
Formulário de login e logout
Assim como o formulário de inscrição teremos um formulário de login e logout.
Neste exemplo, pegamos o formulário de Login onde temos dois campos “nome de usuário” e “senha” com um botão de envio.
Quando clicamos no botão enviar, recebemos uma mensagem de boas-vindas com um botão de logout.
Quando clicamos no botão de logout, voltamos ao formulário de login.
Exemplo 1: Register_3.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Guru Login Form</title> </head> <body> <form action="guru_login" method="post"> <table style="with: 50%"> <tr> <td>UserName</td> <td><input type="text" name="username" /></td> </tr> <tr> <td>Password</td> <td><input type="password" name="password" /></td> </tr> </table> <input type="submit" value="Login" /></form> </body> </html>
Explicação do código:
Linha de código 10: Aqui estamos pegando um nome de formulário que tem ação, ou seja, o servlet para o qual foi passado é guru_login.java. O método pelo qual passará seu POST.
Linha de código 13-16: Aqui estamos pegando um campo de entrada “nome de usuário” que é do tipo texto.
Linha de código 17-20: Aqui estamos pegando um campo de entrada “senha” que é do tipo senha.
Linha de código 22: Aqui estamos pegando um botão “enviar” com o valor “Login” no qual clicamos e então vai para o servlet guru_login onde ambos os campos são obtidos usando o objeto request.
Guru_login.java(servlet)
package demotest; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class guru_login */ public class guru_login extends HttpServlet { public guru_login() { super(); // TODO Auto-generated constructor stub } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String username = request.getParameter("username"); String password = request.getParameter("password"); if(username.isEmpty() || password.isEmpty() ) { RequestDispatcher req = request.getRequestDispatcher("register_3.jsp"); req.include(request, response); } else { RequestDispatcher req = request.getRequestDispatcher("register_4.jsp"); req.forward(request, response); } } }
Explicação do código:
Linha de código 5-9: Aqui estamos importando as importações necessárias no código.
Linha de código 14: Aqui estamos usando o servlet guru_login que estende o HttpServlet.
Linha de código 21: Aqui estamos usando doPost()
método como no formulário que estamos usando o método POST.
Linha de código 23-24: Aqui estamos pegando parâmetros usando o objeto de solicitação, ou seja, nome de usuário e senha.
Linha de código 25-29: Desta forma, estamos assumindo a condição “if” onde verificamos o nome de usuário e a senha, estejam eles vazios ou não. Nesse caso, se estiver vazio, obteremos o objeto requestdispatcher que encaminha para Register_3.jsp com objetos de solicitação e resposta.
Linha de código 30-34: Isso será executado se ambos não estiverem vazios e encaminhará a solicitação para Register_4.jsp com objetos de solicitação e resposta.
Exemplo 2: Register_4.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Guru Logged In</title> </head> <body> <table style="with: 50%"> <tr><td> <% String username = request.getParameter("username"); %> <a>Welcome <% out.println(username); %> User!!!! You have logged in.</a></td></tr> <tr></tr><tr><td></td><td></td><td><a href="register_3.jsp"><b>Logout</b></a></td></tr> </table> </body> </html>
Explicação do código:
Linha de código 12: Aqui estamos obtendo o parâmetro “nome de usuário” do objeto de solicitação na string do objeto nome de usuário.
Linha de código 13: Aqui temos uma mensagem de boas-vindas com o nome de usuário.
Linha de código 14: Aqui temos um link para sair do formulário que redireciona para Register_3.jsp.
Ao executar o código acima, você obtém a seguinte saída:
Saída:
Aqui quando clicamos em Register_3.jsp obtemos dois campos “nome de usuário” e “senha” com um botão de login.
Após clicar no botão Login você receberá a mensagem abaixo com um botão Logout.
Ao clicar no botão de logout você volta para a página de login
Processamento de formulário JSP usando getParameter()
Processamento de formulário JSP:
Os formulários são o método comum no processamento da web. Precisamos enviar informações para o servidor web e essas informações.
Existem dois métodos comumente usados para enviar e receber informações ao servidor web.
Método GET:
- Este é o método padrão para passar informações do navegador para o servidor web.
- Ele envia as informações codificadas separadas por caracteres anexados à página URL.
- Também possui uma limitação de tamanho, podendo enviar apenas 1024 caracteres na solicitação.
- Devemos evitar o envio de senhas e informações confidenciais através do método GET.
Método POST:
- O método Post é o método mais confiável de enviar informações ao servidor.
- Ele envia informações como mensagem separada.
- Ele envia como string de texto após ?na URL.
- É comumente usado para enviar informações confidenciais.
JSP lida com o processamento de dados de formulário usando os seguintes métodos:
getParameter()
: É usado para obter o valor do parâmetro do formulário.getParameterValues()
: É usado para retornar os múltiplos valores dos parâmetros.getParameterNames()
: É usado para obter os nomes dos parâmetros.getInputStream()
: É usado para ler os dados binários enviados pelo cliente.
Exemplo:
Neste exemplo, pegamos um formulário com dois campos.”nome de usuário” e “senha” com um botão enviar
Action_form.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Guru Form</title> </head> <body> <form action="action_form_process.jsp" method="GET"> UserName: <input type="text" name="username"> <br /> Password: <input type="text" name="password" /> <input type="submit" value="Submit" /> </form> </body> </html>
Action_form_process.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <h1>Form Processing</h1> <p><b>Welcome User:</b> <%= request.getParameter("username")%> </p> </body> </html>
Explicação do código: Action_form.jsp
Linha de código 10: Aqui definimos uma forma e através da qual processamos a ação para algum outro JSP. No parâmetro action, adicionamos aquele JSP ao qual deve ser processado através do método GET.
Aqui estamos usando o método GET para passar as informações, ou seja, nome de usuário e senha.
Linha de código 11-14: Aqui pegamos campos como nome de usuário e senha, que são campos de texto, e obtemos a entrada do usuário.
Esta entrada pode ser obtida usando o método getParameter. Além disso, temos o botão enviar com o tipo submit, que nos ajuda a passar os valores do campo para action_form_process.jsp
Action_form_process.jsp
Linha de código 14: Aqui obtemos os valores dos campos de entrada de action_form.jsp usando o método getParameter do objeto de solicitação.
Quando executamos o código acima, obtemos a seguinte saída:
Saída:
Quando executamos action_form.jsp, obtemos um formulário com dois campos nome de usuário e senha e um botão de envio. Depois de inserir o nome de usuário e a senha, podemos clicar em enviar e ele processa para a próxima página que fornece a saída como página de processamento de formulário com um mensagem de boas-vindas.