إنشاء تطبيق ويب بسيط باستخدام servlets وjsp (الجزء الثاني)

إنشاء تطبيق ويب بسيط باستخدام servlets وjsp (الجزء الأول) مستوى المعرفة المطلوب لفهم المقالة: لقد فهمت Java Core بشكل أو بآخر وترغب في الاطلاع على تقنيات JavaEE وبرمجة الويب. يكون الأمر أكثر منطقية إذا كنت تدرس حاليًا مهمة Java Collections، والتي تغطي موضوعات قريبة من المقالة.

إنشاء الكيانات

في حزمة الكيانات ، سنقوم بإنشاء فئة User ، وفيها سيكون هناك متغيرين من سلسلة خاصة هما الاسم وكلمة المرور . لنقم بإنشاء مُنشئات (افتراضية تقبل كلا القيمتين)، وحروف/محددات، وتجاوز طريقة toString() في حالة حدوث ذلك، بالإضافة إلى طريقتي يساوي() و hashCode() . أي أننا سنفعل كل ما يفعله مطور Java اللائق عند إنشاء فصل دراسي.

public class User {
    private String name;
    private String password;

    public User() {
    }

    public User(String name, String password) {
        this.name = name;
        this.password = password;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", password='" + password + '\'' +
                '}';
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;

        User user = (User) o;

        if (name != null ? !name.equals(user.name) : user.name != null) return false;
        return password != null ? password.equals(user.password) : user.password == null;

    }

    @Override
    public int hashCode() {
        int result = name != null ? name.hashCode() : 0;
        result = 31 * result + (password != null ? password.hashCode() : 0);
        return result;
    }
}

الآن يمكننا البدء في إنشاء قائمة المستخدمين. سنضيف المستخدمين إليه، ومن أين سنأخذهم للعرض. ومع ذلك، هناك مشكلة واحدة. نحن لا نقوم بإنشاء كائنات servlet الخاصة بنا، بل يقوم Tomcat بذلك نيابةً عنا . إن الطرق التي نتجاوزها فيها محددة أيضًا بالنسبة لنا، ولا يمكننا إضافة معلمة. كيف إذن يمكننا إنشاء قائمة مشتركة تكون مرئية لكل من servlets لدينا؟ إذا قمنا ببساطة بإنشاء كائن قائمة خاص بنا في كل servlet، فسيتبين أننا سنضيف مستخدمين إلى قائمة واحدة، ونعرض قائمة المستخدمين الذين يستخدمون ListServlet servlet إلى قائمة أخرى. اتضح أننا بحاجة إلى كائن مشترك بين كل من servlets. بشكل عام، نحن بحاجة إلى كائن يكون مشتركًا بين جميع الفئات في برنامجنا؛ الكائن الوحيد للبرنامج بأكمله. أتمنى أن تكون قد سمعت شيئًا عن أنماط التصميم. وربما بالنسبة للبعض، هذه هي الحاجة الحقيقية الأولى لاستخدام نمط Singleton في برنامجهم. يمكنك الانحراف وإنشاء بعض Singleton الرائعة من خلال عمليات التحقق المزدوجة والمزامنة (نعم، لدينا تطبيق متعدد الخيوط، نظرًا لأن Tomcat يقوم بتشغيل servlets في سلاسل رسائل مختلفة)، لكنني سأستخدم الخيار مع التهيئة المبكرة، لأنه مناسب تمامًا هنا يكفي ويناسب أغراضنا.

إنشاء نموذج

دعونا ننشئ فئة (وننفذ نمط Singleton فيها ) في حزمة النموذج ونسميها شيئًا غير عادي. دعنا نقول نموذج . دعونا ننشئ كائن قائمة مستخدمين خاصًا في فصلنا ونطبق طريقتين: إحداهما حتى نتمكن من إضافة مستخدم، والثانية لإرجاع قائمة السلاسل (أسماء المستخدمين). نظرًا لأن كائن المستخدم الخاص بنا يتكون من اسم وكلمة مرور، ولا نرغب في "الكشف" عن كلمات مرور المستخدم، فسيكون لدينا فقط قائمة بالأسماء.

public class Model {
    private static Model instance = new Model();

    private List<User> model;

    public static Model getInstance() {
        return instance;
    }

    private Model() {
        model = new ArrayList<>();
    }

    public void add(User user) {
        model.add(user);
    }

    public List<String> list() {
        return model.stream()
                .map(User::getName)
                .collect(Collectors.toList());
    }
}

قليلا عن MVC

نظرًا لأنك سمعت عن Singleton ، فمن المحتمل أنك سمعت عن نمط تصميم آخر - MVC (وحدة تحكم عرض النموذج، باللغة الروسية، وحدة تحكم عرض النموذج، أو تمامًا كما هو الحال في وحدة تحكم عرض النموذج باللغة الإنجليزية). جوهرها هو فصل منطق العمل عن العرض. أي افصل الكود الذي يحدد ما يجب فعله عن الكود الذي يحدد كيفية العرض. العرض (العرض أو المشاهدات ببساطة) هو المسؤول عن النموذج الذي يتم به تقديم بعض البيانات. في حالتنا، المشاهدات هي صفحات JSP الخاصة بنا. ولهذا السبب وضعتهم في مجلد يسمى طرق العرض . النموذج هو البيانات الفعلية التي يعمل بها البرنامج. في حالتنا، هؤلاء هم المستخدمون (قائمة المستخدمين). حسنًا، وحدات التحكم هي الرابط بينهما. يأخذون البيانات من النموذج ويمررونها إلى طرق العرض (أو يتلقون بعض البيانات من Tomcat ويعالجونها ويمررونها إلى النموذج). يجب وصف منطق الأعمال (ما يجب أن يفعله البرنامج بالضبط) فيها، وليس في النموذج أو في العرض. وهكذا، كل شخص يفعل ما يريده:

• يقوم النموذج بتخزين البيانات؛
• وجهات النظر رسم تمثيل جميل للبيانات؛
• وحدات التحكم تتعامل مع معالجة البيانات.

يتيح ذلك للبرنامج أن يكون بسيطًا إلى حدٍ ما وقابلاً للصيانة، بدلاً من تفريغ هائل لكل التعليمات البرمجية في فئة واحدة. MVC مناسب ليس فقط لبرمجة الويب، ولكنه موجود في هذا المجال بشكل خاص (دائمًا تقريبًا). في حالتنا، ستعمل servlets كوحدات تحكم. هذا وصف سطحي ومختصر للغاية للنمط، لكن MVC ليس هو الموضوع الرئيسي لهذه المقالة. من يريد معرفة المزيد - جوجل للإنقاذ! إنشاء نموذج لإضافة مستخدم لنضيف إلى ملف add.jsp نموذجًا يتكون من حقلين لإدخال النص (أحدهما عادي والآخر كلمة المرور) وزر لإرسال البيانات إلى الخادم.

<form method="post">
    <label>Name:
        <input type="text" name="name"><br />
    </label>

    <label>Password:
        <input type="password" name="pass"><br />
    </label>
    <button type="submit">Submit</button>
</form>

يحتوي النموذج هنا على سمة أسلوب ذات قيمة post . وهذا يعني أنه سيتم إرسال البيانات من هذا النموذج إلى الخادم في شكل طلب POST. لم يتم تحديد سمة الإجراء ، مما يعني أنه سيتم إرسال الطلب إلى نفس العنوان الذي ذهبنا إليه في هذه الصفحة ( /add ). وبالتالي، فإن servlet الخاص بنا، المرتبط بهذا العنوان، عند تلقي طلب GET، يقوم بإرجاع jsp هذا مع نموذج إضافة المستخدمين، وإذا تلقى طلب POST، فهذا يعني أن النموذج أرسل بياناته هناك (والتي سنسحبها من كائن طلب في طريقة doPost() تجدر الإشارة إلى أن حقول الإدخال لها معلمة اسم (بالنسبة للحقل الذي يحمل اسمًا، فإنه يحتوي على اسم القيمة، وبالنسبة للحقل الذي يحتوي على كلمة مرور، فإنه يحتوي على القيمة pass ). هذه نقطة مهمة جدًا. نظرًا لأنه من أجل الحصول على هذه البيانات (الاسم وكلمة المرور التي سيتم إدخالها) من الطلب (الموجود بالفعل داخل servlet)، فسوف نستخدم هذا الاسم بالضبط ونمرر . ولكن أكثر عن ذلك لاحقا. يتم إنشاء زر إرسال البيانات نفسه مرة أخرى على شكل زر ، وليس كحقل إخراج، كما هو معتاد عادةً. لا أعرف مدى عالمية هذا الخيار، لكنه يعمل بالنسبة لي (متصفح Chrome).

معالجة طلب POST باستخدام servlet

دعنا نعود إلى AddServlet servlet . اسمحوا لي أن أذكرك: لكي يتمكن servlet الخاص بنا من "التقاط" طلبات GET، قمنا بتجاوز طريقة doGet() من فئة HttpServlet . لتعليم servlet الخاص بنا كيفية التقاط طلبات POST أيضًا، نحتاج أيضًا إلى تجاوز طريقة doPost() . يتلقى كائنات طلب واستجابة مماثلة من Tomcat ، والتي سنعمل معها. أولاً، دعنا نستخرج من الطلب الاسم ونمرر المعلمات التي أرسلها النموذج (إذا قمت بتسميتها بشكل مختلف في النموذج، فهذه هي الأسماء التي تكتبها). بعد ذلك، سنقوم بإنشاء كائن المستخدم الخاص بنا باستخدام البيانات المستلمة. بعد ذلك سوف نحصل على كائن النموذج ونضيف المستخدم الذي تم إنشاؤه إلى النموذج.

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    String name = req.getParameter("name");
    String password = req.getParameter("pass");
    User user = new User(name, password);
    Model model = Model.getInstance();
    model.add(user);
}

تمرير البيانات للعرض

دعنا ننتقل إلى ListServlet servlet . لقد تم بالفعل تنفيذ طريقة doGet() هنا ، والتي تنقل التحكم ببساطة إلى عرض list.jsp . إذا لم يكن لديك هذا بعد، قم بذلك عن طريق القياس بنفس الطريقة من AddServlet servlet . الآن سيكون من الجيد الحصول على قائمة بأسماء المستخدمين من النموذج وتمريرها إلى العرض، الذي سيستقبلها ويعرضها بشكل جيد. للقيام بذلك، سنستخدم مرة أخرى كائن الطلب الذي تلقيناه من Tomcat . يمكننا إضافة سمة إلى هذا الكائن، وإعطائه اسمًا ما، وفي الواقع، الكائن نفسه، الذي نود نقله لعرضه . نظرًا لحقيقة أنه عند نقل عملية التنفيذ من servlet إلى طريقة عرض، فإننا نمرر هناك نفس كائنات الطلب والاستجابة التي تلقاها servlet نفسه، ثم عن طريق إضافة قائمة الأسماء الخاصة بنا إلى كائن الطلب، يمكننا بعد ذلك من هذا الطلب الكائن في العرض، قم بإنشاء قائمة بأسماء المستخدمين واحصل على. لقد انتهينا من فئة ListServlet ، وإليك رمز الفصل بأكمله:

package app.servlets;

import app.model.Model;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

public class ListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Model model = Model.getInstance();
        List<String> names = model.list();
        req.setAttribute("userNames", names);

        RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/list.jsp");
        requestDispatcher.forward(req, resp);
    }
}

تنفيذ كود جافا في ملفات jsp

لقد حان الوقت لبدء العمل على ملف list.jsp . سيتم تنفيذه فقط عندما يقوم ListServlet بتمرير عملية التنفيذ هنا. بالإضافة إلى ذلك، في هذا servlet قمنا بالفعل بإعداد قائمة بأسماء المستخدمين من النموذج وقمنا بتمريرها هنا في كائن الطلب. وبما أن لدينا قائمة بالأسماء، فيمكننا تصفحها وطباعة كل اسم. كما قلت من قبل، يمكن لملفات jsp تنفيذ تعليمات برمجية Java (وهذا ما يجعلها مختلفة عن صفحات HTML الثابتة). من أجل تنفيذ بعض التعليمات البرمجية، يكفي وضع البناء التالي في المكان الذي نحتاجه:

<!-- html code -->
<%
    // java code
%>
<!-- html code -->

داخل هذا البناء لدينا إمكانية الوصول إلى عدة متغيرات:

• الطلب هو كائن الطلب الخاص بنا، والذي مررناه من servlet، حيث كان يسمى ببساطة req ؛
• الاستجابة - كائن الاستجابة، يسمى resp في servlet ؛

• out هو كائن من النوع JspWriter (موروث من الكاتب المعتاد )، والذي يمكننا من خلاله "كتابة" شيء ما مباشرة في صفحة html نفسها. الإدخال out.println("Hello World!") يشبه إلى حد كبير الإدخال System.out.println("Hello World!") ، لكن لا تخلط بين الاثنين!
  out.println() "يكتب" إلى صفحة html، ويكتب System.out.println إلى مخرجات النظام. إذا قمت باستدعاء طريقة jsp System.out.println() داخل القسم الذي يحتوي على كود Java ، فسترى النتائج في وحدة تحكم Tomcat ، وليس على الصفحة.

يمكنك البحث عن الكائنات الأخرى المتوفرة داخل jsp هنا . باستخدام كائن الطلب ، يمكننا الحصول على قائمة الأسماء التي تم تمريرها من servlet (أرفقنا السمة المقابلة لهذا الكائن)، وباستخدام الكائن out ، يمكننا عرض هذه الأسماء. لنفعل هذا (في الوقت الحالي فقط في شكل قائمة html):

<ul>
    <%
        List<String> names = (List<String>) request.getAttribute("userNames");

        if (names != null && !names.isEmpty()) {
            for (String s : names) {
                out.println("<li>" + s + "</li>");
            }
        }
    %>
</ul>

إذا كنت بحاجة إلى عرض القائمة فقط في حالة وجود مستخدمين، وبخلاف ذلك عرض تحذير بعدم وجود مستخدمين حتى الآن، فيمكننا إعادة كتابة هذا القسم قليلاً:

<%
    List<String> names = (List<String>) request.getAttribute("userNames");

    if (names != null && !names.isEmpty()) {
        out.println("<ui>");
        for (String s : names) {
            out.println("<li>" + s + "</li>");
        }
        out.println("</ui>");
    } else out.println("<p>There are no users yet!</p>");
%>

الآن بعد أن أصبح بإمكاننا تمرير البيانات من servlets إلى طرق العرض، يمكننا تحسين AddServlet قليلاً بحيث يتم عرض إشعار عند إضافة مستخدم بنجاح. للقيام بذلك، في طريقة doPost() ، بعد إضافة مستخدم جديد إلى النموذج، يمكننا إضافة اسم هذا المستخدم إلى سمات كائن req وتمرير التحكم مرة أخرى إلى عرض add.jsp . وفيه، قم بالفعل بإنشاء قسم يحتوي على كود Java، حيث يتم إجراء فحص لمعرفة ما إذا كانت هذه السمة موجودة في الطلب، وإذا كان الأمر كذلك، فقم بإخراج رسالة تفيد بأنه تمت إضافة المستخدم بنجاح. بعد هذه التغييرات، سيبدو رمز AddServlet servlet الكامل كما يلي:

package app.servlets;

import app.entities.User;
import app.model.Model;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AddServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/add.jsp");
        requestDispatcher.forward(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        String password = req.getParameter("pass");
        User user = new User(name, password);
        Model model = Model.getInstance();
        model.add(user);

        req.setAttribute("userName", name);
        doGet(req, resp);
    }
}

هنا، في نهاية طريقة doPost() ، قمنا بتعيين سمة مع إضافة اسم المستخدم إلى النموذج، وبعد ذلك نسمي طريقة doGet() ، والتي نمرر إليها الطلب والاستجابة الحاليين. وتقوم طريقة doGet() بالفعل بنقل التحكم إلى العرض، حيث ترسل كائن طلب مع إرفاق اسم المستخدم المضاف كسمة. كل ما تبقى هو تصحيح add.jsp بحيث يعرض مثل هذا الإشعار في حالة وجود هذه السمة. ملف add.jsp النهائي هو :

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Add new user</title>
    </head>

    <body>
        <div>
            <h1>Super app!</h1>
        </div>

        <div>
            <%
                if (request.getAttribute("userName") != null) {
                    out.println("<p>User '" + request.getAttribute("userName") + "' added!</p>");
                }
            %>
            <div>
                <div>
                    <h2>Add user</h2>
                </div>

                <form method="post">
                    <label>Name:
                        <input type="text" name="name"><br />
                    </label>
                    <label>Password:
                        <input type="password" name="pass"><br />
                    </label>
                    <button type="submit">Submit</button>
                </form>
            </div>
        </div>

        <div>
            <button onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>

يتكون جسم الصفحة من:

• div-a مع رأس؛
• حاوية div للمحتوى، تتحقق من وجود سمة تحمل اسم المستخدم؛
• div مع نموذج لإضافة المستخدمين؛
• وفي النهاية يوجد تذييل به زر للعودة إلى الصفحة الرئيسية.

قد يبدو أن هناك عددًا كبيرًا جدًا من divs، ولكننا سنستخدمها لاحقًا عندما نضيف الأنماط. القائمة النهائية .jsp هي:

<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Users</title>
    </head>

    <body>
        <div>
            <h1>Super app!</h1>
        </div>

        <div>
            <div>
                <div>
                    <h2>Users</h2>
                </div>
                <%
                    List<String> names = (List<String>) request.getAttribute("userNames");

                    if (names != null && !names.isEmpty()) {
                        out.println("<ui>");
                        for (String s : names) {
                            out.println("<li>" + s + "</li>");
                        }
                        out.println("</ui>");
                    } else out.println("<p>There are no users yet!</p>");
                %>
            </div>
        </div>

        <div>
            <button onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>

وبالتالي، لدينا تطبيق ويب يعمل بكامل طاقته ويمكنه تخزين المستخدمين وإضافتهم، بالإضافة إلى عرض قائمة بأسمائهم. كل ما تبقى هو تزيينها..:)

إضافة الأنماط. نحن نستخدم إطار عمل W3.CSS

في الوقت الحالي، تطبيقنا يعمل، ولكنه مجنون تمامًا. لذلك، سنقوم بإضافة خلفية ولون النص والأزرار وقوائم الأنماط وإجراء المحاذاة وإضافة المسافات البادئة وما شابه. إذا قمت بكتابة الأنماط يدويًا، فقد يستغرق الأمر الكثير من الوقت والأعصاب. لذلك، أقترح استخدام إطار عمل W3.CSS CSS. يحتوي بالفعل على فئات جاهزة مع الأنماط، كل ما تبقى هو وضع فئات CSS التي نريد تطبيقها في الأماكن الصحيحة. لإضافتها إلى صفحاتنا، سنقوم أولاً بتضمين ملف يحتوي على الأنماط. ويمكن أن يتم ذلك بطريقتين:

1. تصفح صفحاتنا وفي القسم الرئيسي أدخل رابطًا مباشرًا للملف الذي يحتوي على الأنماط

   <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

   هذا الخيار مناسب إذا كان لديك اتصال دائم بالإنترنت. وبعد ذلك، عندما تفتح صفحاتك على خادم محلي، سيتم سحب الأنماط من الإنترنت.




2. إذا كنت تريد الحصول على جميع الأنماط محليًا وعدم الاعتماد على اتصال بالإنترنت، فقم بتنزيل الملف الذي يحتوي على الأنماط وضعه في مكان ما داخل مجلد الويب (على سبيل المثال، web/styles/w3.css )، ثم انتقل إلى كل ما لدينا الصفحات ( index.html، add.jsp، list.jsp ) وأدخل رابطًا لهذا الملف مع الأنماط داخل قسم الرأس

   <link rel="stylesheet" href="styles/w3.css">

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

Index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Super app!</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body class="w3-light-grey">
        <div class="w3-container w3-blue-grey w3-opacity w3-right-align">
            <h1>Super app!</h1>
        </div>

        <div class="w3-container w3-center">
            <div class="w3-bar w3-padding-large w3-padding-24">
                <button class="w3-btn w3-hover-light-blue w3-round-large" onclick="location.href='/list'">List users</button>
                <button class="w3-btn w3-hover-green w3-round-large" onclick="location.href='/add'">Add user</button>
            </div>
        </div>
    </body>
</html>

add.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Add new user</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body class="w3-light-grey">
        <div class="w3-container w3-blue-grey w3-opacity w3-right-align">
            <h1>Super app!</h1>
        </div>

        <div class="w3-container w3-padding">
            <%
                if (request.getAttribute("userName") != null) {
                    out.println("<div class=\"w3-panel w3-green w3-display-container w3-card-4 w3-round\">\n" +
                            "   <span onclick=\"this.parentElement.style.display='none'\"\n" +
                            "   class=\"w3-button w3-margin-right w3-display-right w3-round-large w3-hover-green w3-border w3-border-green w3-hover-border-grey\">×</span>\n" +
                            "   <h5>User '" + request.getAttribute("userName") + "' added!</h5>\n" +
                            "</div>");
                }
            %>
            <div class="w3-card-4">
                <div class="w3-container w3-center w3-green">
                    <h2>Add user</h2>
                </div>
                <form method="post" class="w3-selection w3-light-grey w3-padding">
                    <label>Name:
                        <input type="text" name="name" class="w3-input w3-animate-input w3-border w3-round-large" style="width: 30%"><br />
                    </label>
                    <label>Password:
                        <input type="password" name="pass" class="w3-input w3-animate-input w3-border w3-round-large" style="width: 30%"><br />
                    </label>
                    <button type="submit" class="w3-btn w3-green w3-round-large w3-margin-bottom">Submit</button>
                </form>
            </div>
        </div>

        <div class="w3-container w3-grey w3-opacity w3-right-align w3-padding">
            <button class="w3-btn w3-round-large" onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>

list.jsp

<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Users list</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body class="w3-light-grey">
        <div class="w3-container w3-blue-grey w3-opacity w3-right-align">
            <h1>Super app!</h1>
        </div>

        <div class="w3-container w3-center w3-margin-bottom w3-padding">
            <div class="w3-card-4">
                <div class="w3-container w3-light-blue">
                    <h2>Users</h2>
                </div>
                <%
                    List<String> names = (List<String>) request.getAttribute("userNames");

                    if (names != null && !names.isEmpty()) {
                        out.println("<ul class=\"w3-ul\">");
                        for (String s : names) {
                            out.println("<li class=\"w3-hover-sand\">" + s + "</li>");
                        }
                        out.println("</ul>");

                    } else out.println("<div class=\"w3-panel w3-red w3-display-container w3-card-4 w3-round\">\n"
+
                            "   <span onclick=\"this.parentElement.style.display='none'\"\n" +
                            "   class=\"w3-button w3-margin-right w3-display-right w3-round-large w3-hover-red w3-border w3-border-red w3-hover-border-grey\">×</span>\n" +
                            "   <h5>There are no users yet!</h5>\n" +
                            "</div>");
                %>
            </div>
        </div>

        <div class="w3-container w3-grey w3-opacity w3-right-align w3-padding">
            <button class="w3-btn w3-round-large" onclick="location.href='/'">Back to main</button>
        </div>
    </body>
</html>

هذا كل شيء :) إذا كان لا يزال لديك أي أسئلة أو لديك أي تعليقات، أو على العكس من ذلك، لا يعمل شيء ما - اترك تعليقًا. تحديث: إذا كانت لديك مشاكل مع الخطأ 404 عند النقر على الأزرار، على الرغم من أن كل شيء تم بشكل صحيح، فربما يجب عليك تصحيح تكوين النشر في الفكرة. للقيام بذلك، تحتاج إلى الانتقال إلى تحرير التكوينات (في الجزء العلوي بالقرب من زر البداية)، والانتقال إلى علامة التبويب "النشر" على الجانب الأيمن من النافذة والتأكد من الإشارة إليه ببساطة في سياق التطبيق / حسنًا، أنا سوف نرفق بعض لقطات الشاشة لما خرج من كل هذا. وأخيرًا ، إذا كنت تريد التدرب على هذا المشروع، يمكنك تجربة ما يلي:

• أنشئ servlet وjsp لحذف مستخدم واثنين آخرين لتغيير/تحرير مستخدم موجود. سوف تحصل على تطبيق ويب CrUD حقيقي :) على servlets))؛
• استبدل القائمة (القائمة) بالعمل مع قاعدة بيانات حتى لا يختفي المستخدمون المضافون بعد إعادة تشغيل الخادم :)

حظ سعيد!