Membuat aplikasi web sederhana menggunakan servlet dan JSP (bagian 2)

Membuat aplikasi web sederhana menggunakan servlet dan JSP (bagian 1) Pengetahuan yang diperlukan untuk memahami artikel: Anda kurang lebih sudah mengetahui Java Core dan ingin melihat teknologi JavaEE dan pemrograman web. Akan sangat masuk akal bagi Anda untuk saat ini mempelajari pencarian Java Collections, yang berhubungan dengan topik yang dekat dengan artikel.

Membuat entitas

Dalam paket entitas , kita akan membuat Userkelas yang memiliki dua variabel string pribadi: name dan password . Buat konstruktor (default dan yang mengambil kedua nilai) dan pengambil/penyetel, dan ganti toString()metode untuk berjaga-jaga, bersama dengan metode equals()dan hashCode(). Dengan kata lain, kami akan melakukan semua yang dilakukan pengembang Java yang terhormat saat membuat kelas.

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

Sekarang kita dapat mulai membuat daftar pengguna. Kami akan menambahkan pengguna ke dalamnya, dan mengambil pengguna darinya untuk menampilkannya. Namun, kami memiliki satu masalah. Kami tidak membuat objek servlet kami. Tomcat melakukan ini untuk kita. Metode yang kami timpa di dalamnya sudah ditentukan untuk kami, dan kami tidak dapat membuat parameter. Lalu bagaimana kita membuat daftar bersama yang akan terlihat di kedua servlet kita? Jika kita hanya membuat objek daftar di setiap servlet, maka kita akan menambahkan pengguna ke satu daftar, tetapi menampilkan pengguna dari yang lain di ListServlet. Jadi kita membutuhkan objek yang digunakan bersama oleh kedua servlet. Secara umum, kita membutuhkan objek yang digunakan bersama oleh semua kelas dalam program kita: satu objek untuk keseluruhan program. Saya harap Anda pernah mendengar sesuatu tentang pola desain. Bagi sebagian orang, ini mungkin kebutuhan nyata pertama untuk pola Singleton dalam program mereka. Anda bisa menjadi gila dan membuat Singleton yang manis dengan pemeriksaan ganda dan sinkronisasi (ya, aplikasi kami multithreaded, karena servlet Tomcat berjalan di utas terpisah). Tapi saya akan menggunakan teknik inisialisasi awal, karena ini cukup memadai untuk tujuan kita di sini.

Membuat model

Buat kelas (dan terapkan pola Singleton ) dalam paket model dan beri nama sesuatu yang tidak biasa. Misalnya, Model . Kami akan membuat daftar pengguna pribadi di kelas kami, dan menerapkan dua metode: satu untuk menambahkan pengguna, dan satu lagi untuk mengembalikan daftar string (nama pengguna). Karena objek pengguna kami terdiri dari nama pengguna dan kata sandi, dan kami tidak ingin mengungkapkan kata sandi pengguna, kami hanya akan memiliki daftar nama.

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

Sedikit tentang MVC

Karena Anda sudah pernah mendengar tentang singleton , Anda mungkin pernah mendengar tentang pola desain lain model-view-controller (MVC). Tujuannya adalah untuk memisahkan logika bisnis dari tampilan. Artinya, memisahkan kode yang menentukan apa yang harus dilakukan dari kode yang menentukan cara menampilkan sesuatu. Tampilan bertanggung jawab atas bagaimana data disajikan. Dalam kasus kami, tampilan adalah halaman JSP kami . Itulah mengapa saya meletakkannya di folder bernama views . Model adalah data yang sebenarnya digunakan oleh program. Dalam kasus kami, ini adalah pengguna (daftar pengguna). Dan pengontrol adalah penghubung di antara mereka. Mereka mengambil data dari model dan meneruskannya ke tampilan (atau mendapatkan beberapa data dari Tomcat, memprosesnya, dan meneruskannya ke model). Anda mendefinisikan logika bisnis Anda (apa yang harus dilakukan program) di dalamnya, bukan di model atau tampilan. Jadi, setiap bagian menangani urusannya sendiri:

model menyimpan data;
tampilan membuat representasi data yang indah;
pengontrol menangani pemrosesan data.

Hal ini memungkinkan program menjadi sangat sederhana dan dapat dipelihara, daripada tumpukan semua kode dalam satu kelas. MVC tidak hanya cocok untuk pemrograman web, tetapi juga sering digunakan di area ini (hampir selalu). Dalam kasus kami, servlet akan bertindak sebagai pengontrol. Ini adalah deskripsi pola yang sangat dangkal dan singkat, tetapi MVC bukanlah topik utama artikel ini. Jika ada yang ingin mempelajari lebih lanjut, Google adalah teman Anda! Buat formulir untuk menambahkan pengguna. Tambahkan formulir ke add.jsp . Itu harus terdiri dari dua bidang input teks (satu biasa, yang lain — bidang kata sandi) dan tombol untuk mengirim data ke 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>

Di sini form memiliki atribut method dengan nilai post . Hal ini menunjukkan bahwa data dari formulir ini akan masuk ke server sebagai permintaan POST . Atribut tindakan tidak ditentukan, yang berarti permintaan akan dikirim ke alamat yang sama dengan tempat kami datang ke halaman ini ( /add ). Jadi, setelah menerima permintaan GET , servlet kami yang terikat ke alamat ini mengembalikan JSP dengan formulir add-user. Dan jika menerima permintaan POST , maka kita tahu formulir mengirim datanya ke sini (yang kita ekstrak dari objek permintaan didoPost()metode, proses, dan meneruskan ke model untuk disimpan). Perlu dicatat bahwa bidang masukan memiliki parameter yang disebut nama (untuk nama pengguna, atau kata sandi). Ini adalah poin yang sangat penting. Jadi, untuk menerima data ini (nama pengguna dan kata sandi yang akan dimasukkan) dari permintaan (di dalam servlet), kami akan menggunakan kolom nama dan sandi ini . Tapi lebih dari itu nanti. Tombol saya untuk mengirim data kembali dibuat sebagai tombol , bukan sebagai bidang keluaran seperti biasanya. Saya tidak tahu seberapa luas adopsi pendekatan ini, tetapi ini berhasil untuk saya (browser Chrome).

Servlet menangani permintaan POST

Mari kembali ke AddServlet . Saya mengingatkan Anda bahwa untuk mengizinkan servlet kami "menangkap" permintaan GET , kami mengganti doGet()metode di kelas HttpServlet . Untuk mengajarkan servlet kami untuk juga menangkap permintaan POST , kami juga harus mengganti doPost()metodenya. Tomcat memberikannya objek permintaan dan respons serupa yang akan kami kerjakan. Untuk memulai, ekstrak nama permintaan dan berikan parameter yang dikirim oleh formulir (jika Anda menentukan nama yang berbeda di formulir, gunakan nama tersebut). Setelah itu, buat objek pengguna menggunakan data yang diterima. Kemudian kita mendapatkan objek model dan menambahkan pengguna yang dibuat ke model.

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

Meneruskan data ke tampilan

Mari beralih ke ListServlet . Metode ini doGet()sudah diterapkan. Itu hanya mentransfer kontrol ke tampilan ( list.jsp ). Jika Anda belum memilikinya, buatlah dengan analogi dengan metode di AddServlet . Sekarang akan menyenangkan untuk mendapatkan daftar nama pengguna dari model dan meneruskannya ke tampilan, yang akan menerimanya dan menampilkannya dengan indah. Untuk melakukan ini, kami akan kembali menggunakan objek permintaan yang kami terima dari Tomcat . Kita dapat menambahkan atribut ke objek ini, memberinya semacam nama. Bahkan, kita bisa menambahkan objek yang ingin kita berikan ke view. Karena fakta bahwa ketika mentransfer kontrol dari servlet ke tampilan, kami meneruskan tampilan permintaan dan respons yang sama dengan objek yang diterima servlet, kami dapat menambahkan daftar nama kami ke objek permintaan dan kemudian mendapatkan daftar nama pengguna kami dari permintaan objek dalam tampilan. Kita sudah selesai dengan kelas ListServlet , jadi saya akan menyajikan kode seluruh kelas di sini:

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

