Laravel 8 Implement Custom Flash Message With Example

In this tutorial, We will explain to you how to Implement Custom Flash Messages with Example in laravel 8(Laravel 8 Implement Custom Flash Message With Example). so we will create a custom flash-message using bootstrap without any package.

When the user performs any operation that time it happened a success or fails, We use Custom Flash Messages to show that. so you can follow the below step.

Create flash messages view file
here, in this step, we will create a flash-message.blade.php file. In this file we will create different alert flash-message codes like success, error, warning, info, and validation error.
resources/views/flash-message.blade.php

@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

Use flash-message file in Master file
In this step, we will include a flash-message.blade.php file in the master file. so you can see the below code.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <!-- Styles -->
  <link href="/css/app.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div id="app">
        @include('flash-message')
        @yield('content')
    </div>
</div>
<!-- Scripts -->
<script src="/js/app.js"></script>
</body>
</html>

Use flash messages with redirect
Now, you can pass different types of error messages in the controller file. so you can see below different types of error messages.

Redirect with Success Flash Message

return redirect()->route()->with('success','here your success message');

Redirect with error Flash Message

return redirect()->route()->with('error','here your error message');

Redirect with warning Flash Message

return redirect()->route()->with('wanrning','Here your warning message');

Redirect with info Flash Message

return redirect()->route()->with('info','Here your info message');

Redirect with Validation Error Flash Message

public function store(Request $request)
{
    $request->validate([
       'txtFirstName'=>'required',
       'txtLastName'=> 'required',
       'txtAddress' => 'required'
    ]);
    .....
}

Please follow and like us:

Leave a Reply