Spring MVC : Membuat Form Wizard

Spring MVC Form Wizard

Ada kalanya ketika mengisi data pada sebuah form, kita dibawa melintasi halaman demi halaman untuk memasukkan data diri kita. Form dengan bentuk seperti ini biasa disebut form wizard, dimana ketika sudah selesai mengisi data pada form 1 maka kita diharuskan untuk pergi ke form 2 dan seterusnya sampai proses input data selesai. Mirip dengan proses instalasi software pada windows, next next next 😀

Tulisan ini akan membahas pembuatan form wizard pada Spring MVC yang terdiri dari 3 halaman input data. Pertama pengguna harus memasukkan data diri berupa nama, kemudian email dan yang terakhir adalah negara.

Persiapan

Persiapan yang dilakukan cukup membuat project Maven. Bisa menggunakan command line kemudian di import ke IDE tertentu atau langsung dibuat menggunakan fasilitas pada IDE. Kalau saya menggunakan fasilitas yang ada pada Netbeans 7.3

Kemudian siapkan dependency-nya pada pom.xml yang dapat dilihat disini.

Kelas Entity

Seperti yang sudah-sudah kita membuat sebuah kelas untuk merepresentasikan sebuah data. Dan kelas Customer ini yang kita buat untuk keperluan tersebut.

Controller

Dalam pembuatan form wizard, controller harus bisa menangani proses menampilkan tiap-tiap form termasuk pemrosesan dibelakang tidak ketinggalan validasi data. Cara paling sederhana adalah membuat sebuah method untuk menangani masing-masing page. Jadi jumlah minimal method adalah sama dengan jumlah page form wizard.

Karena data yang dibutuhkan dalam proses pengisiannya melalui beberapa page maka kita harus menyimpan sebuah variabel customer dalam skala session agar tidak hilang ketika berpindah request. Teknik tersebut dapat diimplementasikan menggunakan annotation seperti ini @SessionAttributes(“customer”).

method wizard2 digunakan untuk menampilkan page kedua dari proses input data sekaligus untuk melakukan validasi terhadap input pada page 1. Jika terdapat error maka bukan page kedua yang ditampilkan tetapi kembali ke page 1 dengan menampilkan pesan error. Begitu juga dengan method page3 dan finish.

Validator

Pada controller tadi kita melakukan validasi dengan menggunakan objek validator. Bagian ini akan menerangkan cara membuat kelas CustomerValidator.
Spring sudah menyediakkanya untuk kita. Kita hanya perlu melakukan kustomisasi agar sesuai dengan masalah kita. Untuk membuat validator kita membuat kelas yang merupakan implementasi dari interface Validator.

Kita membuat 3 buah method tambahan untuk menyesuaikan dengan kebutuhan kita. Pertama untuk validasi name, email dan country. Untuk menampilkan pesan error kita perlu membuah sebauh file dengan nama messages.properties yang diletakkan pada classpath. Berikut adalah file messages.properties

Pesan tersebut diload menggunakan kelas ResourceBundleMessageSource. Dan berikut adalah potongan konfigurasi

Untuk kelas konfigurasi yang lengkap bisa dilihat pada repository saya dibagian akhir tulisan ini.

Halaman JSP

Implementasi View menggunakan JSP dan JSTL
Berikut adalah potongan kode dari masing-masing view

wizard1

wizard2

wizard3

finish

Screenshot

Form 1
form1

Form 2
form2

Form 3
form3

Result
finish

Pesan Kesalahan
validasi

Kesimpulan

Dengan menggunakan @Controller dan variabel yang disimpan pada session melalui @SessionAttributes kita bisa membuat sebuah form wizard pada Spring MVC

Untuk source code yang lengkap bisa didownload pada repository Github saya.

Semoga bermanfaat
Aamiin
🙂

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

Leave a Reply

Your email address will not be published. Required fields are marked *