Home Web Laravel Cara Mudah Membuat Flash Message Interaktif di Laravel untuk Pengalaman Pengguna yang Lebih Baik

Cara Mudah Membuat Flash Message Interaktif di Laravel untuk Pengalaman Pengguna yang Lebih Baik

0
Cara Mudah Membuat Flash Message Interaktif di Laravel untuk Pengalaman Pengguna yang Lebih Baik

Flash message adalah pesan sementara yang dikirim ke pengguna, sering digunakan untuk memberikan notifikasi setelah aksi tertentu seperti menambah data, menghapus data, atau login. Laravel memudahkan pengelolaan flash message menggunakan session. Flash message ini akan muncul hanya sekali dan otomatis hilang setelah halaman direfresh atau ditutup, yang menjadikannya sangat berguna untuk memberi informasi kepada pengguna tanpa mengganggu pengalaman mereka dalam menggunakan aplikasi.

Artikel ini akan membahas cara menggunakan flash message di Laravel, langkah-langkah menampilkan flash message, dan penerapan di frontend.

1. Apa Itu Flash Message?

Flash message adalah notifikasi sementara yang dikirim dari server ke frontend. Misalnya, ketika pengguna berhasil menambahkan item ke keranjang, mereka akan mendapatkan notifikasi “Item berhasil ditambahkan ke keranjang” yang hilang saat halaman direfresh. Laravel menyediakan metode session()->flash() untuk mengelola flash message dengan mudah.

2. Membuat Flash Message di Laravel

Untuk membuat flash message, Anda bisa menggunakan metode session()->flash(), yang menerima dua parameter: nama key dan isi pesan.

session()->flash('status', 'Item berhasil ditambahkan!');

Contoh penggunaan ini biasanya diletakkan di dalam Controller setelah suatu aksi berhasil dilakukan. Misalnya, pada Controller metode store:

public function store(Request $request)
{
// Proses penyimpanan data
// Validasi data, penyimpanan ke database, dll.

// Flash message setelah sukses menyimpan data
session()->flash('status', 'Data berhasil disimpan!');

// Redirect ke halaman lain
return redirect()->route('data.index');
}

Pada contoh di atas, kita membuat flash message dengan key status dan pesan Data berhasil disimpan!.

3. Menampilkan Flash Message di Blade

Setelah flash message dibuat, langkah berikutnya adalah menampilkannya di tampilan (view). Laravel menggunakan Blade sebagai template engine, yang sangat mudah untuk mendeteksi adanya flash message.

Buka file Blade yang ingin menampilkan pesan, lalu tambahkan kode berikut:

@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif

Kode ini akan memeriksa apakah ada flash message dengan key status. Jika ada, maka pesan tersebut akan ditampilkan di dalam div dengan kelas CSS alert alert-success.

4. Mengatur Tampilan Flash Message

Tampilan flash message dapat disesuaikan dengan framework CSS atau library yang Anda gunakan. Misalnya, jika Anda menggunakan Bootstrap, Anda dapat menerapkan beberapa gaya tambahan untuk mengubah warna dan tampilan pesan:

Success Message (Hijau):

@if (session('status')) 
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif

Error Message (Merah), jika Anda ingin menampilkan pesan kesalahan:

@if (session('error')) 
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif

5. Flash Message untuk Berbagai Jenis Aksi

Anda bisa membuat flash message berbeda sesuai dengan aksi yang dilakukan pengguna. Misalnya:

Pesan Sukses untuk aksi berhasil, misalnya setelah menyimpan atau memperbarui data.

session()->flash('success', 'Data berhasil disimpan!');

Pesan Error untuk tindakan yang gagal, seperti gagal menyimpan data atau terjadi masalah pada server.

session()->flash('error', 'Gagal menyimpan data, coba lagi nanti.');

Pesan Peringatan untuk tindakan tertentu, misalnya saat menghapus data atau ada tindakan yang perlu konfirmasi.

session()->flash('warning', 'Apakah Anda yakin ingin menghapus data ini?');

Di Blade, Anda dapat mengaturnya seperti berikut:

@if (session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif

@if (session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif

@if (session('warning'))
<div class="alert alert-warning">
{{ session('warning') }}
</div>
@endif

6. Menggunakan Redirect dengan Flash Message

Flash message juga dapat dikombinasikan dengan redirect()->with() yang memungkinkan Anda mengirim pesan saat pengguna diarahkan ke halaman lain.

return redirect()->route('data.index')->with('status', 'Data berhasil dihapus!');

Metode ini memiliki efek yang sama dengan session()->flash() namun lebih praktis digunakan saat mengarahkan pengguna ke halaman tertentu.

7. Menghapus Flash Message

Secara otomatis, flash message akan hilang setelah ditampilkan sekali. Namun, jika Anda ingin menghapus flash message sebelum ditampilkan, Anda bisa menggunakan:

session()->forget('status');

Kesimpulan

Flash message di Laravel adalah fitur yang sangat membantu untuk memberikan informasi singkat kepada pengguna mengenai aksi yang mereka lakukan. Dengan menggunakan session()->flash() atau redirect()->with(), Anda dapat membuat berbagai pesan sementara yang muncul sesuai kebutuhan. Kombinasikan dengan tampilan yang menarik, dan flash message ini akan meningkatkan pengalaman pengguna dalam berinteraksi dengan aplikasi Anda.