Form dan Filtering Vue.js

Hallo teman-teman, kali ini saya akan membahas mengenai form input menggunakan vue.js. Form ini nantinya akan menampilkan setiap inputan dan mengirimkan data ke server php.

Form Input

Pertama kita buat file baru dengan nama form.html, seperti biasa import terlebih dahulu library vue js nya pada tag script di header. Dalam mendesign form ini kita buat tampilannya agar terlihat lebih menarik dengan menggunakan library bootstrap, agar tidak perlu mendownload terlebih dahulu kita import saja librarynya via link cdn yang bisa di dapat pada dokumentasi bootstrap.

Tambahkan pada tag header project kita seperti berikut (dengan catatan harus terkoneksi internet).

Pada form input kali ini kita akan mencoba semua tipe inputan seperti text, number, textarea, checkbox, selectbox, radio button, dan file. Design tampilan form nya seperti berikut.

Ketika form input di inputkan, maka akan menampilkan setiap teks yang di bungkus di dapal tag <span></span>. Untuk selectbox, radio button, dan checkbox akan menampilkan nilai yang dipilih, khusus untuk checkbox kita buat bentuknya array, karena bisa dipilih lebih dari 1.

Berikut adalah codenya.

Sekarang kita coba pada browser, lakukan input data maka setiap nilai yang diketikkan dan dipilih akan muncul di dalam tag span.

Selanjutnya kita akan menambahkan validasi dan mencoba mengirim data ke server php, pastikan xampp telah terinstall di laptopnya. Tambahkan terlebih dahulu element untuk manempilkan pesan error validasinya.

Tambahkan juga variabel errors pada data berupa array.

Buat methods baru dengan nama submitForm lalu isikan code validasi jika form inputnya error.

Panggil methods submitForm pada tag form nya.

Sekarang kita coba test jika kita klik submit tanpa mengisi form nya, maka akan muncul respon seperti berikut.

Berikutnya tinggal kita berikan kondisi jika form nya tidak error maka kirim datanya ke server dengan menambahkan code berikut.

Buat file baru dengan nama proses.php di dalam folder xampp/htdocs/vue/, masukkan codenya seperti berikut.

Test dengan mengisi semua data form secara benar dan jangan lupa untuk menyalankan server di xamppnya.

Filtering

Berikutnya kita akan mencoba filtering pada data list, masih dalam project yang sama, buat file baru dengan nama filter.html.

Kita buat  sebuah tabel yang di dalamnya menampilkan beberapa data produk seperti gambar, nama, deskripsi, harga, dan warna. Tuliskan codenya seperti berikut.

Data pada tabelnya kita looping dengan mengirimkan data objek di vue js nya.

Untuk gambar tentu kita perlu menambahkannya terlebih dahulu, dan masukkan ke dalam folder dengan nama gambar.

Jalankan pada browser, maka akan muncul tampilan berikut.

Selanjutnya kita buta form input untuk melakukan filtering, tambahkan code berikut.

Definisikan juga variabel keywordnya.

Selanjutnya buat function filterProducts menggunakan property computed vue js, kita filter berdasarkan nama produknya.

Jalankan pada browser.

Ketikkan kata kunci berdasarkan nama product.

Filtering ini melakukan pencarian berdasarkan kata kunci secara live, jadi ketika kita mengetikkan suatu kata kunci, maka vue js akan langsung memfilternya.

Kesimpulannya adalah form input pada vue js dapat dilakukan untuk memanipulasi data pada client seperti menampilkan kembali data inputan dan melakukan error handling dari sisi client.

Sementara Filtering pada vue js memungkinkan kita untuk melakukan seleksi data berdasarkan keyword secara live, yang biasanya hal itu harus dilakukan dengan teknologi ajax.

Sekian tutorial, selamat mencoba.