Pratikum Pertemuan 7-Vue Js

Pratikum Pertemuan 7 : Form
A. Input Binding
1. Input teks
• Masih pada project file sebelumnya, tambahkan file baru.

• Isikan dengan code berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Vue</title>
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<form>
<input type="text" name="title" v-
model="title" placeholder="masukkan judul">
{{ title }}
</form>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
title: ""
}
})
</script>
</body>
</html>
• Kemudian coba jalankan pada browser. Maka akan menampilkan
hasil seperti berikut :
• Cobalah untuk mengetik teks apapun, maka teks yang kita ketik akan
langsung tampil di sebelahnya.
2. Input number dan radio button
• Masih pada project file sebelumnya, tambahkan file baru.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<form>
<input type="number" name="price" v-
model.number="price" placeholder="masukkan harga"> {{ price }}
<br><br>
<input type="text" name="title" v-
model.trim="title" placeholder="masukkan judul"> {{ title }}<br>
Paket <br>
<input type="radio" name="bukuA" value="A" v-model="paket">
<label for="bukuA">Buku Laravel</label>
<br>
<input type="radio" name="bukuB" value="B" v-model="paket">
<label for="bukuB">Buku Vue</label>
<br>
<input type="radio" name="bukuAB" value="AB" v-
model="paket">
<label for="bukuAB">Buku Laravel + Vue</label>
<br>
<span>Pilihan paket: {{ paket }}</span>
</form>
</div>
var vm = new Vue({
el: '#app',
data: {
title: "",
paket: "",
price: ""
}
})
</script>
</body>
</html>
• Kemudian jalankan code tersebut di browser.

• Pada contoh di atas, kita bisa melihat bagaimana penggunaan v-
model pada input number dan radio button.
3. Input select box, checkbox, dan multiple select
• Masih pada project file sebelumnya

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<form>
<select name="category" v-model="category">
<option disabled value="">Please select one</option>
<option value="01">Belajar Matematika</option>
<option value="02">Belajar Fisika</option>
<option value="03">Belajar Kimia</option>
</select>
<span>Selected: {{ category }}</span><br><br>
Gender :
<select name="gender" v-model="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<span>Selected: {{ gender }}</span>
<br><br>
Hobi <br>
<input type="checkbox" name="hobby" value="nonton" v-
model="hobbies">
<label for="hobby1">Nonton</label>
<input type="checkbox" name="hobby" value="jalan" v-
model="hobbies">
<label for="hobby2">Jalan</label>
<input type="checkbox" name="hobby" value="makan" v-
model="hobbies">
<label for="hobby3">Makan</label>
<br>
<span>Pilihan hobi: {{ hobbies }}</span><br><br>
<select name="categories" v-model="categories" multiple>

<option v-
for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ categories }}</span>
</form>
</div>
var vm = new Vue({
el: '#app',
data: {
category: "",
gender:"",
hobbies:[],
categories:[],
options: [
{ text: 'Belajar Matematika', value: '01' },
{ text: 'Belajar Fisika', value: '02' },
{ text: 'Belajar Kimia', value: '03' }
]
}
})
</script>
</body>
</html>
• Kemudian jalankan pada browser.
B. Filtering Data List

1. Masih pada project file sebelumnya, tambahkan file baru dengan nama
filterdata.html
2. Isikan dengan code berikut :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<input type="text" v-
model="keyword" placeholder="ketikkan kata kunci">
<ul>
<li v-for="(book, index) of filterBooks" :key="index">
{{ book }}
</li>
</ul>
</div>
var vm = new Vue({
el: '#app',
data: {
keyword: '',
books : [
'Belajar Matematika',
'Belajar Kimia',
'Belajar Fisika',
'Belajar Bahasa Inggris'
]
},
computed: {
filterBooks() {
return this.books.filter((book)=>{
return book.includes(this.keyword)
})
}
}
})
</script>
</body>
</html>
3. Kemudian jalankan pada browser, maka akan tampil tampilan berikut :
4. Ketik kata kunci yang terdapat pada list, maka data akan langsung terfilter
tanpa perlu reload.
5. Ada dua variabel yaitu keyword untuk menampung kata kunci dan books
untuk menampung data buku. Disamping itu ada satu fungsi pada properti
computed yaitu filterBooks. Fungsi filterBook akan melakukan pengecekan
adakah item di variabel books yang berisi variabel keyword.
C. Handling Submit Form dan Validation
1. Masih pada folder project sebelumnya, buat file baru dengan nama
form.html. Kemudian tambahkan kode berikut :
<!DOCTYPE html>
<html>
<head>
<style>
form {
border: 1px solid #ddd;
padding:5px;
width:225px;
background: #efefef;
}
label{
display: block;
margin-top: 5px;
}
input, textarea, select, option {
min-width: 200px;
}
</style>
</head>
2. Agar tampilan menjadi lebih rapi, pada bagian head tambahkan style css
seperti di atas. Kemudian tambahkan bagian body seperti berikut.
<body>
<div id="app">
<form ref="formBook" @submit.prevent="submitForm($event)"
action="" method="post" id="myForm">
<p v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<label>Title:</label>
<input type="text" v-model="title" ref="title"/>
<label>Description:</label>
<textarea v-model="description"></textarea>
<label>Authors:</label>
<input type="text" v-model="authors">
<label>Price:</label>
<input type="number" v-model.number="price">
<label>Categories:</label>
<select v-model="categories" multiple>
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<label>Cover:</label>
<input name="cover" ref="cover" type="file">
<label></label>
<input type="submit" value="Submit">
</form>
</div>
3. Code di atas, berisi tampilan form yang akan ditampilkan pada browser.
Kode v-if=”errors.length” di atas, berfungsi utk mengecek apakah ada error
saat data di validasi.
4. Kemudian masih di dalam body, tambahkan script vue berikut.
var vm = new Vue({
el: '#app',
data: {
title: '',
description: '',
authors: '',
price: 0,
categories: [],
options: [
{ text: 'Belajar Matematika', value: '01' },
{ text: 'Belajar Kimia', value: '02' },
{ text: 'Belajar Fisika', value: '03' }
],
errors: []
},
methods: {
submitForm(event){
this.errors = []
// kode validasi
if(this.title.length < 3){
this.errors.push('Title minimal 3 karakter!')
this.$refs.title.select()
}
if(this.description.length > 500){
this.errors.push('Description maximal 500 karakter!')
this.$refs.description.select()
}
if(this.authors.length < 3){
this.errors.push('Authors minimal 3 karakter!')
this.$refs.authors.select()
}
if(this.price < 0){
this.errors.push('Price tidak boleh minus!')
this.$refs.price.select()
}
if(this.categories.length === 0){
this.errors.push('Pilih minimal 1 category!')
this.$refs.categories.focus()
}
// kode status informasi

if(this.errors.length === 0 ){
// persiapkan data
let formData = new FormData()
let cover = this.$refs.cover.files[0]
formData.append('title', this.title)
formData.append('description', this.description)
formData.append('authors', this.authors)
formData.append('price', this.price)
formData.append('categories', this.categories)
formData.append("cover", cover)
// 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 serv
er 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/vue/proses.php", tr
ue)
)
// kirim objek formData
xhttp.send(formData)
}
}
}
})
</script>
</body>
</html>
5. Untuk mensimulasikan data yang dikirim ke server, maka pastikan php

sudah terinstall di computer masing-masing. Kemudian buatlah 1 file
dengan nama proses.php dan simpan pada satu folder yang sama.
6. Tambahkan kode berikut pada proses.php
<?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['cover']);
7. Fungsi dari file php tersebut adalah untuk menerima data yang di kirimkan
dari form.
8. Kemudian jalankan pada browser, maka akan tampil hasil Sebagai berikut.
D. Latihan
1. Buatlah 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 seperti
pada contoh. Gunakan desain template yang bagus, boleh menggunakan
bootstrap.
2. Buatlah sebuah list dalam bentuk table yang menampilkan data produk
onlineshop, lengkap dengan gambar dan desain template yang bagus,
kemudian tambahkan filtering yang bisa memfilter data yang di tampilkan
seperti pada contoh.
3. Tuliskan pada word mengenai step by step dari soal, penjelasan code, dan
kesimpulan. (tidak dibenarkan mengcopy apa yang sudah ada pada materi)
4. Kumpulkan di Edmodo word dan code nya, tanpa di zip/rar.

Pratikum Pertemuan 7-Vue Js

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pratikum Pertemuan 7-Vue Js

Diunggah oleh

Hak Cipta:

Format Tersedia

Pratikum Pertemuan 7 : Form

• Masih pada project file sebelumnya, tambahkan file baru.

• Masih pada project file sebelumnya, tambahkan file baru.

• Kemudian jalankan code tersebut di browser.

3. Input select box, checkbox, dan multiple select

• Masih pada project file sebelumnya

<select name="categories" v-model="categories" multiple>

• Kemudian jalankan pada browser.

B. Filtering Data List

3. Kemudian jalankan pada browser, maka akan tampil tampilan berikut :

// kode status informasi

// kirim data ke server

// definisikan fungsi ketika terjadi perubahan state

5. Untuk mensimulasikan data yang dikirim ke server, maka pastikan php

Anda mungkin juga menyukai