Penjelasan dari code ada dalam
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>List Products</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
a.category-link {
color: black;
letter-spacing: 2px;
margin-left: 20px;
margin-right: 20px;
cursor: pointer;
}
a.category-link:hover {
text-decoration: none;
color: rgba(0, 0, 0, 0.6);
}
.card {
box-sizing: border-box;
border: none;
transition: 0.4s;
margin-top: 10px;
filter: grayscale(100%);
}
.card:hover {
filter: none;
}
.input-search {
border-bottom: 1px solid #eaeaea;
border-top: none;
border-left: none;
border-right: none;
background-color: transparent;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler d-lg-none"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavId"
aria-controls="collapsibleNavId"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"
>List Products <span class="sr-only">(current)</span></a
>
</li>
<li>
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-small"
data-toggle="modal"
data-target="#modelId"
>
Add Products
</button>
</li>
</ul>
</div>
</nav>
<div class="container">
<div id="app">
<!-- Modal Body -->
<div
class="modal fade"
id="modelId"
tabindex="-1"
role="dialog"
aria-labelledby="modelTitleId"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Products</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<!-- alert -->
<div
class="alert alert-danger alert-dismissible fade show"
role="alert"
v-if="errors.length"
>
<button
type="button"
class="close"
data-dismiss="alert"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
<p>
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">
{{error}}
</li>
</ul>
</p>
</div>
<!-- end alert -->
<div class="modal-body">
<form
ref="formProducts"
@submit.prevent="submitForm($event)"
action=""
method="POST"
id="formProducts"
>
<label for="">Nama</label>
<input type="text" v-model="nama" class="form-control" />
<label for="">Harga</label>
<input type="number" min="0" v-model="harga" class="form-control" />
<label for="">Kategori</label>
<select v-model="kategori" class="form-control" multiple>
<option v-for="option in options" :value="option.value">
{{option.text}}
</option>
</select>
<label for="">Photo </label>
<br />
<input type="file" name="image" ref="image" />
<br><br>
<br><br>
<button type="submit" class="btn btn-small btn-primary">Add Products</button>
</form>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
<!-- End Modal Body -->
<hr width="80%" />
<div class="col-md-10" style="margin:0 auto;text-align:center">
<a class="category-link">
Bottom
</a>
<a class="category-link">
Top
</a>
<a class="category-link">
Footwear
</a>
</div>
<hr width="80%" />
<input
class="form-control mr-sm-2 input-search"
type="text"
placeholder="Search products.."
v-model="keyword"
/>
<!-- Jika pada computed filterProductBySearch mengembalikan suatu nilai -->
<div v-if="filterProductsBySearch != ''">
<!-- mengisi data dengan kembalian nilai dari filterProductBySearch -->
<div
class="col-md-3 float-left"
v-for="(produk, index) of filterProductsBySearch"
:key="index"
>
<div class="card">
<img
class="card-img-top"
style="height:300px"
:src="'img/' + produk.image"
alt=""
/>
<div class="card-body text-center">
<!-- mengambil value dari array produk dengan attribut nama -->
<h4 class="card-title">{{produk.nama}}</h4>
<!-- mengambil value dari array produk dengan attribut kategori -->
<p class="card-text" style="opacity:.8">
{{produk.kategori}}
<br />
<!-- mengambil value dari array produk dengan attribut harga -->
<span>Rp. {{produk.harga}},-</span>
</p>
</div>
</div>
</div>
</div>
<!-- jika filterProductBySearch tidak mengembalikan nilai apapun -->
<div v-else>
<h5 class="text-center">
<!-- menampilkan kata kunci -->
<i>Produk <b>{{keyword}}</b> tidak ditemukan..</i>
</h5>
</div>
</div>
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"
></script>
<script src="lib/vue.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(".alert").alert();
let vm = new Vue({
el: "#app",
data: {
keyword: "",
nama: "",
harga: 0,
kategori: [],
errors: [],
options: [
{ text: "Footwear", value: "Footwear" },
{ text: "Top", value: "Top" },
{ text: "Bottom", value: "Bottom" }
],
products: [
{
id: 1,
nama: "T-Shirt 1",
kategori: "Top",
harga: 150000,
image: "top1.jpg"
},
{
id: 2,
nama: "T-Shirt 2",
kategori: "Top",
harga: 150000,
image: "top2.jpg"
},
{
id: 3,
nama: "T-Shirt 3",
kategori: "Top",
harga: 150000,
image: "top3.jpg"
},
{
id: 4,
nama: "T-Shirt 4",
kategori: "Top",
harga: 150000,
image: "top4.jpg"
},
{
id: 5,
nama: "Jeans 1",
kategori: "Bottom",
harga: 150000,
image: "bottom1.jpg"
},
{
id: 6,
nama: "Jeans 2",
kategori: "Bottom",
harga: 150000,
image: "bottom2.jpg"
},
{
id: 7,
nama: "Jeans 3",
kategori: "Bottom",
harga: 150000,
image: "bottom3.jpg"
},
{
id: 8,
nama: "Jeans 4",
kategori: "Bottom",
harga: 150000,
image: "bottom4.jpg"
},
{
id: 9,
nama: "Foot 1",
kategori: "Footwear",
harga: 150000,
image: "foot1.jpg"
},
{
id: 10,
nama: "Foot 2",
kategori: "Footwear",
harga: 150000,
image: "foot2.jpg"
},
{
id: 11,
nama: "Foot 3",
kategori: "Footwear",
harga: 150000,
image: "foot3.jpg"
}
]
},
computed: {
filterProductsBySearch() {
return this.products.filter(product => {
return product.nama.includes(this.keyword);
});
}
},
methods: {
submitForm(event) {
// error handling
if (this.nama.length < 3) {
this.errors.push("Nama Produk minimal 3 karakter!");
this.$refs.title.select();
}
if (this.harga < 0) {
this.errors.push("Harga tidak boleh minus.");
this.$refs.harga.select();
}
if (this.kategori.length === 0) {
this.errors.push("Pilih salah satu kategori.");
this.$refs.kategori.select();
}
// kalo tidak ada error sama sekali
if (this.errors.length === 0) {
let formData = new FormData();
let image = this.$refs.image.files[0];
// menyiapkan data untuk dikirim ke server dengan mengambil nilai dari form
formData.append("nama", this.nama);
formData.append("harga", this.harga);
formData.append("kategori", this.kategori);
formData.append("image", image);
// membuat objek XMLHttpRequest untuk mengirim data ke server
let xhttp = new XMLHttpRequest()
// membuat/deklarasi fungsi saat state berubah pada objek xhttp
xhttp.onreadystatechange = function() {
// state ini adalah ciri diterima dan mengirim data ke server dengan baik
if (this.readyState == 4 && this.status == 200) {
// hasil dari respon server jika tidak bermasalah.
console.log(this.responseText);
}
}
// menyiapkan path/lokasi server untuk dikirim
xhttp.open(
"POST",
"http://localhost/web2.0/Tugas5/proses.php",
true
);
// mengirim objek formData ke server
xhttp.send(formData);
}
}
}
});
</script>
</html>
Filter Data
Form Handling
0 komentar: