Membuat Komponen dengan Map dan Menghasilkan HTML Statis

Dalam pengembangan web modern, komponen menjadi fondasi penting untuk membangun antarmuka pengguna yang modular dan dapat digunakan kembali. Salah satu teknik yang populer untuk membuat komponen adalah dengan menggunakan metode map() untuk menambahkan data dan menghasilkan elemen HTML secara dinamis. Pada artikel ini, kita akan membahas bagaimana membuat komponen dengan metode map(), baik menggunakan JavaScript murni maupun framework Astro.js, dan bagaimana menghasilkan HTML statis dari komponen tersebut.

Pengulangan ini Permisalan seperti Kagebunshin

Awalan

Buat index.html
Taruh Tailwind.css CDN di Head atau install Tailwind secara manual

<script src="https://cdn.tailwindcss.com"></script>

Bagian 1: Membuat Komponen dengan JavaScript Murni

Pertama, mari kita lihat bagaimana membuat komponen menggunakan JavaScript murni. Langkah-langkahnya adalah sebagai berikut:

Persiapan Data:

Langkah pertama adalah menyiapkan data yang akan ditampilkan dalam komponen. Misalnya, kita memiliki array skills yang berisi objek-objek produk seperti berikut:

const skills = [
  {
    id: 1,
    name: "HTML",
    image:
      "https://images.unsplash.com/photo-1712926353838-8994d12fe62f?q=80&w=700&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    description: "Deskripsi HTML",
  },
  {
    id: 2,
    name: "CSS",
    image:
      "https://images.unsplash.com/photo-1712926353838-8994d12fe62f?q=80&w=700&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    description: "Deskripsi CSS",
  },
  {
    id: 3,
    name: "Javascript",
    image:
      "https://images.unsplash.com/photo-1712928247899-2932f4c7dea3?q=80&w=700&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    description: "Deskripsi Javascript",
  },
];

Array skills ini akan digunakan sebagai sumber data untuk membuat komponen.

Membuat Template Komponen:

Selanjutnya, kita perlu membuat template komponen yang akan menerima data dan mengembalikan string HTML. Kita dapat membuat fungsi skillsTemplate seperti berikut:
```
function skillsTemplate(skills) {
  return `
     <div class="skills">
       <img src="${skills.image}" alt="${skills.name}">
       <h3>${skills.name}</h3>
       <p>${skills.description}</p>
     </div>
   `;
}
```
Fungsi skillsTemplate menerima objek skills sebagai parameter dan mengembalikan string HTML yang merepresentasikan template komponen untuk setiap produk. Template ini menggunakan sintaks template literal (`) untuk menyisipkan nilai-nilai dari objek skills ke dalam HTML.
Menggunakan Metode map() untuk Menghasilkan Komponen:

Setelah memiliki template komponen, kita dapat menggunakan metode map() pada array skills untuk menghasilkan array baru yang berisi string HTML untuk setiap produk.
```
const skillsComponents = skills.map(skillsTemplate);
```
Metode map() akan memanggil fungsi skillsTemplate untuk setiap elemen dalam array skills dan menghasilkan array baru skillsComponents yang berisi string HTML untuk setiap produk.
Menggabungkan Komponen Menjadi Satu String HTML:

Langkah berikutnya adalah menggabungkan array skillsComponents menjadi satu string HTML menggunakan metode join().
```
const html = skillsComponents.join("");
```
Metode join() akan menggabungkan setiap elemen dalam array skillsComponents menjadi satu string HTML dengan pemisah yang ditentukan (dalam hal ini, tanpa pemisah).
Memasukkan HTML ke dalam Elemen Container:

Terakhir, kita perlu memasukkan string HTML yang dihasilkan ke dalam elemen container pada halaman web. Kita dapat menggunakan document.querySelector() untuk memilih elemen dengan ID tertentu dan mengatur properti innerHTML dengan string HTML yang dihasilkan.
```
const container = document.querySelector("#skills-container");
container.innerHTML = html;
```
Dengan kode di atas, komponen produk akan ditampilkan dalam elemen container pada halaman web.
Menghasilkan HTML Statis:

Jika kita ingin menghasilkan HTML statis dari komponen yang telah dibuat, kita dapat menyalin dan menempelkan isi dari elemen container ke dalam file HTML statis.

Itulah langkah-langkah untuk membuat komponen dengan JavaScript murni menggunakan metode map().

Refrensi

Contoh Kode Lengkap

<div id="skills-container" class="bg-gray-100 py-8"></div>
<script>
  const skills = [
    {
      id: 1,
      name: "HTML",
      image:
        "https://images.unsplash.com/photo-1712926382189-dacbc6b89a01?q=80&w=700&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      description: "Deskripsi HTML",
    },
    {
      id: 2,
      name: "CSS",
      image:
        "https://images.unsplash.com/photo-1712926353838-8994d12fe62f?q=80&w=700&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      description: "Deskripsi CSS",
    },
    {
      id: 3,
      name: "Javascript",
      image:
        "https://images.unsplash.com/photo-1712928247899-2932f4c7dea3?q=80&w=700&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      description: "Deskripsi Javascript",
    },
  ];

  function skillsTemplate(skills) {
    return `
    <div class="skills bg-white rounded-lg shadow-md overflow-hidden border border-gray-300 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
      <img src="${skills.image}" alt="${skills.name}" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-xl font-semibold mb-2">${skills.name}</h3>
        <p class="text-gray-600">${skills.description}</p>
      </div>
    </div>
  `;
  }

  const skillsComponents = skills.map(skillsTemplate);
  const html = `
  <section class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    ${skillsComponents.join("")}
  </section>
`;

  const container = document.querySelector("#skills-container");
  container.innerHTML = html;
</script>

Sekarang, mari kita lihat bagaimana melakukan hal yang sama dengan menggunakan Astro.js.

Framework Section : Membuat Komponen dengan Astro.js

Astro.js adalah sebuah framework yang memungkinkan kita untuk membangun situs web statis dengan komponen-komponen yang dapat digunakan kembali. Berikut adalah langkah-langkah untuk membuat komponen dengan Astro.js:

Instalasi Astro.js:

Pastikan kita telah menginstal Node.js dan pnpm di komputer kita. Kemudian, buat proyek baru dengan perintah npm create astro@latest dan pilih template proyek yang sesuai, misalnya “Empty”.

Membuat Komponen Astro:

Buat file komponen baru dengan ekstensi .astro, misalnya skillsList.astro. Di dalam file tersebut, tulis kode komponen menggunakan kombinasi HTML dan JavaScript seperti berikut:

---
const skills = [
  {
    id: 1,
    name: "HTML",
    image: "https://example.com/HTML.jpg",
    description: "Deskripsi HTML",
  },
  {
    id: 2,
    name: "CSS",
    image: "https://example.com/CSS.jpg",
    description: "Deskripsi CSS",
  },
  {
    id: 3,
    name: "Javascript",
    image: "https://example.com/Javascript.jpg",
    description: "Deskripsi Javascript",
  },
];
---

<div class="skills-list">
  {
    skills.map(skills => (
      <div class="skills">
        <img src={skills.image} alt={skills.name} />
        <h3>{skills.name}</h3>
        <p>Harga: Rp{skills.price}</p>
      </div>
    ))
  }
</div>

Bagian di antara --- adalah blok kode JavaScript yang dijalankan saat komponen di-render. Di dalam markup HTML, kita menggunakan kurung kurawal {} untuk menyisipkan ekspresi JavaScript. Metode map() digunakan pada array skills untuk menghasilkan elemen HTML untuk setiap produk.

Menggunakan Komponen dalam Halaman Astro:

Buat file halaman baru dengan ekstensi .astro, misalnya index.astro. Impor komponen skillsList yang telah dibuat dan gunakan dalam halaman seperti berikut:
```
---
import skillsList from "./skillsList.astro";
---

<html>
  <head>
    <title>Daftar Skill</title>
  </head>
  <body>
    <h1>Daftar Skill</h1>
    <skillsList></skillsList>
  </body>
</html>
```
Saat halaman di-render, komponen skillsList akan diganti dengan markup HTML yang dihasilkan oleh komponen tersebut.
Menjalankan Proyek Astro:

Jalankan perintah pnpm run dev untuk menjalankan proyek Astro dalam mode pengembangan. Buka browser dan akses http://localhost:4321 untuk melihat hasilnya.
Membangun Proyek untuk Produksi:

Jalankan perintah pnpm run build untuk membangun proyek Astro untuk produksi. File-file HTML statis akan dihasilkan dalam direktori dist.

Dengan menggunakan Astro.js, kita dapat dengan mudah membuat komponen yang dapat digunakan kembali dan menghasilkan HTML statis dengan efisien.

Kesimpulan

Membuat komponen dengan metode map() adalah teknik yang powerful untuk menggabungkan data dan template komponen secara dinamis. Baik menggunakan JavaScript murni maupun framework seperti Astro.js, kita dapat menghasilkan komponen yang modular dan dapat digunakan kembali dengan mudah.

Dengan memisahkan data dari tampilan, kita dapat membangun antarmuka pengguna yang fleksibel dan mudah dipelihara. Metode map() memungkinkan kita untuk menghasilkan elemen HTML secara dinamis berdasarkan data yang ada, sehingga kita dapat dengan mudah menampilkan daftar produk, artikel, atau konten lainnya dengan struktur yang konsisten.

Selain itu, dengan menghasilkan HTML statis dari komponen, kita dapat meningkatkan performa dan waktu loading halaman web. HTML statis dapat di-cache oleh browser dan di-serve dengan cepat, sehingga memberikan pengalaman pengguna yang lebih baik.

Dalam artikel ini, kita telah mempelajari langkah-langkah untuk membuat komponen dengan metode map() menggunakan JavaScript murni dan Astro.js. Kita juga telah melihat bagaimana menghasilkan HTML statis dari komponen tersebut.

Terima kasih