Skip to main content

Tutorial Vue JS Filter dan Form


Hi semua , kali ini aku mau ngasih tutorial tentang Vue JS Filter dan Form , tanpa basa basi lagi hayu ah ...


VUE FORM

pertama buatlah dulu file .html (namanya bebas) lalu masukan kodingan ini.









Kodingan di atas ini untuk pembuatan form tersebut menggunakan v-model yang nantinya akan tampil di bawah form lalu form multiple select dan radio menggunakan data list yang mengambil data nya di options yang telah dibuat lalu form ini akan di validasi menggunakan methods yang validasi nya apabila error akan ditampilkan di alert dan juga hasil inputan akan di tampilkan di server menggunakan php , nanti disini aku akan buat file phpnya.

nah selanjutnya buatlah file bernamakan proses.php didalam folder htdocs dan folder vue lalu masukkan kodingan dibawah ini.



setelah itu , jalankan form nya di browser, jangan lupa untuk menyalakan dulu xamppnya ,
karena jika tidak dinyalakan maka akan error "Access-Allow-Origin Blocked!"



ketika kalian klik submit maka akan notif muncul , "data telah terkirim"

lalu buka inspect , hasilnya akan seperti ini



Selesai

VUE FILTER

Selanjutnya pembuatan filter pada sebuah list yang akan menyeleksi data yang telah di inputkan
Buatlah file .html (nama bebas0 lalu masukkan kodingan dibawah.







Kodingan diatas akan membuat sebuah list, disini aku me-list kan smartphone, nah list ini tuh berbentuk sebuah tabel yang ada di dalam vue js, untuk filternya menggunakan function filteredList() yang ada di dalam computed yang nantinya data diatas akan di filter nama nya .




gambar diatas sebelum di filter


gambar diatas hanya memfilter huruf x saja , jadi yang akan tampil adalah produk yang mempunyai huruf x


gambar diatas memfilter 1 merk yang akan tampil hanya 1 merk dengan beberapa produk yang nama merk nya sama.


Selesai

Comments

Post a Comment

Popular posts from this blog

Microservice

Hallo semuanya, saya sudah lama tidak update di blog ini hehe, pembahasan untuk kali ini yaitu Microservices, langsung saja saya akan jelaskan di bawah yaa, cekidot gan PENGENALAN Apa itu Microservice? Microservice adalah sebuah aplikasi yang terbagi menjadi beberapa projek kecil yang dalam masing-masing projek tersebut terdapat berbeda layanan yang saling terhubung dan saling melengkapi satu sama lain, perhatikan gambar di bawah ini. terlihat dari gambar di atas ibaratkan kotak oranye adalah server, nah dalam server tersebut terdapat hanya satu layanan, jika dibandingkan dengan  perhatikan gambar di bawah ini. Ibaratkan semua ini di dalam satu server, hanya dengan satu server terdapat banyak layanan sekaligus, terlihat lebih efisien jika dibandingkan dengan Microservice, namun apakah demikian? mari kita lihat perbandingan Microservice dan Monolithic Untuk yang Monolithic   - Jika aplikasi makin kompleks dan penggunanya makin banyak, kenaikan biaya
Post a Comment
Read more

CodeIgniter Tutor - mengubah ukuran upload

Halo disini aku langsung cepet aja ya karena simple tutorialnya pertama Bukalah file grocery_crud.php dari application/config . Ganti baris: $config['grocery_crud_file_upload_max_file_size'] = '20MB'; Menjadi $config['grocery_crud_file_upload_max_file_size'] = '200MB'; Maka kalian telah berhasil melakukan perubahan upload size. Jangan lupa save ya. selanjutnya buka XAMPP. Cari php.ini dan klik php.ini Pada file PHP.ini cari upload_max_filesize ubah ukuran sesuai dengan keinginan. Jangan lupa save ya selesai :D
Post a Comment
Read more

PHP LUMEN CONTENT NEGOTIATION

Halo semua, kali ini aku akan melanjutkantutorial dari Web Service Rest CRUD yang lalu, sekarang aku akan membuatkan service agar bisa melakukan Content Negotiation . Fungsi Read All 1.Fungsi Read ini akan melakukan satu validasi, yakni: -melakukan validasi Accept Header: hanya menerima application/json atauapplication/xml -Accept Header ini akan menentukan response format yang di kembalikan 2.Buka file app/Http/Controllers/PostsController.php dan update function store lalu masukkan script tambahan dibawah ini. 3. Lalu buka aplikasi postman dan test,coba tanpa mengirimkan accept request header, bila responnya "not acceptable" maka berhasil. 4. Sekarang kita coba tambahkan request header. klik tab samping headers(disamping tab body yang masih aktif) beri accept header dengan value application/json. hasilnya akan seperti ini. 5. coba ubah value menjadi application/xml menjadi seperti ini. Selesai Set response format pada bagian ini kita akan me
Post a Comment
Read more