ASP.NET MVC Validasi Sisi Client dan Server

[S]ebagai seorang developer rasanya kita semua pernah membuat sebuah aplikasi yang masuk dalam kategori aplikasi prakarya. Biasanya aplikasi semacam ini dibuat untuk tujuan belajar bagi pemula, kecuali terlahir langsung sebagai seorang pro, namun itu mustahil.

MVC Validation

Dalam sebuah tulisannya yang apik (Aplikasi Prakarya vs Aplikasi Production), Pak Endy membeberkan perbandingan antara aplikasi prakarya dengan aplikasi production serta membahas detil-detil kecil yang sering terlewatkan dalam sebuah aplikasi prakarya. Salah satu detil yang kurang diperhatikan adalah masalah validasi form.

Intinya validasi form mutlak diperlukan baik itu validasi dari sisi client maupun validasi dari sisi server. Keduanya sama-sama penting, namun kalau harus pilih salah satu saya pilih validasi di sisi server karena developer memegang penuh kendali, beda dengan validasi di sisi client.

Validasi Sisi Client

Validasi sisi client bertujuan supaya pengguna lebih nyaman. Lebih enak bagi pengguna untuk mengetahui kesalahan input di form ketika pindah dari satu field ke field lainnya daripada ketika sudah mengisi semua field kemudian menekan tombol submit.

ASP.NET MVC menyediakan mekanisme mudah untuk melakukan validiasi di sisi client dengan bantuan jquery dan jquery-validation.

Kode Program

Web framework buatan Microsoft ini mempunyai apa yang disebut Data Annotation yang bisa digunakan bersama dengan jquery-validation untuk melakukan validasi tanpa kita perlu menuliskan kode JavaScript. Cukup tambahkan data annotation pada kelas model sebagai berikut.

Setelah itu kita perlu membuat controller untuk menampilkan halaman form dan memproses form. Oleh karena itu, kita buat controller dengan 2 buah action, satu untuk GET dan satunya untuk POST.

Untuk View-nya buat dengan menggunakan strongly-typed view dan arahkan pada model di atas tadi serta jangan lupa untuk memberikan tanda cek pada “Reference script libraries“. Tekan tombol Add.

1. Create View

Jalannya Program

Jalankan program dan berikut adalah hasilnya

1. Field tidak diisi

3. Error

2. Filed diisi dengan benar

4. Success

Validasi Sisi Server

Sebelum melangkah ke validasi sisi server, coba matikan JavaScript pada browser dan submit form pada kondisi semua field kosong. Hal berikut ini akan terjadi

5.Bug

Bug di atas terjadi karena kita hanya melakukan validasi pada sisi client, sisi server tidak kita lakukan validasi padahal bisa saja pada sisi client JavaScript dimatikan atau sebab-sebab lainnya. Dari situ diperlukan juga validasi di server

Untungnya ASP.NET MVC memang memudahkan hidup developer. Cukup ubah kode pada action Index (POST) menjadi seperti berikut

Jalannya Program

Masih dalam keadaan JavaScript dimatikan, sekarang coba reproduce bug yang tadi.

6. Server Validation

Kali ini pesan kesalahan dimunculkan dan data tidak ke-submit ke halaman success.

Tentunya validasi tidak hanya sekadar memastikan bahwa field tidak kosong tapi juga hal lainnya seperti format email, kecocokan antara field password dan confirm password, format tanggal dan lain sebagainya. Untuk itu, silahkan googling bagaimana membuat validasi-validasi tersebut di ASP.NET MVC 😉 .Kalau mau agak gampang silahkan lihat contoh beberapa validasi lainnya di github saya di sini

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

6 thoughts on “ASP.NET MVC Validasi Sisi Client dan Server

  1. Thanks a lot master.

    maap nie, apa ada tutorial jika proses passing data dst menggunakan AJAX, barangkali juga ada ulasan analisanya perbandingan antara menggunakan FORM dan AJAX.

    1. Menarik, saya masukkan ke catatan ide tulisan saya dulu ya 😀
      Btw kalau validasinya di sisi klien maka sama saja dengan yang ada di tulisan ini. Untuk validasi di sisi server agak berbeda

Leave a Reply

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