Mengambil Data dari Backend
Dengan melanjutkan kode dari materi sebelumnya, mari kita mengintegrasikan aplikasi kita dengan sebuah public API, yaitu API umum yang dapat digunakan siapapun.
Pada contoh kali ini, kita akan menampilkan daftar produk dari dummyjson.com pada elemen-elemen card aplikasi kita.
<!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>
<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>
.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.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;
}const imageArray = [
"https://images.unsplash.com/photo-1682687982185-531d09ec56fc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
"https://images.unsplash.com/photo-1696063429824-b0f45cd175eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80",
"https://images.unsplash.com/photo-1659959104064-bf540e608ca0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1430&q=80",
// tambahkan URL gambar lainnya sesuai kebutuhan
];
const galleryContainer = document.querySelector(".image-gallery");
const modal = document.getElementById("myModal");
const modalImage = document.getElementById("modalImage");
const closeModal = document.querySelector(".close");
function getProducts() {
fetch("https://dummyjson.com/products")
.then((response) => response.json())
.then((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));
}
getProducts();
closeModal.addEventListener("click", () => {
modal.style.display = "none";
});
window.addEventListener("click", (event) => {
if (event.target === modal) {
modal.style.display = "none";
}
});Terdapat sedikit perubahan yang ada pada kode javascript di atas dibandingkan dengan materi sebelumnya. Kita membuat sebuah fungsi yang bernama getProducts yang menjalankan proses pengambilan data dari API dummyjson.com dengan menggunakan metode fetch. Hasil dari metode ini adalah sebuah promise yang telah kita pelajari pada pemrograman dasar dengan Javascript. Promise harus diperlakukan secara asynchronous sehingga kita menggunakan perintah .then untuk terlebih dahulu mengolah data tersebut menjadi format json.
Data yang kita dapatkan bentuknya seperti ini jika kita tampilkan di console :
Dari data tersebut, kita dapat melihat bahwa response dari API tersebut berupa object yang salah satu propertinya adalah products berisi array dari berbagai produk yang ingin kita gunakan. Maka dari itu kita harus mengakses properti "products" untuk mendapatkan dan mengoiah data list produk tersebut seperti yang kita lakukan pada script.js.
Setelah itu, kita memindahkan proses perulangan untuk membuat elemen card ke dalam fungsi ini. Sehingga saat ini, perulangan yang kita lakukan tidak lagi mengacu pada imageArray yang sebelumnya kita gunakan. namun mengacu pada data list produk yang ada di dalam response.products yang merupakan response dari API tersebut.
const image = document.createElement("img");
image.src = product.thumbnail;Apakah teman-teman melihat perubahan pada baris kode ini dibandingkan dengan kode pada materi sebelumnya?
Betul sekali! Saat ini kita harus mengakses products.thumbnail untuk mendapatkan url gambar untuk dimasukkan ke dalam atribut src pada elemen image yang kita buat. Mengapa seperti itu?
Jika teman-teman perhatikan, isi dari products merupakan array of objects. Artinya jika array tersebut dimasukkan ke dalam perulangan, setiap produk melambangkan sebuah object dengan beberapa properti di dalamnya. Salah satunya thumbnail.
Mengambil Data dengan Fetch
Metode fetch adalah cara untuk mengambil data dari internet, seperti mengunduh halaman web atau mengambil data dari API (Application Programming Interface). Proses ini merupakan proses asynchronous (tidak menghalangi eksekusi kode lain) untuk berkomunikasi dengan server.
fetch(url, options)
.then(response => {
// Mengelola respons dari server
return response.json(); // Atau response.text(), response.blob(), dst. Bergantung pada tipe data yang diharapkan.
})
.then(data => {
// Menggunakan data yang telah diterima
})
.catch(error => {
// Menangani kesalahan jika terjadi
});url: Parameter pertama adalah URL ke sumber data yang ingin diambil.options(opsional): Parameter kedua adalah objek opsional yang dapat digunakan untuk mengatur berbagai pengaturan permintaan seperti metode HTTP, header, dan lainnya.
Pada contoh aplikasi di atas, kita memberikan permintaan (request) kepada API dummyjson.com. Lalu API tersebut memberikan respons (response) berupa data produk ke aplikasi kita. Proses permintaan seperti ini disebut dengan GET Request (mengambil data dari API).
Terdapat beberapa tipe request lainnya yang dapat kita lakukan :
POST: Digunakan untuk mengirim data ke server untuk membuat atau memperbarui sesuatu.
PUT: Digunakan untuk memperbarui data yang sudah ada di server.
DELETE: Digunakan untuk menghapus data dari server.
Kita dapat melakukan request tersebut bergantung pada ketersediaan dari API tersebut. Kebanyakan API yang dapat diakses secara publik hanya menyediakan GET request karena tidak memberatkan server untuk menyimpan data. Bayangkan kita ada ratusan juta orang yang melakukan POST request untuk menyimpan data ke server API tersebut di Indonesia, belum lagi di negara lain. Pasti servernya akan penuh akan data. Terlebih lagi data tersebut merupakan data testing karena biasanya jenis API seperti ini hanya digunakan untuk tujuan pembelajaran.
Sebagai frontend developer kita tidak perlu terlalu memikirkan bagaimana cara membuat API seperti dummyjson.com, karena semuanya sudah dilakukan oleh backend developer hingga API tersebut siap digunakan beserta dokumentasi tentang cara penggunaannya.
Last updated