Laravel 5.3 notification message popup using toastr js plugin with demo

Posted 8 years ago By Ajay Gupta 73184

Laravel 5.3 notification message popup using toastr js plugin with demo

In this post, I will tell you how to show notification alert box using toastr js in Laravel.

By using toastr plugin, you can display message notification for success, info, warning with awesome layout that means you can easily display your error message or success message with title to user by using toastr plugins.

There are so many plugins available with laravel to show notification message on each activity like growl and flash messages.

You always need to display notification to user either user register in your website or you are going to add/update/delete any records.

With toastr notification, you can easily customize their layout with bootstrap.

Follow below steps to see how its working in laravel application :

Step 1: Add route

In this step simply add below route in your web.php.

routes/web.php

Route::get('notification', 'UserController@notification');

Step 2: Create UserController

In this step, create a controller if you haven't and then add notification method within UserController.

app/Http/Controllers/UserController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class UserController extends Controller
{
    public function notification(){
        $notification = array(
            'message' => 'Thanks! We shall get back to you soon.', 
            'alert-type' => 'success'
        );
        session()->set('notification',$notification);
        return view('notification');
    }
}

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;

class UserController extends Controller
{

    public function notification(){
        $notification = array(
            'message' => 'Thanks! We shall get back to you soon.', 
            'alert-type' => 'success'
        );

        session()->set('notification',$notification);
        return view('notification');
    }
}

Step 3: Create Layout for toastr notification

Now create a notification.blade.php in view directory.

resources/views/notification.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel notification message popup using toastr js plugin with demo</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">Dashboard</div>
                <div class="panel-body">
                    Check for toastr notification
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  @if(Session::has('notification'))
  alert("{{ Session::get('notification.alert-type') }}");
    var type = "{{ Session::get('notification.alert-type', 'info') }}";
    switch(type){
        case 'info':
            toastr.info("{{ Session::get('notification.message') }}");
            break;
        
        case 'warning':
            toastr.warning("{{ Session::get('notification.message') }}");
            break;
        case 'success':
            toastr.success("{{ Session::get('notification.message') }}");
            break;
        case 'error':
            toastr.error("{{ Session::get('notification.message') }}");
            break;
    }
  @endif
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Laravel notification message popup using toastr js plugin with demo</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">Dashboard</div>
                <div class="panel-body">
                    Check for toastr notification
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  @if(Session::has('notification'))
  alert("{{ Session::get('notification.alert-type') }}");
    var type = "{{ Session::get('notification.alert-type', 'info') }}";
    switch(type){
        case 'info':
            toastr.info("{{ Session::get('notification.message') }}");
            break;
        
        case 'warning':
            toastr.warning("{{ Session::get('notification.message') }}");
            break;
        case 'success':
            toastr.success("{{ Session::get('notification.message') }}");
            break;
        case 'error':
            toastr.error("{{ Session::get('notification.message') }}");
            break;
    }
  @endif
</script>
</body>
</html>

Click here to see another demo to submit contact form with toastr notification.

Submit Contact Form in PHP Laravel 5 with toastr notifications jquery

Show Demo