Kali ini saya akan melanjutkan tentang Vue.Js dan akan membuat tutorial membuat form dan filtering. Form ini nantinya akan menampilkan inputan ker server.
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).
Selanjutnya masukan kode berikut untuk membuat form yang sudah terhubung dengan variable-variable dari fungsi vuenya.
maka hasilnya akan tampil seperti pada gambar berikut:
Lanjut tambahkan kode berikutnya dari gambar di bawah ini.
kode di bawah ini adalah untuk output yang terpilih dari inputan form di atas
Jika berhasik maka hasilnya akan seperti gambar dibwah ini.
Selanjutnya buat file baru dengan nama proes.php dan masukan kode berikut:
sekarang kita lohat hasilnya, jalankan pada browser maka tampilannya akan seperti berikut
kemudian jika form tersebut kita isi secara manual maka akan terinput secara otomatis seperti gambar dibawah ini
Selanjutnya klik kanan dan pilih inspect dan di tab console. Lanjut kira klik kirim di form dan hasilnya akan terkirim ke server seperti pada gambar berikut:
Filtering
Selanjutnya kita akan membuat filtering, dimana ada inputan berupa searching produk-produk yang ada.
Seperti sebelumnya diatas kita juga menggunakan Boostrap untuk tampilan kita, masukan kode berikut untuk tampilan card.
Selanjutnya masukan kode berikut untuk mengisi data-data dari tampilan card tersebut dengan kode vuenya.
jika sudah, maka hasilnya akan seperti berikut
sekian untuk tutorial kali ini, semoga bermanfaat !!!!!
No comments:
Post a Comment