JSP program példák: Regisztrációs és bejelentkezési űrlap

⚡ Okos összefoglaló

Az itt látható JSP programpéldák három modult építenek – egy regisztrációs űrlapot, egy bejelentkezési és kijelentkezési űrlapot, valamint egy űrlapfeldolgozó oldalt –, amelyek mindegyike egy JSP nézetet kapcsol egy servlet vezérlőhöz, így az MVC felosztás látható marad a kezdők számára is.

🔘 Regisztrációs folyamat: A Register_1.jsp hat mezőt gyűjt össze, és elküldi azokat a guru_register servletnek, amely csak akkor továbbítja a sikeres eredményt jelző oldalra, ha minden mező ki van töltve.
☑️ Bejelentkezés és kijelentkezés: A Register_3.jsp elküldi a hitelesítő adatokat a guru_login fájlnak; a Register_4.jsp üdvözli a felhasználót, és visszahivatkozik a bejelentkezési oldalra a kijelentkezéshez.
✅ MVC szerepkörök: A JSP oldalak nézetként, a servlet vezérlőként működnek, és a RequestDispatcher mozgatja a kérést közöttük.
🧪 Űrlapfeldolgozás: A getParameter(), getParameterValues(), getParameterNames() és getInputStream() függvények egy JSP-ben vagy servletben olvassák be a beküldött adatokat.
🇧🇷 GET vagy POST: A GET hozzáfűzi a kódolt értékeket a URL és hossza korlátozott; a POST értékeket hordoz a kérés törzsében, ami megfelel a jelszavaknak.
⚠️ Verzió megjegyzés: Ezek a listák importálják a javax.servlet csomagot, így Tomcat 9-es vagy korábbi verziókon futnak; a Tomcat 10-es és újabb verziókhoz a jakarta.servlet csomagok szükségesek.

További információk

Ezek a működő példák bemutatják, hogyan lehet JSP-vel mintaprogramokat fejleszteni, és hogyan lehet az ezek köré épülő MVC architektúrát megvalósítani. Három modult építünk sorrendben:

Regisztrációs űrlap
Bejelentkezési és kijelentkezési űrlap
JSP űrlap

Hogyan hozzunk létre regisztrációs űrlapot JSP-ben

A regisztrációs űrlapon minden adatot meg kell adnunk, beleértve a nevet, felhasználónevet, jelszót, címet, telefonszámot stb.

Ez az űrlap segít nekünk regisztrálni az alkalmazásban. Begyűjti az összes adatunkat, és egy adatbázis vagy gyorsítótár.

Ebben a példában a „Guru „Regisztrációs űrlap”, amely a következő mezőket tartalmazza:

Az Ön neve
Vezetéknév
Felhasználónév
Jelszó
Székhely
Írjon szám

Miután kitöltöttük az összes adatot, van egy elküldés gombunk; erre a gombra kattintva az összes adat elküldésre kerül a servletnek.

1. példa: 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>

A kód magyarázata:

Code 11 vonal: Itt egy olyan űrlapot veszünk, aminek van egy művelete, azaz a szervlet, amelyhez a kérést elküldjük, és a szervlet neve guru_register.java. A kérést a POST metódus dolgozza fel.

Code 14-16. sor: Itt a bemeneti típus szöveg, a név pedig keresztnév.

Code 18-20. sor: Itt a bemeneti típust szövegként vesszük, a név pedig vezetéknév.

Code 22-24. sor: Itt a beviteli típus szöveg, a név pedig felhasználónév.

Code 26-28. sor: Itt a beviteli típust vesszük jelszóként (ez elrejti a jelszót gépelés közben), és a nevet jelszóként.

Code 30-32. sor: Itt a beviteli típust szövegként, a nevet pedig címként vesszük.

Code 34-36. sor: Itt a beviteli típust szövegként, a nevet pedig kapcsolattartóként vesszük figyelembe.

Code 37 vonal: Itt egy submit típusú gombot veszünk, amelynek az értéke szintén Submit. Erre a gombra kattintva a művelet a megfelelő guru_register servlethez ugrik, ahol az összes paraméterérték átadásra kerül a kérésben.

Jegyzet: a tábla attribútuma Code A 12. sorban ez olvasható: style="with: 50%"A helyes CSS tulajdonság a következő: width, így a lista pontosan a közzétett formában kerül reprodukálásra, de a táblázat mérete addig nem kerül módosításra, amíg a saját példányodban ki nem javítják az elgépelést.

Példa 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);
		}
	}

}

A kód magyarázata:

Code 14 vonal: Itt definiáljuk a guru_register servletet, amely kiterjeszti a HttpServletet.

Code 18 vonal: Ez a doPost() metódus, amelyet akkor hívunk meg, amikor a fenti JSP űrlapon a POST-ot adjuk meg metódus attribútumként.

Code 20-25. sor: Itt a kérésből származó értékeket, azaz keresztnevet, vezetéknevet, felhasználónevet, jelszót, címet és elérhetőséget kérjük le a request.getParameter használatával.

Code 27-32. sor: Itt egy if feltételt használunk, ahol azt vizsgáljuk, hogy a kérésből lekért paraméterek közül bármelyik üres-e. Ha bármelyik paraméter üres, a vezérlés belép ebbe a feltételbe ( first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || password.isEmpty() || address.isEmpty() || contact.isEmpty()), és lekérünk egy RequestDispatcher objektumot a kérés objektumból, amely visszaküldi a kérést a register_1.jsp fájlnak. Itt a kérés és a válasz objektumokat is belefoglaljuk.

Code 33-37. sor: Ez az ág akkor hajtódik végre, ha egyik paraméter sem üres. A request objektumból lekérünk egy RequestDispatcher objektumot, amely továbbítja a kérést a register_2.jsp fájlnak. Itt továbbítjuk a request és a response objektumokat.

A két ág közötti különbség a következő: include() lefuttatja a register_1.jsp fájlt, és visszaadja a vezérlést a servletnek, miközben forward() átadja a kérést a register_2.jsp-nek, de nem válaszol.

3. példa: 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>

A kód magyarázata:

Code 10 vonal: Itt megjelenítjük az üdvözlő üzenetet. Ez a JSP akkor hívódik meg, amikor az összes paraméter ki van töltve.

Amikor végrehajtja a fenti kódot, a következő kimenetet kapja.

output:

A regisztrációs oldal a hat címkézett mezőt egyetlen Küldés gombbal jeleníti meg, az alábbiak szerint.

Miután minden mezőt kitöltött és a Küldés gombra kattintott, a guru_register továbbítja a register_2.jsp fájlra, és megjelenik a sikert jelző oldal.

Amikor a register_1.jsp fájlra kattintunk, egy űrlapot kapunk, amelyen a keresztnév, vezetéknév, felhasználónév, jelszó, cím és elérhetőség szerepel. Miután minden adatot kitöltöttünk és a küldés gombra kattintottunk, a „Welcome User” üzenetet kapjuk.

Hogyan hozzunk létre bejelentkezési és kijelentkezési űrlapot JSP-ben?

A regisztrációs űrlaphoz hasonlóan most is létrehozunk egy bejelentkezési és kijelentkezési űrlapot.

Ebben a példában egy bejelentkezési űrlapot vettünk két mezővel, „felhasználónév” és „jelszó”, valamint egy elküldés gombbal.

Amikor a beküldés gombra kattintunk, egy üdvözlő üzenetet kapunk egy kijelentkezés gombbal.

Amikor a kijelentkezés gombra kattintunk, visszakerülünk a bejelentkezési űrlapra.

1. példa: 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>

A kód magyarázata:

Code 10 vonal: Itt egy olyan űrlapot veszünk, amelynek a művelete a guru_login.java servlet. Az adatok átadására szolgáló metódus a POST.

Code 13-16. sor: Itt egy „felhasználónév” beviteli mezőt veszünk, amely szöveg típusú.

Code 17-20. sor: Itt egy „jelszó” beviteli mezőt veszünk, amely jelszó típusú.

Code 22 vonal: Itt egy „küldés” gombot veszünk, amelynek értéke „Bejelentkezés”. Rákattintva a vezérlés a guru_login servlethez kerül, ahol mindkét mezőt beolvassa a request objektum.

Példa 2: Guru_login.java (szervlet)

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

}

A kód magyarázata:

Code 5-9. sor: Itt importáljuk a szükséges osztályokat a kódba.

Code 14 vonal: Itt deklaráljuk a guru_login servletet, amely kiterjeszti a HttpServlet-et.

Code 21 vonal: Itt a doPost() metódust használjuk, mivel az űrlap a POST metódust használja.

Code 23-24. sor: Itt paramétereket olvasunk be a kérés objektum segítségével, azaz felhasználónevet és jelszót.

Code 25-29. sor: Így egy „if” feltételt használunk, amely ellenőrzi, hogy a felhasználónév és a jelszó üres-e. Ha bármelyik üres, akkor egy RequestDispatcher objektumot kapunk, amely a request és response objektumokkal együtt visszaküldi a vezérlést a register_3.jsp fájlnak.

Code 30-34. sor: Ez az ág akkor hajtódik végre, ha mindkettő nem üres; ezután továbbítja a kérést a register_4.jsp fájlnak a kérés és válasz objektumokkal együtt.

3. példa: 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>

A kód magyarázata:

Code 12 vonal: Itt a kérés objektumból a „felhasználónév” paramétert a felhasználónév String objektumba másoljuk. Ez azért működik, mert a forward() függvény megőrzi az eredeti kérést, és így a paramétereit is.

Code 13 vonal: Itt van egy üdvözlő üzenetünk a felhasználónévvel.

Code 14 vonal: Itt látható a kijelentkezési link, amely visszaküldi a felhasználót a register_3.jsp fájlra.

Amikor végrehajtja a fenti kódot, a következő kimenetet kapja.

output:

A register_3.jsp megnyitásakor a két hitelesítő adat mező és egy Bejelentkezés gomb látható.

A Bejelentkezés gombra kattintás után az alábbi üzenetet kapja egy kijelentkezési hivatkozással együtt.

A Kijelentkezés hivatkozásra kattintva visszatérhet az itt látható bejelentkezési oldalra.

Jegyzet: Ez a példa csak üres értékekre vonatkozik, így minden nem üres felhasználónév elfogadott. Az éles bejelentkezésnek ellenőriznie kell a hitelesítő adatokat egy tárolóval szemben, és a jelszavakat hash-elve kell tárolni, soha nem sima szövegként.

JSP űrlap feldolgozás a getParameter() használatával

Az űrlapok a webes feldolgozásban a bemenetek gyűjtésének gyakori módszerei. Információkat kell küldenünk a webszervernek, majd ezeket az információkat vissza kell olvasnunk a szerveroldalon.

Két általánosan használt módszer létezik az információk webszerverre való küldésére és visszaküldésére.

GET módszer:

Ez az alapértelmezett módszer az információk átadására a böngészőből a webszerverbe.
Elküldi a laphoz fűzött kódolt információkat. URL, ? karakterrel elválasztva.
Méretkorlátozása is van; a klasszikus útmutató nagyjából 1024 karakter kérésenként, bár a valódi korlátot a böngésző és a szerver határozza meg, nem pedig a HTTP specifikáció.
Kerüljük a jelszavak és érzékeny információk GET metóduson keresztüli küldését.

POST módszer:

A POST a megbízhatóbb módszer az információk szerverre küldésére.
Az információt külön üzenettörzsként küldi el, nem pedig a címsorban.
Mivel az értékek soha nem szerepelnek a ? jel után a URL, ezek nem tárolódnak a böngészési előzményekben vagy a szerverhozzáférési naplókban.
Általában érzékeny információk küldésére használják.

A JSP a következő módszerekkel kezeli az űrlapadatok feldolgozását:

getParameter(): egyetlen űrlapparaméter értékének lekérésére szolgál.
getParameterValues(): egy paraméter több értékének visszaadására szolgál.
getParameterNames(): az összes paraméter nevének lekérésére szolgál.
getInputStream(): a kliens által küldött bináris adatok beolvasására szolgál.

Példa:

Ebben a példában egy két mezővel – „felhasználónév” és „jelszó” – és egy küldés gombbal ellátott űrlapot vettünk.

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>

A kód magyarázata: Action_form.jsp

Code 10 vonal: Itt definiáltunk egy űrlapot, amelynek műveletét egy másik feldolgozza. JSPAz action attribútumban hozzáadjuk azt a JSP-t, amelyhez a GET metóduson keresztül el kell küldeni az űrlapot.

Itt a GET metódust használjuk az információk, azaz a felhasználónév és a jelszó átadására.

Code 11-14. sor: Itt olyan mezőket veszünk, mint a felhasználónév és a jelszó, amelyek szövegmezők, és a felhasználótól kapjuk a bemenetet.

Ez a bemenet a getParameter metódussal kérhető le. Van egy submit gombunk is, amely átadja a mezőértékeket az action_form_process.jsp fájlnak.

Action_form_process.jsp

Code 14 vonal: Itt a bemeneti mezők értékeit az action_form.jsp fájlból kérdezzük le a kérés objektum getParameter metódusával.

Amikor végrehajtjuk a fenti kódot, a következő kimenetet kapjuk.

output:

Az Action_form.jsp először az alább látható kétmezős űrlapot jeleníti meg.

A beküldés után az action_form_process.jsp visszaadja a getParameter() függvénnyel beolvasott felhasználónevet.

Amikor lefuttatjuk az action_form.jsp fájlt, egy két mezővel (felhasználónév és jelszó) és egy elküldés gombbal rendelkező űrlapot kapunk. A felhasználónév és jelszó megadása után a elküldésre kattintunk, és a kérést a következő oldal dolgozza fel, amely egy üdvözlő üzenettel tér vissza az Űrlapfeldolgozás oldalra.

Verzió megjegyzés: Mindkét fenti szervlet importálja a javax.servlet fájlt, ami helyes a Tomcat 9 és a korábbi verziók esetében. A Jakarta EE 9 átnevezte az API-t, így a Tomcat 10-es vagy újabb verzióján minden javax.servlet importálás jakarta.servlet lesz, vagy az alkalmazást konvertálni kell az Apache Tomcat Migration Tool for Jakarta EE eszközzel.

GYIK

A listák a Tomcat 9-es és korábbi verzióit célozzák, ahol az API a javax.servlet fájlban található. A Jakarta EE 9 átnevezte a névteret, így a Tomcat 10-es és újabb verzióinak importálnia kell a jakarta.servlet fájlt, és újra kell fordítani, vagy le kell futtatni a Tomcat Migration Tool segítségével.

Soha ne tárold sima szövegként. Mielőtt elérné az adatbázist, hasheld le egy lassú, sózott algoritmussal, például a BCrypttel vagy az Argon2-vel, és hasonlítsd össze a hasheket bejelentkezéskor. A minta servlet csak üres értékeket keres, ezért hashelést kell hozzáadni.

Az include() lefuttatja a cél erőforrást és visszaadja a vezérlést a hívó servletnek, így mindkét kimenet megjelenik. A forward() átadja a teljes kérést a célnak és soha nem tér vissza, tehát a servletnek nem szabad előbb véglegesítenie a választ.

A JSP oldalak alkotják a nézetet, a servlet a vezérlő, amely beolvassa a paramétereket és eldönti, hová menjen, az adatbázis vagy bean réteg pedig a modellt biztosítja. A RequestDispatcher a kapcsolat a vezérlő és a nézet között.

A mesterséges intelligencia asszisztensei validációs ágakat készíthetnek, hiányzó null ellenőrzéseket találhatnak a getParameter() függvényben, hashelési könyvtárakat javasolhatnak, és elmagyarázhatják a verem működését. tracMinden javaslatot vázlatként kezelj: ellenőrizd a servlet API verzióját és teszteld a generált kódot a kiküldés előtt.ping azt.

A Copilot jól működik az ismétlődő sablonüzenetek, például a doPost stubok, paraméterolvasások és diszpécserhívások kezelésében. Gyakran alapértelmezés szerint régebbi javax.servlet importokat használ, ezért ellenőrizze a névteret, az érvényesítési logikát és az esca függvényt.ping az általa előállított felhasználói bemenetről.

Adj hozzá egy JDBC réteget a servlethez: nyisson meg egy poolozott kapcsolatot, használjon egy PreparedStatement utasítást az inserthez vagy a hitelesítő adatok kereséséhez, és zárja le az erőforrásokat egy finally blokkban. Tartsa távol az SQL-t a JSP-től, hogy a nézet csak prezentációs maradjon.

Mivel a guru_login csak azt vizsgálja, hogy üresek-e a mezők. Egy üres felhasználónév vagy jelszó újra tartalmazza a bejelentkezési oldalt a továbbítás helyett, ami egy nagyon egyszerű érvényesítési védelemként működik, nem pedig valódi hitelesítésként.

JSP program példák: Regisztrációs és bejelentkezési űrlap

Hogyan hozzunk létre regisztrációs űrlapot JSP-ben

Hogyan hozzunk létre bejelentkezési és kijelentkezési űrlapot JSP-ben?

JSP űrlap feldolgozás a getParameter() használatával

GET módszer:

POST módszer:

GYIK

Foglald össze ezt a bejegyzést a következőképpen:

Iratkozzon fel a hírlevélre