Příklady programu JSP: Registrační a přihlašovací formulář

V tomto tutoriálu vás provedu vývojem ukázkových programů s JSP a implementací architektury MVC v tomto tutoriálu.

Budou vyvinuty následující příklady programů:

Registrační formulář
Přihlašovací a odhlašovací formulář
Formulář JSP

Pomocí registračního formuláře přes JSP

V Registračním formuláři budeme mít formulář pro vyplnění všech údajů, které budou obsahovat jméno, uživatelské jméno, heslo, adresu, kontaktní číslo atd.

Tento formulář nám pomůže zaregistrovat se do aplikace. Vezmou všechny naše detaily a uloží je do a databáze nebo cache.

V tomto příkladu použijeme „registrační formulář Guru“, který má následující pole:

Jméno
Příjmení
Uživatelské jméno
Heslo
Adresa
Kontaktujte číslo

Po vyplnění všech těchto údajů máme tlačítko odeslat, kliknutím na toto tlačítko se všechny údaje uloží.

Příklad 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>

Vysvětlení kódu:

11. řádek kódu: Zde bereme název formuláře, který má akci, tj. servlet, na který bude požadavek zpracován, a název servletu je guru_register.java. Požadavek bude zpracován metodou POST.

Řádek 14–16 kódu: Zde bereme typ vstupu jako text a jméno je křestní jméno

Řádek 18–20 kódu: Zde bereme typ vstupu jako text a jméno je příjmení

Řádek 22–24 kódu: Zde bereme typ vstupu jako text a jméno je uživatelské jméno

Řádek 26–28 kódu: Zde bereme typ vstupu jako heslo (toto heslo skryje při psaní) a jméno jako heslo

Řádek 30–32 kódu: Zde bereme typ vstupu jako text a jméno jako adresu

Řádek 34–36 kódu: Zde bereme typ vstupu jako text a jméno jako kontakt

37. řádek kódu: Zde bereme tlačítko typu odeslat a hodnota je také odeslat. Po kliknutí na toto tlačítko akce přejde na odpovídající servlet guru_register, kde budou v požadavku předány všechny hodnoty parametrů.

Příklad 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);
		}
	}

}

Vysvětlení kódu:

14. řádek kódu: Zde definujeme guru_servlet, který rozšiřuje HttpServlet.

18. řádek kódu: Tato akce doPost() metoda, která bude volána, když ve výše uvedeném formuláři JSP zmíníme atribut POST in action.

Řádek 20–25 kódu: Zde načítáme hodnoty z požadavku i.efirst_name, last_name , username, password, address a contact pomocí request.getParameter.

Řádek 27–32 kódu: Zde bereme podmínku if, kdy kontrolujeme některý z parametrů, které jsou načteny z požadavku, zda jsou prázdné nebo ne. Pokud je některý z parametrů prázdný, zadá tuto podmínku ( first_name.isEmpty() || last_name.isEmpty || username.isEmpty || password.isEmpty || address.isEmpty || contact.isEmpty()) a máme k načtení objektu RequestDispatcher pomocí objektu požadavku, který předá požadavek na register_1.jsp. Zde také zahrnujeme objekty požadavků a odpovědí.

Řádek 33–37 kódu: Tento případ se spustí, když některý z parametrů není prázdný. Budeme muset načíst objekt requestDispatcher pomocí objektu požadavku, který předá požadavek na register_2.jsp. Zde předáváme objekty požadavku a odpovědi.

Příklad 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>

Vysvětlení kódu:

10. řádek kódu: Zde říkáme vítaný uživatel. Tento JSP bude volán, když jsou vyplněny všechny parametry.

Když spustíte výše uvedený kód, získáte následující výstup:

Výstup:

Když klikneme na register_1.jsp, dostaneme formulář, který bude obsahovat podrobnosti jako jméno, příjmení, uživatelské jméno, heslo, adresa, kontakt. Všechny podrobnosti byly vyplněny. Když klikneme na tlačítko Odeslat, zobrazí se zpráva „Vítaný uživatel“

Přihlašovací a odhlašovací formulář

Stejně jako registrační formulář budeme mít přihlašovací a odhlašovací formulář.

V tomto příkladu jsme použili přihlašovací formulář, kde máme dvě pole „uživatelské jméno“ a „heslo“ s tlačítkem Odeslat.

Když klikneme na tlačítko Odeslat, zobrazí se uvítací zpráva s tlačítkem pro odhlášení.

Když klikneme na tlačítko odhlásit, vrátíme se zpět do přihlašovacího formuláře.

Příklad 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>

Vysvětlení kódu:

10. řádek kódu: Zde bereme název formuláře, který má akci, tj. servlet, kterému byl předán, je guru_login.java. Metoda, kterou projde svůj POST.

Řádek 13–16 kódu: Zde bereme vstupní pole „username“, které je typu text.

Řádek 17–20 kódu: Zde bereme vstupní pole „heslo“, které je typu heslo.

