Notifikasi Dengan Flash Message di Laravel
Anugrah Sandi 7 November 2017
Pada kesempatan kali ini kita akan membuat notifikasi berupa feedback yang akan dilihat oleh user setelah melakukan sebuah tindakan tertentu. Untuk membuat fitur ini kita akan memanfaatkan Flash Messages yang dimiliki oleh Laravel, sehingga kita tidak akan menggunakan package apapun untuk membuat* flash message* tersebut.
Flash message biasanya digunakan pada sebuah aplikasi untuk memberikan feedback berupa informasi success, error, warning, dll. Pada tutorial kali ini saya akan menunjukkan bagaimana cara membuat flash message redirect seperti: success message, error message, warning message dan info message. Dalam menangani layout yang akan ditampilkan kita akan menggunakan bootstrap flash alert.
Baca Juga: API Otentikasi Menggunakan Passport Laravel
Membuat Flash Message
Memulai langkah yang akan dilakukan, saya berasumsi anda telah memiliki Laravel fresh install atau jika anda telah memahami kerangka kerja menggunakan Laravel, maka anda dapat menerapkannya langsung pada project anda. Untuk membuat flash message, buat file blade dengan nama pesan.blade.php. Pada file ini kita akan menggunakan bootstrap alert dan mengecek jika terdapat sebuah pesan yang dikirimkan dari controller.
Buat file pesan.blade.php yang terletak di direktori resources/views/pesan.blade.php kemudian tambahkan potongan code berikut:
@extends('layouts.master')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-6">
<a href="{{ url('get-pesan') }}" class="btn btn-danger btn-sm">
Klik Disini
</a>
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
@if ($message = Session::get('error'))
<div class="alert alert-danger alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
@if ($message = Session::get('warning'))
<div class="alert alert-warning alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
@if ($message = Session::get('info'))
<div class="alert alert-info alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
@if ($errors->any())
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">×</button>
Please check the form below for errors
</div>
@endif
<table class="table table-striped">
<tr>
<th>#</th>
<th>Nama</th>
<th>Perusahaan</th>
</tr>
<tr>
<td>1</td>
<td>Anugrah Sandi</td>
<td>Codepolitan</td>
</tr>
</table>
</div>
</div>
</div>
@endsection
Sebelum melanjutkan ke tahap berikutnya, buat view master.blade.php terlebih dahulu kemudian letakkan kedalam direktori resources/views/layouts, lalu tambahkan code berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>Flash Message</title>
</head>
<body>
<div id="app">
@yield('content')
</div>
<!-- Scripts -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Jalankan command berikut untuk membuat sebuah controller:
php artisan make:controller FlashMessageController
Buat method index pada app/Http/Controllers/FlashMessageController.php untuk menampilkan view sebelum mendapatkan flash message:
public function index()
{
return view('pesan');
}
Tambahkan kedua route berikut di routes/web.php:
Route::get('/pesan', 'FlashMessageController@index');
Route::get('/get-pesan', 'FlashMessageController@pesan');
Langkah terakhir adalah membuat redirect dengan flash message. Tambahkan potongan code berikut pada app/Http/Controllers/FlashMessageController.php:
public function pesan()
{
return redirect('/pesan')->with(['success' => 'Pesan Berhasil']);
}
Sampai disini, flash message sudah selesai. Potongan code diatas akan menampilkan: Pesan Berhasil dengan mode alert: success, kurang lebih tampilannya akan seperti ini:
Sedangkan untuk membuat alert lainnya, anda cukup mengganti key: success dengan key lainnya, misal: warning, info, error, dll.
public function pesan()
{
return redirect('/pesan')->with(['warning' => 'Pesan Warning']);
}
public function pesan()
{
return redirect('/pesan')->with(['info' => 'Pesan Info']);
}
public function pesan()
{
return redirect('/pesan')->with(['error' => 'Pesan Error']);
}
