Custom Laravel 7 Flash Message Examples Tutorial

Last updated on by Digamber
This tutorial is designed to give you Laravel 7 Flash Message example, mutually we will learn to how to integrate and use flash message in laravel 7. We would shed light on flash message example in laravel after login. Possibly, this is required in almost every application, be it built with laravel or any other language or framework.

Notification is an act of bringing something to the notice of the user.
uxplanet

Flash messages are foundational elements that bring something sudden to the user’s attention. Alert messages are considered valuable from a user experience perspective, eventually being a programmer, we must have some skills about UX as well.

Here in this tutorial, we will comprehend to deal with some of the valuable laravel methods that are designed and developed to flash messages such as redirect with success, error warning info messages.

To give you the rough picture about this tutorial, we will create flash message laravel 7 app with Bootstrap and display laravel flash messages with the bootstrap alert component.

Indeed, we will take our first step from the starting. Then, we will look at the various methods through which we can bind flash messages in laravel controller.

Here are the possible 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

To propel this tutorial to forward, we need to install a fresh laravel application. If you don’t consider this step preferable, perhaps you have already through with the installation process. If it i am thinking right, then you can skip this step.

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

You can see lots of files conjugated at one place, which means you are done with project installation. Now the time has come to get inside the project folder.

cd laravel-flash-message

Create Flash Message Global View File

Eventually, we are going, beginning with the essential step of this tutorial, which is considered the foundational step.

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

Don’t wonder all these flash messages going to stay in a single file, so create a flash-message.blade.php file and insert the following code in 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

Now we are going to call all the conjugated code from the flash-message file in the main layout. Ultimately, create a new file and folder, path as follows layouts/app.blade.php, and incorporate the following code.

<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>

Seldom perhaps, you may require to use it in some other file. You can use it with closed eyes, no worries whatsoever.

@include('flash-message')

Use Laravel Flash Messages with Redirect

Eventually, weapons voice is reverberating in the warzone. That is to say the time has come we set 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.

Success Flash Message with Redirect

As you can see, the below code shows the success flash message, and generically we can use an effortless approach such as simply redirect url, route or redirect back.

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

    $items = Product::create($request->all());

    return back()->with('success','Product successfully added.');
}

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.');
}

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.');
}

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.');
}

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'
    ]);
    ...
    ...
    ...
}

Conclusion

So this was it, we have looked at all the possible ways through which we can integrate flash message in our laravel 7 application. In general, you can be more creative in displaying alert messages to visitors. In a broader picture, it totally depends on you.

To solve a single problem, there could be many ways, and I hope you liked this tutorial, please share this tutorial with others. Have a blissful day; keep coding.