Servletlar va jsp yordamida oddiy veb-ilovani yaratish (2-qism)

Servletlar va jsp yordamida oddiy veb-ilovani yaratish (1-qism) Maqolani tushunish uchun zarur bo'lgan bilim darajasi: siz Java Core-ni ko'proq yoki kamroq tushungansiz va JavaEE texnologiyalari va veb-dasturlashni ko'rib chiqishni xohlaysiz. Agar siz hozirda maqolaga yaqin mavzularni o'z ichiga olgan Java Collections kvestini o'rganayotgan bo'lsangiz, bu eng mantiqiy bo'ladi.

Ob'ektlarni yaratish

Ob'ektlar to'plamida foydalanuvchi sinfini yaratamiz va unda ikkita xususiy string o'zgaruvchilar nomi va parol bo'ladi . Keling, konstruktorlarni yarataylik (sukut bo'yicha va ikkala qiymatni ham qabul qiladigan), oluvchilar/setterlar, har qanday holatda toString() usulini , shuningdek, equals() va hashCode() usullarini bekor qilaylik . Ya'ni, sinf yaratishda munosib Java dasturchisi qiladigan hamma narsani qilamiz.

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

Endi biz foydalanuvchilar ro'yxatini yaratishni boshlashimiz mumkin. Biz unga foydalanuvchilarni qo'shamiz va ularni ko'rsatish uchun qayerdan olib boramiz. Biroq, bitta muammo bor. Biz servlet obyektlarini yaratmaymiz, Tomcat buni biz uchun qiladi . Ularda biz bekor qiladigan usullar ham biz uchun allaqachon aniqlangan va biz parametr qo'sha olmaymiz. Qanday qilib ikkala servletimizga ko'rinadigan umumiy ro'yxatni yaratishimiz mumkin? Agar biz har bir servletda oddiygina o'z ro'yxat ob'ektimizni yaratsak, foydalanuvchilarni bitta ro'yxatga qo'shamiz va ListServlet servletidan foydalanadigan foydalanuvchilar ro'yxatini boshqasiga ko'rsatamiz. Ma'lum bo'lishicha, bizga ikkala servlet uchun umumiy bo'lgan ob'ekt kerak. Umuman olganda, bizga dasturimizdagi barcha sinflar uchun umumiy bo'ladigan ob'ekt kerak; butun dastur uchun yagona ob'ekt. Umid qilamanki, siz dizayn naqshlari haqida biror narsa eshitgansiz. Va, ehtimol, ba'zilar uchun bu o'z dasturida Singleton naqshidan foydalanishning birinchi haqiqiy ehtiyojidir . Siz buzilib ketishingiz va ikki marta tekshirish va sinxronizatsiya bilan ajoyib Singleton yaratishingiz mumkin (ha, bizda ko'p tarmoqli dastur mavjud, chunki Tomcat turli mavzularda servletlarni ishga tushiradi), lekin men erta ishga tushirish variantidan foydalanaman, chunki bu erda juda mos keladi. etarli va bu bizning maqsadlarimizga mos keladi.

Model yaratish

Keling, model paketida sinf yarataylik (va unda Singleton naqshini amalga oshiramiz ) va uni noodatiy narsa deb ataymiz. Aytaylik, Model . Keling, sinfimizda shaxsiy foydalanuvchi ro'yxati ob'ektini yaratamiz va ikkita usulni amalga oshiramiz: birinchisi foydalanuvchi qo'shishimiz uchun, ikkinchisi qatorlar ro'yxatini (foydalanuvchi nomlari) qaytarish uchun. Bizning foydalanuvchi ob'ektimiz ism va paroldan iborat bo'lgani uchun va biz foydalanuvchi parollarini "oshkor qilishni" xohlamasligimiz sababli, bizda faqat nomlar ro'yxati bo'ladi.

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 haqida bir oz

Singleton haqida eshitganingiz uchun , ehtimol siz boshqa dizayn namunasi haqida eshitgansiz - MVC (model-ko'rinish-nazoratchi, ruscha model-view-controller yoki xuddi inglizcha model-view-controller kabi). Uning mohiyati biznes mantiqini taqdimotdan ajratishdir. Ya'ni, nima qilish kerakligini belgilaydigan kodni qanday ko'rsatishni belgilaydigan koddan ajrating. Ko'rish (ko'rish yoki oddiygina ko'rinishlar) ba'zi ma'lumotlar taqdim etiladigan shakl uchun javobgardir. Bizning holatda, ko'rishlar bizning JSP sahifalarimizdir. Shuning uchun men ularni viewlar deb nomlangan papkaga joylashtirdim . Model - bu dastur ishlaydigan haqiqiy ma'lumotlar. Bizning holatda, bu foydalanuvchilar (foydalanuvchilar ro'yxati). Xo'sh, kontrollerlar ular orasidagi bog'lovchi bo'g'indir. Ular modeldan ma'lumotlarni oladi va uni ko'rinishlarga o'tkazadi (yoki Tomcat'dan ba'zi ma'lumotlarni oladi, uni qayta ishlaydi va modelga uzatadi). Biznes mantig'i (dastur aynan nima qilishi kerak) model yoki ko'rinishda emas, balki ularda tasvirlanishi kerak. Shunday qilib, har kim o'z ishini qiladi:

• model ma'lumotlarni saqlaydi;
• ko'rinishlar ma'lumotlarning chiroyli tasvirini chizadi;
• kontrollerlar ma'lumotlarni qayta ishlash bilan shug'ullanadi.

Bu bitta sinfdagi barcha kodlarni dahshatli tashlab yuborishdan ko'ra dasturni juda sodda va texnik xizmat ko'rsatishga imkon beradi. MVC nafaqat veb-dasturlash uchun mos, balki aynan shu sohada ayniqsa tez-tez uchraydi (deyarli har doim). Bizning holatlarimizda servletlar kontrollerlar vazifasini bajaradi. Bu naqshning juda yuzaki va qisqacha tavsifi, ammo MVC ushbu maqolaning asosiy mavzusi emas. Kim ko'proq bilishni xohlaydi - Google yordamga! Foydalanuvchi qo'shish uchun forma yaratish Add.jsp fayliga ikkita matn kiritish maydonidan (biri oddiy, ikkinchisi parol) va serverga ma'lumotlarni jo'natish tugmasidan iborat shakl qo'shamiz.

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

Bu yerda formada qiymat posti bilan metod atributi mavjud . Bu shuni anglatadiki, ushbu shakldagi ma'lumotlar POST so'rovi shaklida serverga yuboriladi. Harakat atributi ko'rsatilmagan, ya'ni so'rov biz ushbu sahifaga o'tgan manzilga yuboriladi ( /add ). Shunday qilib, ushbu manzilga bog'langan bizning servletimiz GET so'rovini olgandan so'ng, ushbu jsp-ni foydalanuvchilarni qo'shish formasi bilan qaytaradi va agar u POST so'rovini qabul qilsa, bu shakl o'z ma'lumotlarini u erga yuborganligini bildiradi (biz uni biz undan tortib olamiz ) doPost() Shuni ta'kidlash kerakki, kiritish maydonlarida nom parametri mavjud (nomli maydon uchun qiymat nomi, parolli maydon uchun esa pass qiymati mavjud ) . Bu juda muhim nuqta. Ushbu ma'lumotni (kiritilgan ism va parol) so'rovdan (allaqachon servlet ichida) olish uchun biz aynan shu nomdan foydalanamiz va o'tkazamiz . Ammo bu haqda keyinroq. Ma'lumotni jo'natish tugmasi yana odatda odatdagidek chiqish maydoni sifatida emas, balki tugma shaklida amalga oshiriladi. Bu variant qanchalik universal ekanligini bilmayman, lekin u men uchun ishlaydi (Chrome brauzeri).

Servlet bilan POST so'rovini qayta ishlash

Keling, AddServlet servletiga qaytaylik . Sizga eslatib o'taman: bizning servletimiz GET so'rovlarini "ushlay olishi" uchun biz HttpServlet sinfidagi doGet() usulini bekor qildik . Servletimizga POST so'rovlarini ham ushlashni o'rgatish uchun biz doPost() usulini ham bekor qilishimiz kerak . U Tomcat dan shunga o'xshash so'rov va javob ob'ektlarini oladi , biz ular bilan ishlaymiz. Birinchidan, so'rovdan nomni chiqaramiz va forma yuborgan parametrlarni o'tkazamiz (agar siz ularni shaklda boshqacha nomlagan bo'lsangiz, unda bu siz yozgan nomlar). Shundan so'ng biz olingan ma'lumotlardan foydalangan holda foydalanuvchi ob'ektimizni yaratamiz. Keyin biz model ob'ektini olamiz va yaratilgan foydalanuvchini modelga qo'shamiz.

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

Ko'rish uchun ma'lumotlarni uzatish

Keling, ListServlet servletiga o'tamiz . Bu yerda doGet() usuli allaqachon amalga oshirilgan bo'lib , u boshqaruvni list.jsp ko'rinishiga o'tkazadi . Agar sizda hali bu yo'q bo'lsa, uni AddServlet servletidagi xuddi shu usulga o'xshatib bajaring . Endi modeldan foydalanuvchi nomlari ro'yxatini olish va ularni qabul qiladigan va chiroyli ko'rsatadigan ko'rinishga o'tkazish yaxshi bo'lar edi. Buning uchun biz yana Tomcat- dan olgan so'rov ob'ektidan foydalanamiz . Biz ushbu ob'ektga atribut qo'shishimiz mumkin, unga qandaydir nom berishimiz mumkin va, aslida, biz ko'rishga o'tkazmoqchi bo'lgan ob'ektning o'zi . Bajarish jarayonini servletdan ko'rinishga o'tkazishda biz u erga servletning o'zi olgan so'rov va javob ob'ektlarini o'tkazamiz, so'ngra so'rov ob'ektiga nomlar ro'yxatini qo'shish orqali biz ushbu so'rovdan foydalanishimiz mumkin. ko'rinishdagi ob'ekt foydalanuvchi nomlari ro'yxatini yarating va oling. Biz ListServlet klassi bilan tugatdik , shuning uchun bu erda butun sinf uchun kod:

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 fayllarida java kodini bajarish

list.jsp fayli ustida ishlashni boshlash vaqti keldi . U ListServlet bu yerda bajarish jarayonidan o'tgandagina bajariladi . Bundan tashqari, ushbu servletda biz allaqachon modeldan foydalanuvchi nomlari ro'yxatini tayyorladik va uni so'rov ob'ektiga o'tkazdik. Bizda ismlar ro'yxati borligi sababli, biz uni aylanib chiqishimiz va har bir nomni chop etishimiz mumkin. Aytganimdek, jsp fayllari java kodini bajarishi mumkin (bu ularni statik html sahifalardan farq qiladi). Ba'zi kodlarni bajarish uchun bizga kerak bo'lgan joyga quyidagi konstruktsiyani qo'yish kifoya:

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

Ushbu konstruktsiya ichida biz bir nechta o'zgaruvchilarga kirishimiz mumkin:

• so'rov bizning so'rov ob'ektimiz bo'lib, biz uni servletdan o'tkazdik, bu erda u oddiygina req deb nomlangan ;
• servletda resp deb nomlangan javob - javob ob'ekti ;

• out - bu JspWriter tipidagi ob'ekt (odatdagi Writerdan meros bo'lib o'tgan ), uning yordamida biz to'g'ridan-to'g'ri html sahifasining o'ziga biror narsani "yozishimiz" mumkin. out.println("Salom dunyo!") yozuvi System.out.println("Salom dunyo!") yozuviga juda o'xshaydi , lekin ikkalasini chalkashtirmang!
  out.println() html sahifasiga “yozadi”, System.out.println esa tizim chiqishiga yozadi. Java kodi bo'lgan bo'lim ichida jsp usuli System.out.println() ni chaqirsangiz, natijalarni sahifada emas, Tomcat konsolida ko'rasiz .

Bu yerda jsp ichidagi boshqa mavjud ob'ektlarni qidirishingiz mumkin . So'rov ob'ektidan foydalanib , biz servletdan uzatilgan nomlar ro'yxatini olishimiz mumkin (biz ushbu ob'ektga tegishli atributni biriktirdik) va out ob'ektidan foydalanib , biz ushbu nomlarni ko'rsatishimiz mumkin. Keling, buni qilaylik (hozircha faqat html ro'yxati shaklida):

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

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

Agar siz ro'yxatni faqat foydalanuvchilar mavjud bo'lsa ko'rsatishingiz kerak bo'lsa va aks holda hali foydalanuvchilar yo'qligi haqida ogohlantirishni ko'rsatishingiz kerak bo'lsa, biz ushbu bo'limni biroz qayta yozishimiz mumkin:

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

Endi biz ma'lumotlarni servletlardan ko'rinishlarga o'tkazishimiz mumkin, biz AddServlet-ni biroz yaxshilashimiz mumkin , shunda foydalanuvchi muvaffaqiyatli qo'shilganida bildirishnoma ko'rsatiladi. Buning uchun doPost() usulida modelga yangi foydalanuvchi qoʻshgandan soʻng biz ushbu foydalanuvchi nomini req obyekti atributlariga qoʻshishimiz va boshqaruvni add.jsp koʻrinishiga qaytarishimiz mumkin . Va unda allaqachon Java kodi bo'lgan bo'limni yarating, unda bunday atribut so'rovda bor yoki yo'qligini tekshirib ko'ring va agar shunday bo'lsa, foydalanuvchi muvaffaqiyatli qo'shilganligi to'g'risida xabar chiqaring. Ushbu o'zgarishlardan so'ng to'liq AddServlet servlet kodi quyidagicha ko'rinadi:

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

Bu erda, doPost() usuli oxirida biz modelga qo'shilgan foydalanuvchi nomi bilan atributni o'rnatamiz, shundan so'ng biz doGet() usulini chaqiramiz , unga joriy so'rov va javobni o'tkazamiz. Va doGet() usuli allaqachon boshqaruvni ko'rinishga o'tkazadi, u erda atribut sifatida biriktirilgan qo'shilgan foydalanuvchi nomi bilan so'rov ob'ektini yuboradi. Qolgan narsa add.jsp faylini tuzatish , agar shunday atribut mavjud bo'lsa, bunday bildirishnomani ko'rsatadi. Yakuniy 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>

Sahifaning asosiy qismi quyidagilardan iborat:

• sarlavhali div-a;
• kontent uchun div konteyneri, u foydalanuvchi nomi bilan atribut mavjudligini tekshiradi;
• foydalanuvchilarni qo'shish formasi bilan div;
• va oxirida asosiy sahifaga qaytish tugmasi bo'lgan altbilgi mavjud.

Bu juda ko'p divlar kabi ko'rinishi mumkin, ammo biz uslublar qo'shganda ularni keyinroq ishlatamiz. Yakuniy 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>

Shunday qilib, bizda to'liq ishlaydigan veb-ilova mavjud bo'lib, u foydalanuvchilarni saqlashi va qo'shishi, shuningdek ularning nomlari ro'yxatini ko'rsatishi mumkin. Faqat uni bezash qoladi... :)

Uslublarni qo'shish. Biz W3.CSS ramkasidan foydalanamiz

Ayni paytda bizning ilovamiz ishlayapti, lekin mutlaqo aqldan ozgan. Shuning uchun biz fonni, matn va tugmalarning rangini, uslublar ro'yxatini qo'shamiz, tekislashni qilamiz, chekinishlarni qo'shamiz va hokazo. Agar siz uslublarni qo'lda yozsangiz, bu ko'p vaqt va asablarni talab qilishi mumkin. Shuning uchun men W3.CSS CSS ramkasidan foydalanishni taklif qilaman. U allaqachon uslublar bilan tayyor sinflarga ega; qolgani biz qo'llamoqchi bo'lgan CSS sinflarini kerakli joylarda joylashtirish. Ularni sahifalarimizga qo'shish uchun avval biz uslublar bilan faylni qo'shamiz. Bu ikki usulda amalga oshirilishi mumkin:

1. sahifalarimizni ko'rib chiqing va bosh bo'limga uslublar bilan faylga to'g'ridan-to'g'ri havolani kiriting

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

   Agar doimiy Internet aloqasi bo'lsa, ushbu parametr mos keladi. Keyin, mahalliy serverda sahifalaringizni ochganingizda, uslublar Internetdan tortib olinadi.




2. Agar siz barcha uslublarga mahalliy bo'lishni istasangiz va Internetga bog'liq bo'lmasangiz, uslublar bilan faylni yuklab oling va uni veb- papkaning biron bir joyiga joylashtiring (masalan, web/styles/w3.css ), so'ngra bizning barcha uslublarimizni ko'rib chiqing. sahifalarni ( index.html, add.jsp, list.jsp ) oching va bosh qismidagi uslublar bilan ushbu faylga havolani kiriting.

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

   Shundan so'ng, teglar orqali o'ting va o'zingizga yoqqan uslublarni qo'shing. Men bu haqda batafsil to'xtalmayman, lekin darhol o'zimning uchta faylimning tayyor versiyalarini tartiblangan uslublar sinflari bilan beraman.

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>

Hammasi shu :) Agar sizda hali ham savollaringiz yoki sharhlaringiz bo'lsa, yoki aksincha, biror narsa ishlamasa - sharh qoldiring. UPD: agar siz tugmachalarni bosishda 404 xato bilan bog'liq muammolarga duch kelsangiz, garchi hamma narsa to'g'ri bajarilgan bo'lsa-da, ehtimol siz fikrda joylashtirish konfiguratsiyasini to'g'rilashingiz kerak. Buni amalga oshirish uchun siz konfiguratsiyalarni tahrirlash bo'limiga o'tishingiz kerak (boshlash tugmasi yaqinidagi tepada), oynaning o'ng tomonidagi Joylashtirish yorlig'iga o'ting va Ilova kontekstida u oddiygina ko'rsatilganligiga ishonch hosil qiling / Xo'sh, men' Bularning barchasidan bir nechta skrinshotlarni ilova qilaman. Va nihoyat , agar siz ushbu loyiha bilan mashq qilmoqchi bo'lsangiz, quyidagilarni sinab ko'rishingiz mumkin:

• foydalanuvchini o'chirish uchun servlet va jsp va mavjud foydalanuvchini o'zgartirish/tahrirlash uchun yana ikkitasini yarating. Siz servletlarda haqiqiy CrUD veb-ilovasini olasiz :));
• qo'shilgan foydalanuvchilar serverni qayta ishga tushirgandan keyin yo'qolib qolmasligi uchun ro'yxatni (Ro'yxat) ma'lumotlar bazasi bilan ishlash bilan almashtiring :)

Omad!