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

У цьому підручнику я розповім вам про розробку прикладів програм із JSP та впровадження архітектури MVC у цьому підручнику.

Будуть розроблені наступні приклади програм:

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

Використання форми реєстрації через JSP

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

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

У цьому прикладі ми візьмемо «Форму реєстрації гуру», яка містить такі поля:

Ім'я
Прізвище
ім'я користувача
Пароль
Адреса
Контактний номер

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

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

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

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

Рядок коду 14-16: Тут ми беремо тип введення як текст, а ім’я – це ім’я

Рядок коду 18-20: Тут ми беремо тип введення як текст, а ім’я – це прізвище

Рядок коду 22-24: Тут ми беремо тип введення як текст, а ім’я – це ім’я користувача

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

Рядок коду 30-32: Тут ми беремо тип введення як текст, а ім’я – як адресу

Рядок коду 34-36: Тут ми використовуємо тип введення як текст, а ім’я – як контакт

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

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

}

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

Рядок коду 14: Тут ми визначаємо guru_servlet, який розширює HttpServlet.

Рядок коду 18: Ця дія doPost() метод, який буде викликано, коли ми згадаємо атрибут POST in action у наведеній вище формі JSP.

Рядок коду 20-25: Тут ми отримуємо значення із запиту i.efirst_name, last_name, username, password, address and contact за допомогою request.getParameter.

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

Рядок коду 33-37: Цей випадок буде виконано, якщо будь-який із параметрів не порожній. Нам доведеться отримати об’єкт requestDispatcher за допомогою об’єкта запиту, який перенаправить запит до 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>

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

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

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

вихід:

Коли ми клацаємо на register_1.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>

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

Рядок коду 10: Тут ми беремо назву форми, яка має дію, тобто сервлет, до якого вона передана, це guru_login.java. Метод, за допомогою якого він проходитиме POST.

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

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

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

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

}

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

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

Рядок коду 14: Тут ми беремо сервлет guru_login, який розширює HttpServlet.

Рядок коду 21: Ось ми і використовуємо doPost() метод, як у формі, у якій ми використовуємо метод POST.

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

Рядок коду 25-29: Таким чином, ми виконуємо умову «if», коли ми перевіряємо ім’я користувача та пароль, чи вони порожні. У цьому випадку, якщо вони порожні, ми отримуємо об’єкт requestdispatcher, який пересилає до register_3.jsp з об’єктами запиту та відповіді.

Рядок коду 30-34: Це буде виконано, якщо обидва не пусті, тоді він пересилає запит до register_4.jsp з об’єктами запиту та відповіді.

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

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

Рядок коду 12: Тут ми отримуємо параметр «username» з об’єкта запиту в рядковому об’єкті username.

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

Рядок коду 14: Тут ми посилаємося на вихід із форми, яка переспрямовує на register_3.jsp.

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

вихід:

Тут, коли ми натискаємо register_3.jsp, ми отримуємо два поля «ім’я користувача» та «пароль» із кнопкою входу.

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

Коли ви натискаєте кнопку виходу, ви повертаєтеся на сторінку входу

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

Обробка форми JSP:

Форми є поширеним методом веб-обробки. Нам потрібно надіслати інформацію на веб-сервер і цю інформацію.

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

Метод GET:

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

Метод POST:

Метод пошти є найбільш надійним методом передачі інформації на сервер.
Він надсилає інформацію як окреме повідомлення.
Він надсилає як текстовий рядок після ? в URL-адресі.
Він зазвичай використовується для надсилання конфіденційної інформації.

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

getParameter(): використовується для отримання значення параметра форми.
getParameterValues(): використовується для повернення кількох значень параметрів.
getParameterNames(): використовується для отримання назв параметрів.
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

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

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

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

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

Action_form_process.jsp

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

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

вихід:

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

Вам може сподобатися:

Використання форми реєстрації через JSP

СТАТТІ ПО ТЕМІ

Форма входу та виходу

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

Обробка форми JSP:

Метод GET:

Метод POST: