🎯 Tujuan

Tutorial ini memberikan panduan untuk menambahkan toast notifikasi ke aplikasi Laravel menggunakan Toastify.js dan Font Awesome. Hal ini bertujuan untuk memberikan feedback visual kepada pengguna secara menarik dan intuitif, misalnya untuk menyampaikan pesan sukses, error, atau peringatan.

⏰ Konteks

Saat membuat aplikasi berbasis Laravel, notifikasi diperlukan untuk memberi informasi kepada pengguna mengenai hasil suatu tindakan. Dengan Toastify.js dan Font Awesome, pesan dapat ditampilkan secara modern dan terpisah dari konten utama, menjaga antarmuka tetap bersih dan profesional.

🪵 Hal yang Diperlukan

1. Laravel Framework (sebaiknya gunakan versi terbaru).
2. Font Awesome untuk ikon.
3. Toastify.js untuk menampilkan notifikasi.

📋 Langkah-Langkah

1. STEP 1: Tambahkan Toastify.js dan Font Awesome via CDN

   • Toastify.js

     Tambahkan di file app.blade.php atau layout utama Anda:

     html
     Copy code
     <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css>">
     <script src="<https://cdn.jsdelivr.net/npm/toastify-js>"></script>
     
     

   • Font Awesome

     Tambahkan Font Awesome untuk ikon:

     html
     Copy code
     <link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css>">
     
     

2. STEP 2: Tambahkan Fungsi JavaScript untuk Toast

   • Buat atau edit file app.js di resources/js dengan menambahkan fungsi berikut:

     javascript
     Copy code
     function showToast(message, iconClass = 'fa-check-circle', backgroundColor = 'green') {
         Toastify({
             text: `<i class="fas ${iconClass}"></i> ${message}`,
             duration: 3000,
             close: true,
             gravity: "top", // 'top' or 'bottom'
             position: "right", // 'left', 'center' or 'right'
             backgroundColor: backgroundColor,
             escapeMarkup: false, // Required for HTML in text
             stopOnFocus: true, // Prevents dismissing on hover
         }).showToast();
     }
     
     

   • Penyesuaian Fungsi:

     • message: Teks yang ditampilkan.
     • iconClass: Kelas ikon dari Font Awesome, seperti fa-check-circle (sukses) atau fa-times-circle (error).
     • backgroundColor: Warna latar belakang untuk memperjelas jenis notifikasi.

   • Compile Assets:

     Jika menggunakan Vite, pastikan file app.js sudah dihubungkan di layout utama, kemudian jalankan:

     bash
     Copy code
     npm run build
     
     

3. STEP 3: Kirim Data Notifikasi dari Controller

   • Buat Pesan Flash

     Di controller Laravel, kirim data pesan ke view menggunakan session:

     php
     Copy code
     public function store(Request $request)
     {
         // Validasi dan proses penyimpanan data
         // ...
     
         session()->flash('toast_message', [
             'message' => 'Data berhasil disimpan!',
             'iconClass' => 'fa-check-circle',
             'backgroundColor' => 'green',
         ]);
     
         return redirect()->route('your.route.name');
     }
     
     

   • Tambah Script di View

     Di app.blade.php atau file layout utama, tambahkan:

     html
     Copy code
     @if(session('toast_message'))
         <script>
             document.addEventListener("DOMContentLoaded", function() {
                 showToast(
                     "{{ session('toast_message.message') }}",
                     "{{ session('toast_message.iconClass') }}",
                     "{{ session('toast_message.backgroundColor') }}"
                 );
             });
         </script>
     @endif
     
     

     Penjelasan:

     • session('toast_message') mengambil data pesan dari controller.
     • showToast() memanggil fungsi toast dengan parameter dari session.

4. STEP 4: Testing dan Verifikasi

   • Langkah Testing:
     • Tambahkan data atau lakukan tindakan di aplikasi Anda yang memicu notifikasi.
     • Pastikan toast muncul sesuai konfigurasi.
   • Periksa Detail:
     • Apakah pesan sesuai dengan aksi pengguna?
     • Apakah ikon dan warna latar belakang cocok dengan jenis notifikasi?

Final Checkpoint:

• Toast notifikasi muncul sesuai dengan konfigurasi (ikon, warna, dan pesan).
• Tidak ada error atau konflik dengan layout utama aplikasi.

Kesimpulan

Toastify.js dan Font Awesome membantu menampilkan notifikasi yang menarik secara visual di aplikasi Laravel. Dengan mengatur pesan berbasis session, Anda dapat memastikan feedback aplikasi tampil konsisten dan responsif tanpa mengganggu pengalaman pengguna.