Implement Flash Messages in Laravel Example

by

In Laravel, flash messages are used to display temporary messages to users, typically to provide feedback on the success or failure of an action. These messages are stored in the session and are available only for the next request. Here in this Laravel Flash Messages Example, you will learn how to implement flash messages in Laravel application.

Laravel 10 Flash Message Example

Flash messages are short-lived messages that are meant to be displayed to the user for a brief period of time, typically after a certain action is performed, such as after a successful form submission or an error occurs. Let’s follow the following step by step guide on how to use the flash messages in Laravel.

  • Step 1: Install Laravel Application
  • Step 2: Implement Flash Message Global View File
  • Step 3: Add Flash Message in Laravel Theme
  • Step 4: Implement Laravel Flash Messages with Redirect
    • Success Flash Message with Redirect
    • Flash Error Message with Redirect
    • Flash Warning Message with Redirect
    • Info Flash Message with Redirect
    • Validation Error Message

Here are the list of alert, notification or flash messages:

  • Success Alert Message
  • Error Alert Message
  • Info Alert Message
  • Warning Alert Message
  • Validation Alert Message

Install Laravel Application

First of all, open the terminal and execute the following command on the terminal to install or download Laravel 10 app.

composer create-project laravel/laravel laravel-flash-message --prefer-dist

Go into the app

cd laravel-flash-message

Implement Flash Message Global View File

This step is the most important one, and we will create a new global view file. This file contains the code of all the flash messages in laravel, which we will develop using the Bootstrap alert component.

Here are the messages that we will flash on users screen based on various scenarios:

  • info
  • error
  • success
  • warning
  • validation error

So navigate the resources/views directory and create a flash-message.blade.php file. Next, open the resources/views/flash-message.blade.php file and put the below code on it;

@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>
    Check the following errors :(
</div>
@endif

Add Flash Message in Laravel Theme

In this step, we have to just include the flash-message.blade.php file in your theme default file. So we can add a file like this way:

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Flash Message Examples</title>
    <!-- Styles -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link href="/css/app.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="col-md-7 offset-3 mt-4">
            @include('flash-message')
            @yield('content')
        </div>
    </div>
    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script src="/js/app.js"></script>    
</body>
</html>

Implement Laravel Flash Messages with Redirect

Now we are all set to show the Flash Messages in Laravel application controller. The below-mentioned example consists of a single method, and this is just to show you how you can successfully send flash messages to view from the controller.

In your controller action, you can set flash messages using the session() helper function.

1. Success Flash Message with Redirect

We can simply redirect route or redirect URL or redirect back with success flash message, Here’s an example:

public function store(Request $request)
{
    $this->validate($request,[
        'name' => 'required',
        'price' => 'required'
    ]);
    $items = Product::create($request->all());
    return back()->with('success','Product successfully added.');
}

2. Flash Error Message with Redirect

To send error flash message from the controller to route with redirect url, route and redirect back method similarly same as mentioned below code.

public function store(Request $request)
{
    return redirect()->route('index')
        ->with('error','You are not allowed to access this page.');
}

3. Flash Warning Message with Redirect

To send Warning flash message from the controller to route with redirect url, route and redirect back. Place the code similarly as mentioned below.

public function store(Request $request)
{
    return redirect()->route('index')
        ->with('warning','You must stay away from this link.');
}

4. Info Flash Message with Redirect

To display info flash message in laravel, set it with redirect url, route and redirect back. Place the code similarly as mentioned below.

public function store(Request $request)
{
    $this->validate($request,[
        'name' => 'required',
        'price' => 'required'
    ]);
    $items = Product::create($request->all());
    return back()->with('info','New product included, go to next step.');
}

5. Validation Error Message

In general, you will be redirected back, and validation errors pop up automatically if using Laravel Five validation, It generates flash error message default.

public function store(Request $request)
{
    $this->validate($request,[
        'name' => 'required',
        'price' => 'required'
    ]);
    ...
    ...
    ...
}

That’s it! You have successfully implemented flash messages in Laravel. You can customize the flash messages according to your requirements by modifying the blade file.

Leave a Comment