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

يستخدم هذا الإصدار مكتبة علامات JSTL التي تم عرضها سابقًا.

9.1. مشروع Eclipse

لإنشاء مشروع Eclipse [mvc-personne-04] لتطبيق الويب [/personne4]، قم بنسخ مشروع [mvc-personne-03] باتباع الإجراء الموضح في القسم 6.2 في الصفحة 78.

9.2. تكوين تطبيق الويب [personne4]

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


<?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-04</display-name>
    ...

هذا الملف مطابق للملف الموجود في الإصدار السابق باستثناء السطر 6، حيث تغير اسم العرض لتطبيق الويب إلى [mvc-personne-04].

تتغير الصفحة الرئيسية [index.jsp]:


<%@ 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="/main"/>

السطر 5: تقوم الصفحة [index.jsp] بإعادة توجيه العميل إلى عنوان URL [/main]، الذي يؤدي إلى وحدة التحكم [ServletPersonne] للتطبيق [/personne4]. تنتمي علامة <c:redirect> إلى مكتبة JSTL / Core. وتتميز بخاصية إكمال عنوان URL الخاص بسمة [url] الخاصة بها عن طريق إضافة:
البادئة [/context]، حيث [context] هو سياق التطبيق، وهو في هذه الحالة [personne4].
اللاحقة [?jsessionid=id_session] إذا لم يرسل المتصفح الذي يقوم بالطلب ملف تعريف ارتباط للجلسة. يشير المعرف [jsessionid] إلى معرف رمز الجلسة الذي يرسله خادم الويب إلى عملائه. وهو يعتمد على خادم الويب. هنا، هو خادم Tomcat. [id_session] هو رمز الجلسة نفسه.

وبالتالي، فإن عنوان URL الفعلي لإعادة التوجيه في السطر 5 من [index.jsp] هو عنوان URL [/person4/main?jsessionid=XX]، حيث XX هو رمز الجلسة. يظهر هذا في الصفحة أدناه، التي تم الحصول عليها بعد طلب عنوان URL [http://localhost:8080/personne4] في البداية:

العلاقة بين علامة <c:redirect> ورمز الجلسة دقيقة للغاية. من المبكر جدًا الخوض في تفاصيلها هنا، ولكن ستتاح لنا الفرصة لإعادة النظر فيها لاحقًا.

9.3. كود العرض

9.3.1. عرض [form]

لم يتغير هذا العرض:

يتم إنشاؤه بواسطة صفحة JSP التالية [formulaire.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">
<%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
 
<html>
  <head>
    <title>Personne - formulaire</title>
    <script language="javascript">
...
      </script>
  </head>
  <body>
    <center>
      <h2>Personne - formulaire</h2>
      <hr>
      <form name="frmPersonne" method="post">
        <table>
          <tr>
            <td>Nom</td>
            <td><input name="txtNom" value="${nom}" type="text" size="20"></td>
          </tr>
          <tr>
            <td>Age</td>
            <td><input name="txtAge" value="${age}" type="text" size="3"></td>
          </tr>
          <tr>
        </table>
        <table>
          <tr>
            <td><input type="submit" value="Submit"></td>
            <td><input type="button" value="[Envoyer]" onclick="envoyer()"></td>
            <td><input type="reset" value="Rétablir"></td>
            <td><input type="button" value="[Effacer]" onclick="effacer()"></td>
          </tr>
        </table>
        <input type="hidden" name="action" value="validationFormulaire">
      </form>
    </center>
  </body>
</html>

ما الجديد:

السطر 4: إعلان مكتبة العلامات JSTL / Core
السطران 21 و25: استرداد السمات [name, age] من قالب الصفحة. لاحظ أن البحث عن هذه السمات سيتم بالتتابع في الطلب، والجلسة، وتطبيق صفحة JSP. في حالتنا، سيضعها وحدة التحكم في الجلسة.
لم يعد هناك أي كود Java في بداية صفحة JSP لاسترداد نموذج الصفحة بسبب التنفيذ السابق.

9.3.2. طريقة العرض [response]

لم تتغير طريقة العرض هذه:

صفحة JSP الجديدة [response.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">
<%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
 
<html>
    <head>
      <title>Personne</title>
  </head>
  <body>
      <h2>Personne - réponse</h2>
    <hr>
    <table>
        <tr>
          <td>Nom</td>
        <td>${nom}</td>
      </tr>
        <tr>
          <td>Age</td>
        <td>${age}</td>
      </tr>
    </table>      
    <br>
    <form name="frmPersonne" method="post">
      <input type="hidden" name="action" value="retourFormulaire">
    </form>
    <a href="javascript:document.frmPersonne.submit();">
      ${lienRetourFormulaire}
    </a>
  </body>
</html>

ما الجديد:

السطر 4: إعلان مكتبة العلامات JSTL / Core
الأسطر 16 و20 و28: استرداد السمات [name، age، formSubmitLink] في قالب الصفحة. لم يعد هناك أي كود Java في أعلى صفحة JSP لاسترداد هذه السمات.

9.3.3. عرض [errors]

لم يتغير هذا العرض:

صفحة JSP الجديدة [errors.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">
<%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
 
<html>
    <head>
      <title>Personne</title>
  </head>
  <body>
      <h2>Les erreurs suivantes se sont produites</h2>
    <ul>
            <c:forEach var="erreur" items="${erreurs}">
                <li>${erreur}</li>
            </c:forEach>
    </ul>
    <br>
    <form name="frmPersonne" method="post">
      <input type="hidden" name="action" value="retourFormulaire">
    </form>
    <a href="javascript:document.frmPersonne.submit();">
      ${lienRetourFormulaire}
    </a>
  </body>
</html>

ما الجديد:

السطر 4: إعلان مكتبة العلامات JSTL / Core
الأسطر 13–15: عرض قائمة الأخطاء باستخدام JSTL
لم يعد هناك أي كود Java في أعلى صفحة JSP لاسترداد القالب الخاص بها.

9.4. اختبار العرض

لاختبار طرق العرض السابقة، نقوم بنسخ صفحات JSP الخاصة بها في مجلد /WebContent/JSP التابع لمشروع Eclipse:

ثم، في مجلد JSP، يتم تعديل الصفحات على النحو التالي:

[form.jsp]:


...
<%
  // -- test : on crée le modèle de la page
  session.setAttribute("nom","tintin");
  session.setAttribute("age","30");
%>
 
<html>
  <head>

تمت إضافة السطرين 4 و5 لإنشاء القالب المطلوب للصفحة.

[response.jsp]:


...
<%
  // -- test : on crée le modèle de la page
  request.setAttribute("nom","milou");
  request.setAttribute("age","10");
  request.setAttribute("lienRetourFormulaire","Retour au formulaire");
%>
 
 
<html>
  <head>
 
...

تمت إضافة الأسطر 4-6 لإنشاء القالب المطلوب للصفحة.

[errors.jsp]:


 
<%
  // -- test : on crée le modèle de la page
  ArrayList<String> erreurs1=new ArrayList<String>();
  erreurs1.add("erreur1");
  erreurs1.add("erreur2");
  request.setAttribute("erreurs",erreurs1);
  request.setAttribute("lienRetourFormulaire","Retour au formulaire");
%>
 
<html>
  <head>

تمت إضافة الأسطر 4–8 لإنشاء القالب المطلوب للصفحة.

قم بتشغيل Tomcat إذا لم تكن قد قمت بذلك بعد، ثم اطلب عناوين URL التالية:

نحصل على عدد المشاهدات المتوقع.

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

ستتولى وحدة التحكم [ServletPersonne] الخاصة بتطبيق الويب [/personne3] معالجة الإجراءات التالية:

لا.	الطلب	المصدر	المعالجة
1	[GET /person4/main]	عنوان URL الذي أدخله المستخدم	- إرسال عرض [نموذج] فارغ
2	[POST /person4/hand] مع المعلمات [txtName, txtAge، action=validateForm] تم النشر	انقر على [إرسال] في [form]	- تحقق من قيم معلمات [txtName، txtAge] - إذا كانت غير صحيحة، أرسل عرض [errors(errors)] - إذا كانت صحيحة، أرسل عرض [response(name,age)]
3	[POST /person4/main] مع المعلمات [action=returnForm] تم النشر	انقر على [العودة إلى نموذج] من [الاستجابة] و[الأخطاء].	- إرسال عرض [النموذج] مملوءًا مسبقًا بأحدث القيم المدخلة

هيكل وحدة التحكم [ServletPersonne] مطابق للنسخة السابقة. سنستعرض التغييرات التي تم إجراؤها على الطرق [doInit، doValidationFormulaire، doRetourFormulaire]؛ بينما تظل الطرق [init، doGet، doPost] دون تغيير.

9.5.1. طريقة [doInit]

تتعامل هذه الطريقة مع الطلب رقم 1 [GET /personne4/main]. وفيما يلي شفرة هذه الطريقة:

    // empty form display
    void doInit(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        getServletContext().getRequestDispatcher((String)params.get("urlFormulaire")).forward(
                request, response);
        return;
}

ما الجديد:

السطر 3: يتم عرض طريقة العرض [form]. تتوقع طريقة العرض هذه وجود السمتين "name" و"age" في القالب الخاص بها. ولن تجدهما هناك لأن وحدة التحكم لا توفرهما. في هذه الحالة، ستسترد مكتبة JSTL مؤشرات فارغة لهذه السمات. لا يتسبب هذا في أي أخطاء، وسيتم عرض قيم فارغة لعنصري ${name} و${age} في عرض [form]. هذا يناسبنا. وبذلك نتجنب الحاجة إلى تهيئة نموذج عرض [form].

9.5.2. طريقة [doValidationFormulaire]

تتعامل هذه الطريقة مع الطلب رقم 2 [POST /person4/main] مع [action, txtName, txtAge] في العناصر المرسلة. وفيما يلي شفرة هذه الطريقة:

    // form validation
    void doValidationFormulaire(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException{
                // parameters are retrieved
        String nom = request.getParameter("txtNom");
        String age = request.getParameter("txtAge");
        // stored in the session
        HttpSession session = request.getSession(true);        
        session.setAttribute("nom", nom);
        session.setAttribute("age", age);
        // parameter verification
...
        // parameters are correct - send response page
        request.setAttribute("lienRetourFormulaire", (String)params.get("lienRetourFormulaire"));
        getServletContext().getRequestDispatcher((String)params.get("urlReponse")).forward(request,
                response);
        return;
    }

ما الجديد:

السطر 15: تُرجع الطريقة [doValidationFormulaire] عرض [response]. يحتوي هذا العرض على العناصر [name، age، formReturnLink] في نموذجه. تتم إضافة [formReturnLink] إلى النموذج في السطر 14 عبر الطلب. يتم وضع العناصر [name، age] في النموذج في الأسطر 8-10 عبر الجلسة. في الإصدار السابق، كنا نضع أيضًا العناصر [name، age] في الطلب عند إرسال عرض [response] لأن هذا العرض كان يتوقع وجودها هناك. هنا، مع مكتبة JSTL، نعلم أنه سيتم البحث في السياقات المختلفة (الطلب، الجلسة، التطبيق) للعثور على عناصر النموذج. وبالتالي سيتم العثور عليها في الجلسة لأن وحدة التحكم وضعتها هناك (الأسطر 8-10).

9.5.3. طريقة [doRetourFormulaire]

تقوم هذه الطريقة بمعالجة الطلب رقم 3 [POST /person4/main] مع [action=retourFormulaire] في العناصر المرسلة. وفيما يلي كودها:

    // display pre-filled form
    void doRetourFormulaire(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        // the form is displayed
        getServletContext().getRequestDispatcher((String)params.get("urlFormulaire")).forward(
                request, response);
        return;
    }

ما الجديد:

السطر 4: يتم عرض طريقة العرض [form]. تتوقع طريقة العرض هذه وجود السمتين "name" و"age" في نموذجها. وستجدهما في الجلسة (session) لأن الطريقة [doValidationForm] قد وضعتهما هناك، وهذه الطريقة تُنفَّذ بالضرورة قبل الطريقة [doReturnForm]. لذلك، لا توجد حاجة لتهيئة نموذج [form] قبل عرضه في السطر 4. ونتيجة لذلك، فإن طريقتي [doInit] و [doReturnForm] متطابقتان، ويمكننا إزالة الإجراء [returnForm] واستبداله بالإجراء [init]. وعندئذ ستختفي طريقة [doReturnForm].

9.6. الاختبارات

في هذا الإصدار الجديد، لم تتغير سوى طرق العرض. يبقى وحدة التحكم [ServletPersonne] دون تغيير. لقد سمح لنا استخدام JSTL ببساطة باستخدام النموذج الذي أنشأته وحدة التحكم داخل صفحات JSP بسهولة أكبر.

ابدأ أو أعد تشغيل Tomcat بعد دمج مشروع Eclipse [personne-mvc-04]. اطلب عنوان URL [http://localhost:8080/personne4].