Tujuan Pembelajaran

Peserta mampu:

1. Membuat notifikasi modern.
2. Membuat notifikasi sukses.
3. Membuat notifikasi gagal.
4. Menggunakan JavaScript Bootstrap.

---

A. Apa Itu Toast?

Toast adalah notifikasi kecil yang muncul sementara.

Contoh:

✓ Data berhasil disimpan

atau

⚠ Password salah

---

B. Struktur Toast

<div class="toast show">

<div class="toast-header">

<strong>Informasi</strong>

</div>

<div class="toast-body">

Data berhasil disimpan

</div>

</div>

---

Praktik 1

Notifikasi Simpan Data

<div class="toast show">

<div class="toast-header">

<strong class="me-auto">
Sukses
</strong>

</div>

<div class="toast-body">

Data siswa berhasil disimpan

</div>

</div>

---

Praktik 2

Notifikasi Login

Buat toast:

• Login berhasil
• Login gagal
• Session berakhir

---

Latihan Bab

1. Apa fungsi Toast?
2. Apa perbedaan Toast dan Alert?
3. Apa fungsi toast-header?
4. Apa fungsi toast-body?
5. Kapan Toast digunakan?