Przykłady programów JSP: Formularz rejestracji i logowania

W tym samouczku przeprowadzę Cię przez proces tworzenia przykładowych programów za pomocą JSP i implementacji architektury MVC.

Opracowane zostaną następujące przykłady programów:

Formularz rejestracyjny
Formularz logowania i wylogowania
Formularz JSP

Korzystanie z formularza rejestracyjnego poprzez JSP

W formularzu rejestracyjnym znajduje się formularz, w którym należy podać wszystkie szczegóły, takie jak imię i nazwisko, nazwa użytkownika, hasło, adres, numer telefonu itp.

Ten formularz pomoże nam zarejestrować się w aplikacji. Biorą wszystkie nasze dane i przechowują je w baza danych lub pamięć podręczna.

W tym przykładzie weźmiemy pod uwagę „Formularz rejestracji guru”, który zawiera następujące pola:

Imię
Nazwisko
Nazwa użytkownika
Hasło
Adres
Kontaktowy numer

Po wypełnieniu wszystkich szczegółów klikamy przycisk „Prześlij”, po kliknięciu którego wszystkie dane zostaną zapisane.

Przykład 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>

Wyjaśnienie kodu:

Linia kodu 11: Tutaj bierzemy nazwę formularza, która zawiera akcję, tj. serwlet, do którego zostanie przetworzone żądanie, a nazwa serwletu to guru_register.java. Żądanie zostanie przetworzone metodą POST.

Linia kodu 14-16: Tutaj bierzemy typ wejściowy jako tekst, a imię to imię

Linia kodu 18-20: Tutaj bierzemy typ wejściowy jako tekst, a imię to nazwisko

Linia kodu 22-24: Tutaj bierzemy typ wejściowy jako tekst, a nazwa to nazwa użytkownika

Linia kodu 26-28: Tutaj bierzemy typ wejściowy jako hasło (to ukryje hasło po wpisaniu) i nazwę jako hasło

Linia kodu 30-32: Tutaj bierzemy typ wejściowy jako tekst i nazwę jako adres

Linia kodu 34-36: Tutaj przyjmujemy typ wejściowy jako tekst i nazwę jako kontakt

Linia kodu 37: Tutaj bierzemy przycisk typu „prześlij”, a wartość również jest przesyłana. Po kliknięciu tego przycisku akcja zostanie skierowana do odpowiedniego serwletu guru_register, gdzie w żądaniu zostaną przekazane wszystkie wartości parametrów.

Przykład 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);
		}
	}

}

Wyjaśnienie kodu:

Linia kodu 14: Tutaj definiujemy guru_servlet, który jest rozszerzeniem HttpServlet.

Linia kodu 18: Ta akcja doPost() metoda, która zostanie wywołana, gdy wspomnimy o atrybucie POST w akcji w powyższym formularzu JSP.

Linia kodu 20-25: Tutaj pobieramy wartości z żądania i.efirst_name, last_name , nazwa użytkownika, hasło, adres i kontakt za pomocą request.getParameter.

Linia kodu 27-32: Tutaj bierzemy warunek if, w którym sprawdzamy, czy którykolwiek z parametrów pobranych z żądania jest pusty, czy nie. Jeśli którykolwiek z parametrów jest pusty, przejdzie do tego warunku ( imię.isEmpty() || nazwisko.isEmpty || nazwa_użytkownika.isEmpty || hasło.isEmpty || adres.isEmpty || kontakt.isEmpty()) i mamy pobrać obiekt RequestDispatcher za pomocą obiektu żądania, który przekaże żądanie do rejestru_1.jsp. Tutaj uwzględniamy także obiekty żądań i odpowiedzi.

Linia kodu 33-37: Sprawa ta zostanie wykonana, gdy którykolwiek z parametrów nie będzie pusty. Będziemy musieli pobrać obiekt requestDispatcher za pomocą obiektu request, który przekaże żądanie do rejestru_2.jsp. Tutaj przekazujemy obiekty żądania i odpowiedzi.

Przykład 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>

Wyjaśnienie kodu:

Linia kodu 10: Tutaj mówimy witaj użytkowniku. Ta strona JSP zostanie wywołana po wypełnieniu wszystkich parametrów.

Po wykonaniu powyższego kodu otrzymasz następujący wynik:

Wyjście:

Po kliknięciu register_1.jsp, otrzymamy formularz, który będzie zawierał dane takie jak imię, nazwisko, nazwa użytkownika, hasło, adres, kontakt. Wszystkie dane zostały wypełnione. Po kliknięciu przycisku Submit otrzymamy wiadomość „Welcome User”

Formularz logowania i wylogowywania

Podobnie jak formularz rejestracyjny, będziemy mieli formularz logowania i wylogowania.

W tym przykładzie przyjęliśmy formularz logowania, w którym mamy dwa pola „nazwa użytkownika” i „hasło” z przyciskiem przesyłania.

Po kliknięciu przycisku Wyślij otrzymamy wiadomość powitalną z przyciskiem wylogowania.

Klikając przycisk wylogowania wracamy do formularza logowania.

Przykład 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>

Wyjaśnienie kodu:

Linia kodu 10: Tutaj bierzemy nazwę formularza, która ma akcję, tj. serwlet, do którego został przekazany, to guru_login.java. Metoda, przez którą przejdzie swój test POST.

Linia kodu 13-16: Tutaj bierzemy pole wejściowe „nazwa użytkownika”, które jest typu tekstowego.

Linia kodu 17-20: Tutaj bierzemy pole wejściowe „hasło”, które jest typu hasło.

