11. تطبيق الويب MVC [person] – الإصدار 6

11.1. مقدمة

في هذا الإصدار، نقوم بإجراء التغيير التالي:

لم يستخدم الإصدار السابق جلسات العمل لتخزين البيانات بين عمليات التبادل بين العميل والخادم. بل استخدم ملفات تعريف الارتباط، مما يعني أن البيانات المراد تخزينها يتم إرسالها إلى العميل من قبل الخادم حتى يتمكن العميل من إعادتها خلال عملية التبادل التالية. في هذا الإصدار الجديد، نستخدم تقنية مشابهة: الحقول المخفية في النماذج. هناك اختلافات بين هاتين التقنيتين:

ملفات تعريف الارتباط	الحقول المخفية
- يضع الخادم العناصر المراد تخزينها في دفق HTTP الذي يسبق مستند HTML.	- يضع الخادم العناصر المراد تخزينها داخل مستند HTML.
- تتطلب هذه التقنية أن يقبل المتصفح ملفات تعريف الارتباط حتى يتمكن من إرسالها مرة أخرى إلى الخادم أثناء طلبات GET أو POST.	- تتطلب هذه التقنية أن تكون جميع طلبات العميل إلى الخادم طلبات POST حتى يتم إرسال الحقول المخفية إلى الخادم.
- يمكن للمستخدم الوصول إلى العناصر المخزنة من خلال عرض ملفات تعريف الارتباط التي يتلقاها متصفحه. توفر معظم المتصفحات هذا الخيار.	- يمكن للمستخدم الوصول إلى البيانات المخزنة من خلال عرض الكود المصدري لمستند HTML المستلم.

يمكن استخدام تقنية الحقول المخفية هنا لأن جميع طلبات العميل هي طلبات POST.

11.2. مشروع Eclipse

لإنشاء مشروع Eclipse [mvc-personne-06] لتطبيق الويب [/personne6]، قم بنسخ المشروع [mvc-personne-05] باتباع الإجراء الموضح في القسم 6.2.

11.3. تكوين تطبيق الويب [personne6]

فيما يلي ملف web.xml الخاص بتطبيق /personne6:


<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
    xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>mvc-personne-06</display-name>
...

هذا الملف مطابق للملف الموجود في الإصدار السابق باستثناء بعض التفاصيل:

السطر 6: تغير اسم العرض لتطبيق الويب إلى [mvc-personne-06]

الصفحة الرئيسية [index.jsp] مطابقة لتلك الموجودة في تطبيق [/personne5]:


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
 
<c:redirect url="/do/formulaire"/>

11.4. كود العرض

لم تتغير سوى طرق العرض [response, errors]. وهي تتضمن الآن حقولًا مخفية في النماذج الخاصة بها، في حين أن هذه النماذج في الإصدار السابق لم تكن ترسل أي معلمات.

[response.jsp]:


...
<html>
...
  <body>
...
    <form name="frmPersonne" action="retourFormulaire" method="post">
      <input type="hidden" name="nom" value="${nom}">
      <input type="hidden" name="age" value="${age}">      
    </form>
    <a href="javascript:document.frmPersonne.submit();">
      ${lienRetourFormulaire}
    </a>
  </body>
</html>

الأسطر 6–9: النموذج الذي سيتم إرساله إلى الخادم عند النقر على الرابط الموجود في الأسطر 10–12
السطر 6: سيكون هدف POST هو [/do/retourFormulaire]
السطران 7 و8: سيتم إرسال الحقول المخفية [name] و[age]. وسيتم تعيين قيمتيهما ${name} و${age} بواسطة وحدة التحكم التي تعرض [response.jsp]. وستكون هذه هي القيم التي تم إدخالها في النموذج.

[errors.jsp]:


...
<html>
...
  <body>
...
    <form name="frmPersonne" action="retourFormulaire" method="post">
      <input type="hidden" name="nom" value="${nom}">
      <input type="hidden" name="age" value="${age}">      
    </form>
    <a href="javascript:document.frmPersonne.submit();">
      ${lienRetourFormulaire}
    </a>
  </body>
</html>

التغييرات والتفسيرات هي نفسها كما في عرض [response.jsp]. لاحظ أن قالب العرض [errors] قد تم توسيعه بعنصرين جديدين [name, age]، اللذين تمت إضافتهما إلى العنصرين الموجودين: [errors, returnToFormLink].

ندعو القراء إلى اختبار هذه العروض الجديدة باتباع النهج المستخدم في الإصدارات السابقة.

11.5. وحدة التحكم [ServletPersonne]

تتشابه وحدة التحكم [ServletPersonne] لتطبيق الويب [/personne6] إلى حد كبير مع تلك الموجودة في الإصدار السابق. تنبع التغييرات من حقيقة أن نموذج عرض [errors] قد تغير. يجب إضافة عنصرين إضافيين: [name, age]. لا تتأثر سوى الطرق التي تعرض هذا العرض. وهذه هي الطرق [doGet] و [doValidateForm].

11.5.1. طريقة [doGet]

فيما يلي كود [doGet]:

    // GET
    @SuppressWarnings("unchecked")
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException, ServletException {

        // check how the servlet was initialized
        if (erreursInitialisation.size() != 0) {
            // we hand over to the error page
            request.setAttribute("erreurs", erreursInitialisation);
            getServletContext().getRequestDispatcher(urlErreurs).forward(
                    request, response);
            // end
            return;
        }
...
    }

في الواقع، يظل هذا الكود كما هو دون تغيير. في الإصدار السابق، لم تكن العناصر [name, age] مدرجة في قالب عرض [errors]. وإذا استمرينا في استبعادها، فسيتم استبدال المتغيرين ${name} و${age} في [errors.jsp] بسلسلة فارغة. وهذا يناسبنا، لأن رابط [العودة إلى النموذج] لا يظهر للمستخدم في هذه الحالة بالذات. في الواقع، نحن لا ندرج أيضًا عنصر [formBackLink] في القالب. سيتم استبدال المتغير ${lienRetourFormulaire} في [erreurs.jsp] بسلسلة فارغة. لذلك، لن يكون هناك رابط، وبالتالي لن تكون هناك طريقة لإرسال الحقول المخفية [name، age] من النموذج في [erreurs.jsp]. وبالتالي، يمكن أن تكون قيمة هذه الحقول هي السلسلة الفارغة.

11.5.2. طريقة [doValidationFormulaire]

فيما يلي كودها:

    // form validation
    void doValidationFormulaire(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException{
        // parameters are retrieved
        String nom = request.getParameter("txtNom");
        String age = request.getParameter("txtAge");
        // prepare the view model [response, errors]
        request.setAttribute("nom",nom);
        request.setAttribute("age",age);        
        request.setAttribute("lienRetourFormulaire", (String)params.get("lienRetourFormulaire"));
        // parameter verification
...

الأسطر 8–10: نمرر العناصر [name, age, formReturnLink] إلى النموذج. ونعلم أن الطريقة تعرض إحدى طرق العرض [response] أو [errors]. وبالتالي، ستحتوي الأخيرة على العناصر [name, age] في نموذجها.

11.6. الاختبارات

ابدأ أو أعد تشغيل Tomcat بعد دمج مشروع Eclipse [person-mvc-06] فيه، ثم اطلب عنوان URL [http://localhost:8080/personne6].