Tạo một ứng dụng web đơn giản sử dụng servlet và JSP (phần 2)

Tạo một ứng dụng web đơn giản sử dụng servlet và JSP (phần 1) Kiến thức cần có để hiểu bài viết: Bạn đã ít nhiều tìm hiểu về Java Core và muốn xem xét các công nghệ JavaEE và lập trình web. Sẽ hợp lý nhất nếu bạn hiện đang nghiên cứu nhiệm vụ Bộ sưu tập Java, nhiệm vụ liên quan đến các chủ đề gần với bài viết.

Tạo một ứng dụng web đơn giản bằng servlet và JSP (phần 2) - 1

Tạo thực thể

Trong gói thực thể , chúng ta sẽ tạo một Userlớp có hai biến chuỗi riêng: tên và mật khẩu . Tạo các hàm tạo (mặc định và một hàm nhận cả hai giá trị) và getters/setters, đồng thời ghi đè toString()phương thức đề phòng, cùng với các phương thức equals()và hashCode(). Nói cách khác, chúng tôi sẽ làm mọi thứ mà một nhà phát triển Java đáng kính làm khi tạo một lớp.

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

Bây giờ chúng ta có thể bắt đầu tạo danh sách người dùng. Chúng tôi sẽ thêm người dùng vào đó và lấy người dùng từ đó để hiển thị chúng. Tuy nhiên, chúng tôi có một vấn đề. Chúng tôi không tạo các đối tượng servlet của mình. Tomcat làm điều này cho chúng tôi. Các phương thức chúng tôi ghi đè trong chúng đã được xác định cho chúng tôi và chúng tôi không thể tham số. Sau đó, làm cách nào để chúng tôi tạo một danh sách dùng chung sẽ hiển thị trong cả hai servlet của chúng tôi? Nếu chúng ta chỉ tạo một đối tượng danh sách trong mỗi servlet, thì chúng ta sẽ thêm người dùng vào một danh sách, nhưng hiển thị người dùng từ một danh sách khác trong ListServlet. Vì vậy, chúng ta cần một đối tượng được chia sẻ bởi cả hai servlet. Nói chung, chúng ta cần một đối tượng được chia sẻ bởi tất cả các lớp trong chương trình của chúng ta: một đối tượng cho toàn bộ chương trình. Tôi hy vọng bạn đã nghe điều gì đó về các mẫu thiết kế. Đối với một số người, đây có thể là nhu cầu thực sự đầu tiên đối với mẫu Singleton trong chương trình của họ. Bạn có thể lập dị và tạo ra một số Singleton ngọt ngào bằng cách kiểm tra và đồng bộ hóa hai lần (vâng, ứng dụng của chúng tôi là đa luồng, vì các máy chủ Tomcat chạy trên các luồng riêng biệt). Nhưng tôi sẽ sử dụng kỹ thuật khởi tạo sớm, bởi vì nó hoàn toàn phù hợp với mục đích của chúng ta ở đây.

Tạo một mô hình

Tạo một lớp (và triển khai mẫu Singleton ) trong gói mô hình và gọi nó là một cái gì đó bất thường. Ví dụ, Mô hình . Chúng tôi sẽ tạo một danh sách người dùng riêng tư trong lớp của chúng tôi và triển khai hai phương thức: một để thêm người dùng và một phương thức khác để trả về danh sách các chuỗi (tên người dùng). Vì đối tượng người dùng của chúng tôi bao gồm tên người dùng và mật khẩu và chúng tôi không muốn tiết lộ mật khẩu người dùng nên chúng tôi sẽ chỉ có một danh sách tên.

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

Một chút về MVC

Vì bạn đã nghe nói về singleton , nên có lẽ bạn đã nghe nói về một bộ điều khiển chế độ xem mô hình mẫu thiết kế (MVC) khác. Mục đích của nó là tách logic nghiệp vụ khỏi chế độ xem. Đó là, để tách mã xác định việc cần làm khỏi mã xác định cách hiển thị nội dung. Chế độ xem chịu trách nhiệm về cách trình bày dữ liệu. Trong trường hợp của chúng tôi, chế độ xem là các trang JSP của chúng tôi . Đó chính xác là lý do tại sao tôi đặt chúng trong một thư mục có tên là lượt xem . Mô hình là dữ liệu mà chương trình thực sự làm việc với. Trong trường hợp của chúng tôi, đây là người dùng (danh sách người dùng). Và bộ điều khiển là liên kết giữa chúng. Họ lấy dữ liệu từ mô hình và chuyển nó đến các khung nhìn (hoặc lấy một số dữ liệu từ Tomcat, xử lý và chuyển nó cho mô hình). Bạn xác định logic nghiệp vụ của mình (chương trình nên làm gì) trong chúng, không phải trong mô hình hoặc dạng xem. Do đó, mỗi phần xử lý công việc kinh doanh riêng của mình:

mô hình lưu trữ dữ liệu;
các khung nhìn hiển thị các biểu diễn đẹp mắt của dữ liệu;
bộ điều khiển xử lý xử lý dữ liệu.

Điều này cho phép chương trình khá đơn giản và có thể bảo trì, thay vì một đống mã khổng lồ trong một lớp. MVC không chỉ phù hợp với lập trình web mà còn được sử dụng đặc biệt thường xuyên trong lĩnh vực này (hầu như luôn luôn). Trong trường hợp của chúng tôi, các servlet sẽ đóng vai trò là bộ điều khiển. Đây là một mô tả rất hời hợt và ngắn gọn về mẫu, nhưng MVC không phải là chủ đề chính của bài viết này. Nếu bất cứ ai muốn tìm hiểu thêm, Google là bạn của bạn! Tạo biểu mẫu để thêm người dùng. Thêm biểu mẫu vào add.jsp . Nó phải bao gồm hai trường nhập văn bản (một trường thông thường, trường kia - trường mật khẩu) và một nút để gửi dữ liệu đến máy chủ.

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

Ở đây biểu mẫu có một thuộc tính method với giá trị post . Điều này cho biết rằng dữ liệu từ biểu mẫu này sẽ được chuyển đến máy chủ dưới dạng yêu cầu POST . Thuộc tính hành động không được chỉ định, có nghĩa là yêu cầu sẽ được gửi đến cùng một địa chỉ mà chúng ta đã đến trang này ( /add ). Do đó, khi nhận được yêu cầu GET , servlet của chúng tôi được liên kết với địa chỉ này sẽ trả về JSP với biểu mẫu người dùng bổ sung. Và nếu nó nhận được yêu cầu POST , thì chúng tôi biết biểu mẫu đã gửi dữ liệu của nó ở đây (mà chúng tôi trích xuất từ đối tượng yêu cầu trongdoPost()phương pháp, quy trình và chuyển đến mô hình để lưu). Điều đáng chú ý là các trường đầu vào có một tham số được gọi là tên (đối với tên người dùng hoặc mật khẩu). Đây là một điểm rất quan trọng. Do đó, để nhận dữ liệu này (tên người dùng và mật khẩu sẽ được nhập) từ yêu cầu (bên trong servlet), chúng ta sẽ sử dụng các trường tên và mật khẩu này . Nhưng nhiều hơn về điều này sau. Nút gửi dữ liệu của tôi lại được tạo dưới dạng nút chứ không phải là trường đầu ra như thông lệ. Tôi không biết phương pháp này được áp dụng rộng rãi như thế nào, nhưng nó hiệu quả với tôi (trình duyệt Chrome).

Servlet xử lý các yêu cầu POST

Hãy trở lại AddServlet . Tôi xin nhắc bạn rằng để cho phép servlet của chúng ta "bắt" các yêu cầu GET , chúng ta đã ghi đè doGet()phương thức trong lớp HttpServlet . Để dạy cho servlet của chúng ta bắt các yêu cầu POST , chúng ta cũng phải ghi đè doPost()phương thức. Tomcat chuyển cho nó các đối tượng yêu cầu và phản hồi tương tự mà chúng ta sẽ làm việc cùng. Để bắt đầu, hãy trích xuất tên của yêu cầu và chuyển các tham số được gửi bởi biểu mẫu (nếu bạn đã chỉ định các tên khác nhau trong biểu mẫu thì hãy sử dụng các tên đó). Sau đó, tạo đối tượng người dùng bằng dữ liệu nhận được. Sau đó, chúng tôi lấy đối tượng mô hình và thêm người dùng đã tạo vào mô hình.

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

Truyền dữ liệu cho view

Hãy chuyển sang ListServlet . Phương pháp này doGet()đã được thực hiện. Nó chỉ đơn giản là chuyển điều khiển sang dạng xem ( list.jsp ). Nếu bạn chưa có cái này, thì hãy tạo nó bằng cách tương tự với phương thức trong AddServlet . Bây giờ sẽ rất tuyệt nếu lấy danh sách tên người dùng từ mô hình và chuyển chúng đến chế độ xem, chế độ này sẽ nhận và hiển thị chúng một cách đẹp mắt. Để làm điều này, chúng tôi sẽ sử dụng lại đối tượng yêu cầu mà chúng tôi đã nhận được từ Tomcat . Chúng ta có thể thêm một thuộc tính cho đối tượng này, đặt cho nó một số loại tên. Thực tế chúng ta có thể thêm đối tượng muốn truyền vào view. Do thực tế là khi chuyển điều khiển từ servlet sang dạng xem, chúng ta chuyển qua dạng xem cùng các đối tượng yêu cầu và phản hồi mà servlet đã nhận, chúng ta có thể thêm danh sách tên của mình vào đối tượng yêu cầu và sau đó lấy danh sách tên người dùng từ yêu cầu đối tượng trong khung nhìn. Chúng ta đã hoàn thành với lớp ListServlet , vì vậy tôi sẽ trình bày mã của toàn bộ lớp ở đây:

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

Chạy mã Java trong tệp JSP

Đã đến lúc xem list.jsp . Nó sẽ chỉ được thực thi khi ListServlet chuyển quyền điều khiển cho nó. Ngoài ra, chúng tôi đã chuẩn bị sẵn danh sách tên người dùng từ mô hình trong servlet và chuyển nó vào đây trong đối tượng yêu cầu. Vì chúng tôi có danh sách tên, chúng tôi có thể lặp lại nó bằng vòng forlặp và hiển thị từng tên. Như tôi đã nói trước đây, các tệp JSP có thể thực thi mã Java (đây là điều khiến chúng khác với các trang HTML tĩnh). Để thực thi một số mã, tất cả những gì chúng ta cần làm là đặt cấu trúc sau vào vị trí thích hợp:

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

Trong cấu trúc này, chúng tôi có quyền truy cập vào một số biến:

yêu cầu - đối tượng yêu cầu của chúng tôi, mà chúng tôi đã chuyển từ servlet, nơi nó được gọi đơn giản là req ;
phản hồi - đối tượng phản hồi (được gọi là resp trong servlet);
out — một đối tượng JspWriter (kế thừa một Writer thông thường ), mà chúng ta có thể sử dụng để "viết" một cái gì đó trực tiếp vào chính trang HTML . Câu lệnh out.println("Xin chào, Thế giới!") rất giống với câu lệnh System.out.println("Xin chào, Thế giới!") , nhưng đừng nhầm lẫn chúng!
out.println() "ghi" vào trang HTML , trong khi System.out.println ghi vào luồng đầu ra của hệ thống . Nếu bạn gọi System.out.println() trong phần JSP bằng mã Java , bạn sẽ thấy kết quả trong bảng điều khiển Tomcat chứ không phải trên trang.

Bạn có thể tìm các đối tượng khác có sẵn trong một JSP tại đây . Chúng ta có thể sử dụng đối tượng request để lấy danh sách các tên được truyền từ servlet (chúng ta đã đính kèm thuộc tính tương ứng cho đối tượng này) và chúng ta có thể sử dụng đối tượng out để hiển thị các tên này. Hãy hiển thị chúng (hiện tại, dưới dạng danh sách HTML đơn giản):

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

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

Nếu chúng ta chỉ cần hiển thị danh sách nếu có người dùng và nếu không sẽ hiển thị cảnh báo rằng chưa có người dùng nào, thì chúng ta có thể viết lại phần này một chút:

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

Bây giờ chúng ta đã biết cách chuyển dữ liệu từ servlet sang dạng xem, chúng ta có thể cải thiện AddServlet của mình để nó hiển thị thông báo về việc thêm người dùng thành công. Để làm điều này, trong doPost()phương thức này, sau khi thêm người dùng mới vào mô hình, chúng ta có thể thêm tên người dùng này vào thuộc tính của đối tượng req và chuyển điều khiển trở lại chế độ xem ( add.jsp ). Và bây giờ chúng tôi sẽ thêm một phần có mã Java vào đó, nơi chúng tôi sẽ kiểm tra xem yêu cầu có thuộc tính như vậy hay không và nếu có — thì chúng tôi sẽ hiển thị thông báo rằng người dùng đã được thêm thành công. Sau những thay đổi này, mã đầy đủ của AddServlet sẽ giống như thế này:

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

Ở đây, ở cuối phương doPost()thức, chúng tôi tạo một thuộc tính có tên của người dùng đã được thêm vào mô hình, sau đó gọi phương doGet()thức mà chúng tôi chuyển yêu cầu và phản hồi hiện tại. Phương doGet()thức hiện chuyển điều khiển sang dạng xem, dạng xem này cũng nhận đối tượng yêu cầu với tên của người dùng đã thêm được đính kèm dưới dạng thuộc tính. Việc còn lại của chúng ta là sửa lỗi add.jsp để nó hiển thị thông báo nếu không có thuộc tính này. Đây là phiên bản cuối cùng của 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>

Phần thân trang bao gồm các nội dung sau:

một div có tiêu đề;
vùng chứa div cho nội dung, bao gồm kiểm tra xem thuộc tính có tên người dùng có tồn tại hay không;
một div với biểu mẫu người dùng bổ sung;
và ở dưới cùng, một chân trang có nút để quay lại trang chủ.

Điều này có vẻ giống như quá nhiều div, nhưng chúng ta sẽ sử dụng chúng sau khi thêm kiểu. Đây là phiên bản cuối cùng của 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>

Do đó, chúng tôi có một ứng dụng web hoạt động đầy đủ có thể lưu và thêm người dùng, đồng thời hiển thị danh sách tên của họ. Bây giờ chúng ta chỉ cần làm cho nó đẹp thôi… :)

Tạo một ứng dụng web đơn giản bằng servlet và JSP (phần 2) - 2

Thêm phong cách. Chúng tôi sẽ sử dụng khung W3.CSS

Hiện tại, ứng dụng của chúng tôi hoạt động, nhưng nó trông hoàn toàn không phù hợp. Vì vậy, hãy thêm nền, tô màu văn bản và các nút, thêm kiểu cho danh sách, căn chỉnh các thành phần, thêm thụt lề, v.v. Viết các kiểu thủ công có thể mất rất nhiều thời gian và khiến chúng ta căng thẳng. Vì vậy, tôi đề xuất sử dụng khung W3.CSS . Nó đã có các lớp sẵn sàng sử dụng với các kiểu. Chúng ta chỉ cần sắp xếp các lớp CSS mà chúng ta muốn sử dụng ở đúng nơi. Để thêm chúng vào các trang của chúng tôi, trước tiên chúng tôi kết nối tệp kiểu. Có hai cách để làm điều này:

đi qua các trang của chúng tôi và chèn liên kết trực tiếp sau vào tệp kiểu trong phần đầu

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

Tùy chọn này phù hợp nếu bạn có kết nối Internet vĩnh viễn. Khi bạn mở các trang của mình trên máy chủ cục bộ, các kiểu sẽ được lấy từ Internet.
Nhưng nếu bạn muốn có tất cả các kiểu cục bộ và không phụ thuộc vào kết nối Internet, hãy tải xuống tệp kiểu và đặt nó ở đâu đó bên trong thư mục web (ví dụ: web/styles/w3.css ). Sau đó xem qua tất cả các trang của chúng tôi ( index.html, add.jsp, list.jsp ) và thêm liên kết sau vào tệp kiểu bên trong phần đầu :

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

Sau đó, chỉ cần xem qua các thẻ và thêm các kiểu bạn thích. Tôi sẽ không đi sâu vào vấn đề này một cách chi tiết. Thay vào đó, tôi sẽ chỉ cung cấp các phiên bản sẵn sàng sử dụng của ba tệp của mình với các lớp kiểu raster.

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>

thêm.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>

danh sách.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>

Và thế là xong. :) Nếu các bạn còn thắc mắc hay góp ý gì hay có gì chưa giải quyết được thì hãy để lại bình luận nhé. Và tôi sẽ đính kèm một vài ảnh chụp màn hình về cách mọi thứ diễn ra.

Tạo một ứng dụng web đơn giản bằng servlet và JSP (phần 2) - 3

Tạo một ứng dụng web đơn giản bằng servlet và JSP (phần 2) - 4

Tạo một ứng dụng web đơn giản bằng servlet và JSP (phần 2) - 5

Và cuối cùng , nếu bạn muốn thực hành với dự án này, bạn có thể thử như sau:

tạo một servlet và JSP để xóa người dùng và thêm một cặp khác để chỉnh sửa người dùng hiện có. Kết quả sẽ là một ứng dụng web CRUD chính hãng được xây dựng bằng servlet. ;)
thay thế Danh sách bằng cơ sở dữ liệu để những người dùng đã thêm không biến mất sau khi khởi động lại máy chủ. :)

Chúc may mắn!

Đọc thêm:
Phần 5. Servlet và Java Servlet API. Viết một ứng dụng web đơn giản Phần 6. Bộ chứa Servlet