Laravel Notification Alert using Bootstrap Notify Plugin Example

By Hardik Savani April 16, 2024 Category : PHP Laravel Bootstrap jQuery

We always require to notification alert after some action like if you remove items then notification popup will open with message like "Item removed successfully", same as on every action like create, update, listing or others. As specially we are working on admin panel, it's mandatory.

So, i would like show you how to add bootstrap notify js plugin notification popup in laravel 5, laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 from scratch. bootstrap notify plugin provide us success message notification, info message notification, warning message notification, error message notification that way we can add notification with good layout using bootstrap framework.

Laravel have also several package for notification but i use bootstrap notify js plugin, that is integrate with bootstrap. I also several posted for notification alert as listed bellow:

Laravel notification message popup using toastr js plugin

Bootstrap notification popup box example using bootstrap-growl JS plugin with demo

Laravel 5 - Implement Flash Messages with example

Ok, now we are ready to implement bootstrap notify for flash message from scratch, so you have to just follow following few thing.

First we will add new route for testing bootstrap notify notification like as bellow:

routes/web.php

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

Ok, now we require to add controller method, so if you haven't HomeController then create new HomeController and add code as bellow:

app/Http/Controllers/HomeController.php

<?php
namespace App\Http\Controllers;

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

class HomeController extends Controller
{

	/**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function notification()
    {
        session()->put('success','Item created successfully.');

        return view('notification-check');
    }

}

Next, we require to create notification-check.blade.php file for layout so create new notification-check.blade.php file in resources directory.

resources/views/notification-check.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Check For Notification Bootstrap Notify</title>
    <script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
    <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
</head>
<body>

@include('notification')

<div class="container">

    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>
                <div class="panel-body">
                    Check for notification
                </div>
            </div>
        </div>
    </div>

</div>

</body>
</html>

At last we require to create notification.blade.php file for display bootstrap notify notification. this file we can include in our default file that way we don't require to write same code in all place.

So, first let's create notification.blade.php and put bellow code on that file.

resources/views/notification.blade.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/js/bootstrap-notify.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/css/bootstrap-notify.css">

<div class='notifications top-right'></div>

<script>

  @if(Session::has('success'))
     $('.top-right').notify({
        message: { text: "{{ Session::get('success') }}" }
      }).show();
     @php
       Session::forget('success');
     @endphp
  @endif

  @if(Session::has('info'))
      $('.top-right').notify({
        message: { text: "{{ Session::get('info') }}" },
        type:'info'
      }).show();
      @php
        Session::forget('info');
      @endphp
  @endif

  @if(Session::has('warning'))
  		$('.top-right').notify({
        message: { text: "{{ Session::get('warning') }}" },
        type:'warning'
      }).show();
      @php
        Session::forget('warning');
      @endphp
  @endif

  @if(Session::has('error'))
  		$('.top-right').notify({
        message: { text: "{{ Session::get('error') }}" },
        type:'danger'
      }).show();
      @php
        Session::forget('error');
      @endphp
  @endif

</script>

Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/notification

you can get more demo from here : Click Here.

We see example only for success, but you can also generate notification alert of info, error, warning like as bellow session variable:

Info:

session()->put('info','This is for info.');

Warning:

session()->put('warning','This is for warning.');

Error:

Read Also: Laravel 10 JQuery Ajax Pagination Example Tutorial
session()->put('error','This is for error.');

I hope it can help you...

Tags :
Previous

Magento - How to Solve One or More Indexers are Invalid by Command Line?
Next

PHP Ajax Dependent Dropdown List Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares