Tantangan :
1. Buatlah 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 server2. Buatlah sebuah list dalam bentuk table yang menampilkan data produk onlineshop, kemudian tambahkan filtering yang bisa memfilter data yang di tampilkan.
Nomor 1
Sebelum memulai pastikan buat project baru dan download semua kebutuhan library seperti vue, bootstrap, dan jquery
Setelah itu buat file dengan nama penjualan.html, kemudian isi code seperti dibawah
<!DOCTYPE html>lalu buka filenya dan jalankan di browser dan tampilanya akan seperti ini :
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Input Penjualan</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='lib/jquery.min.js'></script>
<script src='lib/bootstrap.min.js'></script>
<script src='lib/vue.js'></script>
<link href='lib/bootstrap.min.css' rel="stylesheet" />
<style>
form {
border: 1px solid #ddd;
padding: 5px;
width: 50%;
background: #efefef;
}
</style>
</head>
<body>
<div id="app">
<h2>Form Penjualan</h2>
<form ref="formBook" @submit.prevent="submitForm($event)" action="" method="post" id="myForm">
<div class="form-group">
<label for="namaPelanggan">Nama Pelanggan</label>
<input type="text" v-model="nama" class="form-control" id="namaPelanggan" placeholder="Nama Pelanggan">
<span>Text: {{ nama }}</span>
</div>
<div class="form-group">
<label for="alamat">Alamat</label>
<textarea v-model="alamat" class="form-control" id="alamat" name="alamat" rows="3"></textarea>
<span>Text: {{ alamat }}</span>
</div>
<div class="form-group">
<label for="products">Product</label>
<select id="products" name="products" class="form-control" v-model="products" multiple>
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ products }}</span>
</div>
<div class="form-group">
<label for="total">Total</label>
<input type="number" class="form-control" v-model.number="total" name="total" vmodel.number="total"
placeholder="Total">
<span>Total: {{ total }}</span>
</div>
<div class="form-group">
<label for="kurir">Kurir</label>
<select name="kurir" class="form-control" v-model="kurir">
<option disabled value="">Pilih Kurir</option>
<option value="jnt">JNT</option>
<option value="jne">JNE</option>
<option value="sicepat">SICEPAT</option>
</select>
<span>Selected: {{ kurir }}</span><br><br>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" v-model="payment" type="radio" name="payment" id="payment1" value="Transfer">
<label class="form-check-label" for="payment1">
Transfer
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" v-model="payment" type="radio" name="payment" id="payment2" value="Virtual Account">
<label class="form-check-label" for="payment2">
Virtual Account
</label>
</div>
<span>Selected: {{ payment }}</span><br><br>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" v-model="asuransi" type="checkbox" id="asuransiBarang" name="asuransi" value="Auransi"><br>
<label class="form-check-label" for="asuransiBarang">Asuransi barang</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" v-model="asuransi" type="checkbox" id="asuransiPengiriman" name="asuransi" value="Tidak Asuransi"><br>
<label class="form-check-label" for="asuransiPengiriman">Asuransi pengiriman</label>
</div>
<span>Selected: {{ asuransi }}</span><br><br>
</div>
<input type="submit" value="Submit">
</form>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
nama: '',
alamat: '',
kurir:'',
products: [],
total: 0,
payment:'',
asuransi:[],
options: [
{ text: 'Laptop', value: 'laptop' },
{ text: 'Handphone', value: 'handphone' },
{ text: 'TV', value: 'tv' }
],
},
methods: {
submitForm(event) {
// persiapkan data
let formData = new FormData()
formData.append('nama', this.nama)
formData.append('alamat', this.alamat)
formData.append('products', this.products)
formData.append('total', this.total)
formData.append('payment', this.payment)
formData.append('asuransi', this.asuransi)
// kirim data ke server
let xhttp = new XMLHttpRequest() // create objek XMLHttp
// definisikan fungsi ketika terjadi perubahan state
xhttp.onreadystatechange = function () {
// state ini menunjukkan data terkirim dan diterima server dengan baik
if (this.readyState == 4 && this.status == 200) {
// respon text dari server
console.log(this.responseText)
}
}
// sesuaikan dengan lokasi file proses.php
xhttp.open("POST", "/tugas4/prosses.php", true)
// kirim objek formData
xhttp.send(formData)
}
}
})
</script>
</body>
</html>
isi semua field - field nya dan akan tampil semua inputan dari form ke dalam variabel (data) vue.
lalu buat file php dengan nama prosses.php dan isi code seperti dibawah :
<?phpscript diatas adalah script server side yang nantinya data yang ada dalam form akan dikirim ke server. Script diatas hanya sebagai menampilkan data yang dikirim oleh client. Pada kenyataanya akan disimpan ke database. Untuk cara post nya dari client menggunakan xml http request.
// untuk mencegah error akibat CORS
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
echo "SIMULASI KIRIM DATA FORM <hr>";
// menampilkan data yang dikirimkan dengan method post
print_r($_POST);
?>
Untuk mengetestnya isi semua form dan klik submit, lalu inspect element dan buka console, maka akan ada response dari server. Dalam contoh ini response di write ke console
Nomor 2
Buat file dengan nama filter.html lalu isi code seperti dibawah :
<!DOCTYPE html>untuk foto dan nama barang bisa disesuaikan dengan merubah data dari vue sesuai dengan keinginan.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title>
<script src="lib/jquery.min.js"></script>
<script src="lib/vue.js"></script>
<script src="lib/bootstrap.min.js"></script>
<link href="lib/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<section class="sections random-product">
<div class="container-fluid">
<h1>Online Shop</h1><br>
<div class="container">
<div class="row" id="app">
<div class="row">
<div class="col-md-12">
<select v-model="filteredProperty">
<option value="name">Name</option>
<option value="description">Description</option>
<option value="price">Price</option>
</select>
<input placeholder="filter value" v-model="query">
<button @click="addFilter">add filter</button>
</div>
<div class="col-md-12">
<table v-if="activeFilters.length">
<tr style="width: 100px">
<th colspan="3">Filters in use:</th>
</tr>
<tr v-for="(filter, index) in activeFilters" :key="index">
<td>{{ filter.name }}:</td>
<td>{{ filter.value }}</td>
<td style="padding-left: 10px;">
<a href="#" @click.prevented=removeFilter(index)>
remove
</a>
</td>
</tr>
</table>
<hr v-if="activeFilters.length">
</div>
</div>
<div class="row">
<div v-for="(record,index) in filtered" :key="index" class="col-md-4">
<div class="card">
<img class="card-img-top" v-bind:src="record.image" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">
<a href="#" class="text-dark">{{record.name}}</a>
</h5>
<p>{{record.description}}</p>
<div class="float-left">
<p>Price : {{record.price}}</p>
</div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
</div>
</div>
<!--.row-->
</div>
<!--.container-->
</div>
<!--.container-fluid-->
</section>
<script>
var vm = new Vue({
el: '#app',
data: {
filteredProperty: 'name',
query: '',
activeFilters: [],
products: [
{
name: 'MSI Modern 14-A10RB Grey',
description: 'Jual laptop MSI Modern 14-A10RB Grey',
price: 11000000,
image: 'MSI-Modern-14-A10RB-Grey.jpg'
},
{
name: 'ASUS ROG STRIX',
description: 'Jual laptop asus gaming ASUS ROG STRIX',
price: 12000000,
image: 'asus_rog_strix_g.jpeg'
},
{
name: 'DELL Inspirion 15 3584',
description: 'Jual laptop DELL Inspirion 15 3584',
price: 7000000,
image: 'dell-inspirion-15-3584.jpg'
},
{
name: 'ASUS ZENBOOL 13 UX331UAL',
description: 'Jual ASUS ZENBOOL 13 UX331UAL',
price: 8000000,
image: 'Asus_zenbook-13 UX331UAL.jpg'
},
{
name: 'HP Pavilion X-360',
descripton: 'Jual Laptop HP Pavilion X-360',
price: 75000000,
image: 'hp-pavilion-x360.jpg'
},
{
name: 'DELL INSPIRION 14 500 Series',
description: 'Jual laptopn DELL INSPIRION 14 500 Series',
price: 9000000,
image: 'ins-14-5000-serie.jpg'
}
]
},
computed: {
filtered() {
var filtered = this.products
this.activeFilters.forEach(filter => {
filtered = filtered.filter(record => {
return filter.name === 'name'
? new RegExp(filter.value, 'i').test(record[filter.name])
: record[filter.name] == filter.value
})
})
return filtered
}
},
methods: {
addFilter() {
this.activeFilters.push({
name: this.filteredProperty,
value: this.query
})
this.query = ''
},
removeFilter(idx) {
this.activeFilters.splice(idx, 1)
}
}
})
</script>
</body>
</html>
Untuk contoh diatas memfilter data berdasarkan key filter yang dipilih. Data akan secara otomatis terfilter. Buka filenya di browser dan akan tampil seperti dibawah :
Untuk mengetest filternya pilih filternya akan berdasarkan apa, lalu klik add filter maka data akan secara otomatis terfilter.
Pada contoh dibawah memfilter berdasarkan nama "ASUS" maka hanya tampil dengan nama ASUS.
0 Komentar untuk "Vue Input Binding And Filter List"