22. řádek kódu: Zde vezmeme tlačítko „odeslat“ s hodnotou „Přihlášení“, na které klikneme a poté přejde na servlet guru_login, kde jsou obě pole převzata pomocí objektu požadavku.

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);
		}
	}

}

Vysvětlení kódu:

Řádek 5–9 kódu: Zde importujeme potřebné importy v kódu.

14. řádek kódu: Zde bereme servlet guru_login, který rozšiřuje HttpServlet.

21. řádek kódu: Zde používáme doPost() jako ve formuláři, který používáme metodu POST.

Řádek 23–24 kódu: Zde bereme parametry pomocí objektu požadavku, tj. uživatelské jméno a heslo.

Řádek 25–29 kódu: Tímto způsobem přebíráme podmínku „if“, kdy kontrolujeme uživatelské jméno a heslo, zda jsou prázdné nebo ne. V tomto případě, pokud je prázdné, dostáváme objekt requestdispatcher, který přesměruje na register_3.jsp s objekty request a response.

Řádek 30–34 kódu: To se provede, pokud oba nejsou prázdné, pak předá požadavek na register_4.jsp s objekty request a response.

Příklad 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>

Vysvětlení kódu:

12. řádek kódu: Zde získáváme parametr „username“ z objektu požadavku v řetězci objektu username.

13. řádek kódu: Zde máme uvítací zprávu s uživatelským jménem.

14. řádek kódu: Zde uvádíme odkaz na odhlášení z formuláře, který přesměrovává na register_3.jsp.

Když spustíte výše uvedený kód, získáte následující výstup:

Výstup:

Zde, když klikneme na register_3.jsp, dostaneme dvě pole „uživatelské jméno“ a „heslo“ s tlačítkem přihlášení.

Po kliknutí na tlačítko Přihlásit se zobrazí níže uvedená zpráva s tlačítkem Odhlásit.

Po kliknutí na tlačítko odhlásit se vrátíte zpět na přihlašovací stránku

Zpracování formuláře JSP pomocí getParameter()

Zpracování formuláře JSP:

Formuláře jsou běžnou metodou při zpracování webu. Potřebujeme odeslat informace na webový server a tyto informace.

Existují dva běžně používané způsoby odesílání a získávání informací na webový server.

GET metoda:

Toto je výchozí způsob předávání informací z prohlížeče na webový server.
Odešle zakódované informace oddělené znakem ? připojeným k URL stránce.
Má také omezení velikosti a v požadavku můžeme odeslat pouze 1024 znaků.
Měli bychom se vyhnout odesílání hesel a citlivých informací metodou GET.

Metoda POST:

Post metoda je nejspolehlivější metodou odesílání informací na server.
Odesílá informace jako samostatnou zprávu.
Odesílá se jako textový řetězec za ?v URL.
Běžně se používá k odesílání citlivých informací.

JSP zpracovává zpracování dat formuláře pomocí následujících metod:

getParameter(): Používá se k získání hodnoty parametru formuláře.
getParameterValues(): Používá se k vrácení více hodnot parametrů.
getParameterNames(): Používá se k získání názvů parametrů.
getInputStream(): Používá se ke čtení binárních dat odeslaných klientem.

Příklad:

V tomto příkladu jsme vzali formulář se dvěma poli „uživatelské jméno“ a „heslo“ s tlačítkem Odeslat

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>

Vysvětlení kódu: Action_form.jsp

10. řádek kódu: Zde jsme definovali formulář a přes který jsme akci zpracovali na nějakou jinou JSP. V parametru akce přidáme to JSP, do kterého se má zpracovat metodou GET.

Zde používáme metodu GET k předání informací, tj. uživatelského jména a hesla.

Řádek 11–14 kódu: Zde bereme pole jako uživatelské jméno a heslo, což jsou textová pole, a dostáváme vstup od uživatele.

Tento vstup lze načíst pomocí metody getParameter. Také máme tlačítko Odeslat s typem Odeslat, které nám pomáhá předávat hodnoty pole do action_form_process.jsp

Action_form_process.jsp

14. řádek kódu: Zde získáme hodnoty vstupních polí z action_form.jsp pomocí metody getParameter objektu požadavku.

Když spustíme výše uvedený kód, dostaneme následující výstup:

Výstup:

Když spustíme action_form.jsp, dostaneme formulář se dvěma poli uživatelské jméno a heslo a tlačítko Odeslat. Poté po zadání uživatelského jména a hesla můžeme kliknout na odeslat a proces se zpracuje na další stránku, která poskytne výstup jako stránku zpracování formuláře s uvítací zpráva.

Máš rád:

Pomocí registračního formuláře přes JSP

SOUVISEJÍCÍ ČLÁNKY

Přihlašovací a odhlašovací formulář

Zpracování formuláře JSP pomocí getParameter()

Zpracování formuláře JSP:

GET metoda:

Metoda POST: