Notifikasi dalam aplikasi web tidak hanya memberikan informasi kepada pengguna, tetapi juga menciptakan pengalaman yang lebih interaktif dan profesional.
Salah satu cara terbaik untuk meningkatkan tampilan notifikasi adalah dengan menggunakan Sweet Alert, library JavaScript yang mendukung berbagai alert type seperti success, warning, dan error.
Artikel ini akan membantumu memahami cara mencoba menggunakan Sweet Alert di Laravel, terutama di Laravel 8, mulai dari instalasi hingga penerapan fitur seperti konfirmasi delete dan notifikasi pesan singkat.
Baca Juga: Panduan Lengkap Cara Install Laravel
Apa Itu Sweet Alert dan Kenapa Menggunakannya?
Sweet Alert adalah library JavaScript yang memungkinkanmu menampilkan notifikasi atau alert yang lebih menarik dibandingkan alert standar.
Dengan alert type success dengan pesan, konfirmasi delete, dan berbagai fitur lainnya, Sweet Alert mampu meningkatkan user experience dalam Laravel Project.
Mengapa memilih Sweet Alert? Dibandingkan dengan notifikasi biasa, Sweet Alert mendukung kustomisasi penuh, seperti animasi, ikon, dan tombol yang dapat disesuaikan.
Kamu juga dapat dengan mudah mengintegrasikannya ke Laravel, bahkan jika proyekmu menggunakan Laravel 8 dengan master layout yang terletak di direktori resources/views.
Instalasi dan Cara Menggunakan Sweet Alert di Laravel
Untuk menggunakan Sweet Alert dalam Laravel Project, langkah-langkah yang tepat dan terstruktur sangatlah penting agar implementasi berjalan lancar.
Ikuti setiap langkah-langkah di bawah ini untuk memanfaatkan Sweet Alert secara optimal di proyek Laravel kamu. Berikut ini penjelasan lengkapnya:
Langkah 1: Install Sweet Alert Package di Laravel
Langkah pertama adalah mencoba menggunakan Sweet Alert dengan menginstal library SweetAlert menggunakan Composer. Jalankan perintah berikut di terminalmu:
composer require realrashid/sweet-alert
php artisan vendor:publish –provider=”RealRashidSweetAlertSweetAlertServiceProvider”
Setelah itu, package ini akan otomatis ditambahkan ke dalam Laravel Project kamu dan siap untuk digunakan.
Langkah 2: Konfigurasi dan Integrasi Sweet Alert di Laravel
Selanjutnya, menyesuaikan konfigurasi Sweet Alert agar sesuai dengan kebutuhan project. Misalnya, tambahkan pengaturan di file konfigurasi seperti berikut:
return [
‘theme’ => ‘dark’,
‘position’ => ‘center’,
‘icon’ => ‘success’,
];
Jika Laravel Project memiliki master layout yang terletak di direktori views, pastikan kamu mengintegrasikan Sweet Alert dengan menambahkan script terkait di file tersebut.
Langkah 3: Menggunakan Sweet Alert untuk Menampilkan Alert di Laravel
Kini saatnya mencoba menerapkan atau menampilkan sweet alert dalam coding. Kamu dapat menggunakan Laravel sweet alert dengan berbagai metode, baik menggunakan session Laravel atau langsung melalui JavaScript.
Berikut adalah contoh penggunaan script-nya:
// Menggunakan session
return redirect()->back()->withSuccess(‘Data berhasil disimpan!’);
// Menggunakan JavaScript
Swal.fire(‘Success!’, ‘Data telah berhasil disimpan.’, ‘success’);
Gunakan alert type sesuai kebutuhan, seperti success, error, atau warning untuk berbagai skenario di aplikasimu.
Langkah 4: Menambahkan Sweet Alert Toast
Notifikasi toast sangat berguna untuk pesan singkat seperti success. Kamu dapat menampilkan toast dengan menggunakan script berikut:
Swal.fire({
toast: true,
position: ‘top-end’,
icon: ‘info’,
title: ‘Your message here’,
showConfirmButton: false,
timer: 1500
});
Penggunaan Custom Sweet Alert
Dalam Laravel Project, Sweet Alert juga memungkinkan untuk kustomisasi, seperti menambahkan tombol, ikon, atau animasi sesuai kebutuhan. Contohnya, untuk konfirmasi delete:
Swal.fire({
title: ‘Are you sure?’,
text: ‘Do you want to delete this record?’,
icon: ‘warning’,
showCancelButton: true,
confirmButtonText: ‘Yes, delete it!’,
cancelButtonText: ‘Cancel’,
}).then((result) => {
if (result.isConfirmed) {
// Lakukan aksi delete
}
});
Kustomisasi penggunaan sweet alert di laravel 8 ini dapat meningkatkan profesionalitas tampilan dan fungsionalitas aplikasimu.
Sweet Alert, Solusi Modern untuk Laravel Project
Dengan library SweetAlert2, kamu dapat menciptakan notifikasi interaktif di Laravel Project termasuk untuk Laravel 8.
Namun, dengan perkembangan teknologi yang pesat, penting untuk selalu belajar metode terbaru. Ikuti kursus bootcamp laravel dari Course-Net dan tingkatkan kemampuan coding-mu dengan materi yang up-to-date.
Mari tingkatkan kualitas aplikasimu dengan Sweet Alert!
