Laravel 5.7 Flash Message Tutorial With Example

Laravel 5.7 Flash Message Tutorial With Example From Scratch. For this example, we use the /flash package to display the flash messages. This composer package offers the Twitter Bootstrap optimized flash messaging setup for your Laravel applications. Flash messages are critical in web applications. We need to display some feedback to the user after they have completed any actions inside a web application. The feedback can be anything like a success message or error message or an informational message.

Laravel 5.7 Flash Message Tutorial With Example

Okay, let us install the Laravel 5.7 using the following command.

#1: Install Laravel 5.7

laravel new flashmessage

 

Laravel 5.7 Flash Message Tutorial With Example

I am using Laravel Valet, so  I can access the project using this URL: http://flashmessage.test/

#2: Install Flash package.

Install the package using the following command.

composer require laracasts/flash

 

laravel flash message example

Now, modify the resources >> views >> welcome.blade.php file.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Laravel</title>
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css" />
        <link href="{{ asset('css/app.css') }}" rel="stylesheet"/>
    </head>
    <body>
      <div class="container">
        @include('flash::message')
      </div>    
    </body>
</html>

Here, we have included the bootstrap four as well as template partials.

The flash package provides the partial that we can use them directly.

Now, the final code is inside the routes >> web.php file.

<?php

// web.php

Route::get('/', function () {
    flash('Laravel 5.7 Flash Message')->success();
    return view('welcome');
});

Here, we have called the flash function and its success message. So, we can output with background green.

#3: Flash message options.

You may also do:

  • flash('Message')->success(): Set the flash theme to “success”.
  • flash('Message')->error(): Set the flash theme to “danger”.
  • flash('Message')->warning(): Set the flash theme to “warning”.
  • flash('Message')->overlay(): Render the message as an overlay.
  • flash()->overlay('Modal Message', 'Modal Title'): Display a modal overlay with a title.
  • flash('Message')->important(): Add the close button to the flash message.
  • flash('Message')->error()->important(): Render the “danger” flash message that must be dismissed.

With the message flashed to a session, you may now display it in your view(s). Because the flash messages and overlays are so common, we provide the template out of the box to get you started. You can modify it as per your need.

@include('flash::message')

#Hiding Flash Messages

The common desire is to display the flash message for the few seconds, and then hide it. To handle this, we need to add the Javascript code.  For example, using the jQuery, you might add the following snippet just before the closing </body> tag. Please include the jQuery. You can do it by adding the app.js file.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel</title>
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css" />
        <link href="{{ asset('css/app.css') }}" rel="stylesheet"/>
    </head>
    <body>
      <div class="container">
        @include('flash::message')
      </div>
      <script src="{{ asset('js/app.js') }}"></script>
      <script>
        jQuery('div.alert').not('.alert-important').delay(1000).fadeOut(500);
      </script>    
    </body>
</html>

 

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.