Сервлеттерди жана jspди колдонуу менен жөнөкөй веб-тиркеме түзүү (2-бөлүк)

Сервлеттерди жана jspди колдонуу менен жөнөкөй веб-тиркеме түзүү (1-бөлүк) Макаланы түшүнүү үчүн талап кылынган бorм деңгээли: сиз Java Core программасын аздыр-көптүр түшүндүңүз жана JavaEE технологияларын жана веб-программалоону карагыңыз келет. Эгер сиз учурда макалага жакын темаларды камтыган Java Collections квестин окуп жатсаңыз, бул абдан маанилүү.

Объекттерди түзүү

Объекттердин пакетинде биз 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 жөнүндө бир аз

Сиз синглтон жөнүндө укканыңыздан кийин , сиз дагы бир дизайн үлгүсү жөнүндө уккандырсыз - MVC (модель-көзөмөлдөөчү, орусча моделди-көзөмөлдөөчү, же англисче модел-көзөмөлдөөчү сыяктуу). Анын маңызы бизнес логикасын презентациядан бөлүүдө турат. Башкача айтканда, эмне кылуу керектигин аныктаган codeду кантип көрсөтүүнү аныктаган codeдон бөлүңүз. Көрүү (көрүү же жөн эле көрүнүш) кээ бир маалыматтар берилген форма үчүн жооп берет. Биздин учурда, көрүнүштөр биздин JSP баракчаларыбыз. Ошондуктан мен аларды көрүнүштөр деп аталган папкага койдум . Модель - бул программа иштеген чыныгы маалыматтар. Биздин учурда, бул колдонуучулар (колдонуучулардын тизмеси). Ооба, контроллерлор алардын ортосундагы байланыштыруучу звено болуп саналат. Алар моделден маалыматтарды алып, аны көрүүлөргө өткөрүп беришет (же 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>

Бул жерде форманын мааниси посту менен метод атрибуту бар . Бул бул формадагы маалыматтар POST сурамы түрүндө serverге жөнөтүлөт дегенди билдирет. Иш-аракет атрибуту көрсөтүлгөн эмес, бул суроо-талап биз бул баракка барган дарекке ( /add ) жөнөтүлөт дегенди билдирет. Ошентип, бул дарекке байланган биздин сервлет, GET өтүнүчүн алгандан кийин, бул jsp'ди колдонуучуларды кошуу формасы менен кайтарат, ал эми эгерде ал POST өтүнүчүн алса, бул форма өзүнүн маалыматтарын ошол жакка жөнөткөн дегенди билдирет (биз аны биз бул жерден чыгарабыз . doPost() Белгилей кетчү нерсе, киргизүү талааларында аталыш параметри бар (аты бар талаа үчүн ал маанинин аталышына ээ, ал эми сырсөзү бар талаа үчүн өтүүчү маани бар ). Бул абдан маанилүү пункт болуп саналат. Бул маалыматты (киргизиле турган аты жана паролду) суроо-талаптан (сервлеттин ичинде) алуу үчүн, биз дал ушул аталышты колдонобуз жана . Бирок бул тууралуу кийинчерээк. Маалыматтарды жөнөтүү баскычы адаттагыдай эле чыгаруу талаасы катары эмес, кайра баскыч түрүндө жасалат . Бул параметр канчалык универсалдуу экенин билбейм, бирок ал мен үчүн иштейт (Chrome браузери).

POST өтүнүчүн сервлет менен иштетүү

AddServlet сервлетине кайтып баралы . Эске сала кетейин: биздин сервлет GET суроо-талаптарын “кармап” алышы үчүн, HttpServlet классынан doGet() ыкмасын жокко чыгардык . Биздин сервлетти 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);
}

Көрүү үчүн берorштер өтүүдө

Келгиле, ListServlet сервлетине өтөбүз . Бул жерде doGet() ыкмасы мурунтан эле ишке ашырылган , ал жөн гана башкарууну list.jsp көрүнүшүнө өткөрүп берет . Эгер сизде али жок болсо, аны AddServlet сервлетинен бир эле ыкмага окшоштуруңуз . Эми бул модельден колдонуучу аттары тизмесин алып, аларды кабыл алып, аларды жакшы көрсөтө турган көрүнүшкө өткөрүп, жакшы болмок. Бул үчүн, биз кайрадан Томкаттан алган суроо an objectисин колдонобуз . Биз бул 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);
    }
}

jsp файлдарында java codeун аткаруу

list.jsp файлында иштөөгө убакыт келди . Бул ListServlet бул жерде аткаруу процессинен өткөндө гана аткарылат . Кошумчалай кетсек, ошол сервлетте биз мурунтан эле модельден колдонуучу аттары тизмесин даярдап, аны бул жерде суроо-талап an objectисине өткөрүп бергенбиз. Бизде ысымдардын тизмеси болгондуктан, биз аны циклден өткөрүп , ар бир ысымды басып чыгара алабыз. Жогоруда айткандай, jsp файлдары java codeун аткара алат (бул аларды статикалык html баракчаларынан айырмалайт). Кээ бир codeду ишке ашыруу үчүн, бизге керектүү жерге төмөнкү курулушту коюу жетиштүү:

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

Бул конструкциянын ичинде биз бир нече өзгөрмөлөргө кире алабыз:

• суроо -бул биздин суроо-талап an objectиси, биз аны сервлеттен өткөрүп алганбыз, анда ал жөн эле req деп аталды ;
• responce - сервлетте resp деп аталган жооп an objectи ;

• out - бул JspWriter тибиндеги an object (кадимки Жазуучудан тукум кууп өткөн ), анын жардамы менен биз html баракчасынын өзүнө бир нерсени "жаза" алабыз. out.println("Hello world!") жазуусу System.out.println("Hello world!") жазуусуна абдан окшош , бирок экөөнү чаташтырбаңыз!
  out.println() html баракчасына "жазышат", ал эми System.out.println системанын чыгышына жазат. Эгерде сиз Java codeу бар бөлүмдүн ичинде jsp ыкмасына System.out.println() чалсаңыз, натыйжаларды бетте эмес, Tomcat консолунда көрөсүз .

Сиз jsp ичиндеги башка жеткorктүү an objectтерди бул жерден издесеңиз болот . Сурам an objectинин жардамы менен биз сервлеттен берилген аттардын тизмесин ала алабыз (биз бул an objectке тиешелүү атрибутту тиркедик), ал эми out an objectисин колдонуп , бул аттарды көрсөтө алабыз. Келгиле, муну кылалы (азыр 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>");
%>

Эми биз сервлеттерден көрүүлөргө берorштерди өткөрө алгандан кийин, колдонуучу ийгorктүү кошулганда эскертме көрсөтүлүшү үчүн AddServletти бир аз жакшыртсак болот. Бул үчүн, doPost() методунда , моделге жаңы колдонуучуну кошкондон кийин, биз бул колдонуучунун атын req an objectинин атрибуттарына кошуп , башкарууну кайра add.jsp көрүнүшүнө өткөрүп алабыз . Анда Java codeу бар бөлүм түзүлөт, анда мындай атрибут суроо-талапта бар-жогу текшерилет, эгерде ошондой болсо, анда колдонуучу ийгorктүү кошулганын билдирген билдирүүнү чыгарат. Бул өзгөртүүлөрдөн кийин толук AddServlet сервлет codeу төмөнкүдөй көрүнөт:

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;
• жана аягында негизги баракка кайтуу үчүн баскычы бар колонтитул бар.

Өтө көп 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>

Ошентип, бизде колдонуучуларды сактап, кошо турган, ошондой эле алардын ысымдарынын тизмесин көрсөтө турган толук иштеген веб-тиркеме бар. Болгону аны кооздоо гана калды... :)

Стилдерди кошуу. Биз W3.CSS алкагын колдонобуз

Учурда биздин колдонмо иштеп жатат, бирок таптакыр жинди. Ошондуктан, биз фонду, тексттин жана баскычтардын түсүн, стилдердин тизмесин кошобуз, тегиздөөбүз, чегинүүлөрдү кошобуз жана ушул сыяктууларды жасайбыз. Эгерде сиз стилдерди кол менен жазсаңыз, бул көп убакытты жана нервдерди талап кылышы мүмкүн. Ошондуктан, мен W3.CSS CSS алкагын колдонууну сунуштайм. Анын стилдери бар даяр класстары бар; калганы CSS класстарын керектүү жерлерге жайгаштыруу. Аларды баракчаларыбызга кошуу үчүн алгач стилдери бар файлды кошобуз. Бул эки жол менен жасоого болот:

1. биздин баракчаларды карап чыгып, баш бөлүмгө стилдер менен файлга түз шилтемени киргизиңиз

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

   Бул параметр сизде туруктуу Интернет байланышы бар болсо ылайыктуу. Андан кийин, сиз жергorктүү serverде баракчаларыңызды ачканыңызда, стилдер Интернеттен чыгарылат.




2. Эгерде сиз бардык стилдерди локалдык түрдө алып, Интернет байланышына көз каранды болгуңуз келсе, файлды стилдер менен жүктөп алып, аны веб папканын ичинде бир жерге коюңуз (мисалы, web/styles/w3.css ), андан кийин биздин бардык ыкмаларды карап чыгыңыз. барактарын ( index.html, add.jsp, list.jsp ) жана баш бөлүмдүн ичиндеги стилдер менен бул файлга шилтемени киргизиңиз

   <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 веб тиркемесин аласыз :) сервлеттерде)))
• Серверди кайра иштеткенден кийин кошулган колдонуучулар жок болуп кетпеши үчүн тизмени (Тизмени) маалымат базасы менен иштөө менен алмаштырыңыз :)

Жолуңуз ачык болсун!