Belajar Astro JS #3: Tutorial Menggunakan Framework Astro JS

tutorial menggunakan framework astro js

Tiba saatnya kita akan belajar cara menggunakan framework Astro JS.

Dalam tutorial ini, kita akan dibawa dalam perjalanan yang mendalam ke dalam dunia Astro.js, sebuah framework yang inovatif untuk pengembangan web modern.

Kita akan membahas berbagai aspek yang mendasari penggunaan Astro.js, termasuk penggunaan Pages, teknik Routing, pembuatan komponen reusable, dan bahkan bagaimana menggunakan layout untuk membuat situs web kita menjadi lebih efisien dan menarik.

Apakah kamu seorang pemula yang ingin memulai dengan Astro.js atau seorang pengembang berpengalaman yang mencari wawasan lebih lanjut, tutorial ini akan memberikan kamu pemahaman yang kokoh tentang cara memanfaatkan potensi penuh dari framework Astro.js.

Mari kita mulai! 🚀

Jika kamu belum pernah install astro boleh baca artikelnya di Cara Install Framework Astro JS.

Persiapan Sebelum Bekerja dengan Framework Astro

Sebelum mulai bekerja dengan menggunakan framework astro js, terlebih dahulu kita menyiapkan beberapa hal yang pastinya sangat penting dalam pengembangan proyek nantinya.

1. Teks Editor

Untuk bekerja memulai menulis kode-kode program, tentunya kita membutuhkan sebuah teks editor.

Teks Editor berguna untuk mempermudah setiap penulisan kode kita nantinya.

Agar dalam proses pengembangan tidak terkendala, teks editor yang direkomendasikan ialah Visual Studio Code.

Mengapa?

Karena selain mempunyai banyak fitur pendukung, dalam teks editor visual studio code juga terdapat banyak ekstension yang dapat digunakan untuk mempermudah proeses pengembangan sebuah projek.

2. Ekstension

Ekstension berguna agar teks editor yang digunakan semakin mempermudah pekerjaan seorang programmer.

Begitu juga dengan framework Astro JS, terdapat ekstension tersendiri yang ada di Visual Studio Code untuk mempermudah proses pengerjaan projek astro.

Dimana ekstension tersebut sama namanya dengan framework astro.

Berikut penampakannnya pada aplikasi Visual Studio Code.

ekstension astro di visual studio code

3. Browser

Sudah pasti kita membutuhkan sebuah browser agar hasil render yang dihasilkan oleh framework astro dapat dilihat pada aplikasi web browser.

Untuk aplikasi browser yang dapat kamu gunakan ialah Chrome, Mozila Firefox, Edge dan lain-lain.

Cara Menjalankan Proyek Astro

Untuk menjalankan framework Astro, kita membutuhkan sebuah terminal dan node js.

Silahkan buka terminal dan pastikan berada dalam folder proyek kita sebelumnya yaitu folder astro-project.

Jika sudah silahkan ketikan di terminal perintah dibawah ini:

npm run dev

Nantinya secara otomatis proyek astro akan berjalan di alamat url http://localhost:3000.

Kemudian buka aplikasi browser yang ada di laptop atau komputer kamu (Chrome, Firefox, Edge dll), dan ketikan alamat url diatas, pada kolom address bar browser.

Kemudian akan tampil sebagai berikut:

projek web dengan astro berhasil dijalankan

Yang artinya projek web dengan astro berhasil dijalankan.

Perhatian! Tampilan dari proyek astro diatas pada browser merupakan tampilan dari hasil install template empty astro js, jika yang diinstall sebelumnya ialah templat blog ataupun yang lain kemungkinan tampilan awalnya dapat berbeda saat pertama kali astro js dijalankan.

Selanjutnya kita akan mulai menulis kode di framework astro.

Memulai Menulis Kode di Astro JS

Sebelumnya kita telah menjalankan proyek astro.

Tapi muncul pertanyaan, dimana kita dapat mengubah teks Astro yang tampil sebelumnya di browser?

Untuk hal tersebut dapat kamu lihat pada direktori folder src/pages.

Dalam direkotori tersebut terdapat file index.astro, file inilah yang di tampilkan kedalam web browser.

Melalui proses compiling oleh framework astro.

Coba kita buka isi file dari index.astro.

Berikut isi kode didalamnya:

---
---

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
</head>
<body>
    <h1>Astro</h1>
</body>
</html>

Untuk melihat hasil perubahannya, kita dapat mengubah isi dari tag h1 pada kode diatas, menjadi seperti berikut:

---
---

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
</head>
<body>
    <h1>Belajar Framework Astro Bersama StayKoding</h1>
</body>
</html>

Nantinya secara otomatis konten pada halaman web sebelumnya akan terganti, dan kita tidak perlu melakukan refresh halaman secara manual.

Karena dalam framework astro mempunyai fitur hot reload, jadi ketika konten dalam halaman web berubah.

Maka secara otomatis astro juga akan melakukan perubahan tampilan isi konten web di browser.

Tapi ada hal lagi yang jadi pertanyaan.

Mengapa kode dalam file index.astro, mirip seperti html?

Ya kode pada file denngan ekstensi .astro memang memiliki kesamaan dengan kode tag dari html.

Akan tetapi tetap ada perbedaan, jika dilihat di astro terdapat penambahan sintaks, yaitu seperti ini:

---

---

<!-- kode Html disini --->

Nah apa sintaks yang berada diatas kode tag html tersebut?

Yaitu pada sintaks berikut:

---

---

Di Astro disebut dengan Script Component.

Apa itu script component?

Apa fungsinya?

Selanjutnya kita akan bahas mengenai hal tersebut di bagian pembahasan komponen di astro js.

Membuat Dan Menggunakan Komponen di Astro JS

Komponen di Astro.js adalah bagian-bagian terpisah dari situs web yang digunakan untuk membangun tampilan dan fungsionalitas situs.

Komponen sendiri berguna membantu dalam pemisahan antara kode HTML, CSS, dan JavaScript, sehingga kita dapat mengelola situs web dengan lebih terstruktur dan efisien.

Dalam Astro.js, komponen dapat mengandung kombinasi HTML, CSS, dan JavaScript dalam satu berkas.

Komponen dapat dikatakan seperti sebuah puzzle, jika disusun bagian-bagian dari puzzle yang terpisah maka akan membangun sebuah hasil atau karya.

Sampai disini semoga paham mengenai penjelasan komponen pada framework astro.

Kemudian kita akan belajar bagaimana membuat komponen di astro.

1. Membuat Komponen di Astro JS

Saat kita membuat komponen di astro, nama file harus mempunyai ekstensi .astro.

Sebagai contoh jika kita mau membuat komponen astro dengan nama KomponenKu, maka menjadi KomponenKu.astro.

Lalu dimana kita harus menempatkan filenya?

Saat kita menginstall framework astro, pada direktori projek di astro kita dapat membuat sebuah folder dengan nama components.

Dimana isinya nanti hanya terdapat komponen-komponen astro yang digunakan untuk membangun setiap bagian situs web.

Berikut struktur direktori projek astro sebelumnya yang telah kita install dengan templat empty.

.
├── 📄 .vscode
├── 📁 node_modules
├── 📁 public/
│   └── 📄favicon.svg
├── 📁 src/
│   ├── 📁 pages/
│   │   └── 📄 index.astro
│   └── 📄 env.d.ts
├── 📄 .gitignore
├── 📄 astro.config.mjs
├── 📄 package-lock.json
├── 📄 README.md
└── 📄 tsconfig.json

Kita bisa menambahkan folder components didalam folder src, seperti berikut:

.
├── 📄 .vscode
├── 📁 node_modules
├── 📁 public/
│   └── 📄favicon.svg
├── 📁 src/
│   ├── 📁 components/ -> untuk menempatkan file komponen astro
│   │   └── 📄 KomponenKu.astro
│   ├── 📁 pages/
│   │   └── 📄 index.astro
│   └── 📄 env.d.ts
├── 📄 .gitignore
├── 📄 astro.config.mjs
├── 📄 package-lock.json
├── 📄 README.md
└── 📄 tsconfig.json

2. Memahami Struktur Kode Komponen Astro JS

Saatnya kita belajar mengenai struktur komponen di astro.

Dalam membuat komponen astro terdapat 2 bagian penting pada struktur kodenya, yaitu bagian Script Component dan Template Component.

Tentunya kedua hal tersebut masing-masing memiliki kegunaannya, dengan kata lain antara Script Component dan Template Component memiliki fungsinya sendiri.

Untuk mengetahui perbedaan dari dua hal tersebut, agar mengetahui keduanya coba lihat, berikut struktur kodenya:

---

// Script Component (Javascript)

---

<!-- Component Template (HTML + JS ekspresi)-->

Selanjutnya apa itu script component?

2.1 Script Component

Akhirnya dibagian ini kita akan belajar mengenai script component.

Script Component adalah bagian kode astro yang memiliki fungsi untuk menulis kode javascript yang diperlukan guna memiliki fungsi untuk bagaimana merender templat komponen di astro.

Selain itu ini juga memiliki fungsi lain seperti:

  • Untuk mengimpor komponen astro lainnya.
  • untuk mengimpor komponen yang dibuat dengan framework ui js(React.js, vue.js, solid.js, dll).
  • untuk mengambil konten dengan API dari database.
  • untuk mengimpor data, seperti JSON.
  • untuk membuat variabel, kemudian tampilkan nilainya pada templat komponen.

2.2 Template Component

Pada bagian template component, disinilah ui(User Interface) ditampilkan pada browser.

Saat kita menulis tag html maka hasilnya akan dirender oleh astro, lalu ditampilkan hasil rendernya tersebut di browser.

Sama seperti file .html, pada bagian templat komponen kita juga bisa menulis kode javascript dengan adanya tag <script> dan kode css dengan adanya tag <style>.

Selain itu disini juga kita dapat menampilkan nilai dari variabel javascript yang di tulis pada bagian Script Component.

3. Menggunakan Komponen di Astro JS

Dibagian ini kita akan langsung praktek untuk bagaimana menggunkan komponen di astro.

Untuk hal yang pertama terlebih dahulu kita membuat 2 komponen baru pada direktori src/components dengan nama title.astro dan description.astro.

Kemudian pada komponen title isi dengan kode:

---

---

<h1>StayKoding</h1>

lalu pada komponen description:

---

---

<p>Belajar framework astro js bersama StayKoding.</p>

Bagaimana untuk menggunakan kedua komponen diatas?

Pada direktori src/pages, terdapat file index.astro.

Kita dapat menggunakan komponen title dan description untuk ditampilkan pada file index.astro.

Caranya?

Kita ubah isi dari kode di file index.astro, dari begini:

---

---

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
</head>
<body>
    <h1>Astro</h1>
</body>
</html>

Menjadi:

---

//import component title dan description

import Title from '../component/title.astro';
import Description from '../component/description.astro';
---

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>StayKoding</title>
</head>
<body>

    <!-- Render Component -->

    <Title />
    <Description />
</body>
</html>

Nantinya akan tampil pada browser seperti berikut:

hasil menggunakan komponen di astro

4. Penggunaan Kembali Komponen di Astro (Reusable)

Saat menggunakan sebuah komponen di astro, komponen yang telah dibuat tersebut dapat digunakan kembali.

Hal ini sudah pasti sangat bermanfaat ketika kita membangun sebuah website, tanpa harus membuat kembali bagian web yang dibutuhkan.

Konsep inilah yang dinamakan dalam dunia pengembangan web, disebut dengan Reusable Komponen.

Sebagai contoh, jika saya mempunyai sebuah komponen tombol(button) yang kita buat pada direktori src/components dengan nama button.astro, seperti berikut:

---

---

<button>Tombol</button>

Lalu pada komponen file index.astro di src/pages, kita gunakan dengan cara import komponen tersebut.

Kemudian kita bisa menampilkan sebanyak 3 tombol sebagai berikut dengan konsep menggunakan kembali komponen:

---

//import component button

import Button from '../component/button.astro';
---

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Reusable Component</title>
</head>
<body>

    <!-- Render Component -->

    <Button />
    <Button />
    <Button />

</body>
</html>

Dari kode diatas berikut tampilan dihalaman web yang akan dihasilkan.

3 tombol di browser

Dapat dilihat hasilnya diatas, hanya dengan membuat satu komponen saja, kita dapat membuat tiga tombol dihalaman web.

Bagaimana? luar biasa bukan.

Dengan adanya fitur dengan konsep reusable komponen pada framework astro, kita dapat membangun sebuah situs web dengan lebih mudah.

5. Props di Komponen

ada hal yang menarik saat kita bekerja menggunakan komponen pada framework astro.

Apa itu?

Ya, itu adalah Props.

Lalu apa itu props?

Props adalah singkatan dari properties.

Dalam konteks Astro JS, props adalah cara untuk mengirimkan data dari komponen induk ke komponen anak.

Dalam hal ini, props berfungsi sebagai argumen yang diteruskan ke komponen anak saat komponen tersebut dipanggil.

Dalam Astro JS, props dapat didefinisikan dan diterima oleh komponen.

Maksudnya ialah komponen dapat mengirimkan maupun menerima props.

Props kemudian menjadi tersedia untuk template komponen untuk merender HTML.

Selain itu Props juga tersedia pada objek global Astro.props dalam script komponen di file .astro.

Astro.props merupakan fitur yang ada pada astro dimana tugasnya ialah untuk menangkap nilai dari props di komponen induk.

Artinya kode Astro.props digunakan dalam komponen anak(Child Component) untuk menerima nilai dari props yang dikirimkan oleh komponen induk(Parent Component).

Agar lebih memahami mengenai konsep props, kita akan lihat contoh penggunaan props berikut ini:

Kita buat terlebih dahulu komponen dengan nama button.astro, didalamnya tambahkan kode:

---
// ambil props name

const { name } = Astro.props;
---

<button>{ name }</button>

Kemudian import komponen button di index.astro, dan kirimkan props dengan nama ialah name yang nilainya ialah tombol.

---

//import component button

import Button from '../component/button.astro';
---

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Props Component</title>
</head>
<body>

    <!-- Render Component -->

    <Button name="tombol" />

</body>
</html>

Nantinya akan tampil sebuah button di web dengan nama tombol, seperti di gambar berikut:

hasil membuat tombol menggunakan props component astro

Konsep Penting Mengenai Komponen di Astro JS

Berikut adalah beberapa konsep penting mengenai komponen di Astro.js:

  1. Kode Terpisah: Komponen di Astro.js memungkinkan kita untuk menulis kode HTML, CSS, dan JavaScript terpisah dalam berkas yang sama. Ini membantu dalam pemeliharaan dan pengembangan yang lebih mudah, karena agar nantinya lebih dapat fokus pada satu aspek tanpa terlalu banyak campuran.

  2. Reusabilitas: berarti dapat mengimpor dan menggunakan komponen di berbagai bagian situs web. Misalnya, membuat komponen “Tombol” yang digunakan di berbagai halaman situs website, dengan begitu menghindari pengulangan kode yang tidak perlu.

  3. Komposisi: kita dapat menggabungkan komponen-komponen ini bersama-sama untuk membangun tampilan yang lebih kompleks. Dimana Ini memungkinkan untuk membuat tampilan yang lebih besar dengan menggabungkan komponen-komponen yang lebih kecil.

  4. Pemisahan Logika dan Tampilan: Dalam komponen Astro.js, kita dapat memisahkan logika bisnis dari tampilan. Logika bisnis dapat diimplementasikan dalam JavaScript yang terkait dengan komponen, sedangkan tampilan dapat diatur dalam HTML dan CSS yang terpisah.

  5. Deklaratif: Pendekatan Astro.js adalah deklaratif, yang berarti dengan mendeklarasikan bagaimana halaman web kita harus terlihat berdasarkan komponen-komponen yang akan susun, dan Astro.js akan menangani bagaimana cara merender halaman tersebut dengan efisien.

  6. Performa yang Tinggi: Astro.js dirancang untuk mengoptimalkan performa situs web dengan menghindari pengiriman JavaScript yang tidak diperlukan ke peramban pengguna(browser). Oleh karenanya dapat menghasilkan situs web yang lebih cepat dan efisien.

Dengan menggunakan komponen di Astro.js, kita dapat mengorganisasi dan membangun situs web dengan cara yang lebih terstruktur, meningkatkan efisiensi pengembangan, dan menciptakan situs web yang lebih cepat dan efisien.

Membuat Halaman Web Pada Direktori Pages

Untuk pembahasan bagian ini kita akan belajar 3 hal untuk memahami bagaimana sistem dalam membuat halaman web pada direktori pages ini.

Dimulai dari:

  • Dukungan file apa yang yang di support
  • Konsep seperti apa yang dipakai dalam routing/navigasinya
  • Pentingnya membuat halaman web 404 untuk menghandle halaman web tidak ditemukan

Untuk yang pertama.

Langsung saja kita akan membahas file yang didukung oleh astro untuk digunakan pada direktori src/pages.

Di src/pages inilah setiap file dapat diakses dan ditampilkan kedalam browser, tapi hanya 5 jenis file yang didukung saja

1. Dukungan File Pada Direktori Pages

Dukungan file disini merujuk pada jenis file yang didukung oleh astro js pada direktori src/pages.

Jenis file tersebut antara lain:

  • .astro
  • .md
  • .mdx (Harus diinstal dahulu)
  • .html
  • .js/.ts

Selain ke lima jenis file diatas, bagaimana dengan jenis file lain?

Tentu saja tidak bisa karena tidak didukung oleh astro.

Ada yang harus diperhatikan dari kelima jenis file yang didukung oleh Astro.

5 diantaranya mendukung routing(navigasi) otomatis, yaitu: .astro, .md, .mdx, .html dan .js/.ts.

Jadi ketika membuat sebuah file dalam folder pages, nantinya nama file tersebut akan menjadi url dari halaman web yang dibuat.

2. Konsep Routing Di Direktori Pages

Di astro kita tidak perlu untuk melakukan setup atau pengaturan khusus untuk menangani navigasi antar halaman web.

Karena astro sendiri telah memiliki sistem routing otomatis, dimana hanya dengan menggunakan nama file sebagai alamat urlnya.

Jika diartikan bahwa astro memiliki konsep routing berbasis file.

Bingung ?

Jadi begini, apabila dalam direktori src/pages terdapat sebuah file about.astro.

Maka routenya ialah about, dimana saat dibuka dengan browser nantinya alamat urlnya seperti berikut:

http://localhost:3000/about

Bagaimana jika nama filenya terdiri dari 2 kata.

Contohnya yaitu halaman about me.

Tipsnya! buat tiap huruf untuk kedua kata harus menggunakan huruf kecil semua.

Lalu unutuk memisahkan kedua kata tersebut jangan menggunakan spasi.

Tapi gunakan tanda -.

Mengapa? karena jika tanpa tanda -, maka url yang dihasilkan tidaklah ramah SEO(Search Engine Optimization).

Berikut contoh yang benar jika nama filenya ialah about me.

http://localhost:300/about-me

Dengan melihat dari alamat url diatas, berarti untuk membuat nama filenya pada src/pages ialah about-me.astro.

Tapi bagaimana jika membuat agar struktur urlnya menjadi sebagai berikut?

http://localhost:3000/page/about

Caranya tentu saja sangat mudah kita tinggal membuat folder baru dengan nama page didalam direktori pages.

Kemudian buat sebuah file dengan nama about.astro, maka secara otomatis route dari alamat urlnya akan seperti contoh diatas.

Routing/navigasi pada framework astro js tidak hanya sebatas pada file .astro saja tapi juga akan berlaku untuk ke empat file lainya(.md, .mdx, .html dan .js/.ts).

3. Membuat Halaman 404 Untuk Handle Page Not Found

Di astro kita dapat menghandle untuk menangani perilaku saat user tidak berhasil mengunjungi halaman web yang dikunjungi, dengan membuat sebuah halaman 404.

Dimana halaman 404 digunakan ketika pengguna sengaja atau tidak sengaja mengunjungi halaman web dengan alamat url yang salah.

Apa yang terjadi jika pengguna tidak berhasil mengunjungi halaman web yang tidak ada tadi?

Tentu saja, nantinya browser akan mengalihkan url yang salah tadi (dalam hal ini merujuk pada si user) ke halaman 404.

Tapi bagaimana cara membuat halaman web 404 tersebut di Astro?

Caranya terbilang simpel karena kita hanya perlu membuat halaman 404 dengan nama 404.astro di direktori src/pages.

Nantinya astro akan otomatis membuat pengalihan jika ada user salah mengunjungi url halaman web kita.

Kemudian apa yang terjadi jika kita tidak membuat halaman web 404 tersebut?

Tentu saja yang terjadi ialah user tidak akan dialihkan ke halaman web 404(ini sudah pasti karena halaman web 404 tidak dibuat).

Lalu akan dialihkan kemana?

Nantinya user akan dialihkan pada halaman homepage(Beranda) atau halaman awal dalam hal ini ialah kembali ke url https://localhost:300.

Dari segi pengalaman pengguna(UX) tentu saja ini tidak baik, karena itu artinya pengguna akan bingung karena tujuan url yang akan dikunjungi seperti terjadi kesalahan.

Oleh karena itu pentingnya halaman 404, agar memberitahu pengguna jika halaman yang akan dikunjungi tersebut sudah tidak ada.

Memahami Konsep Layout di Astro JS

Salah satu konsep yang sangat penting dalam Astro adalah layout, yang merupakan fondasi dari tampilan halaman web yang responsif dan dinamis.

Pengertian Layout dalam Astro JS

Layout dalam Astro adalah komponen yang berfungsi sebagai kerangka tampilan yang dapat digunakan kembali.

Dalam konteks Astro, istilah “layout” ini merujuk pada komponen Astro yang membangun elemen UI yang sering digunakan.

Itu artinya dalam hal ini berkaitan dengan konsep penggunaan komponen agar nantinya menghasilkan layout atau tata elemen yang dapat memiliki konsistensi dalam desain dan tampilan dari situs web.

Sehingga pengembangan web akan menjadi efisien dan lebih terstruktur.

Fungsi Layout

Fungsi utama dari layout adalah menyediakan kerangka kerja umum untuk elemen-elemen UI yang sering digunakan di seluruh situs web.

Ini berarti elemen-elemen seperti header, navigasi, dan footer dapat dibangun sekali dan digunakan secara berulang di berbagai halaman situs.

Struktur Layout di Proyek Astro

Untuk membuat layout biasanya, layout komponen akan ditempatkan dalam direktori “src/layouts” pada proyek Astro untuk organisasi folder dan file yang lebih baik.

Namun, kita tidak terbatas pada tempat tersebut, kita dapat meletakkannya di mana saja dalam proyek kita.

Misal dala struktut direktori proyek astro sebelumnya begini:

.
├── 📄 .vscode
├── 📁 node_modules
├── 📁 public/
│   └── 📄favicon.svg
├── 📁 src/
│   ├── 📁 components/ -> untuk menempatkan file komponen astro
│   │   └── 📄 KomponenKu.astro
│   ├── 📁 pages/
│   │   └── 📄 index.astro
│   └── 📄 env.d.ts
├── 📄 .gitignore
├── 📄 astro.config.mjs
├── 📄 package-lock.json
├── 📄 README.md
└── 📄 tsconfig.json

Maka kita tambahkan folder baru dalam folder src dengan nama layouts, sehingga struktur direktorinya akan menjadi sebagai berikut:

.
├── 📄 .vscode
├── 📁 node_modules
├── 📁 public/
│   └── 📄favicon.svg
├── 📁 src/
│   ├── 📁 layouts/ -> untuk menempatkan file layout astro
│   ├── 📁 components/ -> untuk menempatkan file komponen astro
│   ├── 📁 pages/ -> untuk halaman web yang akan dirender astro
│   └── 📄 env.d.ts
├── 📄 .gitignore
├── 📄 astro.config.mjs
├── 📄 package-lock.json
├── 📄 README.md
└── 📄 tsconfig.json

Cara Membuat Layout di Astro JS

Untuk membuat sekaligus membangun layout di astro js, terdapat sebuah elemen komponen yang digunakan untuk memasukan sebuah konten pada layout yang digunakan.

Caranya seperti apa?

Kita tinggal menggunakan elemen <slot /> untuk memasukan konten (inject content) dalam templat komponen.

Ya dapat dikatakan bahwa layout merupakan sebuah templat untuk menampung konten pada halaman web.

Lalu bagaimana contohnya:

Contoh Layout

Pertama kita buat dulu sebuah file dalam direktori src/layouts dengan nama PageLayout.astro, file ini nantinya yang akan menjadi templat untuk kontennya.

---
// src/layouts/PageLayout.astro
---

<html>
  <head>
    <title>Latihan Layout</title>
  </head>
  <body>
    <main>
      <slot /> <!-- Konten halaman di sini -->
    </main>
  </body>
</html>

Kemudian kita buat sebuah file lagi dalam direktori src/pages dengan nama content.astro.

---
import PageLayout from '../layouts/PageLayout.astro';
---

<PageLayout>
    <h1>Konten</h1>
    <p>Ini adalah konten</p>
</PageLayout>

Kemudian coba akses di browser alamat berikut:

http://localhost:3000/content

Maka kita akan melihat tampilan halaman webnya seperti ini:

Membuat Layout untuk Markdown dan MDX

Tidak hanya untuk file .astro saja.

Layout juga sangat berguna untuk halaman-halaman yang dibuat menggunakan format Markdown atau MDX.

Hal ini karena halaman-halaman ini tidak memiliki format tampilan bawaan, dan layout dapat digunakan untuk memberikan struktur kepada konten tersebut.

Contoh Penggunaan Layout dalam Halaman Markdown:

Ketika Anda menggunakan layout pada halaman Markdown atau MDX, Anda dapat menentukan layout yang ingin Anda gunakan di frontmatter.

Misalnya, jika kita memiliki layout yang disebut “PageLayout”:

---
// src/layouts/PageLayout.astro
---

<html>
  <head>
    <title>Layout Untuk Markdown</title>
  </head>
  <body>
    <main>
      <slot /> <!-- Konten halaman di sini -->
    </main>
  </body>
</html>

Lalu buat juga file markdownnya dengan nama content.md atau content.mdx untuk ditampilkan sebagai konten halaman web

---
layout: ../layouts/PageLayout.astro
---

## Konten Markdown

Ini adalah konten artikel dari markdown.

Dan coba akses kembali url http://localhost:3000/content.

Maka berikut hasilnya pada browser:

hasil konten markdown yang dirender oleh komponen layout astro

Mengirimkan Props Dari Markdown Ke Layout

Dalam layout halaman Markdown, kita memiliki akses ke properti seperti file, URL, frontmatter, headings, dan beberapa properti lainnya yang berguna.

Hal ini memungkinkan kita untuk mengakses informasi penting yang ada di markdown atau mdx untuk membangun halaman dengan konten yang dinamis.

Untuk melakukan hal tersebut terdapat 2 hal penting yang harus kita ketahui karena ini merupakan kunci untuk melakukannya, yaitu:

  • Frontmatter: adalah bagian dari sebuah berkas Markdown yang digunakan untuk menyisipkan metadata atau informasi tambahan tentang berkas tersebut. Biasanya, frontmatter diletakkan di awal berkas Markdown dan diapit oleh tanda tiga defisit (---).

  • <slot />: adalah elemen khusus yang digunakan untuk menentukan tempat di mana konten dari berkas komponen lain akan disisipkan.

Frontmatter akan kita gunakan untuk sebagai data nantinya yang akan digunakan sebagai prop untuk dikimkan ke komponen di layout.

Sementara <slot /> tentu saja menyisipkan konten yang ada di halaman file markdown atau mdx ke dalam komponen layout.

Langsung saja kita ke contoh bagaimana mengirimkan props ke dalam komponen layout.

Contoh Penggunaan Layout Props:


---
// src/layouts/PageLayout.astro

const {frontmatter} = Astro.props;
---

<html>
  <head>
    <title>{frontmatter.title}</title>
  </head>
  <body>
    <header>
      <h1>{frontmatter.title}</h1>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <p>Oleh: {frontmatter.name}</p>
    </footer>
  </body>
</html>

Dan berikut untuk isi file markdownnya:

---
// src/pages/content.md

layout: ../layouts/PageLayout.astro
title: Mengirimkan Props ke Layout
name: StayKoding
---

Ini adalah konten artikel mengenai mengirimkan Props ke Layout.

Berikut hasilnya jika dilihat pada browser:

hasil pengiriman props ke komponen layout

Layout Bertingkat (Nesting Layout)

Konsep “layout bertingkat” memungkinkan kita untuk menggabungkan layout dalam layout lainnya, menciptakan tata letak halaman yang lebih kompleks dan terstruktur. Ini sangat berguna ketika kita ingin memisahkan elemen-elemen UI khusus dari elemen UI umum.

Contoh Layout Bertingkat:

Kita dapat menggabungkan layout dalam layout lainnya untuk menciptakan tata letak yang lebih kompleks.

Misalnya, Kita memiliki layout “AdminLayout” yang menampilkan informasi khusus admin:

---
// src/layouts/BaseLayout.astro
---

<html>
  <head>
    <title>Nesting Layout</titile>
  </head>
  <body>
    <article>
      <slot />
    </article>
  </body>
</html>

Kemudian, Anda bisa menggunakan layout “BaseLayout” dalam layout “PageLayout” seperti ini:

---
// src/layouts/PageLayout.astro

import BaseLayout from 'BaseLayout.astro'

const {frontmatter} = Astro.props;
---

<BaseLayout>
  <header>
    <h1>{frontmatter.title}</h1>
  </header>
  <main>
    <slot />
  </main>
  <footer>
    <p>oleh: {frontmatter.name}</p>
  </footer>
</BaseLayout>

Dan terakhir untuk file markdownnya:

---
// src/pages/content.md

layout: ../layouts/PageLayout.astro
title: Belajar Nesting Layout
name: StayKoding
---

Ini adalah konten artikel tentang nesting layout.

Hasilnya jika dilihat pada browser:

hasil nesting layout komponen di astro

Kesimpulan

Di pembahasan kita kali ini telah belajar mengenai bagaimana cara menggunakan framework astro.

Dimulai dari mengenal file .astro, kemudian tentang konsep membuat dan menggunakan komponen di astro js, lalu bagaimana membuat halaman web yang bisa ditampilkan langsung pada browser, serta memahami routing dan custom halaman 404 di astro.

Dan tak lupa juga kita belajar mengenai konsep layout di astro framework.

Karena dengan menguasai konsep layout di Astro JS, kita akan lebih siap dalam mengembangkan situs web yang efisien, mudah dikelola, dan menawarkan pengalaman pengguna yang luar biasa.

Semoga tutorial ini bermanfaat bagi kamu yang ingin belajar memakai salah satu framework dari javascript ini.

Daftar Tutorial Astro

Hai perkenalkan, nama saya adalah Moses Fahmi Pratama, penulis sekaligus programer yang menulis dan mengembangkan blog ini. Bagi anda yang merasa terbantu akan kehadiran blog ini, anda dapat melakukan donasi kepada penulis melalui tombol Nih Buat Jajan dibawah ini 🤗

Nih buat jajan

Akhir kata saya ucapkan banyak terimakasih, atas donasi anda 🙏😊

Comments