Menambahkan Fitur Pencarian
Pernahkah teman-teman menggunakan fitur pencarian pada aplikasi berbasis web yang sering kalian gunakan? Contohnya saat mencari produk spesifik pada website belanja online atau melakukan pencarian pada mesin pencari seperti Google.
Proses pencarian sebenarnya lebih tepat jika dilakukan pada server backend. Karena pada saat mencari satu atau beberapa data pada sekumpulan data tersebut, kita juga perlu memastikan bahwa datanya merupakan data terbaru.
Sebuah aplikasi dapat digunakan oleh lebih dari satu orang dalam waktu bersamaan. Aplikasi frontend yang kita buat tidak secara langsung terhubung dengan database dan berjalan pada browser masing-masing pengguna yang tidak terhubung satu sama lain.
Bayangkan jika seorang pengguna sedang mencari sebuah produk. Namun ternyata produk tersebut sedang dihapus oleh pengguna lain dalam waktu yang bersamaan. Informasi yang didapatkan seorang pengguna tidak akan akurat jika proses pencarian dilakukan pada aplikasi frontend.
Jika teman-teman perhatikan kembali dokumentasi pada https://dummyjson.com/docs/products, mereka telah menyediakan sebuah endpoint (url) untuk melakukan proses pencarian ini.
Mari kita coba buat sebuah komponen header yang di dalamnya terdapat form pencarian dengan menambahkan beberapa kode HTML dan CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Gallery</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>Image Gallery</h1>
<form id="search-form">
<input type="text" id="search-input" placeholder="Cari gambar..." />
<button type="submit">Cari</button>
</form>
</header>
<div class="image-gallery">
<!-- Tempat untuk menampilkan elemen card -->
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="modalImage" />
</div>
<script src="script.js"></script>
</body>
</html>
html,
body {
padding: 0;
margin: 0;
}
.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 100px;
}
.card {
width: 200px;
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
cursor: pointer;
}
.card img {
width: 100%;
height: 200px;
object-fit: cover; /* Gambar akan menutupi seluruh area elemen img */
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: white;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Efek bayangan */
position: fixed;
top: 0;
left: 0;
right: 0;
}
header h1 {
margin: 0;
font-size: 24px;
font-weight: bold;
letter-spacing: 2px;
}
#search-form {
margin-top: 10px;
}
#search-input {
padding: 8px;
width: 250px;
border: none;
border-radius: 20px;
font-size: 16px;
font-family: "Arial", sans-serif;
}
button {
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
font-family: "Arial", sans-serif;
transition: background-color 0.3s ease; /* Animasi perubahan warna latar belakang */
}
button:hover {
background-color: #0056b3;
}
Tampilan aplikasi kita saat ini sudah sesuai dengan fitur pencarian yang ingin kita tambahkan. Tapi bagaimana cara mengintegrasikannya dengan endpoint yang telah disediakan dummyjson.com?
Mari kita mulai dengan menambahkan sebuah fungsi pada script.js yang akan dijalankan saat kita menekan tombol "cari" atau menekan enter.
function searchProduct(event) {
event.preventDefault();
while (galleryContainer.firstChild) {
galleryContainer.removeChild(galleryContainer.firstChild);
}
}event.preventDefault() digunakan untuk mencegah form tersebut melakukan pengiriman (submit) ke server dan memuat ulang halaman.
Kemudian, kita kosongkan terlebih dahulu elemen container dengan metode removeChild() sebelum kita mengisinya dengan data-data baru dari hasil pencarian. Sekarang, mari kita melakukan fetching data hasil pencarian.
const searchInput = document.querySelector("#search-input");
function searchProduct(event) {
event.preventDefault();
while (galleryContainer.firstChild) {
galleryContainer.removeChild(galleryContainer.firstChild);
}
fetch("https://dummyjson.com/products/search?q=" + searchInput.value)
.then((response) => response.json())
.then((response) => {
console.log(response.products);
})
.catch((error) => console.log(error));
}Sekilas tampak sama dengan perintah fetch yang kita gunakan untuk mendapatkan daftar produk sebelumnya. Bedanya hanya pada url yang digunakan. Kita juga memanfaatkan fitur javascript untuk menggabungkan sebuah string url tersebut dengan variabel searchInput.value yang berisi nilai elemen input pencarian sesuai dengan apapun yang dimasukkan oleh pengguna. Jangan lupa untuk melakukan seleksi pada elemen searchInput tersebut.
const searchForm = document.querySelector("#search-form");
const searchInput = document.querySelector("#search-input");
function searchProduct(event) {
event.preventDefault();
while (galleryContainer.firstChild) {
galleryContainer.removeChild(galleryContainer.firstChild);
}
fetch("https://dummyjson.com/products/search?q=" + searchInput.value)
.then((response) => response.json())
.then((response) => {
console.log(response);
response.products.forEach((product) => {
const card = document.createElement("div");
card.classList.add("card");
const image = document.createElement("img");
image.src = product.thumbnail;
card.appendChild(image);
galleryContainer.appendChild(card);
card.addEventListener("click", () => {
modal.style.display = "block";
modalImage.src = product.thumbnail;
});
});
})
.catch((error) => console.log(error));
}
searchForm.addEventListener("submit", searchProduct);Setelah kita mendapatkan data hasil dari proses fetch tersebut, kita salin saja kode perulangan yang kita gunakan sebelumnya untuk membuat elemen-elemen card di dalam container tersebut ke dalam fungsi searchProduct. Itu artinya, kita akan membuat ulang elemen-elemen card beserta data di dalamnya berdasarkan produk-produk yang keluar pada pencarian saja.
Jangan lupa untuk menambahkan event listener untuk event submit dari elemen form pencarian. Event submit adalah event yang terjadi ketika kita menekan sebuah tombol submit di dalam sebuah form atau menekan tombol enter setelah mengisi sebuah elemen input. Event ini sering digunakan untuk fitur pencarian dan pengiriman data form lainnya.
Last updated