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

ตัวอย่างโปรแกรม jsp

ในบทช่วยสอนนี้ ฉันจะแนะนำคุณเกี่ยวกับการพัฒนาโปรแกรมตัวอย่างด้วย JSP และการใช้งานสถาปัตยกรรม MVC ในบทช่วยสอนนี้

ตัวอย่างโปรแกรมต่อไปนี้จะได้รับการพัฒนา:

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

ใช้แบบฟอร์มลงทะเบียนผ่าน JSP

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

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

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

  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>

คำอธิบายของรหัส:

รหัสบรรทัด 11: ที่นี่เรากำลังใช้ชื่อฟอร์มซึ่งมีการดำเนินการ เช่น เซิร์ฟเล็ตที่คำขอจะถูกประมวลผล และชื่อเซิร์ฟเล็ตคือ guru_register.java คำขอจะได้รับการประมวลผลด้วยวิธี POST

รหัสบรรทัด 14-16: ที่นี่เรากำลังใช้ประเภทอินพุตเป็นข้อความและชื่อคือชื่อ

รหัสบรรทัด 18-20: ที่นี่เรากำลังใช้ประเภทอินพุตเป็นข้อความและชื่อคือนามสกุล

รหัสบรรทัด 22-24: ที่นี่เรากำลังรับประเภทอินพุตเป็นข้อความและชื่อคือชื่อผู้ใช้

รหัสบรรทัด 26-28: ที่นี่เราใช้ประเภทอินพุตเป็นรหัสผ่าน (ซึ่งจะซ่อนรหัสผ่านเมื่อพิมพ์) และตั้งชื่อเป็นรหัสผ่าน

รหัสบรรทัด 30-32: ที่นี่เรากำลังใช้ประเภทอินพุตเป็นข้อความและชื่อเป็นที่อยู่

รหัสบรรทัด 34-36: ที่นี่เรากำลังใช้ประเภทอินพุตเป็นข้อความและชื่อเป็นผู้ติดต่อ

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

รหัสบรรทัด 20-25: ที่นี่เรากำลังดึงค่าจากคำขอ i.efirst_name, Last_name , ชื่อผู้ใช้, รหัสผ่าน, ที่อยู่ และผู้ติดต่อ โดยใช้ request.getParameter

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

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

การใช้แบบฟอร์มลงทะเบียนผ่าน JSP

การใช้แบบฟอร์มลงทะเบียนผ่าน JSP

Output:

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

รหัสบรรทัด 17-20: ที่นี่เรากำลังใส่ช่องป้อนข้อมูล "รหัสผ่าน" ซึ่งเป็นรหัสผ่านประเภท

รหัสบรรทัด 22: ที่นี่เราใช้ปุ่ม "ส่ง" พร้อมค่า "เข้าสู่ระบบ" ที่เราคลิก จากนั้นไปที่ servlet 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 servlet ซึ่งขยาย HttpServlet

รหัสบรรทัด 21: ที่นี่เรากำลังใช้ doPost() วิธีการเหมือนในรูปเราใช้วิธี POST

รหัสบรรทัด 23-24: ที่นี่เราใช้พารามิเตอร์โดยใช้วัตถุคำขอเช่นชื่อผู้ใช้และรหัสผ่าน

รหัสบรรทัด 25-29: ด้วยวิธีนี้ เรากำลังใช้เงื่อนไข "ถ้า" โดยที่เรากำลังตรวจสอบชื่อผู้ใช้และรหัสผ่านว่าว่างเปล่าหรือไม่ ในกรณีนี้ ถ้ามันว่างเปล่า เราก็จะได้รับอ็อบเจ็กต์ 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: ที่นี่เราได้รับพารามิเตอร์ "ชื่อผู้ใช้" จากวัตถุคำขอในชื่อผู้ใช้วัตถุสตริง

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

รหัสบรรทัด 14: ที่นี่เราเชื่อมโยงเพื่อออกจากระบบแบบฟอร์มซึ่งเปลี่ยนเส้นทางไปที่ register_3.jsp

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

Output:

ที่นี่เมื่อเราคลิกที่ register_3.jsp เราจะได้สองช่องคือ "ชื่อผู้ใช้" และ "รหัสผ่าน" พร้อมปุ่มเข้าสู่ระบบ

แบบฟอร์มเข้าสู่ระบบและออกจากระบบ

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

แบบฟอร์มเข้าสู่ระบบและออกจากระบบ

เมื่อคุณคลิกที่ปุ่มออกจากระบบ คุณจะกลับไปที่หน้าเข้าสู่ระบบ

แบบฟอร์มเข้าสู่ระบบและออกจากระบบ

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

การประมวลผลแบบฟอร์ม JSP:

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

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

รับวิธี:

  • นี่เป็นวิธีการเริ่มต้นในการส่งข้อมูลจากเบราว์เซอร์ไปยังเว็บเซิร์ฟเวอร์
  • โดยจะส่งข้อมูลที่เข้ารหัสโดยคั่นด้วย ?อักขระต่อท้ายหน้า URL
  • นอกจากนี้ยังมีข้อจำกัดด้านขนาด และเราสามารถส่งคำขอได้เพียง 1024 อักขระเท่านั้น
  • เราควรหลีกเลี่ยงการส่งรหัสผ่านและข้อมูลที่ละเอียดอ่อนด้วยวิธี GET

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

  • วิธีการโพสต์เป็นวิธีการที่เชื่อถือได้มากที่สุดในการส่งข้อมูลไปยังเซิร์ฟเวอร์
  • โดยจะส่งข้อมูลเป็นข้อความแยกต่างหาก
  • โดยจะส่งเป็นสตริงข้อความหลัง ? ใน 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

รหัสบรรทัด 10: ที่นี่เราได้กำหนดแบบฟอร์มและโดยที่เราได้ดำเนินการดำเนินการกับผู้อื่น JSP- ในพารามิเตอร์การกระทำ เราจะเพิ่ม JSP ที่จะต้องประมวลผลด้วยวิธี GET

ที่นี่เราใช้วิธี GET เพื่อส่งข้อมูลเช่นชื่อผู้ใช้และรหัสผ่าน

รหัสบรรทัด 11-14: ที่นี่เรากำลังใส่ช่องต่างๆ เช่น ชื่อผู้ใช้และรหัสผ่าน ซึ่งเป็นช่องข้อความ และเรากำลังรับข้อมูลจากผู้ใช้

อินพุตนี้สามารถดึงข้อมูลได้โดยใช้วิธี getParameter นอกจากนี้เรายังมีปุ่มส่งประเภทการส่งซึ่งช่วยให้เราส่งค่าฟิลด์ไปยัง action_form_process.jsp

Action_form_process.jsp

รหัสบรรทัด 14: ที่นี่เราได้รับค่าของฟิลด์อินพุตจาก action_form.jsp โดยใช้เมธอด getParameter ของออบเจ็กต์คำขอ

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

การประมวลผลแบบฟอร์ม JSP

การประมวลผลแบบฟอร์ม JSP

Output:

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