Linia kodu 22: Tutaj bierzemy przycisk „wyślij” z wartością „Zaloguj się”, który klikamy, a następnie przechodzimy do guru_login serwletu, gdzie oba pola są pobierane przy użyciu obiektu żądania.

Guru_login.java (serwlet)

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

}

Wyjaśnienie kodu:

Linia kodu 5-9: Tutaj importujemy niezbędny import w kodzie.

Linia kodu 14: Tutaj bierzemy serwlet guru_login, który rozszerza HttpServlet.

Linia kodu 21: Tutaj korzystamy doPost() tak jak w formularzu używamy metody POST.

Linia kodu 23-24: Tutaj pobieramy parametry za pomocą obiektu żądania, tj. nazwy użytkownika i hasła.

Linia kodu 25-29: W ten sposób bierzemy warunek „if”, w którym sprawdzamy, czy nazwa użytkownika i hasło są puste, czy nie. W tym przypadku, jeśli jest puste, otrzymujemy obiekt requestdispatcher, który przekazuje do rejestru_3.jsp z obiektami żądania i odpowiedzi.

Linia kodu 30-34: Zostanie to wykonane, jeśli oba nie są puste, następnie przekazuje żądanie do rejestru_4.jsp z obiektami żądania i odpowiedzi.

Przykład 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>

Wyjaśnienie kodu:

Linia kodu 12: Tutaj otrzymujemy parametr „nazwa użytkownika” z obiektu żądania w obiekcie string nazwa użytkownika.

Linia kodu 13: Tutaj mamy wiadomość powitalną z nazwą użytkownika.

Linia kodu 14: Tutaj podajemy link do formularza wylogowania, który przekierowuje do rejestru_3.jsp.

Po wykonaniu powyższego kodu otrzymasz następujący wynik:

Wyjście:

Tutaj, gdy klikniemy na rejestr_3.jsp, otrzymamy dwa pola „nazwa użytkownika” i „hasło” z przyciskiem logowania.

Po kliknięciu przycisku Zaloguj pojawi się poniższy komunikat z przyciskiem Wyloguj.

Kliknięcie przycisku wylogowania powoduje powrót do strony logowania

Przetwarzanie formularzy JSP przy użyciu metody getParameter()

Przetwarzanie formularzy JSP:

Formularze są powszechną metodą przetwarzania stron internetowych. Musimy wysłać informacje do serwera WWW i te informacje.

Istnieją dwie powszechnie stosowane metody wysyłania i odbierania informacji do serwera WWW.

POBIERZ metodę:

Jest to domyślna metoda przekazywania informacji z przeglądarki do serwera WWW.
Wysyła zakodowane informacje oddzielone znakiem ?dodawanym do adresu URL strony.
Ma również ograniczenie rozmiaru i możemy wysłać tylko 1024 znaki w żądaniu.
Powinniśmy unikać wysyłania haseł i poufnych informacji metodą GET.

Metoda POST:

Metoda pocztowa to najbardziej niezawodna metoda wysyłania informacji na serwer.
Wysyła informacje jako osobną wiadomość.
Wysyła jako ciąg tekstowy po ?w adresie URL.
Jest powszechnie używany do wysyłania poufnych informacji.

JSP obsługuje przetwarzanie danych formularzy przy użyciu następujących metod:

getParameter(): Służy do uzyskania wartości parametru formularza.
getParameterValues(): Służy do zwracania wielu wartości parametrów.
getParameterNames(): Służy do pobierania nazw parametrów.
getInputStream(): Służy do odczytu danych binarnych przesłanych przez klienta.

Przykład:

W tym przykładzie przyjęliśmy formularz z dwoma polami „nazwa użytkownika” i „hasło” z przyciskiem przesyłania

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>

Objaśnienie kodu: Action_form.jsp

Linia kodu 10: Tutaj zdefiniowaliśmy formę i poprzez którą mamy przetworzyć akcję na inną JSP. W parametrze akcji dodajemy tę JSP, do której ma zostać przetworzona metodą GET.

Tutaj używamy metody GET do przekazania informacji, tj. nazwy użytkownika i hasła.

Linia kodu 11-14: Tutaj bierzemy pola takie jak nazwa użytkownika i hasło, które są polami tekstowymi, i otrzymujemy dane wejściowe od użytkownika.

Dane wejściowe można pobrać za pomocą metody getParameter. Mamy także przycisk przesyłania z typem przesyłania, który pomaga nam przekazywać wartości pól do action_form_process.jsp

Action_form_process.jsp

Linia kodu 14: Tutaj pobieramy wartości pól wejściowych z action_form.jsp za pomocą metody getParameter obiektu żądania.

Po wykonaniu powyższego kodu otrzymamy następujący wynik:

Wyjście:

Kiedy wykonujemy action_form.jsp, otrzymujemy formularz z dwoma polami nazwa użytkownika i hasło oraz przycisk wysyłania. Następnie po wprowadzeniu nazwy użytkownika i hasła możemy kliknąć przycisk Prześlij, co powoduje przejście do następnej strony, która daje wynik jako stronę przetwarzania formularza z wiadomość powitalna.

Korzystanie z formularza rejestracyjnego poprzez JSP

POWIĄZANE ARTYKUŁY

Formularz logowania i wylogowywania

Przetwarzanie formularzy JSP przy użyciu metody getParameter()

Przetwarzanie formularzy JSP:

POBIERZ metodę:

Metoda POST:

Zapisz się do newslettera