Paglikha ng isang simpleng web application gamit ang mga servlet at jsp (bahagi 2)

Paglikha ng isang simpleng web application gamit ang mga servlet at jsp (bahagi 1) Antas ng kaalaman na kinakailangan upang maunawaan ang artikulo: higit pa o hindi gaanong naunawaan mo na ang Java Core at gusto mong tingnan ang mga teknolohiya ng JavaEE at web programming. Ito ang pinakamahalaga kung kasalukuyan mong pinag-aaralan ang Java Collections quest, na sumasaklaw sa mga paksang malapit sa artikulo.

Paglikha ng mga Entidad

Sa entity package, gagawa kami ng class User , at doon ay magkakaroon ng dalawang pribadong string variable na pangalan at password . Gumawa tayo ng mga constructor (default at isa na tatanggap ng parehong value), getters/setters, i-override ang toString() method kung sakali, pati na rin ang equals() at hashCode() method . Ibig sabihin, gagawin namin ang lahat ng ginagawa ng isang disenteng Java developer kapag gumagawa ng klase.

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

Ngayon ay maaari na tayong magsimulang gumawa ng listahan ng mga user. Magdaragdag kami ng mga user dito, at kung saan namin sila dadalhin para ipakita. Gayunpaman, mayroong isang problema. Hindi kami gumagawa ng aming mga servlet object, ginagawa ito ni Tomcat para sa amin . Ang mga pamamaraan na na-override namin sa mga ito ay tinukoy na rin para sa amin, at hindi kami makakapagdagdag ng parameter. Paano tayo makakalikha ng isang nakabahaging listahan na nakikita ng pareho ng ating mga servlet? Kung gagawa lang kami ng sarili naming list object sa bawat servlet, lalabas na magdaragdag kami ng mga user sa isang listahan, at ipapakita namin ang listahan ng mga user gamit ang ListServlet servlet sa isa pa. Lumalabas na kailangan namin ng isang bagay na magiging karaniwan sa parehong mga servlet. Sa pangkalahatan, kailangan namin ng isang bagay na magiging karaniwan sa lahat ng klase sa aming programa; ang tanging bagay para sa buong programa. Sana ay may narinig ka tungkol sa mga pattern ng disenyo. At, marahil, para sa ilan ito ang unang tunay na pangangailangan na gamitin ang pattern ng Singleton sa kanilang programa. Maaari kang makakuha ng perverted at lumikha ng ilang mga cool na Singleton na may double check at synchronization (oo, mayroon kaming isang multi-threaded na application, dahil ang Tomcat ay nagpapatakbo ng mga servlet sa iba't ibang mga thread), ngunit gagamitin ko ang opsyon na may maagang pagsisimula, dahil ito ay medyo angkop dito sapat at ito ay nababagay sa ating mga layunin.

Paglikha ng isang modelo

Gumawa tayo ng isang klase (at ipatupad ang pattern ng Singleton dito ) sa pakete ng modelo at tawagin itong isang bagay na hindi karaniwan. Sabihin nating Model . Gumawa tayo ng pribadong user list object sa ating klase, at ipatupad ang dalawang pamamaraan: isa para makapagdagdag tayo ng user, at ang pangalawa ay magbabalik ng listahan ng mga string (mga user name). Dahil ang aming user object ay binubuo ng isang pangalan at isang password, at hindi namin nais na "ibunyag" ang mga password ng user, magkakaroon lamang kami ng isang listahan ng mga pangalan.

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());
    }
}

Medyo tungkol sa mvc

Dahil narinig mo ang tungkol sa singleton , malamang na narinig mo na ang tungkol sa isa pang pattern ng disenyo - MVC (model-view-controller, sa Russian model-view-controller, o tulad ng sa English na model-view-controller). Ang kakanyahan nito ay ang paghiwalayin ang lohika ng negosyo mula sa pagtatanghal. Ibig sabihin, paghiwalayin ang code na tumutukoy kung ano ang gagawin mula sa code na tumutukoy kung paano ipapakita. Ang view (view o simpleng view) ay responsable para sa form kung saan ipinakita ang ilang data. Sa aming kaso, ang mga view ay ang aming mga pahina ng JSP. Kaya't inilagay ko ang mga ito sa isang folder na tinatawag na views . Ang modelo ay ang aktwal na data kung saan gumagana ang programa. Sa aming kaso, ito ay mga user (listahan ng mga user). Well, ang mga controllers ay ang connecting link sa pagitan nila. Kumuha sila ng data mula sa modelo at ipinapasa ito sa mga view (o tumanggap ng ilang data mula sa Tomcat, iproseso ito at ipapasa ito sa modelo). Ang lohika ng negosyo (kung ano ang eksaktong dapat gawin ng programa) ay kailangang ilarawan sa kanila, at hindi sa modelo o sa view. Kaya, ang bawat isa ay gumagawa ng kanilang sariling bagay:

• ang modelo ay nag-iimbak ng data;
• ang mga view ay gumuhit ng magandang representasyon ng data;
• pinangangasiwaan ng mga controllers ang pagproseso ng data.

Ito ay nagbibigay-daan sa programa na maging medyo simple at mapanatili, sa halip na isang napakalaking dump ng lahat ng code sa isang klase. Ang MVC ay angkop hindi lamang para sa web programming, ngunit ito ay sa lugar na ito na ito ay matatagpuan lalo na madalas (halos palagi). Sa aming kaso, ang mga servlet ay magsisilbing mga controller. Ito ay isang napakababaw at maikling paglalarawan ng pattern, ngunit ang MVC ay hindi ang pangunahing paksa ng artikulong ito. Sino ang gustong malaman ang higit pa - Google to the rescue! Gumawa ng form para sa pagdaragdag ng user Magdagdag tayo sa add.jsp file ng isang form na binubuo ng dalawang text input field (isang regular, ang isa ay password) at isang button para sa pagpapadala ng data sa 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>

Dito ang form ay may katangian ng pamamaraan na may value post . Nangangahulugan ito na ang data mula sa form na ito ay ipapadala sa server sa anyo ng isang kahilingan sa POST. Ang katangian ng pagkilos ay hindi tinukoy, na nangangahulugan na ang kahilingan ay ipapadala sa parehong address kung saan kami nagpunta sa pahinang ito ( /add ). Kaya, ang aming servlet, na nakatali sa address na ito, sa pagtanggap ng kahilingan sa GET, ay ibinabalik ang jsp na ito kasama ang form para sa pagdaragdag ng mga user, at kung nakatanggap ito ng kahilingan sa POST, nangangahulugan ito na ipinadala ng form ang data nito doon (na kukunin namin mula sa humiling ng object sa doPost() Kapansin-pansin na ang mga patlang ng pag-input ay may isang parameter ng pangalan (para sa isang patlang na may pangalan ay mayroon itong pangalan ng halaga, at para sa isang patlang na may isang password mayroon itong pass ng halaga ). Ito ay isang medyo mahalagang punto. Dahil upang makuha ang data na ito (pangalan at password na ilalagay) mula sa kahilingan (nasa loob na ng servlet), gagamitin namin ang eksaktong mga pangalang ito at ipasa ang . Ngunit higit pa sa na mamaya. Ang button para sa pagpapadala ng data mismo ay muling ginawa sa anyo ng isang button , at hindi bilang isang output field, gaya ng karaniwang nakasanayan. Hindi ko alam kung gaano unibersal ang opsyong ito, ngunit gumagana ito para sa akin (Chrome browser).

Pagproseso ng kahilingan sa POST gamit ang isang servlet

Bumalik tayo sa AddServlet servlet . Paalalahanan kita: upang ang aming servlet ay "mahuli" ang mga kahilingan sa GET, na-override namin ang doGet() na pamamaraan mula sa HttpServlet class . Upang turuan ang aming servlet na mahuli din ang mga kahilingan sa POST, kailangan din naming i-override ang doPost() method . Nakatanggap ito ng mga katulad na kahilingan at mga bagay sa pagtugon mula sa Tomcat , na aming gagawin. Una, kunin natin mula sa kahilingan ang pangalan at ipasa ang mga parameter na ipinadala ng form (kung iba ang pangalan mo sa kanila sa form, iyon ang mga pangalang isusulat mo). Pagkatapos nito, gagawin namin ang aming object ng user gamit ang natanggap na data. Pagkatapos ay makukuha natin ang object ng modelo at idagdag ang nilikhang user sa modelo.

@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);
}

Pagpasa ng data upang tingnan

Lumipat tayo sa ListServlet servlet . Ang doGet() na paraan ay ipinatupad na dito , na naglilipat lamang ng kontrol sa list.jsp view . Kung wala ka pa nito, gawin ito sa pamamagitan ng pagkakatulad sa parehong paraan mula sa AddServlet servlet . Ngayon ay mainam na makakuha ng isang listahan ng mga username mula sa modelo at ipasa ang mga ito sa view, na tatanggap sa kanila at maipapakita ang mga ito nang maayos. Upang gawin ito, muli naming gagamitin ang object ng kahilingan na natanggap namin mula sa Tomcat . Maaari kaming magdagdag ng isang katangian sa bagay na ito, binibigyan ito ng ilang pangalan, at, sa katunayan, ang bagay mismo, na gusto naming ilipat upang tingnan . Dahil sa katotohanan na kapag inililipat ang proseso ng pagpapatupad mula sa isang servlet patungo sa isang view, ipinapasa namin doon ang parehong kahilingan at mga object ng tugon na natanggap mismo ng servlet, pagkatapos ay sa pamamagitan ng pagdaragdag ng aming listahan ng mga pangalan sa object ng kahilingan, maaari naming mula sa kahilingang ito object sa view lumikha ng aming listahan ng mga user name at kumuha. Tapos na kami sa ListServlet class , kaya narito ang code para sa buong klase:

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);
    }
}

Pagpapatupad ng java code sa mga jsp file

Oras na para magsimulang magtrabaho sa list.jsp file . Ipapatupad lamang ito kapag naipasa ng ListServlet ang proseso ng pagpapatupad dito. Bilang karagdagan, sa servlet na iyon ay naghanda na kami ng listahan ng mga user name mula sa modelo at ipinasa ito dito sa object ng kahilingan. Dahil mayroon kaming listahan ng mga pangalan, maaari naming i-loop ito at i-print ang bawat pangalan. Tulad ng nasabi ko na, ang mga jsp file ay maaaring magsagawa ng java code (na siyang nagpapaiba sa kanila sa mga static na html na pahina). Upang maisagawa ang ilang code, sapat na upang ilagay ang sumusunod na konstruksyon sa lugar na kailangan namin:

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

Sa loob ng construct na ito mayroon kaming access sa ilang mga variable:

• Ang kahilingan ay ang aming object ng kahilingan, na ipinasa namin mula sa servlet, kung saan ito ay tinawag na req ;
• responsce - object ng tugon, na tinatawag na resp sa servlet ;

• out ay isang bagay ng uri ng JspWriter (na minana mula sa karaniwang Manunulat ), sa tulong kung saan maaari tayong "magsulat" ng isang bagay nang direkta sa mismong pahina ng html. Ang entry na out.println("Hello world!") ay halos kapareho sa System.out.println("Hello world!") entry , ngunit huwag malito ang dalawa!
  out.println() "nagsusulat" sa html na pahina, at ang System.out.println ay nagsusulat sa output ng system. Kung tatawagan mo ang jsp method na System.out.println() sa loob ng seksyon na may Java code , makikita mo ang mga resulta sa Tomcat console , at hindi sa page.

Maaari kang maghanap ng iba pang magagamit na mga bagay sa loob ng jsp dito . Gamit ang request object , maaari naming makuha ang listahan ng mga pangalan na naipasa mula sa servlet (na-attach namin ang kaukulang katangian sa object na ito), at gamit ang out object , maaari naming ipakita ang mga pangalang ito. Gawin natin ito (sa ngayon lamang sa anyo ng isang listahan ng 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>

Kung kailangan mong magpakita lamang ng isang listahan kung may mga user, at kung hindi man ay magpakita ng babala na wala pang mga user, maaari naming muling isulat ang seksyong ito nang kaunti:

<%
    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>");
%>

Ngayon na maaari na kaming magpasa ng data mula sa mga servlet patungo sa mga view, maaari naming bahagyang pagbutihin ang aming AddServlet upang ang isang abiso ay maipakita kapag ang isang user ay matagumpay na naidagdag. Upang gawin ito, sa pamamaraang doPost() , pagkatapos magdagdag ng bagong user sa modelo, maaari naming idagdag ang pangalan ng user na ito sa mga katangian ng req object at ipasa ang kontrol pabalik sa add.jsp view . At sa loob nito ay gumawa na ng isang seksyon na may Java code kung saan ang isang pagsusuri ay ginawa upang makita kung ang naturang katangian ay nasa kahilingan, at kung gayon, pagkatapos ay mag-output ng isang mensahe na nagsasaad na ang user ay matagumpay na naidagdag. Pagkatapos ng mga pagbabagong ito, ang kumpletong AddServlet servlet code ay magiging ganito:

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);
    }
}

Dito, sa dulo ng doPost() method , nagtakda kami ng attribute na may pangalan ng user na idinagdag sa modelo, pagkatapos ay tinatawag namin ang doGet() method , kung saan ipinapasa namin ang kasalukuyang kahilingan at tugon. At ang paraan ng doGet() ay naglilipat na ng kontrol sa view, kung saan nagpapadala ito ng object ng kahilingan na may nakalakip na pangalan ng idinagdag na user bilang attribute. Ang natitira na lang ay itama ang add.jsp upang maipakita nito ang gayong abiso kung mayroong ganoong katangian. Ang huling add.jsp ay :

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

Ang katawan ng pahina ay binubuo ng:

• div-a na may header;
• div container para sa content, sinusuri nito kung mayroong isang attribute na may username;
• div na may isang form para sa pagdaragdag ng mga user;
• at sa dulo ay may footer na may button para bumalik sa pangunahing pahina.

Maaaring mukhang napakaraming div, ngunit gagamitin namin ang mga ito sa ibang pagkakataon kapag nagdagdag kami ng mga istilo. Ang huling list.jsp ay:

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

Kaya, mayroon kaming ganap na gumaganang web application na maaaring mag-imbak at magdagdag ng mga user, pati na rin magpakita ng listahan ng kanilang mga pangalan. Ang natitira na lang ay pagandahin ito... :)

Pagdaragdag ng mga istilo. Ginagamit namin ang W3.CSS framework

Sa ngayon, gumagana ang aming application, ngunit talagang nakakabaliw. Samakatuwid, magdaragdag kami ng background, kulay ng teksto at mga pindutan, mga listahan ng istilo, gagawing pag-align, magdagdag ng mga indent, at mga katulad nito. Kung manu-mano kang sumulat ng mga istilo, maaaring tumagal ito ng maraming oras at nerbiyos. Samakatuwid, iminumungkahi kong gamitin ang W3.CSS CSS framework. Mayroon na itong mga yari na klase na may mga istilo; ang natitira na lang ay ilagay ang mga klase ng CSS na gusto naming ilapat sa mga tamang lugar. Upang maidagdag ang mga ito sa aming mga pahina, isasama muna namin ang isang file na may mga istilo. Magagawa ito sa dalawang paraan:

1. pumunta sa aming mga pahina at sa seksyon ng ulo magpasok ng isang direktang link sa file na may mga estilo

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

   Ang pagpipiliang ito ay angkop kung mayroon kang patuloy na koneksyon sa Internet. Pagkatapos, kapag binuksan mo ang iyong mga pahina sa isang lokal na server, ang mga istilo ay kukunin mula sa Internet.




2. Kung nais mong magkaroon ng lahat ng mga estilo nang lokal at hindi nakadepende sa isang koneksyon sa Internet, i-download ang file na may mga istilo at ilagay ito sa isang lugar sa loob ng web folder (halimbawa, web/styles/w3.css ), pagkatapos ay dumaan sa lahat ng aming mga pahina ( index.html, add.jsp, list.jsp ) at maglagay ng link sa file na ito na may mga istilo sa loob ng head section

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

   Pagkatapos nito, dumaan lang sa mga tag at idagdag ang mga estilo na gusto mo. Hindi ko ito tatalakayin nang detalyado, ngunit agad kong ibibigay ang aking mga handa na bersyon ng aking tatlong mga file na may nakaayos na mga klase ng istilo.

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>

Iyon lang :) Kung mayroon ka pa ring anumang mga katanungan o may anumang mga komento, o sa kabaligtaran, isang bagay ay hindi gumagana - mag-iwan ng komento. UPD: kung mayroon kang mga problema sa isang 404 na error kapag nag-click sa mga pindutan, bagaman ang lahat ay ginawa nang tama, marahil ay dapat mong iwasto ang configuration ng deployment sa ideya. Upang gawin ito, kailangan mong pumunta sa I-edit ang mga pagsasaayos (sa tuktok malapit sa pindutan ng pagsisimula), pumunta sa tab na Deployment sa kanang bahagi ng window at siguraduhin na sa konteksto ng Application ito ay ipinahiwatig lamang / Well, I' Mag-attach ng ilang mga screenshot ng kung ano ang lumabas sa lahat ng ito. At panghuli , kung gusto mong magsanay sa proyektong ito, maaari mong subukan ang:

• gumawa ng isang servlet at jsp upang tanggalin ang isang user at ilang higit pa upang baguhin/i-edit ang isang umiiral na user. Makakakuha ka ng totoong CrUD web application :) sa mga servlet));
• palitan ang listahan (Listahan) ng pagtatrabaho sa isang database upang hindi mawala ang mga idinagdag na user pagkatapos i-restart ang server :)

Good luck!