1. Handling Submit Form & Validation
Buat file dengan nama form.html dan tambah kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Form Data</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTN
h0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
Sampai disini adalah untuk memasukkan bootstrap kedalamnya.
<body>
<div class="col pt-3">
<h2 class="font-weight-bold"> Input The Data </h2>
<hr>
</div>
<div id="app" class="container">
<form class = "form-control"ref="formBook" @submit.prevent="submitForm($event)"
action="" method="post" id="myForm">
<p v-if="errors.length">
<b>Oops Something is wrong!</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<hr>
<div class="row">
<div class="col">
<label>Name Of Product :</label>
<input class = "form-control" type="text" v-model="nama" ref="nama"/>
<br>
</div>
<div class="col">
<label>Description :</label>
<textarea class="form-control" v-model="description"></textarea>
</div>
</div>
<div class="row">
<div class="col">
<label>Brand :</label>
<input class = "form-control" type="text" v-model="merk">
</div>
<div class="col">
<label>Price :</label>
<input class = "form-control" type="number" v-model.number="price">
</div>
</div>
<div class="row">
<div class="col">
<label>Categories:</label>
<select multiple class= "form-control" v-model="categories" multiple>
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
</div>
</div>
<div class="row">
<div class="col">
<label>Picture :</label>
<input name="gambar" ref="gambar" type="file" class="form-control-file">
<br>
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</div>
<br>
</form>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
nama: '',
description: '',
merk: '',
price: 0,
categories: [],
options: [
{ text: 'Shirt', value: '01' },
{ text: 'T-Shirt', value: '02' },
{ text: 'Jacket ', value: '03' },
{ text: 'Hoodie ', value: '04' },
{ text: 'Pants ', value: '05' },
{ text: 'Accesories ', value: '06' }
],
errors: []
},
methods:
{
submitForm(event){
this.errors = []
// kode validasi
if(this.nama.length < 3){
this.errors.push('Input the name more than 2 char')
this.$refs.nama.select()
}
if(this.description.length > 500){
this.errors.push('Description max is 500 char!')
this.$refs.description.select()
}
if(this.merk.length < 3){
this.errors.push('Input the brand more than 2 char')
this.$refs.merk.select()
}
if(this.price < 0){
this.errors.push('No minus on price')
this.$refs.price.select()
}
if(this.categories.length === 0){
this.errors.push('Choose minimal 1 category')
this.$refs.categories.focus()
}
// kode status informasi
if(this.errors.length === 0 ){
// persiapkan data
let formData = new FormData()
let gambar = this.$refs.gambar.files[0]
formData.append('nama', this.nama)
formData.append('description', this.description)
formData.append('merk', this.merk)
formData.append('price', this.price)
formData.append('categories', this.categories)
formData.append("gambar", gambar)
// 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", "http://localhost/proses.php", true)
// kirim objek formData
xhttp.send(formData)
}
}
}
})
</script>
</body>
</html>
Kode diatas adalah kode tampilan form
, Kode v-if=”errors.length” adalah untuk memeriksa apakah ada yangg tidak sesuai dengan ketentuan atau error. Jika ada maka akan lanjut ke this.errors dan akan muncul alert sesuai dengan errornya.
Misal, errornya adalah kita lupa memasukkan nama dari produknya maka akan muncul "Input the name more than 2 char"
Setelah itu buat 1 file baru yang bernama proses.php dan masukkan kode dibawah ini:
<?php
// 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);
print_r($_FILES['gambar']);
Kode ini untuk menerima data yang dikirim dari form. Dan kemudian tampilannya akan seperti ini pada browser:
Dan kemudian untuk contoh error akan seperti dibawah ini:
2. Input Binding
Buat file dengan nama binding.html kemudian masukkan kode dibawah:
<!DOCTYPE html>
<html>
<head>
<title> Form BInding </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/
css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E2
63XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
Sama seperti yang input tadi, ini juga adalah untuk memasukkan bootstrap.
Lalu masukkan lagi kode ini dibawahnya:
<body>
<div id= "app" class ="container">
<div class="row">
<div class="col pt-3">
<h2 class="font-weight-bold"> Binding </h2>
<hr>
</div>
</div>
<form>
kategori : <input type="text" name="kategori" v-model="kategori"
placeholder="pilih kategori di bawah">
<hr>
<input type="radio" id="baju" value="baju" v-model="kategori">
<label for="baju">baju</label>
<br>
<input type="radio" id="celana" value="celana" v-model="kategori">
<label for="two">celana</label>
<hr>
<span> Pilih warna nya : </span>
<br>
<input type="checkbox" id="merah" value="merah" v-model="checked">
<label for="jack">merah </label>
<input type="checkbox" id="kuning" value="kuning" v-model="checked">
<label for="john">kuning</label>
<input type="checkbox" id="hijau" value="hijau" v-model="checked">
<label for="mike">hijau</label>
<hr>
<select v-model="selected">
<option disabled value="">pilih salah satu</option>
<option> jearsey </option>
<option> Katun </option>
<option> Jeans </option>
</select>
<hr>
<textarea v-model="deskrip" placeholder="Tambahkan Deskripsi Baju">
</textarea>
<hr>
<h2 class="font-weight-bold"> Hasil Binding </h2>
<span>Kategori text : {{ kategori }}</span>
<br>
<span> fitur radio button : {{ kategori }}</span>
<br>
<label for="checkbox">fitur check box :{{ checked }}</label>
<br>
<span>fitur select : {{ selected }}</span>
<br>
<span>Deskripsi Baju: {{ deskrip }}
</span>
</form>
</div>
<script type="text/javascript">
var vm= new Vue({
el:'#app',
data : {
kategori:"",
checked:[],
selected:"",
deskrip:""
}
})
</script>
</body>
</html>
Kode ini untuk tampilan binding pada browser.
Terdapat fitur input text, radio button, check box dan selected dalam kode diatas.
Dan tampilan dari kode diatas adalah:
Kemudian jika kita masukkan data maka akan seperti dibawah ini:
Data yang ada diatas terikat ke data yang ada dibawah sehingga hasilnya yang dibawah dipengaruhi dari yang di atasnya.
