Tutorial #10: Notifikasi Interaktif dengan SweetAlert pada Aksi Nasabah
Halo para pengguna setia! Hari ini kita akan mempermanis aplikasi dengan SweetAlert. Kita akan buat notifikasi yang interaktif untuk konfirmasi logout, pemberitahuan sukses/gagal, dan error handling yang ramah. Anggap saja kita kasih permen pada setiap aksi!
Yang akan kita lakukan:
- ✅ Review penggunaan SweetAlert yang sudah ada (login, logout, error).
- ✅ Menambahkan konfirmasi sebelum refresh data (opsional).
- ✅ Membuat demo berbagai tipe SweetAlert: success, error, warning, info, question.
- ✅ Menambahkan fitur Ubah Password dengan konfirmasi SweetAlert.
- ✅ Menangani error dari API dengan pesan yang lebih detail.
Langkah 1: Review SweetAlert di Aplikasi Kita
Sejauh ini kita sudah menggunakan SweetAlert di beberapa tempat:
- Login sukses: menampilkan pesan selamat datang.
- Login gagal: menampilkan pesan error.
- Logout: konfirmasi sebelum logout.
- Gagal memuat data: menampilkan error dari server.
- Sesi habis (401): peringatan dan redirect ke login.
Semua sudah berjalan dengan baik. Tapi kita bisa tambahkan variasi biar lebih interaktif!
Langkah 2: Konfirmasi Sebelum Refresh Data
Di dashboard, kita punya tombol refresh. Kadang pengguna tidak sengaja klik. Kita bisa tambahkan konfirmasi menggunakan SweetAlert dengan tipe 'question'.
Modifikasi fungsi fetchData di DashboardPage: panggil SweetAlert dulu sebelum benar-benar refresh. Tapi karena refresh adalah aksi ringan, mungkin tidak perlu konfirmasi. Alternatif: kita beri notifikasi "Data berhasil diperbarui" setelah refresh.
Tambahkan di dalam fetchData setelah berhasil:
Swal.fire({
icon: 'success',
title: 'Data diperbarui',
text: 'Saldo dan mutasi terbaru sudah ditampilkan.',
timer: 1500,
showConfirmButton: false
});
Letakkan di dalam blok try setelah setMutasi dan setSaldo.
Langkah 3: Demo Semua Tipe SweetAlert
Kita bisa buat halaman demo sederhana atau tambahkan tombol di dashboard untuk mencoba berbagai tipe alert. Buat komponen baru SweetAlertDemo atau tambahkan di DashboardPage bagian bawah.
Contoh tombol-tombol:
import Swal from 'sweetalert2';
const showSuccess = () => {
Swal.fire('Berhasil!', 'Data tersimpan.', 'success');
};
const showError = () => {
Swal.fire('Gagal!', 'Terjadi kesalahan.', 'error');
};
const showWarning = () => {
Swal.fire('Peringatan!', 'Isi form dengan benar.', 'warning');
};
const showInfo = () => {
Swal.fire('Info', 'Hari ini ada promo nabung!', 'info');
};
const showQuestion = () => {
Swal.fire({
title: 'Yakin?',
text: 'Aksi ini tidak bisa dibatalkan',
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Ya, lanjut',
cancelButtonText: 'Batal'
}).then(result => {
if (result.isConfirmed) {
Swal.fire('OK!', 'Aksi dilanjutkan.', 'success');
}
});
};
Kemudian tambahkan tombol-tombol di dashboard dengan Bootstrap grid.
Langkah 4: Fitur Ubah Password dengan Konfirmasi SweetAlert
Sekarang kita buat fitur sederhana: nasabah bisa mengubah password. Karena kita belum punya endpoint di backend, kita asumsikan ada endpoint /api/ubah-password (POST) yang menerima password_lama, password_baru, password_baru_confirmation. Kita buat dulu di frontend, nanti backend menyusul (bisa dibuat sendiri).
Tambahkan modal atau form di dashboard. Kita akan gunakan SweetAlert input (fitur SweetAlert yang bisa menampilkan form).
const handleChangePassword = async () => {
const { value: formValues } = await Swal.fire({
title: 'Ubah Password',
html:
'<input type="password" id="password_lama" class="swal2-input" placeholder="Password Lama">' +
'<input type="password" id="password_baru" class="swal2-input" placeholder="Password Baru">' +
'<input type="password" id="password_baru_confirmation" class="swal2-input" placeholder="Konfirmasi Password Baru">',
focusConfirm: false,
showCancelButton: true,
confirmButtonText: 'Simpan',
cancelButtonText: 'Batal',
preConfirm: () => {
const passwordLama = document.getElementById('password_lama').value;
const passwordBaru = document.getElementById('password_baru').value;
const passwordKonfirmasi = document.getElementById('password_baru_confirmation').value;
if (!passwordLama || !passwordBaru || !passwordKonfirmasi) {
Swal.showValidationMessage('Semua field harus diisi');
return false;
}
if (passwordBaru !== passwordKonfirmasi) {
Swal.showValidationMessage('Password baru dan konfirmasi tidak cocok');
return false;
}
if (passwordBaru.length < 6) {
Swal.showValidationMessage('Password minimal 6 karakter');
return false;
}
return { passwordLama, passwordBaru };
}
});
if (formValues) {
try {
const token = localStorage.getItem('token');
await axios.post('http://127.0.0.1:8000/api/ubah-password', formValues, {
headers: { Authorization: `Bearer ${token}` }
});
Swal.fire('Berhasil!', 'Password sudah diubah.', 'success');
} catch (error) {
Swal.fire('Gagal', error.response?.data?.message || 'Terjadi kesalahan', 'error');
}
}
};
Tambahkan tombol "Ubah Password" di dashboard.
Langkah 5: Error Handling yang Lebih Manusiawi
Selama ini kita hanya menampilkan pesan error dari server. Kadang pesannya teknis. Kita bisa menambahkan pesan yang lebih ramah, misalnya:
- "Koneksi bermasalah, cek internet kamu."
- "Server sedang sibuk, coba lagi nanti."
- "Email atau password salah."
Di catch block, kita bisa cek kode error:
} catch (error) {
if (!error.response) {
Swal.fire('Jaringan bermasalah', 'Tidak dapat terhubung ke server. Periksa koneksi internet.', 'error');
} else if (error.response.status === 422) {
Swal.fire('Validasi gagal', Object.values(error.response.data.errors).join(', '), 'warning');
} else if (error.response.status === 401) {
Swal.fire('Sesi habis', 'Silakan login ulang', 'warning')
.then(() => window.location.href = '/login');
} else {
Swal.fire('Error', error.response.data.message || 'Terjadi kesalahan', 'error');
}
}
Langkah 6: Implementasi di DashboardPage
Gabungkan semua ide di atas ke dalam DashboardPage. Berikut potongan kode yang bisa ditambahkan (di bagian bawah setelah tabel mutasi):
<div className="row mt-5">
<div className="col-12">
<h4>Demo SweetAlert</h4>
<div className="d-flex gap-2 flex-wrap">
<button className="btn btn-success" onClick={showSuccess}>Success</button>
<button className="btn btn-danger" onClick={showError}>Error</button>
<button className="btn btn-warning" onClick={showWarning}>Warning</button>
<button className="btn btn-info" onClick={showInfo}>Info</button>
<button className="btn btn-secondary" onClick={showQuestion}>Question</button>
</div>
</div>
</div>
<div className="row mt-4">
<div className="col-12">
<button className="btn btn-primary" onClick={handleChangePassword}>
Ubah Password
</button>
</div>
</div>
Jangan lupa definisikan fungsi-fungsi tersebut di dalam komponen.
Kesimpulan
- ✅ SweetAlert membuat notifikasi jadi lebih menarik dan interaktif.
- ✅ Kita bisa menampilkan berbagai tipe alert sesuai kebutuhan.
- ✅ Form input dalam SweetAlert memungkinkan interaksi tanpa pindah halaman.
- ✅ Error handling yang baik membuat pengguna tidak bingung.
Dengan selesainya tutorial #10, aplikasi tabungan kita sudah memiliki frontend yang fungsional dan cantik. Masih ada beberapa tutorial lagi untuk menyempurnakan: mungkin tentang keamanan, testing, dan deployment. Tapi untuk sekarang, selamat! Kamu sudah berhasil membuat aplikasi bank sederhana dengan Laravel dan React.