Příklady programu JSP: Registrační a přihlašovací formulář
⚡ Chytré shrnutí
Zde uvedené příklady programů JSP vytvářejí tři moduly – registrační formulář, formulář pro přihlášení a odhlášení a stránku pro zpracování formulářů – z nichž každý propojuje pohled JSP s kontrolerem servletu, takže rozdělení MVC zůstává viditelné i pro začátečníky.
Tyto příklady ukazují, jak vyvíjet vzorové programy s JSP a jak kolem nich implementovat architekturu MVC. Jsou postupně sestaveny tři moduly:
- Registrační formulář
- Přihlašovací a odhlašovací formulář
- Formulář JSP
Jak vytvořit registrační formulář v JSP
V registračním formuláři máme formulář pro vyplnění všech údajů, které obsahují jméno, uživatelské jméno, heslo, adresu, kontaktní číslo atd.
Tento formulář nám pomáhá s registrací v aplikaci. Zaznamenává všechny naše údaje a ukládá je do databáze nebo cache.
V tomto příkladu vezmeme „Guru Registrační formulář“, 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 pro odeslání; po kliknutí na toto tlačítko se všechny údaje odešlou do servletu.
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:
Code Řádek 11: Zde bereme formulář, který má akci, tj. servlet, kterému bude požadavek odeslán, a název servletu je guru_register.java. Požadavek bude zpracován metodou POST.
Code Řádek 14–16: Zde bereme vstupní typ jako text a jméno je křestní_jméno.
Code Řádek 18–20: Zde bereme vstupní typ jako text a jméno je last_name.
Code Řádek 22–24: Zde bereme vstupní typ jako text a jméno je uživatelské jméno.
Code Řádek 26–28: Zde bereme jako typ vstupu heslo (to skryje heslo během psaní) a jako heslo jméno.
Code Řádek 30–32: Zde bereme vstupní typ jako text a jméno jako adresu.
Code Řádek 34–36: Zde bereme vstupní typ jako text a jméno jako kontakt.
Code Řádek 37: Zde bereme tlačítko typu submit, jehož hodnota je také Submit. Po kliknutí na toto tlačítko se akce přesune do odpovídajícího servletu guru_register, kde se v požadavku předávají všechny hodnoty parametrů.
Poznámka: atribut tabulky v Code Řádek 12 zní style="with: 50%"Správná vlastnost CSS je width, takže seznam je reprodukován přesně tak, jak byl publikován, ale velikost tabulky nebude upravena, dokud nebude tato překlep opraven ve vaší vlastní kopii.
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:
Code Řádek 14: Zde definujeme servlet guru_register, který rozšiřuje HttpServlet.
Code Řádek 18: Toto je metoda doPost(), která se volá, když ve výše uvedeném JSP formuláři zadáme jako atribut metody POST.
Code Řádek 20–25: Zde načítáme hodnoty z požadavku, tj. křestní_jméno, příjmení, uživatelské_jméno, heslo, adresu a kontakt, pomocí request.getParameter.
Code Řádek 27–32: Zde používáme podmínku if, kde kontrolujeme, zda jsou některé z parametrů načtených z požadavku prázdné. Pokud je některý parametr prázdný, řízení zadá tuto podmínku ( first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || password.isEmpty() || address.isEmpty() || contact.isEmpty()) a z objektu požadavku načteme objekt RequestDispatcher, který odešle požadavek zpět do register_1.jsp. Zde také zahrnujeme objekty request a response.
Code Řádek 33–37: Tato větev se provede, když žádný z parametrů není prázdný. Z objektu požadavku načteme objekt RequestDispatcher, který požadavek přepošle do register_2.jsp. Zde přeposíláme objekty požadavku a odpovědi.
Rozdíl mezi těmito dvěma větvemi je důležitý: include() spustí register_1.jsp a vrátí řízení servletu, zatímco forward() předá požadavek souboru register_2.jsp a nevrátí se.
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:
Code Řádek 10: Zde zobrazíme uvítací zprávu. Tato JSP se volá, 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:
Registrační stránka zobrazuje šest označených polí s jediným tlačítkem Odeslat, jak je znázorněno níže.
Jakmile jsou všechna pole vyplněna a je kliknuto na tlačítko Odeslat, guru_register přesměruje soubor register_2.jsp a zobrazí se stránka s potvrzením úspěšného dokončení.
Po kliknutí na register_1.jsp se zobrazí formulář s křestním jménem, příjmením, uživatelským jménem, heslem, adresou a kontaktem. Po vyplnění všech údajů a kliknutí na tlačítko Odeslat se zobrazí zpráva „Vítejte, uživateli“.
Jak vytvořit přihlašovací a odhlašovací formulář v JSP
Stejně jako registrační formulář nyní vytvoříme přihlašovací a odhlašovací formulář.
V tomto příkladu máme přihlašovací formulář se dvěma poli, „uživatelské jméno“ a „heslo“, a tlačítko pro odeslání.
Po kliknutí na tlačítko Odeslat se nám zobrazí uvítací zpráva s tlačítkem pro odhlášení.
Po kliknutí na tlačítko pro odhlášení se vrátíme zpět na přihlašovací formulář.
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:
Code Řádek 10: Zde bereme formulář, jehož akcí je servlet guru_login.java. Metoda, kterou jsou data předávána, je POST.
Code Řádek 13–16: Zde bereme vstupní pole „uživatelské jméno“, které je typu text.
Code Řádek 17–20: Zde bereme vstupní pole „heslo“, které je typu heslo.
Code Řádek 22: Zde bereme tlačítko „odeslat“ s hodnotou „Přihlásit se“. Po kliknutí na něj se řízení předá servletu guru_login, kde se obě pole načtou pomocí objektu požadavku.
Příklad 2: 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:
Code Řádek 5–9: Zde importujeme potřebné třídy do kódu.
Code Řádek 14: Zde deklarujeme servlet guru_login, který rozšiřuje HttpServlet.
Code Řádek 21: Zde používáme metodu doPost(), protože formulář používá metodu POST.
Code Řádek 23–24: Zde čteme parametry pomocí objektu požadavku, tj. uživatelské jméno a heslo.
Code Řádek 25–29: Tímto způsobem používáme podmínku „if“, která kontroluje, zda jsou uživatelské jméno a heslo prázdné. Pokud je některé z nich prázdné, získáme objekt RequestDispatcher, který odešle řízení zpět do register_3.jsp s objekty request a response.
Code Řádek 30–34: Tato větev se provede, pokud obě nejsou prázdné; poté přepošle požadavek na register_4.jsp s objekty request a response.
Příklad 3: 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:
Code Řádek 12: Zde získáváme parametr „username“ z objektu požadavku do objektu String username. To funguje, protože forward() zachovává původní požadavek a tedy i jeho parametry beze změny.
Code Řádek 13: Zde máme uvítací zprávu s uživatelským jménem.
Code Řádek 14: Zde máme odkaz pro odhlášení, který uživatele pošle zpět na register_3.jsp.
Když spustíte výše uvedený kód, získáte následující výstup.
Výstup:
Otevření souboru register_3.jsp zobrazí dvě pole s přihlašovacími údaji a tlačítko pro přihlášení.
Po kliknutí na tlačítko Přihlásit se zobrazí níže uvedená zpráva spolu s odkazem Odhlásit se.
Kliknutím na odkaz Odhlásit se vrátíte na přihlašovací stránku zobrazenou zde.
Poznámka: Tento příklad porovnává pouze prázdné hodnoty, takže je akceptováno jakékoli neprázdné uživatelské jméno. Produkční přihlášení musí ověřit přihlašovací údaje v úložišti a hesla uchovávat hašovaná, nikdy ne v prostém textu.
Zpracování formuláře JSP pomocí getParameter()
Formuláře jsou běžnou metodou sběru vstupů při webovém zpracování. Potřebujeme odeslat informace na webový server a poté tyto informace načíst zpět na straně serveru.
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.
- Odesílá zakódované informace připojené ke stránce URL, oddělené znakem ?.
- Má také omezení velikosti; klasický návod je zhruba 1024 znaků na požadavek, ačkoli skutečný strop je stanoven prohlížečem a serverem spíše než specifikací HTTP.
- Měli bychom se vyhnout odesílání hesel a citlivých informací metodou GET.
Metoda POST:
- POST je spolehlivější metoda odesílání informací na server.
- Odesílá informace jako samostatné tělo zprávy, nikoli do adresního řádku.
- Protože se hodnoty nikdy neobjevují za znakem ? v URL, nejsou ukládány do historie prohlížeče ani do protokolů přístupu k serveru.
- Běžně se používá k odesílání citlivých informací.
JSP zpracovává data z formulářů pomocí následujících metod:
- getParameter(): používá se k získání hodnoty jednoho parametru formuláře.
- getParameterValues(): používá se k vrácení více hodnot parametru.
- getParameterNames(): používá se k získání názvů všech parametrů.
- getInputStream(): používá se ke čtení binárních dat odeslaných klientem.
Příklad:
V tomto příkladu máme formulář se dvěma poli, „uživatelské jméno“ a „heslo“, a tlačítkem pro odeslání.
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
Code Řádek 10: Zde jsme definovali formulář, jehož akce je zpracována jiným JSPV atributu action přidáme JSP, na které má být formulář odeslán metodou GET.
Zde používáme metodu GET k předání informací, tj. uživatelského jména a hesla.
Code Řádek 11–14: Zde bereme pole jako uživatelské jméno a heslo, což jsou textová pole, a získáváme vstup od uživatele.
Tento vstup lze načíst pomocí metody getParameter. Máme také tlačítko pro odeslání, které předává hodnoty polí do action_form_process.jsp.
Action_form_process.jsp
Code Řádek 14: Zde získává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:
Action_form.jsp nejprve vykreslí formulář se dvěma poli, jak je znázorněno níže.
Po odeslání soubor action_form_process.jsp pomocí metody getParameter() odešle uživatelské jméno, které načetl.
Když spustíme action_form.jsp, získáme formulář se dvěma poli, uživatelským jménem a heslem, a tlačítkem pro odeslání. Po zadání uživatelského jména a hesla klikneme na tlačítko Odeslat a požadavek je zpracován na další stránce, která vrátí stránku Zpracování formuláře s uvítací zprávou.
Poznámka k verzi: Oba výše uvedené servlety importují javax.servlet, což je správné pro Tomcat 9 a starší verze. Jakarta EE 9 přejmenovala API, takže v Tomcatu 10 a novějších verzích se každý import javax.servlet stává jakarta.servlet, nebo je nutné aplikaci převést pomocí nástroje Apache Tomcat Migration Tool pro Jakarta EE.







