Kami menciptakan entitas.
Mari kita buat kelas Pengguna dalam paket entitas, di mana kita akan membuat dua variabel string pribadi, nama dan kata sandi. Mari kita buat konstruktor (default dan konstruktor yang menerima kedua nilai), pengambil/penyetel, ganti metode toString() untuk berjaga-jaga, serta metode sama dengan() dan kode hash().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, di mana kita akan menambahkan pengguna kita, dan dari mana kita akan menampilkannya. Tapi ada masalah. Kami tidak membuat objek servlet kami; Tomcat menciptakannya untuk kami. Metode yang kita timpa di dalamnya juga sudah ditentukan untuk kita dan kita tidak dapat menambahkan parameter. Lalu bagaimana kita bisa membuat daftar umum yang akan terlihat di kedua servlet kita? Jika kita hanya membuat objek daftar kita sendiri di setiap servlet, ternyata kita akan menambahkan pengguna ke satu daftar, tetapi menampilkan daftar pengguna menggunakan servlet ListServlet akan sangat berbeda. Ternyata kita membutuhkan objek yang sama untuk kedua servlet. Secara umum, kita memerlukan objek yang umum untuk semua kelas dalam program kita; satu-satunya objek untuk keseluruhan program. Saya harap Anda pernah mendengar sesuatu tentang pola desain. Dan mungkin bagi sebagian orang, ini adalah kebutuhan nyata pertama untuk menggunakan template
Singleton dalam program mereka. Anda bisa berkreasi dan membuat singleton yang keren, dengan pemeriksaan ganda dan sinkronisasi (ya, kami memiliki aplikasi multi-thread, karena Tomcat menjalankan servlet di thread yang berbeda), tapi saya akan menggunakan opsi dengan inisialisasi awal, karena dalam kasus ini cukup cocok.
Membuat model.
Kemudian kita akan membuat sebuah kelas (dan mengimplementasikan template tunggal di dalamnya) dalam paket model, dan kita juga akan menyebutnya Model dengan warna-warni. Mari kita buat objek daftar pengguna pribadi di dalamnya, dan buat dua metode: satu sehingga Anda dapat menambahkan pengguna, dan yang kedua - biarkan ia mengembalikan daftar string (nama pengguna). Karena objek pengguna kami terdiri dari nama dan kata sandi, kami tidak ingin "mengungkapkan" kata sandi pengguna, jadi kami hanya akan mengembalikan daftar nama mereka.public class Model { private static Model instance = new Model(); private List
model; public static Model getInstance() { return instance; } private Model() { model = new ArrayList<>(); } public void add(User user) { model.add(user); } public List
list() { return model.stream() .map(User::getName) .collect(Collectors.toList()); } }
Sedikit tentang mvc.
Karena Anda pernah mendengar tentang singleton, itu berarti Anda mungkin pernah mendengar tentang pola desain lain - MVC (model-view-controller, atau dalam bahasa Rusia model-view-controller, atau seperti dalam bahasa Inggris model-view-controller). Esensinya adalah memisahkan logika bisnis dari presentasi. Artinya, pisahkan kode yang menentukan apa yang harus dilakukan dari kode yang menentukan cara menampilkannya . Tampilan (tampilan atau hanya tampilan) bertanggung jawab atas bentuk penyajian beberapa data. Dalam kasus kami, tampilan adalah halaman JSP kami. Itu sebabnya saya menaruhnya di folder bernama views. Model adalah data aktual yang digunakan program untuk bekerja. Dalam kasus kami, ini adalah pengguna (daftar pengguna). Nah, pengontrol adalah penghubung di antara mereka. Mereka mengambil data dari model dan mentransfernya ke tampilan, atau mereka menerima beberapa data dari Tomcat, memprosesnya dan mentransfernya ke model. Logika bisnis (yaitu, apa yang harus dilakukan ) harus dijelaskan di dalamnya, dan bukan di model atau tampilan. Jadi, setiap orang melakukan hal mereka sendiri:- model menyimpan data
- Tampilan menggambarkan representasi data yang indah
- pengontrol memproses data
Buat formulir untuk menambahkan pengguna.
Mari tambahkan formulir ke file add.jsp, yang terdiri dari dua input teks (satu biasa, yang lain jenis kata sandi) dan tombol untuk mengirim data ke server. Di sini form memiliki atribut metode dengan nilai post. Artinya data dari form ini akan dikirim ke server dalam bentuk request POST. Atribut tindakan tidak ditentukan, yang berarti permintaan ini akan diarahkan ke alamat yang sama dengan tempat kita membuka halaman ini (/add). Jadi, servlet kami, yang terikat ke alamat ini, setelah menerima permintaan GET, mengembalikan jsp ini dengan formulir untuk menambahkan pengguna, dan jika menerima permintaan POST, maka formulir ini telah mengirimkan datanya ke sana (yang akan kami ambil dari objek permintaan dalam metode doPost(), proses dan transfer ke model untuk disimpan). Perlu dicatat bahwa input memiliki parameter nama di sini (untuk bidang dengan nama memiliki nilai nama, dan untuk bidang dengan kata sandi memiliki nilai lulus). Ini adalah poin yang cukup penting. Karena untuk mendapatkan data ini (nama dan kata sandi yang akan dimasukkan) dari permintaan (sudah ada di dalam servlet), kita akan menggunakan nama dan pass ini dengan tepat. Tapi lebih dari itu nanti. Tombol pengiriman datanya sendiri lagi-lagi dibuat dalam bentuk tombol, bukan input seperti biasanya. Saya tidak tahu seberapa universal opsi ini, tetapi ini berfungsi untuk saya di Chrome :)
Memproses permintaan POST dengan servlet.
Mari kembali ke servlet AddServlet. Kita telah mengetahui bahwa agar servlet kita dapat “menangkap” permintaan GET, kita mengganti metode doGet() dari kelas HttpServlet. Untuk mengajarkan servlet kami agar juga menangkap permintaan POST, kami juga mengganti metode doPost(). Ia menerima objek permintaan dan respons serupa dari Tomcat, yang akan kita gunakan. Pertama, mari kita ekstrak dari permintaan nama dan berikan parameter yang dikirimkan formulir (jika Anda menamainya secara berbeda di formulir, maka itu adalah nama yang Anda tulis). Kemudian kita akan membuat objek pengguna menggunakan data yang diterima. Kemudian kita akan 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); }
Mentransfer data ke tampilan.
Sekarang mari kita beralih ke servlet ListServlet. Kami telah mengimplementasikan metode doGet(), yang hanya mentransfer kontrol ke tampilan list.jsp. Jika Anda belum memilikinya, lakukan dengan analogi dengan metode yang sama dari servlet AddServlet. Sekarang alangkah baiknya jika mendapatkan daftar nama pengguna dari model dan meneruskannya ke tampilan, yang akan menerimanya di sana dan menampilkannya dengan baik. Untuk melakukan ini, kita akan kembali menggunakan objek permintaan yang kita terima dari Tomcat. Kita dapat menambahkan atribut ke objek ini, memberinya nama dan, pada kenyataannya, objek itu sendiri yang ingin kita transfer ke tampilan. Karena kenyataan bahwa ketika mentransfer proses eksekusi dari servlet ke tampilan, kami meneruskan objek permintaan dan respons yang sama dengan yang diterima servlet itu sendiri, kemudian dengan menambahkan daftar nama kami ke objek permintaan, kami kemudian dapat dari permintaan ini objek dalam tampilan buat daftar nama pengguna kami dan dapatkan. Kita sudah selesai dengan kelas ListServlet, jadi berikut adalah kode untuk seluruh kelas.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
names = model.list(); req.setAttribute("userNames", names); RequestDispatcher requestDispatcher = req.getRequestDispatcher("views/list.jsp"); requestDispatcher.forward(req, resp); } }
Mengeksekusi kode java dalam file jsp.
Sekarang mari kita beralih ke file list.jsp. File ini hanya akan dieksekusi ketika ListServlet melewati proses eksekusi di sini. Selain itu, di servlet itu kami telah menyiapkan daftar nama pengguna dari model dan meneruskannya ke sini di objek permintaan. Dengan adanya daftar nama, kita dapat menjalankan perulangan for dan mencetak setiap nama. Seperti yang sudah saya katakan, file jsp dapat mengeksekusi kode Java (pada prinsipnya, inilah yang membedakannya dengan halaman html statis). Untuk mengeksekusi beberapa kode, cukup menempatkan konstruksi di tempat yang kita butuhkan.Di <% // java code %> dalam konstruksi seperti itu, kita mendapatkan akses ke beberapa variabel: request - objek permintaan kita, yang kita lewati dari servlet, di mana ia dipanggil req respon - objek respons, di Servlet disebut resp out - objek bertipe JspWriter (diwarisi dari Writer biasa), yang dengannya kita dapat "menulis" sesuatu langsung ke halaman html itu sendiri. Out.println("Halo dunia!") sangat mirip dengan System.out.println("Halo dunia!"), tapi jangan bingung! out.println() "menulis" ke halaman html, dan System.out.println - ke output sistem. Jika Anda memanggil metode System.out.println() di dalam bagian dengan kode jsp, Anda akan melihat hasilnya di konsol Tomcat, dan bukan di halaman, seperti yang Anda inginkan :) Anda dapat mencari objek lain yang tersedia di dalam jsp
Di Sini . Dengan menggunakan objek permintaan kita bisa mendapatkan daftar nama yang diteruskan dari servlet (kita melampirkan atribut yang sesuai ke objek ini), dan dengan menggunakan objek out kita dapat menampilkan nama-nama ini. Mari kita lakukan ini untuk saat ini secara sederhana dalam bentuk daftar html: Jika kita ingin menampilkan daftar hanya ketika ada pengguna, dan sebaliknya menampilkan peringatan bahwa belum ada pengguna, kita dapat menulis ulang bagian ini sedikit: Sekarang kita tahu cara mentransfer data dari servlet ke tampilan - kita dapat sedikit meningkatkan AddServlet kita sehingga pemberitahuan ditampilkan tentang penambahan pengguna yang berhasil. Untuk melakukan hal ini, dalam metode doPost(), setelah menambahkan pengguna baru ke model, kita dapat menambahkan nama pengguna ini ke atribut objek req dan meneruskan kontrol kembali ke tampilan add.jsp. Dan di dalamnya sudah buat bagian dengan kode Java, di mana Anda dapat memeriksa apakah atribut tersebut ada dalam permintaan, dan jika demikian, maka tampilkan pesan bahwa pengguna telah berhasil ditambahkan. Setelah perubahan ini, kode lengkap servlet AddServlet akan terlihat seperti ini: Di sini, di akhir metode doPost(), kita menetapkan atribut dengan nama pengguna yang ditambahkan ke model, dan kemudian memanggil doGet( ) metode, yang mana kami meneruskan permintaan dan respons saat ini. Dan metode doGet() sudah mentransfer kontrol ke tampilan, di mana ia mengirimkan objek permintaan dengan nama pengguna yang ditambahkan dilampirkan sebagai atribut. Tetap memperbaiki add.jsp itu sendiri sehingga menampilkan pemberitahuan seperti itu jika atribut tersebut ada. Penambahan terakhir.jsp
<% List
names = (List
) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { for (String s : names) { out.println("
- " + s + "
"); } } %>
<% List
names = (List
) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { out.println("
"); for (String s : names) { out.println("
" + s + " "); } out.println("
"); } else out.println("
There are no users yet!
"); %>
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); } }
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Add new user
Super app!
<% if (request.getAttribute("userName") != null) { out.println("
User '" + request.getAttribute("userName") + "' added!
"); } %>
Add user
Badan halaman terdiri dari div dengan header, setelah itu ada wadah div untuk konten, yang di dalamnya memeriksa apakah atribut dengan nama pengguna ada, kemudian div dengan formulir untuk menambahkan pengguna, dan di akhir footer dengan tombol untuk kembali ke halaman utama. Sepertinya ada terlalu banyak div, tapi kita akan menggunakannya nanti ketika kita menambahkan gaya :) Nah, versi terakhirnya adalah list.jsp. Jadi , kita memiliki aplikasi web yang berfungsi penuh yang juga dapat menyimpan dan menambah pengguna seperti menampilkan daftar nama mereka. Yang tersisa hanyalah menghiasinya... :)
<%@ page import="java.util.List" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>
Users
Super app!
Users
<% List
names = (List
) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { out.println("
"); for (String s : names) { out.println("
" + s + " "); } out.println("
"); } else out.println("
There are no users yet!
"); %>
Menambahkan gaya. Kami menggunakan kerangka W3.CSS.
Saat ini, aplikasi kita berfungsi, tetapi benar-benar gila :) Kita perlu menambahkan latar belakang, warna untuk teks dan tombol, menyesuaikan gaya daftar, menyelaraskan, menambahkan indentasi, secara umum banyak hal. Jika Anda menulis gaya secara manual, ini bisa memakan banyak waktu dan kegelisahan. Oleh karena itu, saya menyarankan menggunakan framework CSS W3.CSS . Ini sudah memiliki kelas siap pakai dengan gaya, yang tersisa hanyalah menempatkan kelas CSS yang ingin kita terapkan di tempat yang tepat di tempat yang tepat. Untuk menambahkannya ke halaman kita, pertama-tama kita perlu menyertakan file dengan style. Ini dapat dilakukan dengan dua cara: 1. buka halaman kami dan di bagian kepala masukkan tautan langsung ke file dengan gaya
Opsi ini cocok jika Anda memiliki koneksi Internet yang konstan. Kemudian, saat Anda membuka halaman Anda di server lokal, gaya tersebut akan diambil dari Internet. 2. Jika Anda ingin memiliki semua gaya secara lokal dan tidak bergantung pada koneksi Internet, Anda cukup
mengunduh file dengan gaya dan meletakkannya di suatu tempat di dalam folder web (misalnya web/styles/w3.css), lalu buka semua halaman kami (index.html, add.jsp, list.jsp) dan masukkan tautan ke file ini dengan gaya di bagian kepala.
Setelah itu, cukup buka tag dan tandai dengan gaya yang Anda suka . Saya tidak akan membahas hal ini secara mendetail, tetapi saya akan segera memberikan versi siap pakai dari tiga file saya dengan kelas gaya yang tersusun. index.html add.jsp list.jsp Itu saja :) Jika Anda masih memiliki pertanyaan atau memiliki komentar, atau sebaliknya, ada yang tidak berfungsi - tinggalkan komentar. Baiklah, saya akan melampirkan beberapa tangkapan layar dari semua hasil itu. Dan akhirnya. Jika Anda ingin berlatih dengan proyek ini, Anda dapat mencoba:
Super app!
Super app!
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Add new user
Super app!
<% if (request.getAttribute("userName") != null) { out.println("
\n" + " \n" + "
User '" + request.getAttribute("userName") + "' added!
\n" + "
"); } %>
Add user
<%@ page import="java.util.List" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>
Users list
Super app!
Users
<% List
names = (List
) request.getAttribute("userNames"); if (names != null && !names.isEmpty()) { out.println("
"); for (String s : names) { out.println("
- " + s + "
"); } out.println("
"); } else out.println("
\n" + " \n" + "
There are no users yet!
\n" + "
"); %>
- buat servlet dan jsp untuk menghapus pengguna dan beberapa lagi untuk mengubah/mengedit pengguna yang sudah ada. Anda akan mendapatkan aplikasi web CrUD yang sebenarnya :) di servlet))
- ganti daftar (Daftar
) untuk bekerja dengan database sehingga pengguna yang ditambahkan tidak hilang setelah server di-restart :)
GO TO FULL VERSION