Menjalankan kode Java dalam file JSP

Saatnya untuk melihat list.jsp . Itu hanya akan dieksekusi ketika ListServlet mentransfer kontrol ke sana. Selain itu, kami telah menyiapkan daftar nama pengguna dari model di servlet dan mengirimkannya ke objek permintaan. Karena kami memiliki daftar nama, kami dapat mengulanginya menggunakan forloop dan menampilkan setiap nama. Seperti yang saya katakan sebelumnya, file JSP dapat mengeksekusi kode Java (yang membuatnya berbeda dari halaman HTML statis). Untuk mengeksekusi beberapa kode, yang perlu kita lakukan hanyalah meletakkan konstruk berikut di tempat yang sesuai:

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

Dalam konstruk ini, kami mendapatkan akses ke beberapa variabel:

request — objek permintaan kami, yang kami berikan dari servlet, di mana itu hanya disebut req ;
response — objek respons (disebut resp di servlet);
out — objek JspWriter (yang mewarisi Writer biasa ), yang dapat kita gunakan untuk "menulis" sesuatu langsung ke halaman HTML itu sendiri. Pernyataan out.println("Hello, World!") sangat mirip dengan System.out.println("Hello, World!") , tetapi jangan bingung!
out.println() "menulis" ke halaman HTML , sedangkan System.out.println menulis ke aliran keluaran sistem . Jika Anda memanggil System.out.println() di dalam bagian JSP dengan kode Java , Anda akan melihat hasilnya di konsol Tomcat , tetapi tidak di halaman.

Anda dapat mencari objek lain yang tersedia dalam JSP di sini . Kita dapat menggunakan objek permintaan untuk mendapatkan daftar nama yang diteruskan dari servlet (kita melampirkan atribut yang sesuai ke objek ini), dan kita dapat menggunakan objek keluar untuk menampilkan nama-nama ini. Mari kita tampilkan (untuk saat ini, sebagai daftar HTML sederhana):

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

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

Jika kita perlu menampilkan daftar hanya jika ada pengguna, dan sebaliknya menampilkan peringatan bahwa belum ada pengguna, maka kita dapat menulis ulang bagian ini sedikit:

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

Sekarang setelah kita mengetahui cara meneruskan data dari servlet ke tampilan, kita dapat meningkatkan AddServlet kita sehingga menampilkan pemberitahuan tentang penambahan pengguna yang berhasil. Untuk melakukannya, dalam doPost()metode ini, setelah menambahkan pengguna baru ke model, kita dapat menambahkan nama pengguna ini ke atribut objek req dan mengembalikan kontrol ke tampilan ( add.jsp ). Dan sekarang kami akan menambahkan bagian dengan kode Java ke dalamnya, di mana kami akan memeriksa apakah permintaan memiliki atribut seperti itu, dan jika ada — maka kami akan menampilkan pesan bahwa pengguna telah berhasil ditambahkan. Setelah perubahan ini, kode lengkap AddServlet akan terlihat seperti ini:

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

Di sini, di akhir metode, doPost()kami membuat atribut dengan nama pengguna yang ditambahkan ke model, dan kemudian memanggil metode doGet(), yang kami berikan permintaan dan respons saat ini. Metode doGet()sekarang mentransfer kontrol ke tampilan, yang juga menerima objek permintaan dengan nama pengguna tambahan yang dilampirkan sebagai atribut. Yang tersisa untuk kita lakukan adalah memperbaiki add.jsp sehingga menampilkan notifikasi jika tidak ada atribut seperti itu. Inilah versi terakhir dari 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>

