JavaRush /Java Blog /Random-ID /Membuat aplikasi web sederhana menggunakan servlets dan j...

Level 26

Киев

28 Februari 2021
55 views
0 comments

Membuat aplikasi web sederhana menggunakan servlets dan jsp (bagian 1)

Tingkat pengetahuan yang diperlukan untuk memahami artikel: Anda kurang lebih telah memahami Java Core dan ingin melihat teknologi JavaEE dan pemrograman web. Paling masuk akal jika Anda sedang mempelajari misi Koleksi Java, yang mencakup topik yang dekat dengan artikel.

Membuat aplikasi web sederhana menggunakan servlet dan jsp (bagian 1) - 1

Materi ini merupakan kelanjutan logis dari artikel saya Membuat proyek web sederhana di IntelliJ Idea Enterprise . Di dalamnya saya mendemonstrasikan cara membuat template proyek web yang berfungsi. Kali ini saya akan menunjukkan cara membuat aplikasi web sederhana namun cantik menggunakan teknologi Java Servlet API dan JavaServer Pages API. Aplikasi kita akan memiliki halaman beranda dengan dua tautan:

ke halaman penambahan pengguna;
ke halaman tampilan daftar pengguna.

Saya masih akan menggunakan IntelliJ Idea Enterprise Edition, Apache Maven (hanya menyertakan beberapa dependensi) dan Apache Tomcat. Pada akhirnya, kita akan “menghias” aplikasi kita menggunakan kerangka W3.CSS . Kami berasumsi bahwa saat ini Anda sudah memiliki proyek kosong, yang akan kami kembangkan di sini. Jika belum, baca artikel pertama dan buatlah. Ini hanya akan memakan waktu beberapa menit :)

Sedikit tentang struktur aplikasi masa depan

Halaman utama kita ( / ) akan menjadi halaman html statis paling biasa dengan header dan dua link/tombol:

tambahkan pengguna baru (akan dikirim ke /add );
melihat daftar pengguna (kirim ke /list ).

Tomcat akan menangkap permintaan ke alamat ini dan mengirimkannya ke salah satu dari dua servlet yang akan kita buat (pemetaannya akan kita jelaskan di file web.xml ). Dan servlet, pada gilirannya, akan memproses permintaan, menyiapkan data (atau menyimpannya jika pengguna ditambahkan), dan mentransfer kontrol ke file jsp yang sesuai, yang sudah akan “merender” hasilnya. Kami akan menyimpan data dalam daftar yang paling umum (Daftar).

Mari kita membuat halaman beranda statis

Jika Anda memiliki index.jsp di folder web Anda , hapuslah. Sebagai gantinya, di folder ini kita akan membuat file html sederhana bernama index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My super project!</title>
</head>
<body>
    <!-- header -->
    <div>
        <h1>Super app!<//h1>
    </div>

    <div>       <!-- content -->
        <div>    <!-- buttons holder -->
            <button onclick="location.href='/list'">List users<//button>
            <button onclick="location.href='/add'">Add user<//button>
        </div>
    </div>
</body>
</html>

Tidak ada yang rumit di sini. Dalam judul kami menunjukkan judul halaman kami. Di badan halaman kita memiliki dua div utama: header (tajuk) dan konten (konten). Di konten kami memiliki dudukan untuk tombol kami, dan sebenarnya dua tombol yang, ketika diklik, dikirim ke alamat yang sesuai. Anda dapat menjalankan proyek dan melihat tampilannya sekarang. Jika Anda mengklik tombolnya, halaman dengan kesalahan 404 akan terbuka karena kami belum memilikinya. Tapi ini menunjukkan bahwa tombolnya berfungsi. Izinkan saya mencatat bahwa ini bukan opsi yang paling universal, karena jika Anda tiba-tiba menonaktifkan JavaScript, tombol-tombol ini tidak akan berguna di browser. Tapi kami berasumsi bahwa tidak ada yang menonaktifkan JavaScript :). Jelas bahwa tautan sederhana dapat digunakan, tetapi saya lebih memilih tombol. Anda melakukan apa yang paling Anda sukai. Dan jangan melihat fakta bahwa dalam contoh saya akan ada banyak divs . Lalu kita akan mengisinya dengan gaya, dan semuanya akan terlihat lebih indah :).

Buat file jsp untuk merender hasilnya

Di direktori web yang sama , kita akan membuat folder tempat kita akan meletakkan file jsp kita . Saya menyebutnya pandangan, dan sekali lagi, Anda bisa berimprovisasi. Di folder ini kita akan membuat dua file jsp:

add.jsp — halaman untuk menambahkan pengguna;
list.jsp - halaman untuk menampilkan daftar pengguna.

Mari beri mereka judul halaman yang sesuai. Sesuatu seperti “Tambahkan pengguna baru” dan “Daftar pengguna”, dan kami akan membiarkannya seperti itu untuk saat ini.

Mari kita buat dua servlet

Servlet akan menerima dan memproses permintaan yang akan diteruskan oleh Tomcat kepada mereka. Di folder src/main/java kita akan membuat paket aplikasi , yang berisi sumber kita. Di sana kami akan memiliki lebih banyak paket berbeda. Oleh karena itu, agar paket-paket ini tidak dibuat di dalam satu sama lain, mari kita buat beberapa kelas di paket aplikasi (lalu hapus). Sekarang mari kita buat tiga paket berbeda dalam paket app :

entitas - di sinilah letak entitas kita (kelas itu sendiri, yang akan mendeskripsikan objek pengguna);
model - model kita akan ada di sini (lebih lanjut tentang ini nanti);
servlet - nah, inilah servlet kita.

Setelah ini, Anda dapat dengan aman menghapus kelas tersebut dari paket aplikasi (tentu saja jika Anda yang membuatnya). Dalam paket servlets kita akan membuat dua kelas:

AddServlet - akan memproses permintaan yang diterima di /add ;
ListServlet - akan memproses permintaan yang diterima di /list .

Menghubungkan dependensi di Maven

Tomcat versi 9.* mengimplementasikan spesifikasi Servlet versi 4.0 dan JavaServer Pages versi 2.3. Ini tertulis dalam dokumentasi resmi Tomcat 9 di paragraf pertama di baris kedua. Artinya jika Anda, seperti saya, menggunakan versi Tomcat ini, maka kode yang kami tulis dan kirimkan untuk dijalankan akan menggunakan versi yang ditentukan persis. Namun kami ingin spesifikasi ini ada dalam proyek kami, sehingga kode kami yang menggunakannya setidaknya berhasil dikompilasi. Dan untuk ini kita perlu memuatnya ke dalam proyek kita. Di sinilah Maven datang untuk menyelamatkan.

Aturan umumnya adalah ini: jika Anda perlu menghubungkan sesuatu ke proyek Anda menggunakan Maven:

buka situs web repositori Maven;
cari di sana untuk perpustakaan yang Anda butuhkan dan versi yang Anda butuhkan;
Anda mendapatkan kode ketergantungan yang perlu dimasukkan ke pom.xml Anda;
menyisipkan! :)

Jadi mari kita mulai. Pertama kita siapkan file pomnya . Di suatu tempat setelah /version tetapi sebelum /project , masukkan yang berikut ini:

<dependencies>

</dependencies>

Jadi, kami menunjukkan bahwa di dalam tag ini kami akan mencantumkan dependensi yang kami perlukan. Sekarang masuk ke mvnrepository.com , akan ada kolom pencarian di bagian atas. Pertama, masukkan servlet ke dalam pencarian. Hasil pertama, yang memiliki lebih dari tujuh ribu kegunaan, cocok untuk kita. Kami ingat bahwa kami memerlukan versi 4.0 (untuk Tomcat 9; untuk versi lain, implementasi yang lebih lama mungkin cocok). Ini adalah versi yang cukup baru, jadi tidak banyak kegunaannya, tapi itulah yang kita butuhkan. Sebuah halaman akan terbuka di mana Anda bisa mendapatkan kode untuk ketergantungan ini untuk berbagai manajer paket dan Anda bahkan cukup mendownloadnya. Namun karena kita ingin menghubungkannya menggunakan Maven, kita pilih kodenya pada tab Maven. Kami menyalin dan menempelkan ke file pom kami di dalam bagian dependensi. Jika muncul notifikasi di pojok kanan bawah IDEA yang menanyakan apakah kami ingin mengaktifkan impor otomatis, kami setuju. Jika Anda tidak sengaja menolak, buka “Pengaturan” dan aktifkan impor otomatis secara manual: Pengaturan (Ctrl + Alt + S) -> Build, Execution, Deployment -> Maven -> Importing Ini akan menyimpan file pom dan file konfigurasi IDEA untuk ini proyek secara sinkron. Sekarang, dengan menggunakan prinsip yang sama, kita akan menemukan dan menghubungkan Halaman JavaServer versi 2.3 (masukkan jsp dalam pencarian). Dan karena kita telah menggunakan Maven, mari kita segera beri tahu bahwa sumber kita mematuhi sintaksis Java 8, dan sumber tersebut perlu dikompilasi ke dalam bytecode dengan versi yang sama. Setelah semua manipulasi ini, pom.xml kita akan terlihat seperti ini:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>ru.javarush.info.fatfaggy</groupId>
    <artifactId>my-super-project</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>1.8</maven.compile.source>
        <maven.compiler.target>1.8</maven.compile.target>
    </properties>

    <dependencies>
        <!-- Servlet API 4.0 for tomcat 9 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.0</version>
            <scope>provided</scope>
        </dependency>

        <!-- JavaServer Pages API 2.3 for tomcat 9 -->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

</project>

Membuat servlet kami menjadi servlet yang nyata

Pada titik ini, beberapa servlet yang kami buat sebenarnya hanyalah kelas biasa. Mereka tidak memiliki fungsi apa pun. Namun sekarang kita telah menghubungkan API Servlet ke proyek kita, dan jika demikian, kita dapat menggunakan kelas dari sana. Untuk menjadikan servlet kita servlet “nyata”, kita hanya perlu mewarisinya dari kelas HttpServlet .

Pemetaan atau partisi

Sekarang alangkah baiknya untuk memberi tahu Tomcat agar permintaan dari /add ditangani oleh servlet AddServlet kami , dan oleh karena itu permintaan dari /list ditangani oleh servlet ListServlet . Proses ini disebut pemetaan . Ini dilakukan di file web.xml sesuai dengan prinsip ini:

pertama kita mendeskripsikan servlet (kita memberi beberapa nama dan menunjukkan jalur ke kelas itu sendiri);
kemudian kami mengikat servlet ini ke alamat tertentu (kami menunjukkan nama servlet yang baru saja kami berikan dan menunjukkan alamat dari mana permintaan harus dikirim ke servlet ini).

Mari kita jelaskan servletnya:

<servlet>
    <servlet-name>add</servlet-name>
    <servlet-class>app.servlets.AddServlet</servlet-class>
</servlet>

Sekarang kita ikat ke alamat:

<servlet-mapping>
    <servlet-name>add</servlet-name>
    <url-pattern>/add</url-pattern>
</servlet-mapping>

Seperti yang Anda lihat, nama servlet sama di kedua kasus. Berkat ini, Tomcat mengetahui bahwa jika permintaan datang ke alamat /add , permintaan tersebut harus diteruskan ke servlet app.servlets.AddServlet . Kami melakukan hal yang sama dengan servlet kedua. Hasilnya, web.xml kami memiliki kira-kira konten berikut:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- add servlet -->
    <servlet>
        <servlet-name>add</servlet-name>
        <servlet-class>app.servlets.AddServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>add</servlet-name>
        <url-pattern>/add</url-pattern>
    </servlet-mapping>

    <!-- list servlet -->
    <servlet>
        <servlet-name>list</servlet-name>
        <servlet-class>app.servlets.ListServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>list</servlet-name>
        <url-pattern>/list</url-pattern>
    </servlet-mapping>
</web-app>

Omong-omong, kami tidak membuat markup untuk halaman utama di sini (di / ). Faktanya adalah dalam hal ini kita tidak membutuhkannya. Halaman beranda kami adalah file html sederhana yang hanya menampilkan dua tombol. Tidak ada konten dinamis, jadi tidak masuk akal bagi kami untuk membuat servlet terpisah untuknya, ke mana permintaan dari alamat / akan dikirim , dan yang tidak akan melakukan apa pun kecuali mentransfer eksekusi ke beberapa jsp (yang juga harus dibuat), yang akan menggambar Seandainya kita memiliki dua tombol. Kami tidak membutuhkan ini; kami senang dengan sumber daya statis. Ketika Tomcat menerima permintaan, ia akan memeriksa bahwa tidak ada satu pun servlet yang dapat memproses permintaan di alamat tersebut, dan kemudian ia akan melihat bahwa di alamat ini sebenarnya ada file html yang sudah jadi , yang akan berhasil dikirim. . Kita dapat menjalankan kembali aplikasi kita (restart server atau re-deploy sesuai keinginan) dan pastikan halaman utama dirender, tidak ada yang rusak, saat kita klik tombol terjadi transisi, namun untuk saat ini juga error. tertulis. Omong-omong, jika sebelumnya kita mengalami kesalahan 404, sekarang kita memiliki kesalahan 405. Ini berarti pemetaan berhasil, servlet ditemukan, tetapi mereka tidak memiliki metode yang sesuai untuk memproses permintaan. Jika pada tahap ini Anda masih mendapatkan kesalahan 404, meskipun semuanya telah dilakukan dengan benar, mungkin Anda harus memperbaiki konfigurasi penerapan pada ide tersebut. Untuk melakukan ini, buka Edit konfigurasi (di bagian atas dekat tombol mulai), buka tab Penerapan di sisi kanan jendela dan pastikan bahwa dalam konteks Aplikasi hanya ditunjukkan /

Penyimpangan liris singkat: apa yang terjadi “di balik terpal”?

Anda mungkin bertanya-tanya bagaimana aplikasi kami bekerja di Tomcat? Apa yang sedang terjadi di sana? Dan di mana metode main() nya ? Segera setelah Anda mengetik localhost:8080 ke browser Anda dan membuka alamat ini, browser mengirimkan permintaan ke alamat ini melalui protokol http . Saya harap Anda sudah mengetahui bahwa permintaan dapat memiliki “jenis” yang berbeda, yang paling populer adalah GET dan POST . Setiap permintaan pasti ada jawabannya. Permintaan GET mengharapkan bahwa sebagai tanggapannya akan diberikan kode html yang sudah jadi , yang akan dikembalikan ke browser, dan browser akan dengan indah mengganti kode ini dengan segala macam huruf, tombol, dan bentuk. Permintaan POST sedikit lebih menarik, karena ia juga membawa beberapa informasi. Misalnya, dalam formulir pendaftaran atau otorisasi pengguna, Anda memasukkan data Anda dan mengklik “kirim”. Saat ini, permintaan POST dikirim ke server dengan informasi pribadi Anda di dalamnya. Server menerima informasi ini, memprosesnya, dan mengembalikan semacam respons (misalnya, halaman html dengan profil Anda). Perbedaan mendasar di antara keduanya adalah bahwa permintaan GET dimaksudkan hanya untuk menerima data dari server, sedangkan permintaan POST membawa beberapa informasi, dan data di server dapat berubah (misalnya, saat Anda mengunggah foto Anda ke server, itu akan terbang dalam permintaan POST dan server akan menambahkannya ke database, yaitu, beberapa perubahan akan terjadi. Sekarang mari kita kembali ke Tomcat. Ketika menerima beberapa permintaan dari klien, ia melihat alamatnya. Mencari datanya ke lihat apakah ada servlet yang cocok yang akan memproses permintaan ke alamat tersebut (atau sumber daya siap pakai yang dapat segera dikembalikan) Jika tidak menemukan apa pun untuk dikembalikan, ia tidak merespons dengan halaman html, tetapi dengan respons 404. Jika ia menemukan servlet yang sesuai, yang "berada" di alamat ini, ia akan melihat jenis permintaan apa yang diterimanya (GET, POST, atau lainnya), dan kemudian menanyakan servlet apakah ia memiliki metode yang bisa menangani permintaan jenis ini. Jika servlet mengatakan, bahwa ia tidak dapat memproses jenis ini, Tomcat merespons klien dengan kode 405. Inilah yang baru saja terjadi pada kami. Tetapi jika servlet yang sesuai ditemukan dan memiliki metode yang sesuai, Tomcat membuat objek servlet ini, menjalankannya di thread baru ( thread ), yang memungkinkan servlet bekerja di thread terpisah, dan Tomcat terus bekerja lebih jauh. dengan sendirinya, menerima dan mengirim permintaan. Selain itu, Tomcat membuat dua objek lagi: satu bertipe HttpServletRequest (saya akan menyebutnya permintaan secara singkat di masa mendatang), dan yang kedua bertipe HttpServletResponse(Saya akan menyebutnya jawabannya). Pada objek pertama ia menempatkan semua data yang diterimanya atas permintaan klien, sehingga semua data tersebut dapat diambil dari objek ini. Nah, setelah semua ini, ia meneruskan kedua objek ini ke metode yang sesuai dari servlet yang berjalan di thread terpisah. Segera setelah servlet menyelesaikan pekerjaannya dan memiliki respons yang siap dikirim ke klien, servlet mengibarkan bendera ke Tomcat, mengatakan, “Saya sudah selesai, semuanya sudah siap.” Tomcat menerima respons dan mengirimkannya ke klien. Hal ini memungkinkan Tomcat untuk menerima permintaan dan mengirim respons tanpa gangguan, sementara semua pekerjaan dilakukan oleh servlet yang berjalan di thread terpisah. Oleh karena itu, ketika kita menulis kode servlet, kita mendefinisikan pekerjaan yang akan dilakukan. Dan ya, Anda dapat menganggap metode main() ada di Tomcat itu sendiri (ya, ini ditulis dalam Java), dan ketika kita "memulai" Tomcat, metode main().

Kami menangkap metode GET dengan servlet dan mengirimkan respons sederhana

Saat ini, servlet kita tidak memiliki metode yang sesuai (GET), jadi Tomcat mengembalikan kesalahan 405. Mari kita buat! Kelas HttpServlet , tempat kita mewarisi servlet, mendefinisikan metode yang berbeda. Untuk menetapkan beberapa kode untuk metode, kita cukup menimpanya. Dalam hal ini, kita perlu mengganti metode doGet() di kedua servlet.

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

}

Seperti yang Anda lihat, metode ini menerima dua objek: req (permintaan) dan resp (respons). Ini adalah objek yang akan dibuat dan diisi oleh Tomcat untuk kita ketika memanggil metode yang sesuai di servlet ini. Pertama, mari kita lakukan jawaban yang paling sederhana. Untuk melakukan ini, ambil objek resp dan dapatkan objek PrintWriter darinya , yang dapat digunakan untuk membuat respons. Nah, dengan menggunakannya kita akan mencetak beberapa string sederhana.

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    PrintWriter writer = resp.getWriter();
    writer.println("Method GET from AddServlet");
}

Kami akan melakukan hal serupa di servlet ListServlet , setelah itu kami akan memulai server kami lagi. Seperti yang Anda lihat, semuanya berfungsi! Saat Anda mengklik tombol, halaman terbuka dengan teks yang kami "rekam" dengan PrintWriter . Hanya saja jsp yang kami siapkan untuk menghasilkan halaman dengan jawaban tidak digunakan dengan cara apa pun. Hal ini karena eksekusinya tidak menjangkau mereka. Serverlet itu sendiri sekarang menghasilkan respon dan menyelesaikan pekerjaannya, menandakan Tomcat bahwa ia memiliki respon yang siap untuk klien. Tomcat hanya mengambil respons ini dan mengirimkannya kembali ke klien. Kita mentransfer kendali dari servlet ke jsp. Mari kita ubah kode metode kita dengan cara ini:

kita mendapatkan objek manajer permintaan dari objek permintaan, tempat kita meneruskan alamat jsp halaman yang ingin kita transfer kontrolnya;
menggunakan objek yang diterima, kami mentransfer kontrol ke halaman jsp yang ditentukan , dan jangan lupa melampirkan objek permintaan dan respons yang kami terima dari Tomcat di sana.

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/add.jsp");
    requestDispatcher.forward(req, resp);
}

Di body halaman jsp (di dalam tag body) kita bisa menulis sesuatu agar kita bisa melihat dengan jelas halaman mana yang sedang ditampilkan. Setelah itu kita restart servernya dan cek. Tombol-tombol di halaman utama ditekan, halaman dibuka, yang berarti permintaan dikirim ke servlet, setelah itu kontrol ditransfer ke halaman jsp, yang sudah dirender. Itu saja. Di bagian artikel selanjutnya kita akan membahas fungsionalitas aplikasi kita.

Apa lagi yang harus dibaca:

Membuat proyek web sederhana di IntelliJ Idea Enterprise. Langkah demi langkah, dengan gambar

Obrolan saya

Komentar

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION