Pada tutorial kali ini kita akan membuat program Vue.js yaitu :
1. Membuat form input data penjualan onlineshop yang menggunakan semua
tipe inputan, kemudian pada form tersebut, tampilkan setiap data yang
diketik atau dipilih, dan lakukan simulasi pengiriman data ke server. Dan desain template menggunakan framework bootstrap.
2. Membuat sebuah list dalam bentuk table yang menampilkan data produk
onlineshop, lengkap dengan gambar dan desain template,
kemudian tambahkan filtering yang bisa memfilter data yang di tampilkan.
Pengkodean :
1.Membuat form input data penjualan onlinshop yang menggunakan semua tipe inputan, kemudian pada form tersebut, tampilkan setiap data yang diketik atau dipilih, dan lakukan simulasi pengiriman data ke server. Dan desain template menggunakan framework bootstrap.
- Yang pertama buat file baru dengan nama
form.html. Kemudian tambahkan kode css bootstrap pada bagian head agar tampilan
rapi :
- Kemudian pada bagian body nya tambahkan kode tampilan
form seperti berikut :
- Pada kode diatas terdapat kode v-if=”errors.length”, berfungsi untuk mengecek apakah ada error
saat data di validasi. Apabila ada makan akan tampil pesan error.
- Selanjutnya, masih di dalam body tambahkan kode vue.js seperti berikut :
- Selanjutnya buat file baru dengan nama proses.php simpan pada folder yang sama, file ini untuk mensimulasikan data yang dikirim ke server. Untuk kode php nya seperti berikut :
- Kode php diatas yaitu berfungsi untuk menerima data yang dikirimkan dari form.
- Coba jalankan web server dan buka file form.html, apabila tidak ada kesalahan akan tampil seperti berikut :
- Selanjutnya inputkan data pada form tersebut :
- Setelah submit coba cek data pada console, dan akan tampil seperti berikut :
2. Membuat sebuah list dalam bentuk table yang menampilkan data produk onlineshop, lengkap dengan gambar dan desain template, kemudian tambahkan filtering yang bisa memfilter data yang di tampilkan.
- Yang pertama buat file baru dengan nama table.html, dan isikan kode berikut pada bagian body :
- Selanjutnya, masih pada body tambahkan kode vuejs berikut :
- Coba jalankan pada browser, akan tampil seperti berikut :
- Selanjutnya, coba input cari jersey sesuai title yang kan dicari.
- Ketika kata kunci yang terdapat pada list, maka data akan langsung terfilter
tanpa perlu reload.
- Ada dua variabel yaitu search untuk menampung kata kunci dan jerseys untuk menampung data jersey. Disamping itu ada satu fungsi pada properti
computed yaitu filterJerseys. Fungsi filterJerseys akan melakukan pengecekan
adakah item di variabel jerseys yang berisi variabel search.
- Jadi kesimpulan nya pada kode diatas adalah kode diatas awal nya menampilkan semua data list yang ada pada variabel jerseys dan ditampilkan pada table, dan terdapat form cari jersey pada pojok kanan tabel, ketika user menginputkan karakter pada inputan Cari jersey isi dari inputan atau variabel search itu dicocokan dengan list data jerseys, apabila data tersedia maka akan ditampilkan dan sebaliknya.
0 Komentar