Praktikum 5
Latihan 1
Handling Submit Form dan Validation
Hasilnya
Latihan 2
Filtering Data List
Hasilnya
Handling Submit Form dan Validation
<!DOCTYPE html>
<html>
<script type="text/javascript" src="lib/vue.js"></script>
<style>
body {
font-style: normal;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
input[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
textarea {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: tomato;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: coral;
}
.form {
width: 70%;
border-radius: 5px;
background-color: lightsalmon;
padding: 20px;
margin-left: 180px;
color: whitesmoke;
}
label {
text-align: left;
}
</style>
<body>
<h3>Data Produk</h3>
<div id="app">
<div class="form">
<form ref="formBaju" @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>Nama Produk</label>
<input type="text" placeholder="Masukan Nama Produk.." v-model="produk" ref="produk" />
<label>Kategori</label>
<input type="text" placeholder="Masukan Kategori.." v-model="kategori" ref="kategori" />
<label>Deskripsi</label>
<textarea v-model="description" placeholder="Masukan Deskripsi.." ref="description"></textarea>
<label>Harga</label>
<input type="text" placeholder="Masukan harga.." v-model="harga" ref="harga" />
<label>Foto Produk</label><br>
<input name="image" ref="image" type="file">
<input type="submit" value="Submit">
</form>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
produk: '',
kategori: '',
description: '',
harga: '',
errors: []
},
methods: {
submitForm(event) {
this.errors = []
if (this.produk.length < 3) {
this.errors.push('Produk minimal 3 karakter!')
this.$refs.produk.select()
}
if (this.kategori.length < 3) {
this.errors.push('Kategori minimal 3 karakter!')
this.$refs.kategori.select()
}
if (this.description.length > 500) {
this.errors.push('Deskripsi max 500 karakter')
this.$refs.description.select()
}
if (this.produk.length < 0) {
this.errors.push('Harga tidak boleh minus')
this.$refs.harga.select()
}
if (this.errors.length === 0) {
let formDate = new FormData()
let image = this.$refs.image.file[0]
formDate.append('produk', this.produk)
formDate.append('kategori', this.kategori)
formDate.append('description', this.description)
formDate.append('harga', this.harga)
formDate.append("image", image)
let xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText)
}
}
xhttp.open("POST", "http://localhost/vue/proses.php", true)
xhttp.send(formDate)
}
}
}
})
</script>
</body>
</html>
Hasilnya
Latihan 2
Filtering Data List
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Latihan Soal No 2</title>
<script type="text/javascript" src="lib/vue.js"></script>
<style>
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.header {
border: 2px solid #ccc;
background-color: #eee;
border-radius: 5px;
margin: 16px 0;
margin-top: 0;
font-size: 65px;
text-align: center;
margin-bottom: 0;
}
.topnav {
overflow: hidden;
background-color: #eee;
margin-top: 0;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: violet;
color: white;
}
.topnav input[type=text] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
border: none;
font-size: 17px;
}
@media screen and (max-width: 600px) {
.topnav a,
.topnav input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 25%;
padding: 10px;
margin-left: 70px;
margin-top: 20px;
float: left;
}
.container {
padding: 2px 16px;
}
.containerimg {
position: relative;
width: 100%;
}
.image {
opacity: 1;
display: block;
width: 40%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="header">
<p>Belanja.com</p>
</div>
<div id="app">
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<input type="text" v-model="keyword" placeholder="Search..">
</div>
<div class="card" v-for="(baju, index) of filterBajus" :key="index">
<div class=" containerimg ">
<img style="width: 100% " :src="baju.image " class="image " />
</div>
<div class="container ">
<h4><b>{{ baju.produk }}</b></h4>
<p>Kategori : {{ baju.kategori }}</p>
<p>IDR {{ baju.harga }}</p>
<p>Deskripsi : {{ baju.description }}</p>
</div>
</div>
</div>
<script type="text/javascript ">
var vm = new Vue({
el: '#app',
data: {
keyword: '',
bajus: [{
id: 1,
produk: 'Switter G.A.P',
kategori: 'Switter',
description: 'Warna pink cerah, bahan switter lembut',
harga: '50.000',
image: 'baju1.jpg'
}, {
id: 2,
produk: 'Kaos Batik',
kategori: 'Kaos',
description: 'Kaos pola batik, bahan katun nyaman tidak bikin panas',
harga: '50.000',
image: 'baju2.jpg'
}, {
id: 3,
produk: 'Kaos Belle',
kategori: 'Kaos',
description: 'Kaos pola gambar princess Belle, bahan nyaman',
harga: '50.000',
image: 'baju3.jpg'
}, {
id: 4,
produk: 'Kaos Garis',
kategori: 'Kaos',
description: 'Kaos pola garis-garis warna hitam abu, bahan katun.',
harga: '50.000',
image: 'baju4.jpg'
}, {
id: 5,
produk: 'Kaos Polos',
kategori: 'Kaos',
description: 'Kaos polos warna abu muda, saku disamping kanan kiri, bahan nyaman',
harga: '50.000',
image: 'baju5.jpg'
}, {
id: 1,
produk: 'Dress Kaos Pelangi',
kategori: 'Dress Kaos',
description: 'Dress rok bahan kaos nyaman warna-warni cerah',
harga: '50.000',
image: 'baju6.jpg'
}]
},
computed: {
filterBajus() {
return this.bajus.filter((baju) => {
return bajus.produk.includes(this.keyword)
})
}
}
})
</script>
</body>
</html>
Hasilnya
Komentar
Posting Komentar