أمثلة على برنامج JSP: نموذج التسجيل وتسجيل الدخول
⚡ ملخص ذكي
تقوم أمثلة برامج JSP هنا ببناء ثلاث وحدات - نموذج تسجيل، ونموذج تسجيل دخول وخروج، وصفحة معالجة النموذج - كل منها يربط عرض JSP بوحدة تحكم servlet بحيث يظل تقسيم MVC مرئيًا للمبتدئين.
توضح هذه الأمثلة العملية كيفية تطوير برامج نموذجية باستخدام JSP وكيفية تطبيق بنية MVC عليها. يتم بناء ثلاث وحدات بالترتيب التالي:
- استمارة التسجيل
- نموذج تسجيل الدخول والخروج
- نموذج جي إس بي
كيفية إنشاء نموذج تسجيل في 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: هنا نأخذ نوع الإدخال كنص والاسم هو الاسم الأول.
Code السطر 18-20: هنا نأخذ نوع الإدخال كنص والاسم هو اسم العائلة.
Code السطر 22-24: هنا نأخذ نوع الإدخال كنص والاسم هو اسم المستخدم.
Code السطر 26-28: هنا نأخذ نوع الإدخال ككلمة مرور (وهذا يخفي كلمة المرور أثناء كتابتها) والاسم ككلمة مرور.
Code السطر 30-32: هنا نأخذ نوع الإدخال كنص والاسم كعنوان.
Code السطر 34-36: هنا نأخذ نوع الإدخال كنص والاسم كجهة اتصال.
Code خط 37: هنا نستخدم زرًا من نوع "إرسال" وقيمته هي "إرسال". عند النقر على هذا الزر، ينتقل الإجراء إلى خادم 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: هنا نقوم بتعريف servlet guru_register، الذي يمتد من HttpServlet.
Code خط 18: هذه هي طريقة doPost()، والتي يتم استدعاؤها عندما نحدد POST كخاصية طريقة في نموذج JSP أعلاه.
Code السطر 20-25: هنا نقوم بجلب القيم من الطلب، أي الاسم الأول، والاسم الأخير، واسم المستخدم، وكلمة المرور، والعنوان، ومعلومات الاتصال، باستخدام request.getParameter.
Code السطر 27-32: نستخدم هنا شرطًا شرطيًا للتحقق مما إذا كانت أي من المعلمات المُسترجعة من الطلب فارغة. إذا كانت أي معلمة فارغة، ينتقل التحكم إلى هذا الشرط (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 هذه عند ملء جميع المعلمات.
عند تنفيذ الكود أعلاه، ستحصل على الإخراج التالي.
الإخراج:
تعرض صفحة التسجيل الحقول الستة الموسومة بزر إرسال واحد، كما هو موضح أدناه.
بمجرد ملء جميع الحقول والنقر على زر الإرسال، يتم توجيه المستخدم إلى ملف 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: هنا نستخدم نموذجًا يتم تنفيذه بواسطة servlet guru_login.java. ويتم تمرير البيانات عبر طريقة POST.
Code السطر 13-16: هنا نأخذ حقل إدخال "اسم المستخدم"، وهو من نوع نص.
Code السطر 17-20: هنا نأخذ حقل إدخال "كلمة المرور"، وهو من نوع كلمة المرور.
Code خط 22: هنا نأخذ زر "إرسال" بقيمة "تسجيل الدخول". عند النقر عليه، ينتقل التحكم إلى servlet guru_login، حيث تتم قراءة كلا الحقلين باستخدام كائن الطلب.
مثال 2: 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); } } }
شرح الكود:
Code السطر 5-9: هنا نقوم باستيراد الفئات الضرورية إلى الكود.
Code خط 14: هنا نقوم بتعريف servlet guru_login، الذي يمتد من HttpServlet.
Code خط 21: هنا نستخدم طريقة doPost()، لأن النموذج يستخدم طريقة POST.
Code السطر 23-24: هنا نقوم بقراءة المعلمات باستخدام كائن الطلب، أي اسم المستخدم وكلمة المرور.
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" من كائن الطلب إلى كائن السلسلة النصية username. ينجح هذا لأن الدالة forward() تحافظ على الطلب الأصلي، وبالتالي على معاملاته، كما هي.
Code خط 13: هنا لدينا رسالة ترحيب مع اسم المستخدم.
Code خط 14: هنا لدينا رابط تسجيل الخروج، والذي يعيد المستخدم إلى register_3.jsp.
عند تنفيذ الكود أعلاه، ستحصل على الإخراج التالي.
الإخراج:
يؤدي فتح ملف 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في خاصية الإجراء، نضيف صفحة JSP التي يجب إرسال النموذج إليها من خلال طريقة GET.
هنا نستخدم طريقة GET لتمرير المعلومات، أي اسم المستخدم وكلمة المرور.
Code السطر 11-14: هنا نقوم بأخذ حقول مثل اسم المستخدم وكلمة المرور، وهي حقول نصية، ونحصل على المدخلات من المستخدم.
يمكن جلب هذه البيانات المدخلة باستخدام دالة getParameter. كما يوجد زر إرسال يقوم بتمرير قيم الحقول إلى ملف action_form_process.jsp.
Action_form_process.jsp
Code خط 14: هنا نحصل على قيم حقول الإدخال من action_form.jsp باستخدام طريقة getParameter الخاصة بكائن الطلب.
عند تنفيذ الكود أعلاه، نحصل على المخرجات التالية.
الإخراج:
يقوم ملف 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 لـ Jakarta EE.







