Ví dụ về chương trình JSP: Biểu mẫu đăng ký và đăng nhập

Bởi: James Hartman James Hartman
Hours cập nhật

chương trình ví dụ jsp

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách phát triển các chương trình mẫu bằng JSP và triển khai kiến ​​trúc MVC trong hướng dẫn này.

Các ví dụ chương trình sau đây sẽ được phát triển:

  • Mẫu đăng ký
  • Biểu mẫu đăng nhập và đăng xuất
  • Mẫu JSP

Sử dụng mẫu đăng ký thông qua JSP

Trong mẫu Đăng ký, chúng ta sẽ có một mẫu để điền tất cả thông tin bao gồm tên, tên người dùng, mật khẩu, địa chỉ, số điện thoại liên lạc, v.v.

Biểu mẫu này sẽ giúp chúng tôi đăng ký với ứng dụng. Họ lấy tất cả thông tin chi tiết của chúng tôi và lưu trữ nó trong một cơ sở dữ liệu hoặc bộ đệm.

Trong ví dụ này, chúng ta sẽ lấy “Biểu mẫu đăng ký Guru” có các trường sau:

  1. Tên
  2. Họ
  3. Tên đăng nhập (Username)
  4. Mật khẩu
  5. Địa Chỉ
  6. Số liên hệ

Sau khi điền đầy đủ các thông tin này, chúng ta sẽ nhấn nút Gửi, khi nhấp vào nút đó, tất cả các thông tin sẽ được lưu trữ.

Ví dụ 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>

Giải thích mã:

Dòng mã 11: Ở đây chúng ta đang lấy một tên biểu mẫu có hành động, tức là servlet mà yêu cầu sẽ được xử lý và tên servlet là guru_register.java. Yêu cầu sẽ được xử lý thông qua phương thức POST.

Dòng mã 14-16: Ở đây chúng tôi đang lấy loại đầu vào làm văn bản và tên là tên

Dòng mã 18-20: Ở đây chúng tôi đang lấy loại đầu vào làm văn bản và tên là họ

Dòng mã 22-24: Ở đây chúng tôi đang lấy loại đầu vào làm văn bản và tên là tên người dùng

Dòng mã 26-28: Ở đây chúng tôi lấy loại đầu vào làm mật khẩu (điều này sẽ ẩn mật khẩu khi nhập) và tên làm mật khẩu

Dòng mã 30-32: Ở đây chúng tôi đang lấy loại đầu vào là văn bản và tên làm địa chỉ

Dòng mã 34-36: Ở đây chúng tôi đang lấy loại đầu vào là văn bản và tên làm liên hệ

Dòng mã 37: Ở đây chúng tôi đang sử dụng một nút thuộc loại gửi và giá trị cũng được gửi. Khi nhấp vào nút này, hành động sẽ chuyển đến servlet guru_register tương ứng, nơi tất cả các giá trị tham số sẽ được chuyển trong yêu cầu.

Ví dụ 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);
		}
	}

}

Giải thích mã:

Dòng mã 14: Ở đây chúng tôi xác định guru_servlet đang mở rộng HttpServlet.

Dòng mã 18: Hành động này doPost() phương thức sẽ được gọi khi chúng ta đề cập đến thuộc tính POST trong hành động ở dạng JSP ở trên.

Dòng mã 20-25: Ở đây chúng tôi đang tìm nạp các giá trị từ yêu cầu i.efirst_name, Last_name, tên người dùng, mật khẩu, địa chỉ và liên hệ bằng cách sử dụng request.getParameter.

Dòng mã 27-32: Ở đây chúng tôi đang sử dụng điều kiện if trong đó chúng tôi kiểm tra bất kỳ tham số nào được tìm nạp từ yêu cầu xem chúng có trống hay không. Nếu bất kỳ tham số nào trống thì nó sẽ nhập điều kiện này ( first_name.isEmpty() || Last_name.isEmpty || username.isEmpty || pass.isEmpty || address.isEmpty || contact.isEmpty()) và chúng ta có để tìm nạp đối tượng requestDispatcher bằng cách sử dụng đối tượng yêu cầu sẽ chuyển tiếp yêu cầu tới register_1.jsp. Ở đây chúng tôi cũng bao gồm các đối tượng yêu cầu và phản hồi.

Dòng mã 33-37: Trường hợp này sẽ thực thi khi bất kỳ tham số nào không trống. Chúng tôi sẽ phải tìm nạp đối tượng requestDispatcher bằng cách sử dụng đối tượng yêu cầu sẽ chuyển tiếp yêu cầu đến register_2.jsp. Ở đây chúng tôi đang chuyển tiếp các đối tượng yêu cầu và phản hồi.

Ví dụ 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>

Giải thích mã:

Dòng mã 10: Ở đây chúng tôi đang nói chào mừng người dùng. JSP này sẽ được gọi khi tất cả các tham số được điền đầy đủ.

Khi bạn thực thi đoạn mã trên, bạn sẽ nhận được kết quả đầu ra sau:

Sử dụng mẫu đăng ký thông qua JSP

Sử dụng mẫu đăng ký thông qua JSP

Đầu ra:

Khi chúng ta nhấp vào register_1.jsp, chúng ta sẽ nhận được một biểu mẫu có các chi tiết như tên, họ, tên người dùng, mật khẩu, địa chỉ, liên hệ. Tất cả các chi tiết đã được điền đầy đủ. Khi chúng ta nhấp vào nút gửi thì chúng ta nhận được thông báo là "Welcome User"

NHỮNG BÀI VIẾT LIÊN QUAN

Biểu mẫu đăng nhập và đăng xuất

Giống như form đăng ký chúng ta sẽ có form đăng nhập và đăng xuất.

Trong ví dụ này, chúng tôi đã lấy biểu mẫu Đăng nhập trong đó chúng tôi có hai trường “tên người dùng” và “mật khẩu” bằng nút gửi.

Khi chúng tôi nhấp vào nút gửi thì chúng tôi nhận được thông báo chào mừng có nút đăng xuất.

Khi chúng tôi nhấp vào nút đăng xuất, chúng tôi sẽ quay lại biểu mẫu đăng nhập.

Ví dụ 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>

Giải thích mã:

Dòng mã 10: Ở đây chúng ta đang lấy một tên biểu mẫu có hành động, tức là servlet mà nó đã chuyển đến là guru_login.java. Phương thức mà nó sẽ chuyển POST.

Dòng mã 13-16: Ở đây chúng tôi đang lấy trường đầu vào “tên người dùng” thuộc loại văn bản.

Dòng mã 17-20: Ở đây chúng tôi đang lấy trường đầu vào “mật khẩu” thuộc loại mật khẩu.

Dòng mã 22: Ở đây, chúng tôi đang sử dụng nút “gửi” với giá trị “Đăng nhập” mà chúng tôi nhấp vào, sau đó nó sẽ chuyển đến servlet guru_login nơi cả hai trường được lấy bằng cách sử dụng đối tượng yêu cầu.

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

}

Giải thích mã:

Dòng mã 5-9: Ở đây chúng tôi đang nhập các mục nhập cần thiết vào mã.

Dòng mã 14: Ở đây chúng tôi đang sử dụng servlet guru_login mở rộng HttpServlet.

Dòng mã 21: Ở đây chúng tôi đang sử dụng doPost() phương thức như ở dạng chúng ta đang sử dụng phương thức POST.

Dòng mã 23-24: Ở đây chúng tôi lấy tham số bằng đối tượng yêu cầu tức là tên người dùng và mật khẩu.

Dòng mã 25-29: Bằng cách này, chúng ta đang sử dụng điều kiện “if” trong đó chúng ta đang kiểm tra tên người dùng và mật khẩu xem chúng có trống hay không. Trong trường hợp này nếu nó trống thì chúng ta sẽ nhận được đối tượng requestdispatcher chuyển tiếp tới register_3.jsp với các đối tượng yêu cầu và phản hồi.

Dòng mã 30-34: Điều này sẽ được thực thi nếu cả hai đều không trống, sau đó nó chuyển tiếp yêu cầu tới register_4.jsp với các đối tượng yêu cầu và phản hồi.

Ví dụ 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>

Giải thích mã:

Dòng mã 12: Ở đây chúng ta đang nhận được tham số “tên người dùng” từ đối tượng yêu cầu trong tên người dùng đối tượng chuỗi.

Dòng mã 13: Ở đây chúng tôi có một thông báo chào mừng với tên người dùng.

Dòng mã 14: Ở đây chúng tôi liên kết để đăng xuất biểu mẫu chuyển hướng đến register_3.jsp.

Khi bạn thực thi đoạn mã trên, bạn sẽ nhận được kết quả đầu ra sau:

Đầu ra:

Ở đây khi chúng ta nhấp vào register_3.jsp, chúng ta nhận được hai trường”tên người dùng” và “mật khẩu” kèm theo nút đăng nhập.

Biểu mẫu đăng nhập và đăng xuất

Sau khi nhấp vào nút Đăng nhập, bạn nhận được thông báo bên dưới với nút Đăng xuất.

Biểu mẫu đăng nhập và đăng xuất

Khi bạn nhấp vào nút đăng xuất, bạn quay lại trang đăng nhập

Biểu mẫu đăng nhập và đăng xuất

Xử lý biểu mẫu JSP bằng getParameter()

Xử lý biểu mẫu JSP:

Biểu mẫu là phương pháp phổ biến trong xử lý web. Chúng ta cần gửi thông tin đến máy chủ web và thông tin đó.

Có hai phương pháp thường được sử dụng để gửi và lấy lại thông tin về máy chủ web.

Phương thức NHẬN:

  • Đây là phương pháp mặc định để truyền thông tin từ trình duyệt đến máy chủ web.
  • Nó gửi thông tin được mã hóa được phân tách bằng ký tự ? được thêm vào trang URL.
  • Nó cũng có giới hạn về kích thước và chúng tôi chỉ có thể gửi 1024 ký tự trong yêu cầu.
  • Chúng ta nên tránh gửi mật khẩu và thông tin nhạy cảm thông qua phương thức GET.

Phương thức POST:

  • Phương thức đăng bài là phương pháp đáng tin cậy nhất để gửi thông tin đến máy chủ.
  • Nó gửi thông tin dưới dạng tin nhắn riêng biệt.
  • Nó gửi dưới dạng chuỗi văn bản sau ?trong URL.
  • Nó thường được sử dụng để gửi thông tin nhạy cảm.

JSP xử lý dữ liệu biểu mẫu bằng các phương pháp sau:

  1. getParameter(): Nó được sử dụng để lấy giá trị của tham số biểu mẫu.
  2. getParameterValues(): Nó được sử dụng để trả về nhiều giá trị của tham số.
  3. getParameterNames(): Dùng để lấy tên các tham số.
  4. getInputStream(): Nó được sử dụng để đọc dữ liệu nhị phân được gửi bởi máy khách.

Ví dụ:

Trong ví dụ này, chúng tôi đã tạo một biểu mẫu có hai trường.”tên người dùng” và “mật khẩu” bằng nút gửi

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>

Giải thích về mã: Action_form.jsp

Dòng mã 10: Ở đây chúng ta đã xác định một biểu mẫu và thông qua đó chúng ta xử lý hành động cho một số biểu mẫu khác JSP. Trong tham số hành động, chúng ta thêm JSP đó vào đó để xử lý thông qua phương thức GET.

Ở đây chúng tôi đang sử dụng phương thức GET để truyền thông tin, tức là tên người dùng và mật khẩu.

Dòng mã 11-14: Ở đây chúng tôi lấy các trường như tên người dùng và mật khẩu là các trường văn bản và chúng tôi đang nhận dữ liệu đầu vào từ người dùng.

Đầu vào này có thể được tìm nạp bằng phương thức getParameter. Ngoài ra, chúng tôi có nút gửi với loại submit type giúp chúng tôi chuyển các giá trị trường vào action_form_process.jsp

Action_form_process.jsp

Dòng mã 14: Ở đây chúng ta lấy giá trị của các trường đầu vào từ action_form.jsp bằng phương thức getParameter của đối tượng yêu cầu.

Khi thực thi đoạn mã trên, chúng ta sẽ nhận được kết quả sau:

Xử lý biểu mẫu JSP

Xử lý biểu mẫu JSP

Đầu ra:

Khi chúng tôi thực thi action_form.jsp, chúng tôi nhận được một biểu mẫu có hai trường tên người dùng và mật khẩu và nút gửi. Sau đó, sau khi nhập tên người dùng và mật khẩu, chúng tôi có thể nhấp vào gửi và nó sẽ xử lý sang trang tiếp theo, trang này sẽ xuất ra dưới dạng trang Xử lý biểu mẫu với một tin nhắn chào mừng.

Bạn có thể thích: