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

By: James Hartman James Hartman
Hours korszerűsített

jsp példaprogramok

Ebben az oktatóanyagban végigvezetem a példaprogramok JSP-vel való fejlesztésén és az MVC architektúra megvalósításán.

A következő programpéldákat fejlesztjük ki:

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

Regisztrációs űrlap használata JSP-n keresztül

A regisztrációs űrlapon lesz egy űrlapunk az összes adat kitöltéséhez, amely tartalmazza a nevet, felhasználónevet, jelszót, címet, elérhetőségi számot stb.

Ez az űrlap segít a jelentkezéshez való regisztrációban. Minden adatunkat átveszik és tárolják a adatbázis vagy gyorsítótár.

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

  1. Az Ön neve
  2. Vezetéknév
  3. Felhasználónév
  4. Jelszó
  5. Székhely
  6. Írjon szám

Mindezen adatok kitöltése után a küldés gombbal rendelkezünk, erre a gombra kattintva minden adat eltárolódik.

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:

11. kódsor: Itt egy űrlapnevet veszünk fel, amely művelettel rendelkezik, azaz a szervlet, amelyhez a kérés feldolgozásra kerül, és a szervlet neve guru_register.java. A kérés feldolgozása POST módszerrel történik.

14-16. kódsor: Itt a beviteli típust szövegként használjuk, a név pedig a keresztnév

18-20. kódsor: Itt a beviteli típust szövegként használjuk, a név pedig vezetéknév

22-24. kódsor: Itt a beviteli típust szövegnek vesszük, a név pedig a felhasználónév

26-28. kódsor: Itt a beviteli típust használjuk jelszóként (ez elrejti a jelszót beíráskor), és a nevet jelszóként

30-32. kódsor: Itt a beviteli típust szövegként, a nevet pedig címként használjuk

34-36. kódsor: Itt a beviteli típust szövegnek, a nevet pedig kapcsolattartónak vesszük

37. kódsor: Itt egy send típusú gombot veszünk, és az érték is küldés. Erre a gombra kattintva a művelet a megfelelő guru_register servlethez kerül, ahol az összes paraméterérték átadásra kerül a kérésben.

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

14. kódsor: Itt definiáljuk a guru_servlet-et, amely kiterjeszti a HttpServlet-et.

18. kódsor: Ez az akció doPost() metódus, amelyet akkor hívunk meg, ha a fenti JSP-forma műveleti attribútumában említjük a POST-t.

20-25. kódsor: Itt lekérjük az i.first_name, last_name , felhasználónév, jelszó, cím és kapcsolat értékeit a request.getParameter használatával.

27-32. kódsor: Itt az if feltételt vesszük, amikor ellenőrizzük a kérésből leolvasott paraméterek bármelyikét, hogy üresek-e vagy sem. Ha bármelyik paraméter üres, akkor ezt a feltételt írja be ( first_name.isEmpty() || last_name.isEmpty || username.isEmpty || password.isEmpty || address.isEmpty || contact.isEmpty()) a RequestDispatcher objektum lekéréséhez a request objektum használatával, amely továbbítja a kérést a register_1.jsp címre. Itt is szerepelnek kérés és válasz objektumok.

33-37. kódsor: Ez az eset akkor hajtódik végre, ha valamelyik paraméter nem üres. A requestDispatcher objektumot a request objektum segítségével kell lekérnünk, amely továbbítja a kérést a register_2.jsp címre. Itt kérés és válasz objektumokat továbbítunk.

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:

10. kódsor: Itt azt mondjuk, üdvözlöm a felhasználót. Ez a JSP akkor kerül meghívásra, ha az összes paraméter ki van töltve.

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

Regisztrációs űrlap használata JSP-n keresztül

Regisztrációs űrlap használata JSP-n keresztül

output:

Amikor a register_1.jsp fájlra kattintunk, egy űrlapot kapunk, amelyen olyan adatok szerepelnek, mint a keresztnév, vezetéknév, felhasználónév, jelszó, cím, elérhetőség. Minden részlet kitöltve. Amikor rákattintunk a küldés gombra, akkor a „Üdvözlünk felhasználó” üzenetet kapjuk.

KAPCSOLÓDÓ CIKKEK

Bejelentkezési és kijelentkezési űrlap

A regisztrációs űrlaphoz hasonlóan lesz egy bejelentkezési és kijelentkezési űrlapunk is.

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

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

A kijelentkezés gombra kattintva visszatérünk a bejelentkezési űrlaphoz.

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:

10. kódsor: Itt egy olyan űrlapnevet veszünk fel, amelynek művelete van, azaz a szervlet, amelyhez továbbadta, a guru_login.java. A módszer, amelyen keresztül átadja a POST-ját.

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

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

22. kódsor: Itt veszünk egy „Submit” gombot a „Login” értékkel, amelyre kattintunk, majd a servlet guru_login oldalára kerül, ahol mindkét mezőt a request objektum veszi át.

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

}

A kód magyarázata:

5-9. kódsor: Itt importáljuk a szükséges importokat a kódban.

14. kódsor: Itt a guru_login servletet vesszük, amely kiterjeszti a HttpServletet.

21. kódsor: Itt használjuk doPost() módszert, mint ahogy a POST módszert használjuk.

23-24. kódsor: Itt a paramétereket kérés objektummal, azaz felhasználónévvel és jelszóval vesszük.

25-29. kódsor: Ilyen módon az „if” feltételt használjuk, ahol ellenőrizzük a felhasználónevet és a jelszót, hogy üresek-e vagy sem. Ebben az esetben, ha üres, akkor egy requestdispatcher objektumot kapunk, amely a register_3.jsp-re továbbít kérés és válasz objektumokkal.

30-34. kódsor: Ez akkor hajtódik végre, ha mindkettő nem üres, akkor továbbítja a kérést a register_4.jsp-nek kérés és válasz objektumokkal.

2. 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:

12. kódsor: Itt a „felhasználónév” paramétert kapjuk a felhasználónév karakterlánc objektumában lévő kérelem objektumból.

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

14. kódsor: Itt mutatunk egy linket, amellyel kijelentkezhet az űrlapból, amely a register_3.jsp oldalra irányít át.

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

output:

Itt, amikor a register_3.jsp-re kattintunk, két mezőt kapunk: "felhasználónév" és "jelszó" egy bejelentkezési gombbal.

Bejelentkezési és kijelentkezési űrlap

A Bejelentkezés gombra kattintás után az alábbi üzenet jelenik meg a Kijelentkezés gombbal.

Bejelentkezési és kijelentkezési űrlap

A kijelentkezés gombra kattintva visszalép a bejelentkezési oldalra

Bejelentkezési és kijelentkezési űrlap

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

JSP űrlap feldolgozás:

Az űrlapok a webfeldolgozás általános módszerei. Információkat kell küldenünk a webszervernek, és azt az információt.

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.
  • A kódolt információkat az URL-oldalhoz fűzött ?karakterrel elválasztva küldi el.
  • Ennek méretkorlátozása is van, és csak 1024 karaktert tudunk küldeni a kérésben.
  • Kerülnünk kell a jelszavak és bizalmas információk GET módszerrel történő küldését.

POST módszer:

  • A közzétételi módszer a legmegbízhatóbb módszer az információk kiszolgálóra küldésére.
  • Külön üzenetként küldi el az információkat.
  • Az URL-ben szereplő ? után szöveges karakterláncként küldi el.
  • Általában érzékeny információk küldésére használják.

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

  1. getParameter(): Az űrlap paraméter értékének lekérésére szolgál.
  2. getParameterValues(): A paraméterek többszörös értékének visszaadására szolgál.
  3. getParameterNames(): A paraméterek nevének lekérésére szolgál.
  4. getInputStream(): A kliens által küldött bináris adatok beolvasására szolgál.

Példa:

Ebben a példában egy űrlapot vettünk fel két mezővel."felhasználónév" és "jelszó" küldés gombbal

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

10. kódsor: Itt definiáltunk egy formát, amelyen keresztül feldolgozzuk a műveletet egy másikra JSP. A műveleti paraméterben hozzáadjuk azt a JSP-t, amelyhez a GET metóduson keresztül fel kell dolgozni.

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

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

Ez a bemenet a getParameter metódussal kérhető le. Ezenkívül van elküldés gombunk is, amelynek típusa küldés, amely segít nekünk átadni a mezőértékeket az action_form_process.jsp fájlba.

Action_form_process.jsp

14. kódsor: Itt megkapjuk a beviteli mezők értékeit az action_form.jsp fájlból a request objektum getParameter metódusával.

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

JSP űrlap feldolgozás

JSP űrlap feldolgozás

output:

Amikor végrehajtjuk az action_form.jsp parancsot, egy űrlapot kapunk két mezővel, a felhasználónévvel és a jelszóval, valamint egy küldőgombbal. Ezután a felhasználónév és jelszó megadása után rákattinthatunk a küldés gombra, és a következő oldalra kerül, amely Űrlapfeldolgozó oldalként ad ki eredményt. üdvözlő üzenet.

Talán tetszene: