CodeGym /مدونة جافا /Random-AR /إنشاء تطبيق ويب بسيط باستخدام servlets وJSPs (الجزء الثان...

مستوى

San Francisco

14 February 2023
48 views
0 comments

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

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

إنشاء تطبيق ويب بسيط باستخدام servlets وJSPs (الجزء 2) - 1

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

في حزمة الكيانات ، سنقوم بإنشاء فئة Userتحتوي على متغيرين من السلسلة الخاصة: الاسم وكلمة المرور . قم بإنشاء مُنشئات (افتراضية والتي تأخذ كلا القيمتين) والحروف/المحددات، وتجاوز الطريقة toString()في حالة حدوث ذلك، بالإضافة إلى equals()الأساليب 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 . لذلك نحن بحاجة إلى كائن مشترك بين كل من servlets. بشكل عام، نحتاج إلى كائن مشترك بين جميع الفئات في برنامجنا: كائن واحد للبرنامج بأكمله. أتمنى أن تكون قد سمعت شيئًا عن أنماط التصميم. بالنسبة لبعض الأشخاص، قد تكون هذه أول حاجة حقيقية لنمط 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 ). وبالتالي، عند تلقي طلب GET ، يقوم servlet الخاص بنا المرتبط بهذا العنوان بإرجاع JSP مع نموذج إضافة المستخدم. وإذا تلقى طلب POST ، فإننا نعلم أن النموذج أرسل بياناته هنا (والتي نستخرجها من كائن الطلب في الطريقة doPost()والمعالجة وتمريرها إلى النموذج للحفظ). تجدر الإشارة إلى أن حقول الإدخال تحتوي على معلمة تسمى الاسم (لأسماء المستخدمين أو لكلمات المرور). هذه نقطة مهمة جدا. وبالتالي، لتلقي هذه البيانات (اسم المستخدم وكلمة المرور التي سيتم إدخالها) من الطلب (داخل servlet)، سنستخدم حقول الاسم والتمرير هذه . ولكن أكثر عن ذلك لاحقا. لقد تم إنشاء الزر الخاص بإرسال البيانات مرة أخرى كزر ، وليس كحقل إخراج كما هو معتاد. لا أعرف مدى انتشار هذا النهج، لكنه يناسبني (متصفح Chrome).

معالجة Servlet لطلبات POST

دعنا نعود إلى AddServlet . أذكرك أنه للسماح لخادمنا "بالتقاط" طلبات 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 . doGet()تم تنفيذ الطريقة بالفعل . إنه ببساطة ينقل التحكم إلى العرض ( list.jsp ). إذا لم يكن لديك هذا بعد، فقم بإنشائه عن طريق القياس بالطريقة الموجودة في AddServlet . الآن سيكون من الجيد الحصول على قائمة أسماء المستخدمين من النموذج وتمريرها إلى العرض الذي سيستقبلها ويعرضها بشكل جميل. للقيام بذلك، سنستخدم مرة أخرى كائن الطلب الذي تلقيناه من 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);
    }
}

تشغيل كود Java في ملفات JSP

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


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

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

request — كائن الطلب الخاص بنا، والذي مررناه من servlet، حيث كان يسمى ببساطة req ؛
استجابة - كائن الاستجابة (يسمى resp في servlet)؛
out - كائن JspWriter (الذي يرث Writer العادي )، والذي يمكننا استخدامه "لكتابة" شيء ما مباشرة في صفحة HTML نفسها. العبارة out.println("Hello, World!") تشبه إلى حد كبير العبارة System.out.println("Hello, World!") ، لكن لا تخلط بينها!
out.println() "يكتب" إلى صفحة HTML ، بينما يكتب System.out.println إلى تدفق مخرجات النظام . إذا قمت باستدعاء System.out.println() داخل قسم JSP باستخدام كود 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 كما يلي:


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 برأس؛
حاوية div للمحتوى، والتي تتضمن التحقق من وجود سمة باسم مستخدم؛
div مع نموذج إضافة المستخدم؛
وفي الأسفل يوجد تذييل به زر للعودة إلى الصفحة الرئيسية.

قد يبدو هذا عددًا كبيرًا جدًا من divs، ولكننا سنستخدمها لاحقًا عندما نضيف أنماطًا. إليك الإصدار النهائي من list.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>

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

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

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

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

تصفح صفحاتنا وأدخل الرابط التالي المباشر لملف النمط في قسم الرأس

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

هذا الخيار مناسب إذا كان لديك اتصال دائم بالإنترنت. عندما تفتح صفحاتك على الخادم المحلي، سيتم سحب الأنماط من الإنترنت.
ولكن إذا كنت تريد الحصول على كافة الأنماط محليًا وعدم الاعتماد على اتصال بالإنترنت، فقم بتنزيل ملف النمط وضعه في مكان ما داخل مجلد الويب (على سبيل المثال، 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>

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

إنشاء تطبيق ويب بسيط باستخدام servlets وJSPs (الجزء 2) - 3

إنشاء تطبيق ويب بسيط باستخدام servlets وJSPs (الجزء 2) - 4

إنشاء تطبيق ويب بسيط باستخدام servlets وJSPs (الجزء 2) - 5

وأخيرًا ، إذا كنت تريد التدرب على هذا المشروع، يمكنك تجربة ما يلي:

أنشئ servlet وJSP لحذف مستخدم، وأضف زوجًا آخر لتحرير مستخدم موجود. وستكون النتيجة تطبيق ويب CRUD حقيقي تم إنشاؤه باستخدام servlets. ;)
استبدل القائمة بقاعدة بيانات، حتى لا يختفي المستخدمون المضافون بعد إعادة تشغيل الخادم. :)

حظ سعيد!

المزيد من القراءة:
الجزء 5. Servlets وJava Servlet API. كتابة تطبيق ويب بسيط الجزء 6. حاويات Servlet

تعليقات

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION