Эҷоди як барномаи оддии веб бо истифода аз сервлетҳо ва jsp (қисми 2)

Эҷоди як замимаи оддии веб бо истифода аз servlets ва jsp (қисми 1) Сатҳи донише, ки барои фаҳмидани мақола лозим аст: шумо аллакай кам ё камтар Java Core-ро дарк кардаед ва мехоҳед ба технологияҳои JavaEE ва барномасозии веб назар кунед. Агар шумо ҳоло ҷустуҷӯи Java Collections-ро, ки мавзӯъҳои наздики мақоларо дар бар мегирад, меомӯзед, ин хеле маъно дорад.

Эҷоди субъектҳо

Дар бастаи an objectҳо мо синфи 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;
    }
}

Акнун мо метавонем ба эҷоди рӯйхати корбарон шурӯъ кунем. Мо корбаронро ба он илова мекунем ва аз куҷо онҳоро барои намоиш мебарем. Бо вуҷуди ин, як мушкилот вуҷуд дорад. Мо an objectҳои сервлети худро эҷод намекунем, Tomcat онро барои мо мекунад . Усулҳое, ки мо дар онҳо аз байн мебарем, инчунин барои мо аллакай муайян карда шудаанд ва мо параметр илова карда наметавонем. Пас чӣ гуна мо метавонем рӯйхати муштаракеро созем, ки ба ҳарду сервлетҳои мо намоён бошад? Агар мо танҳо дар ҳар як сервлет an objectи рӯйхати шахсии худро эҷод кунем, маълум мешавад, ки мо корбаронро ба як рӯйхат илова мекунем ва рӯйхати корбаронро бо сервлети ListServlet ба дигараш нишон медиҳем. Маълум мешавад, ки ба мо an objectе лозим аст, ки барои ҳарду сервлет умумӣ бошад. Умуман, ба мо an objectе лозим аст, ки барои ҳамаи синфҳои барномаи мо умумӣ бошад; an objectи ягона барои тамоми барнома. Ман умедворам, ки шумо дар бораи намунаҳои тарроҳӣ чизе шунидаед. Ва, шояд, барои баъзеҳо ин аввалин зарурати воқеии истифодаи намунаи Singleton дар барномаи худ аст. Шумо метавонед бо тафтиши дукарата ва синхронизатсия як Singleton- и олӣ эҷод кунед (бале, мо як замимаи бисёр ришта дорем, зеро Tomcat сервлетҳоро дар риштаҳои гуногун иҷро мекунад), аммо ман ин вариантро бо ибтидосозии барвақт истифода хоҳам кард, зеро он дар ин ҷо хеле мувофиқ аст. кифоя аст ва ба максадхои мо мувофик аст.

Эҷоди модел

Биёед дар бастаи намунавӣ синф эҷод кунем (ва намунаи Singletonро дар он татбиқ кунем) ва онро чизи ғайриоддӣ меномем. Биёед бигӯем, Модели . Биёед дар синфи худ як an objectи рӯйхати корбарони хусусиро эҷод кунем ва ду усулро татбиқ кунем: яке то он ки мо корбарро илова карда тавонем ва дуюм барои баргардонидани рӯйхати сатрҳо (номҳои корбар). Азбаски an objectи корбарии мо аз ном ва парол иборат аст ва мо намехоҳем паролҳои корбарро "ифшо кунем", мо танҳо рӯйхати номҳоро дорем.

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 (модел-намоиш-назораткунанда, дар русии модел-назар-контроллер, ё мисли забони англисӣ модели-view-controller). Моҳияти он ҷудо кардани мантиқи тиҷорат аз муаррифӣ аст. Яъне, codeеро, ки чӣ кор карданро муайян мекунад, аз рамзе, ки тарзи намоишро муайян мекунад, ҷудо кунед. Намоиш (намоиш ё танҳо намудҳо) барои шакле, ки дар он баъзе маълумот пешниҳод карда мешавад, масъул аст. Дар ҳолати мо, намоишҳо саҳифаҳои JSP-и мо мебошанд. Аз ин рӯ, ман онҳоро дар папкае гузоштам, ки бо номи views . Модел ин маълумотест, ки барнома бо он кор мекунад. Дар ҳолати мо, инҳо истифодабарандагон (рӯйхати истифодабарандагон) мебошанд. Хуб, контроллерҳо пайванди пайвасткунандаи байни онҳо мебошанд. Онҳо маълумотро аз модел гирифта, ба намоишҳо интиқол медиҳанд (ё баъзе маълумотро аз Tomcat мегиранд, коркард мекунанд ва ба модел мегузаранд). Мантиқи тиҷорӣ (маҳз барнома бояд чӣ кор кунад) бояд дар онҳо тасвир карда шавад, на дар модел ё дар намуди. Ҳамин тариқ, ҳар кас кори худро мекунад:

• модел маълумотро нигоҳ медорад;
• намудҳо тасвири зебои маълумотро ҷалб мекунанд;
• назоратчиён коркарди маълумотро идора мекунанд.

Ин имкон медиҳад, ки барнома хеле содда ва нигоҳдорӣ бошад, на як партови даҳшатноки ҳамаи codeҳо дар як синф. MVC на танҳо барои барномасозии веб мувофиқ аст, балки маҳз дар ин соҳа он махсусан зуд-зуд (қариб ҳамеша) пайдо мешавад. Дар ҳолати мо, сервлетҳо ҳамчун контроллер амал мекунанд. Ин тавсифи хеле сатҳӣ ва мухтасари намуна аст, аммо MVC мавзӯи асосии ин мақола нест. Кӣ мехоҳад маълумоти бештар гирад - Google ба наҷот! Форма барои илова кардани корбар эҷод кунед Биёед ба файли add.jsp формаеро илова кунем, ки аз ду майдони вуруди матн (як муқаррарӣ, дигаре парол) ва тугма барои фиристодани маълумот ба server иборат аст.

<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>

Дар ин ҷо форма дорои атрибути метод бо пости арзиш аст . Ин маънои онро дорад, ки маълумот аз ин шакл ба server дар шакли дархости POST фиристода мешавад. Аттрибути амал муайян карда нашудааст, яъне дархост ба ҳамон суроғае фиристода мешавад, ки мо ба ин саҳифа рафтаем ( /add ). Ҳамин тариқ, сервлети мо, ки ба ин суроға вобаста аст, пас аз гирифтани дархости GET, ин jsp-ро бо шакл барои илова кардани корбарон бармегардонад ва агар он дархости POST гирад, ин маънои онро дорад, ки форма маълумоти худро ба он ҷо фиристодааст (ки мо онро аз an objectро бо усули doPost() Қобor зикр аст, ки майдонҳои вуруд параметри ном доранд (барои майдоне, ки ном дорад, номи арзиш дорад ва барои майдони дорои парол он дорои арзиши pass ). Ин як нуктаи хеле муҳим аст. Азбаски барои гирифтани ин маълумот (ном ва парол, ки ворид карда мешавад) аз дархост (аллакай дар дохor сервлет), мо маҳз ин номро истифода мебарем ва . Аммо дар ин бора баъдтар. Тугмаи фиристодани маълумот худаш боз дар шакли тугма сохта мешавад , на ҳамчун майдони баромад, чунон ки маъмулан маъмул аст. Ман намедонам, ки ин вариант то чӣ андоза универсалӣ аст, аммо он барои ман кор мекунад (браузери Chrome).

Коркарди дархости POST бо сервлет

Биёед ба сервлети AddServlet баргардем . Ба шумо хотиррасон мекунам: барои он ки сервлети мо дархостҳои GET-ро "сайд" кунад, мо усули doGet()- ро аз синфи HttpServlet бекор кардем . Барои он ки ба сервлети мо таълим диҳад, ки дархостҳои POST-ро низ қабул кунад, мо инчунин бояд усули doPost() -ро бекор кунем . Он аз Tomcat an objectҳои шабеҳи дархост ва посухро мегирад , ки мо бо онҳо кор хоҳем кард. Аввалан, биёед аз дархост ном ва параметрҳоеро, ки форма фиристодааст, барорем (агар шумо онҳоро дар шакли дигар номгузорӣ карда бошед, пас ин номҳое ҳастанд, ки шумо менависед). Пас аз ин, мо бо истифода аз маълумоти гирифташуда an objectи корбарии худро эҷод мекунем. Сипас, мо an objectи моделиро мегирем ва корбари сохташударо ба модел илова мекунем.

@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 иҷро кунед . Акнун хуб мебуд, ки рӯйхати корбаронро аз модел ба даст оред ва онҳоро ба намоиш гузаронед, ки онҳоро қабул мекунад ва ба таври зебо намоиш медиҳад. Барои ин, мо боз an objectи дархостеро, ки аз Tomcat гирифтаем, истифода мебарем . Мо метавонем атрибутеро ба ин an object илова карда, ба он номе диҳем ва дар асл худи an objectро, ки мо мехоҳем онро ба намоиш интиқол диҳем . Аз сабаби он, ки ҳангоми интиқоли раванди иҷро аз сервлет ба намоиш, мо ба он ҷо ҳамон an objectҳои дархост ва посухро, ки худи сервлет гирифта буд, интиқол медиҳем, пас бо илова кардани рӯйхати номҳои худ ба an objectи дархост, мо метавонем аз ин дархост an object дар намуди рӯйхати номҳои корбарони моро эҷод кунед ва ба даст оред. Мо бо синфи ListServlet анҷом ёфтем , аз ин рӯ codeи тамоми синф аст:

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 раванди иҷроро дар ин ҷо мегузарад. Илова бар ин, дар он сервлет мо аллакай рӯйхати номҳои корбаронро аз модел омода кардаем ва онро ба ин ҷо дар an objectи дархост интиқол додем. Азбаски мо рӯйхати номҳо дорем, мо метавонем онро давр занем ва ҳар як номро чоп кунем. Тавре ки ман аллакай гуфтам, файлҳои jsp метавонанд рамзи java-ро иҷро кунанд (ки онҳоро аз саҳифаҳои статикии html фарқ мекунад). Барои иҷро кардани ягон code, дар ҷои лозима гузоштани сохтори зерин кифоя аст:

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

Дар дохor ин сохтор мо ба якчанд тағирёбандаҳо дастрасӣ дорем:

• дархост an objectи дархости мост, ки мо онро аз сервлет гузаштем, ки дар он ҷо он танҳо req номида мешуд ;
• вокуниш - an objectи ҷавоб, ки resp дар сервлет номида мешавад ;

• out an objectи навъи JspWriter аст (аз Writer муқаррарии мерос гирифта шудааст ), ки бо ёрии он мо метавонем чизеро мустақиман ба худи саҳифаи html «навиштем». Воридоти out.println("Салом ҷаҳон!") ба вуруди System.out.println("Салом ҷаҳон!") хеле монанд аст , аммо ин дуро омехта накунед!
  out.println() ба саҳифаи html "менависад" ва System.out.println ба баромади система менависад. Агар шумо усули jsp System.out.println() -ро дар дохor бахш бо рамзи Java даъват кунед , шумо натиҷаҳоро дар консоли Tomcat хоҳед дид , на дар саҳифа.

Шумо метавонед дигар an objectҳои дастрасро дар дохor jsp дар ин ҷо ҷустуҷӯ кунед . Бо истифода аз an objectи дархост , мо метавонем рӯйхати номҳоеро, ки аз сервлет интиқол дода шудаанд, гирем (мо атрибути мувофиқро ба ин an object замима кардем) ва бо истифода аз an objectи 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>");
%>

Акнун, ки мо метавонем маълумотро аз сервлетҳо ба намоишҳо интиқол диҳем, мо метавонем AddServlet-и худро каме беҳтар созем , то вақте ки корбар бомуваффақият илова карда шуд, огоҳинома намоиш дода шавад. Барои ин, дар усули doPost() пас аз илова кардани корбари нав ба модел, мо метавонем номи ин корбарро ба атрибутҳои an objectи req илова кунем ва назоратро ба намуди add.jsp баргардонем . Ва дар он аллакай як бахшеро бо codeи 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() аллакай назоратро ба намоиш интиқол медиҳад, ки дар он an objectи дархостро бо номи корбари иловашуда ҳамчун атрибут замима мекунад. Танҳо ислоҳ кардани 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 бо шакл барои илова кардани корбарон;
• ва дар охир як поён бо тугмаи барои баргаштан ба саҳифаи асосӣ вуҷуд дорад.

Чунин ба назар мерасад, ки divҳо аз ҳад зиёд ҳастанд, аммо мо онҳоро баъдтар ҳангоми илова кардани услубҳо истифода хоҳем кард. 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>

Ҳамин тариқ, мо як веб-барномаи пурра коркунанда дорем, ки метавонад корбаронро ҳифз ва илова кунад ва инчунин рӯйхати номҳои онҳоро нишон диҳад. Танҳо ороиш додани он боқӣ мемонад... :)

Илова кардани услубҳо. Мо чаҳорчӯбаи W3.CSS -ро истифода мебарем

Дар айни замон барномаи мо кор мекунад, аммо комилан девона аст. Аз ин рӯ, мо замина, ранги матн ва тугмаҳо, рӯйхатҳои услубҳо, ҳамоҳангсозӣ, илова кардани абзорҳо ва ғайраро илова мекунем. Агар шумо услубҳоро дастӣ нависед, он метавонад вақти зиёд ва асабҳоро талаб кунад. Аз ин рӯ, ман тавсия медиҳам, ки чаҳорчӯбаи W3.CSS CSS-ро истифода барем. Он аллакай дарсҳои тайёр бо услубҳо дорад; танҳо гузоштани синфҳои CSS аст, ки мо мехоҳем дар ҷойҳои мувофиқ татбиқ кунем. Барои илова кардани онҳо ба саҳифаҳои мо, аввал мо файлеро бо сабкҳо дохил мекунем. Инро метавон бо ду роҳ анҷом дод:

1. аз саҳифаҳои мо гузаред ва дар қисмати сар истиноди мустақимро ба файл бо услубҳо ворид кунед

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

   Ин хосият мувофиқ аст, агар шумо пайвасти доимии интернет дошта бошед. Пас, вақте ки шумо саҳифаҳои худро дар serverи маҳаллӣ мекушоед, сабкҳо аз Интернет кашида мешаванд.




2. Агар шумо хоҳед, ки ҳамаи услубҳоро ба таври маҳаллӣ дошта бошед ва аз пайвасти интернет вобаста набошед, файлро бо услубҳо зеркашӣ кунед ва онро дар ҷое дар дохor ҷузвдони веб ҷойгир кунед (масалан, web/styles/w3.css ), пас ҳамаи услубҳои моро аз назар гузаронед. саҳифаҳо ( index.html, add.jsp, list.jsp ) ва истиноди ин файлро бо сабкҳо дар дохor қисмати сар ворид кунед

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

   Пас аз ин, танҳо аз барчаспҳо гузаред ва сабкҳои ба шумо маъқулро илова кунед. Ман дар ин бора ба таври муфассал таваққуф намекунам, аммо дарҳол versionҳои тайёри се файли худро бо синфҳои услуби тартибдодашуда медиҳам.

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>

Ин ҳама :) Агар шумо то ҳол ягон савол дошта бошед ё шарҳе дошта бошед, ё баръакс, чизе кор намекунад - шарҳ диҳед. UPD: агар шумо бо хатогиҳои 404 ҳангоми пахш кардани тугмаҳо мушкилот дошта бошед, гарчанде ки ҳама чиз дуруст анҷом дода шудааст, шояд шумо бояд конфигуратсияи густаришро дар идея ислоҳ кунед. Барои ин ба шумо лозим аст, ки ба Таҳрири конфигуратсияҳо гузаред (дар боло дар назди тугмаи оғоз), ба ҷадвали Ҷойгиркунӣ дар тарафи рости равзана гузаред ва боварӣ ҳосил кунед, ки дар контексти Ариза он танҳо нишон дода шудааст / Хуб, ман' Якчанд скриншотҳоро дар бораи он чизе, ки аз ин ҳама бармеояд, замима хоҳам кард. Ва ниҳоят , агар шумо хоҳед, ки бо ин лоиҳа машқ кунед, шумо метавонед кӯшиш кунед:

• сервлет ва jsp-ро барои нест кардани корбар ва чанде дигар барои тағир/таҳрири корбари мавҷуда созед. Шумо як веб-барномаи воқеии CrUD мегиред :) дар сервлетҳо)))
• рӯйхатро (Рӯйхат) бо кор бо пойгоҳи додаҳо иваз кунед, то корбарони иловашуда пас аз бозоғозкунии server нопадид нашаванд :)

Барори кор!