Introduction
Halo teman-teman developer! Pasti kalian sudah familiar dengan SweetAlert, kan? Ya, itu adalah pustaka JavaScript yang memungkinkan Anda menampilkan pop-up dengan desain yang lebih menarik daripada alert standar browser. SweetAlert sering digunakan untuk menampilkan notifikasi atau konfirmasi yang memerlukan interaksi dari pengguna, seperti konfirmasi penghapusan, keberhasilan pengisian form, dan masih banyak lagi.
Di artikel ini, saya akan menunjukkan cara membuat Sweet Alert di Laravel 11. Dari instalasi project Laravel, pemasangan SweetAlert, hingga implementasi dan penggunaan di aplikasi. Kami akan menggunakan package “sweetalert2” untuk integrasi dengan Laravel, dan saya akan memberikan contoh penggunaan yang langsung bisa kalian terapkan di aplikasi Laravel kalian. Yuk, simak langkah-langkahnya!
Langkah 1: Install Project Laravel 11
Jika Anda belum memiliki project Laravel 11, mari kita mulai dengan membuat project baru. Jika sudah punya, kalian bisa melompat ke langkah berikutnya.
1.1 Install Laravel 11 dengan Composer
Buka terminal atau command prompt di komputer kalian dan jalankan perintah berikut untuk membuat project Laravel baru:
composer create-project --prefer-dist laravel/laravel laravel-sweetalert
Perintah ini akan mengunduh dan menginstal Laravel 11 dalam folder laravel-sweetalert. Setelah selesai, masuk ke dalam folder project:
cd laravel-sweetalert
1.2 Jalankan Laravel Development Server
Untuk memastikan Laravel berjalan dengan baik, jalankan server development menggunakan perintah:
php artisan serve
Buka browser dan akses http://127.0.0.1:8000 untuk memverifikasi bahwa Laravel berjalan dengan lancar.
Langkah 2: Install SweetAlert2 di Laravel
SweetAlert2 adalah pustaka JavaScript yang membuat dialog dan pop-up terlihat lebih cantik dan responsif. Untuk menambahkannya ke aplikasi Laravel, kita perlu menginstal SweetAlert2 melalui npm (Node Package Manager).
2.1 Install SweetAlert2 dengan NPM
Jika Anda belum menginstall npm di project Laravel, jalankan perintah berikut di terminal untuk menginstalnya:
npm install sweetalert2
Setelah itu, Anda perlu meng-compile JavaScript dan meng-update assets Laravel. Jalankan perintah berikut untuk menambahkan dan mengcompile assets:
npm run dev
Dengan perintah di atas, npm akan meng-install SweetAlert2 dan meng-compile file JavaScript sehingga Anda dapat menggunakannya di aplikasi Laravel.
2.2 Menambahkan SweetAlert2 ke dalam Laravel Mix
Laravel menggunakan Laravel Mix untuk mengelola asset dan kompilasi file JavaScript serta CSS. Pastikan Anda mengimport SweetAlert2 di file resources/js/app.js.
Buka file resources/js/app.js dan tambahkan kode berikut di bagian atas untuk mengimpor SweetAlert2:
import Swal from 'sweetalert2';
Dengan ini, SweetAlert2 sudah siap digunakan di dalam aplikasi Laravel Anda.
Langkah 3: Menggunakan SweetAlert2 di Laravel
Setelah SweetAlert2 terpasang, saatnya untuk mulai menggunakannya di aplikasi Laravel. Kita akan membuat beberapa contoh untuk menunjukkan bagaimana SweetAlert2 dapat digunakan untuk menampilkan notifikasi sukses, error, dan konfirmasi.
3.1 Menampilkan Sweet Alert pada Event Tertentu
Misalnya, kita ingin menampilkan notifikasi sukses ketika pengguna berhasil login, atau menampilkan pesan error jika login gagal. Mari kita mulai dengan membuat route dan controller.
3.2 Membuat Route dan Controller untuk Contoh
Buka terminal dan buat controller baru untuk menangani notifikasi:
php artisan make:controller AlertController
Setelah controller berhasil dibuat, buka file AlertController.php yang ada di app/Http/Controllers dan tambahkan kode berikut untuk menangani notifikasi.
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AlertController extends Controller
{
public function showSuccessAlert()
{
return view('alert-success');
}
public function showErrorAlert()
{
return view('alert-error');
}
public function showConfirmationAlert()
{
return view('alert-confirm');
}
}
3.3 Membuat View untuk Menampilkan Sweet Alert
Sekarang, kita akan membuat tiga view untuk menampilkan tiga jenis notifikasi berbeda menggunakan SweetAlert2: sukses, error, dan konfirmasi.
Buat folder baru di resources/views bernama alerts, kemudian buat tiga file view:
- alert-success.blade.php
- alert-error.blade.php
- alert-confirm.blade.php
3.3.1 alert-success.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sweet Alert Success</title>
</head>
<body>
<h1>Sweet Alert Success Example</h1>
<button id="showSuccess">Show Success Alert</button>
<script src="{{ mix('js/app.js') }}"></script>
<script>
document.getElementById('showSuccess').addEventListener('click', function() {
Swal.fire({
icon: 'success',
title: 'Berhasil!',
text: 'Data berhasil disimpan.',
showConfirmButton: false,
timer: 1500
});
});
</script>
</body>
</html>
3.3.2 alert-error.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sweet Alert Error</title>
</head>
<body>
<h1>Sweet Alert Error Example</h1>
<button id="showError">Show Error Alert</button>
<script src="{{ mix('js/app.js') }}"></script>
<script>
document.getElementById('showError').addEventListener('click', function() {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Terjadi kesalahan!',
footer: '<a href>Why do I have this issue?</a>'
});
});
</script>
</body>
</html>
3.3.3 alert-confirm.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sweet Alert Confirmation</title>
</head>
<body>
<h1>Sweet Alert Confirmation Example</h1>
<button id="showConfirm">Show Confirm Alert</button>
<script src="{{ mix('js/app.js') }}"></script>
<script>
document.getElementById('showConfirm').addEventListener('click', function() {
Swal.fire({
title: 'Apakah Anda yakin?',
text: 'Data yang telah dihapus tidak bisa dipulihkan.',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Ya, hapus!',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Dihapus!',
'Data Anda telah dihapus.',
'success'
);
}
});
});
</script>
</body>
</html>
3.4 Menambahkan Route untuk Menampilkan Sweet Alert
Sekarang, kita perlu menambahkan route yang mengarah ke view-view yang telah kita buat. Buka file routes/web.php dan tambahkan kode berikut:
use App\Http\Controllers\AlertController;
Route::get('alert-success', [AlertController::class, 'showSuccessAlert']);
Route::get('alert-error', [AlertController::class, 'showErrorAlert']);
Route::get('alert-confirm', [AlertController::class, 'showConfirmationAlert']);
Langkah 4: Uji Coba Sweet Alert di Aplikasi Laravel
Sekarang kita akan menguji semua notifikasi yang telah kita buat. Jalankan server Laravel dengan perintah:
php artisan serve
Kemudian buka browser dan kunjungi URL berikut untuk menguji Sweet Alert:
- Success Alert:
http://localhost:8000/alert-success - Error Alert:
http://localhost:8000/alert-error - Confirmation Alert:
http://localhost:8000/alert-confirm
Klik tombol yang sesuai untuk melihat notifikasi SweetAlert muncul di halaman.
Kesimpulan
Membuat SweetAlert di Laravel 11 sangat mudah dan memberikan pengalaman pengguna yang jauh lebih baik dibandingkan dengan notifikasi standar browser. Dalam tutorial ini, kita telah belajar cara menginst
Leave a Reply