CodeGym /Java Blog /Acak /Membuat aplikasi web sederhana menggunakan servlet dan JS...

Level 41

San Francisco

21 Juli 2023
249 views
0 comments

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.

Materi ini adalah kelanjutan logis dari artikel saya Membuat proyek web paling sederhana di IntelliJ Idea Enterprise . Dalam artikel itu, saya mendemonstrasikan cara membuat template proyek web yang berfungsi. Kali ini saya akan menunjukkan cara membuat aplikasi web yang sederhana namun sangat menarik menggunakan Java Servlet API dan JavaServer Pages API . Aplikasi kita akan memiliki beranda dengan dua tautan:

tautan ke halaman untuk menambahkan pengguna;
tautan ke daftar pengguna.

Seperti sebelumnya, saya akan menggunakan IntelliJ Idea Enterprise Edition , Apache Maven (kami hanya akan menghubungkan beberapa dependensi), dan Apache Tomcat . Pada akhirnya, kita akan "mempercantik" aplikasi kita menggunakan framework W3.CSS . Kami akan berasumsi bahwa Anda sudah memiliki proyek kosong yang sekarang akan kami tambahkan. Jika tidak, jalankan melalui artikel pertama dan buat satu. Ini hanya akan memakan waktu beberapa menit :)

Sedikit tentang struktur aplikasi masa depan kita

Beranda kami (/) akan menjadi halaman HTML statis paling biasa dengan header dan dua tautan/tombol:

tambahkan pengguna baru (navigasi ke / add );
lihat daftar pengguna (navigasi ke / list ).

Tomcat akan menangkap permintaan untuk alamat ini dan mengirimkannya ke salah satu dari dua servlet yang akan kita buat (kita akan menentukan pemetaannya di web.xml ). Servlet kemudian akan memproses permintaan, menyiapkan data (atau menyimpan data, jika kita menambahkan pengguna), dan mentransfer kontrol ke file JSP yang sesuai , yang kemudian "menampilkan" hasilnya. Kami akan menyimpan data dalam daftar vanilla biasa (Daftar).

Buat halaman beranda statis

Jika Anda index.jsp di folder web Anda, hapus. Sebagai gantinya, buat file HTML sederhana bernama index.html di folder ini:


<!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>    <!-- button 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. Di tag judul , kami menunjukkan judul halaman kami. Di badan halaman, kami memiliki dua div utama: header dan content . Div konten menyertakan dudukan untuk tombol kami. Dan di sana kami memiliki dua tombol yang membawa Anda ke alamat yang sesuai dengan sekali klik. Anda dapat menjalankan proyek dan melihat tampilannya sekarang. Jika Anda mengklik tombol, Anda mendapatkan halaman kesalahan 404, karena kami halaman yang sesuai belum ada. Tetapi kami dapat mengatakan bahwa tombolnya berfungsi. Perhatikan bahwa ini bukan pendekatan yang paling universal: jika JavaScript dimatikan di browser, tombol ini tidak akan berfungsi. Tapi kami akan berasumsi bahwa tidak ada yang menonaktifkan JavaScript. :) Jelas, Anda dapat melakukannya dengan tautan sederhana, tetapi saya lebih suka tombol. Anda dapat melakukannya sesuka Anda. Dan jangan khawatir tentang fakta bahwa contoh saya akan memiliki banyak divs . Kita akan mengisinya dengan gaya nanti, dan semuanya akan terlihat lebih indah. :)

Buat file JSP untuk merender hasilnya

Di direktori web yang sama , buat folder tempat kami akan menambahkan file JSP kami . Saya menyebutnya ' pandangan ', tapi sekali lagi Anda bisa berimprovisasi. Di folder ini, kami akan membuat dua file JSP:

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

Tetapkan tajuk halaman yang sesuai untuk mereka. Sesuatu seperti " Tambahkan pengguna baru " dan " Daftar pengguna ", dan kita akan membiarkannya seperti itu.

Buat dua servlet

Servlet akan menerima dan memproses permintaan yang dikirimkan Tomcat kepada mereka. Di folder src/main/java , buat paket aplikasi , tempat kami akan meletakkan kode sumber kami. Paket lain juga akan pergi ke sana. Jadi, untuk mencegah paket-paket ini dibuat di dalam satu sama lain, kami akan membuat beberapa kelas dalam paket aplikasi (kami akan menghapusnya nanti). Sekarang buat tiga paket berbeda dalam paket aplikasi :

entitas — entitas kita (kelas yang mendeskripsikan objek pengguna) pergi ke sini;
model — inilah tujuan model kita (kita akan membicarakannya nanti);
servlet — dan ini adalah tujuan servlet kita.

Setelah Anda selesai melakukannya, Anda dapat dengan tenang menghapus kelas itu dari paket aplikasi (tentu saja jika Anda yang membuatnya). Dalam paket servlets , buat dua kelas:

AddServlet — memproses permintaan yang dikirim ke / add ;
ListServlet — memproses permintaan yang dikirim ke / list .

Menghubungkan dependensi di Maven

Tomcat 9 .* mengimplementasikan spesifikasi untuk Servlet 4.0 dan JavaServer Pages 2.3 . Itulah yang tertera di baris kedua paragraf pertama dokumentasi resmi Tomcat 9. Artinya, jika Anda, seperti saya, menggunakan versi Tomcat ini , maka kode yang akan Anda tulis dan jalankan akan menggunakan versi ini. Tapi kami ingin memiliki spesifikasi ini dalam proyek kami, sehingga kode kami, yang menggunakannya, setidaknya berhasil dikompilasi. Dan untuk melakukan 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 dari Maven;
temukan versi yang diperlukan dari perpustakaan yang diperlukan;
dapatkan kode dependensi yang perlu ditempelkan ke pom.xml Anda;
tempel! :)

Mari kita mulai. Pertama, siapkan file POM . Di suatu tempat setelah entri /version , tetapi sebelum /project , masukkan yang berikut ini:


<dependencies>

</dependencies>

Kami melakukan ini untuk menunjukkan bahwa kami akan mencantumkan dependensi yang diperlukan dalam tag ini. Sekarang buka mvnrepository.com . Ada kolom pencarian di bagian atas. Untuk memulai, cari ' servlet '. Hasil pertama, yang telah digunakan lebih dari tujuh ribu kali, cocok untuk kami. Ingat, kami membutuhkan versi 4.0 (untuk Tomcat 9). Versi lain mungkin sesuai untuk implementasi yang lebih lama. Ini adalah versi yang cukup baru, jadi tidak banyak kegunaannya. Tapi kami membutuhkannya. Halaman terbuka di mana Anda bisa mendapatkan kode untuk ketergantungan ini untuk berbagai manajer paket, atau Anda cukup mengunduhnya. Tapi karena kita ingin menghubungkannya menggunakan Maven, kita akan memilih kodenya di tab Maven. Kami menyalin dan menempel ke bagian ketergantungan file POM kami. Jika Anda mendapat pemberitahuan yang menanyakan apakah Anda ingin mengaktifkan impor otomatis di pojok kanan bawah IDEA , lanjutkan dan setujui. Jika Anda tidak sengaja menolak, buka " Pengaturan " dan aktifkan impor otomatis secara manual: Pengaturan (Ctrl + Alt + S) -> Build, Execution, Deployment -> Maven -> Importing .dan file konfigurasi IDEA untuk proyek ini disinkronkan. Mengikuti prinsip yang sama, kita akan menemukan dan menghubungkan JavaServer Pages 2.3 (mencari "JSP"). Dan karena kita sudah memulai Maven, katakan saja bahwa file sumber kita mengikuti sintaks Java 8, dan kita perlu mengompilasinya menjadi bytecode untuk versi itu. Setelah semua langkah 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>cc.codegym.info.fatfaggy</groupId>
    <artifactId>my-super-project</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compile.source>1.8</maven.compile.source>
        <maven.compile.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>

Jadikan servlet kita menjadi servlet nyata

Saat ini, sepasang servlet yang kami buat sebenarnya adalah kelas biasa. Mereka tidak memiliki fungsi apa pun. Tapi sekarang kami telah menghubungkan Servlet API ke proyek kami, dan karenanya kami dapat menggunakan kelasnya. Untuk membuat servlet kita "nyata", yang perlu kita lakukan adalah membuatnya mewarisi kelas HttpServlet .

Pemetaan atau markup

Sekarang alangkah baiknya untuk memberi tahu Tomcat bahwa permintaan untuk alamat / tambah diproses oleh AddServlet kami , dan permintaan untuk alamat / daftar ditangani oleh ListServlet . Proses ini disebut pemetaan (markup). Ini dilakukan di web.xml menggunakan prinsip yang sama:

untuk memulai, jelaskan servlet (berikan beberapa nama dan tentukan jalur ke kelas itu sendiri);
kemudian ikat servlet ini ke alamat tertentu (sebutkan nama servlet, yang baru saja kita berikan, dan tentukan alamat yang permintaannya harus dikirim ke servlet ini).

Jelaskan servlet:


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

Sekarang ikat ke alamat:


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

Seperti yang Anda lihat, nama-servlet sama dalam kedua kasus. Akibatnya, Tomcat mengetahui bahwa jika permintaan untuk /tambahkan diterima, itu harus dikirim ke app.servlets.AddServlet. Kami melakukan hal yang sama dengan servlet kedua. Pada akhirnya, 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 beranda (/). Faktanya adalah kita tidak membutuhkannya dalam kasus ini. Beranda kami adalah file HTML sederhana yang hanya menampilkan dua tombol. Ia tidak memiliki konten dinamis, jadi kami tidak perlu membuat servlet terpisah untuk permintaan dari / yang tidak akan melakukan apa pun selain meneruskan eksekusi ke beberapa JSP (yang juga harus dibuat) untuk menggambar dua tombol untuk kami. Kami tidak membutuhkan ini. Halaman statis cocok untuk kita. Ketika Tomcat menerima permintaan, ia akan memeriksa apakah ada satu servlet yang dapat memproses permintaan untuk alamat tersebut, dan kemudian akan melihat bahwa alamat ini sebenarnya sudah berisi file HTML yang sudah siap ., yang akan disajikan. Kita dapat menjalankan aplikasi kita lagi (me-restart server atau men-deploy ulang lagi—apa pun yang Anda inginkan) dan memastikan halaman beranda dirender, tidak ada yang rusak, dan transisi terjadi saat kita mengklik tombol (walaupun kita mendapatkan error lagi). Omong-omong, sebelumnya kita mendapatkan kesalahan 404, sekarang kita mendapatkan 405. Artinya pemetaan berhasil dan servlet ditemukan, tetapi mereka tidak memiliki metode yang cocok untuk menangani permintaan tersebut.

Penyimpangan singkat: apa yang terjadi "di bawah tenda"?

Anda mungkin sudah memikirkan tentang cara kerja aplikasi kami di Tomcat. Apa yang terjadi di sana? Dan di mana metode main()? Segera setelah Anda masuk ke localhost:8080 di browser Anda, browser mengirimkan permintaan ke alamat ini menggunakan protokol HTTP. Saya harap Anda sudah mengetahui bahwa ada banyak jenis permintaan, dan yang paling populer adalah GET dan POST. Setiap permintaan harus dijawab. Permintaan GET diharapkan menerima respons berupa kode HTML siap pakai, yang dikembalikan ke browser. Browser kemudian mengganti kode dengan semua huruf, tombol, dan formulir yang cantik. Permintaan POST sedikit lebih menarik, karena juga membawa beberapa informasi. Misalnya, Anda memasukkan kredensial dalam formulir pendaftaran atau masuk di situs web, dan mengklik "Kirim". Ini menyebabkan permintaan POST dengan informasi pribadi Anda dikirim ke server. Server menerima informasi ini, memprosesnya, dan mengembalikan beberapa respons (misalnya, halaman HTML dengan profil Anda). Perbedaan utama di antara keduanya adalah permintaan GET hanya digunakan untuk mengambil data dari server, sedangkan permintaan POST membawa beberapa informasi (dan data di server dapat berubah). Misalnya, ketika Anda mengunggah gambar Anda ke server, itu dibawa ke sana dalam permintaan POST dan server menambahkannya ke database, yaitu terjadi perubahan. Sekarang kembali ke Tomcat. Ketika menerima permintaan dari klien, itu melihat alamatnya. Ia memeriksa apakah ada servlet yang cocok untuk memproses permintaan untuk alamat tersebut (atau sumber daya yang tersedia yang dapat segera dikembalikan). Jika tidak menemukan sesuatu untuk dikembalikan, kemudian merespons dengan kesalahan 404 daripada halaman HTML. Tetapi jika menemukan servlet yang cocok "duduk" di alamat itu, maka ia akan melihat jenis permintaan (GET, POST, atau yang lainnya) dan menanyakan servlet apakah ia memiliki metode yang dapat menangani jenis kueri ini. Jika servlet mengatakan tidak tahu bagaimana menangani tipe ini, makaTomcat mengembalikan kode 405. Dan inilah yang terjadi dalam proyek kami. Tetapi jika servlet yang cocok ditemukan, dan memiliki metode yang sesuai, Tomcat membuat objek servlet, memulainya di utas baru(yang membuatnya berjalan sendiri), dan Tomcat melanjutkan pekerjaannya sendiri, menerima dan mengirim permintaan. Selain itu, Tomcat membuat dua objek lagi: HttpServletRequest (yang akan saya sebut "permintaan" singkatnya), dan HttpServletResponse (yang akan saya sebut "respons"). Itu menempatkan semua data yang diterima dari permintaan klien ke objek pertama, sehingga semua data itu dapat diekstraksi darinya. Dan setelah semua ini, ia meneruskan kedua objek ini ke metode servlet yang sesuai yang dimulai pada utas terpisah. Segera setelah servlet menyelesaikan pekerjaannya dan respons siap dikirim ke klien, servlet mengibarkan bendera ke Tomcat, mengatakan "Saya sudah selesai. Semuanya sudah siap". Tomcat menerima respons dan mengirimkannya ke klien. Ini memungkinkan Tomcat menerima permintaan dan mengirim tanggapan, tanpa terganggu, dan semua pekerjaan dilakukan oleh servlet yang berjalan di utas terpisah. Itu artinya ketika kita menulis kode servlet kita menentukan pekerjaan apa yang akan dilakukan. Dan Anda dapat menganggap metode main() berada di dalam Tomcat itu sendiri (ya, itu ditulis dalam Java), dan ketika kita "meluncurkan" Tomcat, metode main() dimulai.

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

Gunakan servlet untuk menangkap metode GET dan mengirim respons super sederhana

Saat ini, servlet kami tidak memiliki metode (GET) yang cocok, jadi Tomcat mengembalikan kesalahan 405. Mari kita buat mereka! Kelas HttpServlet, kami mewarisi servlet kami, mendeklarasikan berbagai metode. Untuk menetapkan kode tertentu ke metode, kami cukup menimpanya. Dalam hal ini, kita perlu mengganti doGet()metode di kedua servlet.


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

}

Seperti yang Anda lihat, metode ini membutuhkan dua argumen: req (permintaan) dan resp (respons). Ini adalah objek yang Tomcat buat dan isi untuk kita saat memanggil metode yang sesuai di servlet. Untuk memulai, kami akan membuat tanggapan paling sederhana. Untuk melakukan ini, kita akan mengambil objek resp dan mendapatkan objek PrintWriter darinya. Jenis objek ini digunakan untuk menyusun respons. Kami akan menggunakannya untuk menampilkan string sederhana.


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

Kami akan melakukan hal serupa di ListServlet, dan kemudian kami akan memulai ulang server kami. Seperti yang Anda lihat, semuanya berfungsi! Saat Anda mengklik tombol, Anda mendapatkan halaman dengan teks yang kami "tulis" dengan PrintWriter. Tetapi file JSP yang kami siapkan untuk membuat halaman dengan respons tidak digunakan. Itu hanya karena mereka tidak pernah dieksekusi. Servlet kami membuat respons itu sendiri dan selesai berjalan, memberi sinyal kepada Tomcat bahwa ia siap merespons klien. Tomcat hanya menerima respons dan mengirimkannya kembali ke klien.

Mari berikan kontrol dari servlet ke file JSP. Kami akan mengubah kode metode kami sebagai berikut:

kami mendapatkan objek pengirim permintaan dari objek permintaan, dan meneruskannya ke alamat halaman JSP yang ingin kami transfer kontrolnya;
kami menggunakan objek ini untuk mentransfer kontrol ke halaman JSP yang ditentukan, tidak lupa untuk meneruskan objek permintaan dan respons yang kami terima dari Tomcat.


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

Di tag body halaman JSP, Anda dapat menambahkan sesuatu sehingga kami dapat dengan jelas melihat halaman mana yang sedang ditampilkan. Setelah Anda selesai melakukannya, mulai ulang server dan periksa. Kami mengklik tombol di halaman utama dan halaman terbuka, yang berarti permintaan sedang dikirim ke servlet. Kemudian kontrol diteruskan ke halaman JSP, yang sekarang sedang dirender. Itu saja untuk saat ini. Di bagian selanjutnya dari artikel ini, kami akan mengerjakan fungsionalitas aplikasi kami.

Lebih banyak bacaan:
Membuat aplikasi web sederhana menggunakan servlet dan JSP (bagian 2) Aplikasi pertama Anda menggunakan servlet Java

Komentar

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