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>
<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>
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']);
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.
Tidak ada komentar:
Posting Komentar