Badan halaman terdiri dari:

div dengan tajuk;
wadah div untuk konten, yang mencakup pemeriksaan apakah ada atribut dengan nama pengguna;
sebuah div dengan form add-user;
dan di bagian bawah, footer dengan tombol untuk kembali ke halaman beranda.

Ini mungkin tampak seperti terlalu banyak div, tetapi kita akan menggunakannya nanti saat kita menambahkan gaya. Inilah versi terakhir dari 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>

Dengan demikian, kami memiliki aplikasi web yang berfungsi penuh yang dapat menyimpan dan menambahkan pengguna, serta menampilkan daftar nama mereka. Sekarang kita hanya perlu membuatnya cantik… :)

Membuat aplikasi web sederhana menggunakan servlet dan JSP (bagian 2) - 2

Menambahkan gaya. Kami akan menggunakan kerangka kerja W3.CSS

Saat ini, aplikasi kami berfungsi, tetapi terlihat sangat keterlaluan. Jadi, mari tambahkan latar belakang, warnai teks dan tombol, tambahkan gaya ke daftar, sejajarkan elemen, tambahkan indentasi, dan seterusnya. Gaya penulisan secara manual dapat memakan banyak waktu dan melelahkan saraf kita. Jadi saya mengusulkan menggunakan framework W3.CSS . Itu sudah memiliki kelas siap pakai dengan gaya. Kita hanya perlu mengatur kelas CSS yang ingin kita gunakan di tempat yang tepat. Untuk menambahkannya ke halaman kami, pertama-tama kami menghubungkan file gaya. Ada dua cara untuk melakukan ini:

buka halaman kami dan masukkan tautan langsung berikut ke file gaya di bagian kepala

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

Opsi ini cocok jika Anda memiliki koneksi Internet permanen. Saat Anda membuka halaman Anda di server lokal, gaya akan ditarik dari Internet.
Tetapi jika Anda ingin memiliki semua gaya secara lokal dan tidak bergantung pada koneksi Internet, unduh file gaya dan letakkan di suatu tempat di dalam folder web (misalnya web/styles/w3.css ). Kemudian telusuri semua halaman kita ( index.html, add.jsp, list.jsp ) dan tambahkan link berikut ke file style di dalam bagian head :

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

Setelah itu, cukup telusuri tag dan tambahkan gaya yang Anda suka. Saya tidak akan membahas ini secara detail. Sebagai gantinya, saya hanya akan menyediakan versi siap pakai dari tiga file saya dengan kelas gaya 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>

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

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

Dan itu saja. :) Jika Anda masih memiliki pertanyaan atau komentar, atau jika ada yang tidak beres, silakan tinggalkan komentar. Dan saya akan melampirkan beberapa tangkapan layar tentang bagaimana hasilnya.

Membuat aplikasi web sederhana menggunakan servlet dan JSP (bagian 2) - 3

Membuat aplikasi web sederhana menggunakan servlet dan JSP (bagian 2) - 4

Membuat aplikasi web sederhana menggunakan servlet dan JSP (bagian 2) - 5

Dan terakhir , jika Anda ingin berlatih dengan proyek ini, Anda dapat mencoba yang berikut ini:

buat servlet dan JSP untuk menghapus pengguna, dan tambahkan pasangan lain untuk mengedit pengguna yang ada. Hasilnya adalah aplikasi web CRUD asli yang dibangun menggunakan servlet. ;)
ganti Daftar dengan database, sehingga pengguna yang ditambahkan tidak hilang setelah server di-restart. :)

Semoga beruntung!

Lebih banyak membaca:
Bagian 5. Servlet dan Java Servlet API. Menulis aplikasi web sederhana Bagian 6. Kontainer servlet