Приклади програми JSP: форма реєстрації та входу

Ці робочі приклади показують, як розробляти зразки програм за допомогою JSP та як реалізувати архітектуру MVC навколо них. Три модулі побудовані по порядку:

• Реєстраційний формуляр
• Форма входу та виходу
• Форма JSP

Як створити реєстраційну форму в JSP

У реєстраційній формі у нас є форма для заповнення всіх даних, які включають ім'я, ім'я користувача, пароль, адресу, контактний номер тощо.

Ця форма допомагає нам зареєструватися в додатку. Вона збирає всі наші дані та зберігає їх у база даних або кеш.

У цьому прикладі ми візьмемо «Guru Реєстраційна форма», яка містить такі поля:

1. Ім'я
2. Прізвище
3. ім'я користувача
4. Пароль
5. Адреса
6. Контактний номер

Після заповнення всіх цих даних у нас є кнопка «Надіслати»; після натискання цієї кнопки всі дані надсилаються до сервлета.

Приклад 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>

Пояснення коду:

Code Лінія 11: Тут ми беремо форму, яка має дію, тобто сервлет, до якого буде надіслано запит, а ім'я сервлета — guru_register.java. Запит буде оброблено методом POST.

Code Рядок 14-16: Тут ми приймаємо тип вхідних даних як текст, а ім'я — first_name.

Code Рядок 18-20: Тут ми приймаємо тип вхідних даних як текст, а ім'я — last_name.

Code Рядок 22-24: Тут ми приймаємо тип вхідних даних як текст, а ім'я — ім'я користувача.

Code Рядок 26-28: Тут ми беремо тип вводу як пароль (це приховує пароль під час його введення), а ім'я як пароль.

Code Рядок 30-32: Тут ми приймаємо тип вводу як текст, а ім'я як адресу.

Code Рядок 34-36: Тут ми беремо тип вводу як текст, а ім'я як контакт.

Code Лінія 37: Тут ми беремо кнопку типу submit, значення якої також дорівнює Submit. Після натискання цієї кнопки дія переходить до відповідного сервлета guru_register, куди всі значення параметрів передаються в запиті.

Примітка: атрибут таблиці в Code Рядок 12 читається style="with: 50%"Правильна властивість CSS — width, тому список відтворюється точно так, як опубліковано, але розмір таблиці не буде змінено, доки цю друкарську помилку не буде виправлено у вашій власній копії.

Приклад 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);
		}
	}

}

Пояснення коду:

Code Лінія 14: Тут ми визначаємо сервлет guru_register, який розширює HttpServlet.

Code Лінія 18: Це метод doPost(), який викликається, коли ми вказуємо POST як атрибут методу у формі JSP вище.

Code Рядок 20-25: Тут ми отримуємо значення із запиту, тобто ім'я, прізвище, ім'я користувача, пароль, адресу та контакт, використовуючи request.getParameter.

Code Рядок 27-32: Тут ми використовуємо умову if, де перевіряємо, чи є якісь із параметрів, отриманих із запиту, порожніми. Якщо будь-який параметр порожній, елемент керування вводить цю умову ( first_name.isEmpty() || last_name.isEmpty() || username.isEmpty() || password.isEmpty() || address.isEmpty() || contact.isEmpty()), і ми отримуємо об'єкт RequestDispatcher з об'єкта запиту, який надсилає запит назад до register_1.jsp. Тут ми також включаємо об'єкти запиту та відповіді.

Code Рядок 33-37: Ця гілка виконується, коли жоден з параметрів не порожній. Ми отримуємо об'єкт RequestDispatcher з об'єкта request, який пересилає запит до register_2.jsp. Тут ми пересилаємо об'єкти request та response.

Різниця між двома гілками має значення: include() запускає register_1.jsp та повертає керування сервлету, поки forward() передає запит до register_2.jsp і не повертає.

Приклад 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>

Пояснення коду:

Code Лінія 10: Тут ми відображаємо вітальне повідомлення. Цей JSP викликається, коли всі параметри заповнені.

Коли ви виконуєте наведений вище код, ви отримуєте наступний результат.

вихід:

На сторінці реєстрації шість позначених полів відображаються за допомогою однієї кнопки «Надіслати», як показано нижче.

Після заповнення всіх полів та натискання кнопки «Надіслати» guru_register пересилає дані до register_2.jsp, і з’являється сторінка успішного виконання.

Коли ми натискаємо на register_1.jsp, ми отримуємо форму з ім'ям, прізвищем, ім'ям користувача, паролем, адресою та контактною інформацією. Після заповнення всіх даних та натискання кнопки «Надіслати» ми отримуємо повідомлення «Ласкаво просимо, користувачу».

Як створити форму входу та виходу в JSP

Як і у випадку з формою реєстрації, ми тепер створимо форму входу та виходу.

У цьому прикладі ми взяли форму входу з двома полями: «ім’я користувача» та «пароль», а також кнопку «Надіслати».

Коли ми натискаємо кнопку «Надіслати», ми отримуємо вітальне повідомлення з кнопкою виходу.

Коли ми натискаємо кнопку вийти, ми повертаємося до форми входу.

Приклад 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>

Пояснення коду:

Code Лінія 10: Тут ми беремо форму, дією якої є сервлет guru_login.java. Метод, через який передаються дані, – POST.

Code Рядок 13-16: Тут ми беремо поле введення «ім’я користувача» текстового типу.

Code Рядок 17-20: Тут ми беремо поле введення «пароль», яке має тип password.

Code Лінія 22: Тут ми беремо кнопку «надіслати» зі значенням «Вхід». Після натискання на неї керування переходить до сервлета guru_login, де обидва поля зчитуються за допомогою об'єкта запиту.

Приклад 2: Guru_login.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_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);
		}
	}

}

Пояснення коду:

Code Рядок 5-9: Тут ми імпортуємо необхідні класи в код.

Code Лінія 14: Тут ми оголошуємо сервлет guru_login, який розширює HttpServlet.

Code Лінія 21: Тут ми використовуємо метод doPost(), оскільки форма використовує метод POST.

Code Рядок 23-24: Тут ми зчитуємо параметри за допомогою об'єкта запиту, тобто ім'я користувача та пароль.

Code Рядок 25-29: Таким чином, ми використовуємо умову «якщо», яка перевіряє, чи поля імені користувача та пароля порожні. Якщо будь-яке з них порожнє, ми отримуємо об'єкт RequestDispatcher, який надсилає керування назад до register_3.jsp з об'єктами запиту та відповіді.

Code Рядок 30-34: Ця гілка виконується, якщо обидві не порожні; потім вона пересилає запит до register_4.jsp з об'єктами request та response.

Приклад 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>

Пояснення коду:

Code Лінія 12: Тут ми отримуємо параметр «ім'я користувача» з об'єкта запиту в об'єкт String username. Це працює, тому що forward() зберігає оригінальний запит, а отже, і його параметри, недоторканими.

Code Лінія 13: Тут у нас є вітальне повідомлення з іменем користувача.

Code Лінія 14: Тут у нас є посилання для виходу, яке повертає користувача на сторінку register_3.jsp.

Коли ви виконуєте наведений вище код, ви отримуєте наступний результат.

вихід:

Відкриття register_3.jsp показує два поля облікових даних та кнопку входу.

Після натискання кнопки «Вхід» ви отримаєте повідомлення нижче разом із посиланням «Вийти».

Натискання посилання «Вийти» поверне вас на сторінку входу, показану тут.

Примітка: У цьому прикладі порівнюються лише порожні значення, тому приймається будь-яке непорожнє ім'я користувача. Логін у робочому середовищі має перевіряти облікові дані у сховищі та зберігати паролі хешованими, а не у вигляді простого тексту.

Обробка форми JSP за допомогою getParameter()

Форми – це поширений метод збору вхідних даних у веб-обробці. Нам потрібно надсилати інформацію на веб-сервер, а потім зчитувати цю інформацію на стороні сервера.

Існує два найпоширеніші методи надсилання та повернення інформації на веб-сервер.

Метод GET:

• Це стандартний метод передачі інформації з браузера на веб-сервер.
• Він надсилає закодовану інформацію, додану до сторінки URL, розділені символом ?.
• Він також має обмеження на розмір; класичне обмеження становить приблизно 1024 символи на запит, хоча реальна стеля встановлюється браузером і сервером, а не специфікацією HTTP.
• Нам слід уникати надсилання паролів та конфіденційної інформації через метод GET.

Метод POST:

• POST — це надійніший метод надсилання інформації на сервер.
• Він надсилає інформацію як окреме тіло повідомлення, а не в адресному рядку.
• Оскільки значення ніколи не з'являються після символу ? у URL, вони не зберігаються в історії браузера чи журналах доступу до сервера.
• Зазвичай його використовують для надсилання конфіденційної інформації.

JSP обробляє дані форм за допомогою таких методів:

1. getParameter(): використовується для отримання значення одного параметра форми.
2. getParameterValues(): використовується для повернення кількох значень параметра.
3. getParameterNames(): використовується для отримання назв усіх параметрів.
4. getInputStream(): використовується для зчитування двійкових даних, надісланих клієнтом.

приклад:

У цьому прикладі ми взяли форму з двома полями: «ім’я користувача» та «пароль», а також кнопкою відправлення.

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>

Пояснення коду: Action_form.jsp

Code Лінія 10: Тут ми визначили форму, дія якої обробляється іншою JSPВ атрибуті action ми додаємо JSP, на який потрібно надіслати форму за допомогою методу GET.

Тут ми використовуємо метод GET для передачі інформації, тобто імені користувача та пароля.

Code Рядок 11-14: Тут ми беремо такі поля, як ім'я користувача та пароль, які є текстовими полями, і отримуємо введені дані від користувача.

Ці вхідні дані можна отримати за допомогою методу getParameter. У нас також є кнопка надсилання, яка передає значення полів у action_form_process.jsp.

Action_form_process.jsp

Code Лінія 14: Тут ми отримуємо значення полів введення з action_form.jsp за допомогою методу getParameter об'єкта запиту.

Коли ми виконаємо наведений вище код, ми отримаємо наступний вивід.

вихід:

Action_form.jsp спочатку відтворює двополеву форму, показану нижче.

Після відправлення, action_form_process.jsp виводить ім'я користувача, яке він зчитав, за допомогою getParameter().

Коли ми виконуємо action_form.jsp, ми отримуємо форму з двома полями: ім'ям користувача та паролем, а також кнопкою «Надіслати». Після введення імені користувача та пароля ми натискаємо «Надіслати», і запит обробляється наступною сторінкою, яка повертає сторінку обробки форми з вітальним повідомленням.

Примітка до версії: Обидва сервлети вище імпортують javax.servlet, що правильно для Tomcat 9 та раніших версій. Jakarta EE 9 перейменувала API, тому в Tomcat 10 або пізніших версіях кожен імпорт javax.servlet стає jakarta.servlet, або ж застосунок потрібно конвертувати за допомогою інструменту міграції Apache Tomcat для Jakarta EE.

Поширені запитання