Menggunakan Input Tersembunyi dengan Pegas dan Timeleaf

1. Perkenalan

Thymeleaf adalah salah satu mesin template paling populer di ekosistem Java. Ini memungkinkan kita untuk dengan mudah menggunakan data dari aplikasi Java kita untuk membuat halaman HTML dinamis.

Dalam tutorial ini, kita akan melihat beberapa cara untuk menggunakan input tersembunyi dengan Spring dan Thymeleaf.

2. Timeleaf dengan Formulir HTML

Sebelum kita melihat bekerja dengan bidang tersembunyi, mari kita mundur sejenak dan melihat bagaimana Thymeleaf bekerja dengan formulir HTML secara umum.

Kasus penggunaan yang paling umum adalah menggunakan formulir HTML yang memetakan langsung ke DTO dalam aplikasi kita .

Misalnya, anggaplah kita sedang menulis aplikasi blog dan memiliki DTO yang mewakili satu entri blog:

class BlogDTO { long id; String title; String body; String category; String author; Date publishedDate; }

Kita dapat menggunakan formulir HTML untuk membuat instance baru dari DTO ini menggunakan Thymeleaf dan Java:

Perhatikan bahwa field dalam DTO posting blog kita memetakan menjadi input tunggal dalam bentuk HTML. Ini berfungsi dengan baik dalam banyak kasus, tetapi bidang apa yang tidak boleh diedit? Di sinilah masukan tersembunyi dapat membantu.

Misalnya, setiap postingan blog memiliki kolom ID unik yang tidak boleh diedit oleh pengguna. Dengan menggunakan input tersembunyi, kita dapat memasukkan field ID ke dalam form HTML tanpa mengizinkannya untuk ditampilkan atau diedit .

3. Menggunakan atribut th: field

Cara tercepat untuk menetapkan nilai ke input tersembunyi adalah dengan menggunakan atribut th: field :

Ini adalah cara termudah karena kita tidak harus menentukan atribut value, tetapi mungkin tidak didukung di Thymeleaf versi lama .

4. Menggunakan Atribut th: attr

Cara selanjutnya kita dapat menggunakan input tersembunyi dengan Thymeleaf adalah menggunakan atribut built-in th: attr :

Dalam hal ini, kita harus mereferensikan field id menggunakan objek blog .

5. Menggunakan nama Attribute

Pendekatan lain yang kurang bertele-tele adalah dengan menggunakan atribut nama HTML standar :

Ini hanya bergantung pada atribut HTML standar. Dalam hal ini, kita juga harus mereferensikan field id menggunakan objek blog .

6. Kesimpulan

Dalam tutorial ini, kami melihat beberapa cara untuk menggunakan input tersembunyi dengan Thymeleaf. Ini adalah teknik yang berguna untuk meneruskan bidang hanya-baca dari DTO kami ke dalam bentuk HTML.

Seperti biasa, semua contoh kode yang digunakan dalam tutorial ini dapat ditemukan di Github.