ตัวอย่างโปรแกรม JSP: แบบฟอร์มลงทะเบียนและเข้าสู่ระบบ

⚡ สรุปอย่างชาญฉลาด

ตัวอย่างโปรแกรม JSP ในที่นี้สร้างโมดูลสามส่วน ได้แก่ แบบฟอร์มลงทะเบียน แบบฟอร์มเข้าสู่ระบบและออกจากระบบ และหน้าประมวลผลแบบฟอร์ม โดยแต่ละส่วนเชื่อมต่อมุมมอง JSP กับตัวควบคุมเซิร์ฟเล็ต เพื่อให้ผู้เริ่มต้นมองเห็นการแบ่งส่วน MVC ได้อย่างชัดเจน

🔘 ขั้นตอนการลงทะเบียน: ไฟล์ Register_1.jsp จะรวบรวมข้อมูลจากหกช่องข้อมูลและส่งไปยังเซิร์ฟเล็ต guru_register ซึ่งจะส่งต่อไปยังหน้าแสดงความสำเร็จก็ต่อเมื่อกรอกข้อมูลครบทุกช่องแล้วเท่านั้น
☑️ การเข้าสู่ระบบและการออกจากระบบ: Register_3.jsp ส่งข้อมูลประจำตัวไปยัง guru_login; Register_4.jsp ทักทายผู้ใช้และเชื่อมโยงกลับไปยังหน้าเข้าสู่ระบบเพื่อออกจากระบบ
✅ บทบาทของ MVC: หน้า JSP ทำหน้าที่เป็นส่วนแสดงผล (view) เซิร์ฟเล็ตทำหน้าที่เป็นส่วนควบคุม (controller) และ RequestDispatcher ทำหน้าที่ส่งต่อคำขอระหว่างทั้งสองส่วนนี้
🧪 การประมวลผลแบบฟอร์ม: เมธอด getParameter(), getParameterValues(), getParameterNames() และ getInputStream() ใช้สำหรับอ่านข้อมูลที่ส่งเข้ามาภายใน JSP หรือ servlet
🛠️ GET เทียบกับ POST: GET จะเพิ่มค่าที่เข้ารหัสแล้วต่อท้าย URL และมีข้อจำกัดด้านความยาว; การส่งแบบ POST จะส่งค่าต่างๆ ในส่วนเนื้อหาของคำขอ ซึ่งเหมาะสำหรับรหัสผ่าน
⚠️ หมายเหตุเกี่ยวกับเวอร์ชัน: โค้ดเหล่านี้ใช้ไลบรารี javax.servlet ดังนั้นจึงสามารถทำงานได้บน Tomcat 9 หรือเวอร์ชันก่อนหน้า ส่วน Tomcat 10 และเวอร์ชันที่ใหม่กว่านั้นจำเป็นต้องใช้แพ็กเกจ jakarta.servlet เพิ่มเติม

อ่านเพิ่มเติม

ตัวอย่างเหล่านี้แสดงให้เห็นถึงวิธีการพัฒนาโปรแกรมตัวอย่างด้วย JSP และวิธีการนำสถาปัตยกรรม MVC มาใช้กับโปรแกรมเหล่านั้น โดยจะสร้างขึ้นเป็นสามโมดูลตามลำดับ:

แบบฟอร์มลงทะเบียน
แบบฟอร์มเข้าสู่ระบบและออกจากระบบ
แบบฟอร์ม JSP

วิธีการสร้างแบบฟอร์มลงทะเบียนใน JSP

ในแบบฟอร์มลงทะเบียน เรามีแบบฟอร์มให้กรอกรายละเอียดทั้งหมด ซึ่งประกอบด้วยชื่อ ชื่อผู้ใช้ รหัสผ่าน ที่อยู่ เบอร์โทรศัพท์ติดต่อ เป็นต้น

แบบฟอร์มนี้ช่วยให้เราลงทะเบียนใช้งานแอปพลิเคชัน โดยจะบันทึกรายละเอียดทั้งหมดของเราและจัดเก็บไว้ในระบบ ฐานข้อมูล หรือแคช

ในตัวอย่างนี้ เราจะใช้ “Guru แบบฟอร์มลงทะเบียน ซึ่งประกอบด้วยช่องกรอกข้อมูลดังต่อไปนี้:

ชื่อ
นามสกุล
ชื่อผู้ใช้
รหัสผ่าน
ที่อยู่
เบอร์โทรศัพท์ติดต่อ

หลังจากกรอกรายละเอียดทั้งหมดแล้ว เราจะมีปุ่มส่งข้อมูล เมื่อคลิกปุ่มนั้น รายละเอียดทั้งหมดจะถูกส่งไปยังเซิร์ฟเล็ต

ตัวอย่างที่ 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: ในที่นี้ เรากำหนดประเภทข้อมูลนำเข้าเป็นข้อความ และชื่อคือ นามสกุล

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 เป็นแอตทริบิวต์ method ในฟอร์ม 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 จากอ็อบเจ็กต์คำขอ ซึ่งจะส่งต่อคำขอไปยัง register_2.jsp ในที่นี้เรากำลังส่งต่ออ็อบเจ็กต์คำขอและคำตอบ

ความแตกต่างระหว่างสองสาขานี้มีความสำคัญ: 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 นี้จะถูกเรียกใช้เมื่อกรอกพารามิเตอร์ทั้งหมดเรียบร้อยแล้ว

เมื่อคุณรันโค้ดข้างต้น คุณจะได้ผลลัพธ์ดังต่อไปนี้

Output:

หน้าลงทะเบียนแสดงช่องกรอกข้อมูล 6 ช่องที่มีป้ายกำกับ พร้อมปุ่มส่งเพียงปุ่มเดียว ดังแสดงในภาพด้านล่าง

เมื่อกรอกข้อมูลครบทุกช่องและคลิกปุ่มส่งแล้ว 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: ในที่นี้เรากำลังใช้ช่องป้อนข้อมูล "รหัสผ่าน" ซึ่งเป็นชนิดข้อมูลรหัสผ่าน

Code 22 แนว: ในที่นี้ เราใช้ปุ่ม "ส่ง" ที่มีค่าเป็น "เข้าสู่ระบบ" เมื่อคลิกปุ่มนี้ การควบคุมจะถูกส่งไปยังเซิร์ฟเล็ต guru_login ซึ่งจะอ่านค่าทั้งสองฟิลด์โดยใช้ object request

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: ในที่นี้เรากำลังอ่านค่าพารามิเตอร์โดยใช้ object request เช่น ชื่อผู้ใช้และรหัสผ่าน

Code บรรทัดที่ 25-29: ด้วยวิธีนี้ เราใช้เงื่อนไข "if" เพื่อตรวจสอบว่าชื่อผู้ใช้และรหัสผ่านว่างเปล่าหรือไม่ หากช่องใดช่องหนึ่งว่างเปล่า เราจะได้รับอ็อบเจ็กต์ RequestDispatcher ซึ่งจะส่งการควบคุมกลับไปยัง register_3.jsp พร้อมกับอ็อบเจ็กต์คำขอและคำตอบ

Code บรรทัดที่ 30-34: ส่วนนี้จะทำงานก็ต่อเมื่อทั้งสองค่าไม่ว่างเปล่า จากนั้นจะส่งคำขอไปยัง register_4.jsp พร้อมกับอ็อบเจ็กต์คำขอและคำตอบ

ตัวอย่างที่ 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 แนว: ในที่นี้ เราดึงพารามิเตอร์ “username” จากอ็อบเจ็กต์ request มาเก็บไว้ในอ็อบเจ็กต์ String ชื่อ username วิธีการนี้ใช้ได้ผลเพราะ forward() จะเก็บ request เดิมไว้ ทำให้พารามิเตอร์ต่างๆ ยังคงอยู่ครบถ้วน

Code 13 แนว: เรามีข้อความต้อนรับพร้อมชื่อผู้ใช้อยู่ที่นี่

Code 14 แนว: ตรงนี้คือลิงก์สำหรับออกจากระบบ ซึ่งจะนำผู้ใช้กลับไปยัง register_3.jsp

เมื่อคุณรันโค้ดข้างต้น คุณจะได้ผลลัพธ์ดังต่อไปนี้

Output:

การเปิดไฟล์ register_3.jsp จะแสดงช่องสำหรับป้อนข้อมูลประจำตัวสองช่องและปุ่มเข้าสู่ระบบ

หลังจากคลิกปุ่มเข้าสู่ระบบ คุณจะได้รับข้อความด้านล่างพร้อมลิงก์ออกจากระบบ

การคลิกที่ลิงก์ "ออกจากระบบ" จะนำคุณกลับไปยังหน้าเข้าสู่ระบบดังที่แสดงไว้ที่นี่

หมายเหตุ ตัวอย่างนี้เปรียบเทียบเฉพาะค่าว่างเท่านั้น ดังนั้นชื่อผู้ใช้ที่ไม่ว่างเปล่าจึงได้รับการยอมรับ การเข้าสู่ระบบในระบบใช้งานจริงจะต้องตรวจสอบข้อมูลประจำตัวกับแหล่งเก็บข้อมูลและเก็บรหัสผ่านในรูปแบบแฮช ไม่ใช่ในรูปแบบข้อความธรรมดา

การประมวลผลแบบฟอร์ม JSP โดยใช้ getParameter()

แบบฟอร์มเป็นวิธีการทั่วไปในการรวบรวมข้อมูลในกระบวนการทำงานบนเว็บ เราจำเป็นต้องส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์ จากนั้นจึงอ่านข้อมูลนั้นกลับมาที่ฝั่งเซิร์ฟเวอร์

มีสองวิธีที่ใช้กันทั่วไปในการส่งและรับข้อมูลกลับไปยังเว็บเซิร์ฟเวอร์

รับวิธี:

นี่เป็นวิธีการเริ่มต้นในการส่งข้อมูลจากเบราว์เซอร์ไปยังเว็บเซิร์ฟเวอร์
มันจะส่งข้อมูลที่เข้ารหัสซึ่งต่อท้ายหน้าเว็บ URLคั่นด้วยเครื่องหมาย ?
นอกจากนี้ยังมีข้อจำกัดด้านขนาด โดยทั่วไปคำแนะนำคือประมาณ 1024 ตัวอักษรต่อคำขอ แต่ขีดจำกัดที่แท้จริงนั้นขึ้นอยู่กับเบราว์เซอร์และเซิร์ฟเวอร์มากกว่าข้อกำหนดของ HTTP
เราควรหลีกเลี่ยงการส่งรหัสผ่านและข้อมูลสำคัญผ่านทางเมธอด 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

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 ของอ็อบเจ็กต์ request

เมื่อเรารันโค้ดข้างต้น เราจะได้ผลลัพธ์ดังต่อไปนี้

Output:

ไฟล์ 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 Migration Tool สำหรับ Jakarta EE

คำถามที่พบบ่อย

รายการเหล่านี้มุ่งเป้าไปที่ Tomcat 9 และรุ่นก่อนหน้า ซึ่ง API อยู่ใน javax.servlet Jakarta EE 9 ได้เปลี่ยนชื่อเนมสเปซ ดังนั้น Tomcat 10 และเวอร์ชันใหม่กว่าจึงจำเป็นต้องนำเข้า jakarta.servlet และคอมไพล์ใหม่ หรือใช้เครื่องมือ Tomcat Migration Tool เพื่อดำเนินการ

ห้ามเก็บข้อมูลเป็นข้อความธรรมดาเด็ดขาด ให้ทำการแฮชด้วยอัลกอริทึมที่ช้าและมีการเพิ่มเกลือ (salted algorithm) เช่น BCrypt หรือ Argon2 ก่อนที่จะบันทึกลงฐานข้อมูล และเปรียบเทียบค่าแฮชเมื่อเข้าสู่ระบบ ตัวอย่างเซิร์ฟเล็ตตรวจสอบเฉพาะค่าว่างเท่านั้น ดังนั้นจึงต้องเพิ่มการแฮชเข้าไปด้วย

include() จะเรียกใช้ทรัพยากรเป้าหมายและส่งการควบคุมกลับไปยังเซิร์ฟเล็ตที่เรียกใช้ ดังนั้นผลลัพธ์ทั้งสองจึงปรากฏขึ้น forward() จะส่งคำขอทั้งหมดไปยังเป้าหมายและไม่ส่งกลับมาอีก ดังนั้นเซิร์ฟเล็ตจะต้องยังไม่ได้ยืนยันการตอบกลับก่อน

หน้า JSP เป็นส่วนแสดงผล (View) เซิร์ฟเล็ต (Servlet) เป็นส่วนควบคุม (Controller) ที่อ่านพารามิเตอร์และตัดสินใจว่าจะส่งข้อมูลไปที่ใด และฐานข้อมูลหรือเลเยอร์บีน (Bean Layer) จะเป็นตัวให้ข้อมูลโมเดล (Model) RequestDispatcher เป็นตัวเชื่อมระหว่างส่วนควบคุมและส่วนแสดงผล

ผู้ช่วย AI สามารถร่างเงื่อนไขการตรวจสอบความถูกต้อง ตรวจจับการตรวจสอบค่าว่างที่ขาดหายไปใน getParameter() แนะนำไลบรารีการแฮช และอธิบายสแต็กได้ tracเช่น พิจารณาข้อเสนอแนะทุกอย่างเป็นร่าง: ตรวจสอบเวอร์ชัน API ของเซิร์ฟเล็ตและทดสอบโค้ดที่สร้างขึ้นก่อนเผยแพร่ping มัน

Copilot เก่งเรื่องการเขียนโค้ดซ้ำๆ เช่น doPost stubs, การอ่านค่าพารามิเตอร์ และการเรียกใช้ dispatcher โดยมักจะใช้การนำเข้า javax.servlet รุ่นเก่าเป็นค่าเริ่มต้น ดังนั้นควรตรวจสอบ namespace, ตรรกะการตรวจสอบความถูกต้อง และ esca ให้แน่ใจping จากข้อมูลป้อนเข้าของผู้ใช้ทั้งหมดที่สร้างขึ้น

เพิ่มเลเยอร์ JDBC ในเซิร์ฟเล็ต: เปิดการเชื่อมต่อแบบพูล ใช้ PreparedStatement สำหรับการแทรกข้อมูลหรือการค้นหาข้อมูลรับรอง และปิดทรัพยากรในบล็อก finally เก็บโค้ด SQL ไว้ภายนอก JSP เพื่อให้ส่วนแสดงผลยังคงเป็นเพียงการแสดงผลเท่านั้น

เนื่องจาก guru_login ตรวจสอบเพียงแค่ว่าช่องข้อมูลว่างเปล่าหรือไม่ หากชื่อผู้ใช้หรือรหัสผ่านว่างเปล่า ระบบจะแสดงหน้าเข้าสู่ระบบซ้ำแทนที่จะส่งต่อไปยังหน้าอื่น ซึ่งทำหน้าที่เป็นเพียงการตรวจสอบความถูกต้องอย่างง่าย ๆ เท่านั้น ไม่ใช่การยืนยันตัวตนที่แท้จริง

ตัวอย่างโปรแกรม JSP: แบบฟอร์มลงทะเบียนและเข้าสู่ระบบ

วิธีการสร้างแบบฟอร์มลงทะเบียนใน JSP

วิธีสร้างฟอร์มล็อกอินและล็อกเอาต์ใน JSP

การประมวลผลแบบฟอร์ม JSP โดยใช้ getParameter()

รับวิธี:

วิธีการโพสต์:

คำถามที่พบบ่อย

สรุปโพสต์นี้ด้วย:

ลงทะเบียนเพื่อรับจดหมายข่าว

วิธีการสร้างแบบฟอร์มลงทะเบียนใน JSP

บทความที่เกี่ยวข้อง

วิธีสร้างฟอร์มล็อกอินและล็อกเอาต์ใน JSP

การประมวลผลแบบฟอร์ม JSP โดยใช้ getParameter()

รับวิธี:

วิธีการโพสต์:

คำถามที่พบบ่อย

สรุปโพสต์นี้ด้วย:

ลงทะเบียนเพื่อรับจดหมายข่าว