ตัวอย่างโปรแกรม 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: ที่นี่เรากำลังรับปุ่มประเภทส่งและค่าก็ส่งด้วย เมื่อคลิกปุ่มนี้ การดำเนินการจะไปที่เซิร์ฟเล็ต 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 นี้จะถูกเรียกเมื่อมีการกรอกพารามิเตอร์ทั้งหมด
เมื่อคุณรันโค้ดข้างต้น คุณจะได้รับผลลัพธ์ต่อไปนี้:
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 จัดการการประมวลผลข้อมูลแบบฟอร์มโดยใช้วิธีการดังต่อไปนี้:
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 นอกจากนี้เรายังมีปุ่มส่งประเภทการส่งซึ่งช่วยให้เราส่งค่าฟิลด์ไปยัง action_form_process.jsp
Action_form_process.jsp
รหัสบรรทัด 14: ที่นี่เราได้รับค่าของฟิลด์อินพุตจาก action_form.jsp โดยใช้เมธอด getParameter ของออบเจ็กต์คำขอ
เมื่อเรารันโค้ดข้างต้น เราจะได้ผลลัพธ์ดังต่อไปนี้:
Output:
เมื่อเรารัน action_form.jsp เราจะได้แบบฟอร์มที่มีชื่อผู้ใช้และรหัสผ่านสองช่อง และปุ่มส่ง จากนั้นหลังจากป้อนชื่อผู้ใช้และรหัสผ่าน เราก็สามารถคลิกที่ส่ง และมันจะประมวลผลไปยังหน้าถัดไปซึ่งให้ผลลัพธ์เป็นหน้าประมวลผลแบบฟอร์มพร้อมกับ ข้อความต้อนรับ