Laravel notification alert using bootstrap notify plugin example (ok)

https://www.itsolutionstuff.com/post/laravel-5-notification-alert-using-bootstrap-notify-plugin-exampleexample.html

C:\xampp\htdocs\reset\routes\web.php

<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
 */
use App\Http\Controllers\HomeController;
use App\Http\Controllers\ItemController;
Route::get('/', function () {
  dd('Welcome to simple user route file.');
});
Auth::routes();
Route::get('/home', [HomeController::class, 'index'])->name('home');
Route::get('notification', [HomeController::class,'notification']);

C:\xampp\htdocs\reset\app\Http\Controllers\HomeController.php

<?php
namespace App\Http\Controllers;
use Session;
class HomeController extends Controller {
  /**
   * Create a new controller instance.
   *
   * @return void
   */
  public function __construct() {
    $this->middleware('auth');
  }
  /**
   * Show the application dashboard.
   *
   * @return \Illuminate\Contracts\Support\Renderable
   */
  public function index() {
    return view('home');
  }
  public function notification() {
    Session::put('success', "Item created successfully 1.");
    return view('notification-check');
  }
}

C:\xampp\htdocs\reset\resources\views\notification-check.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Check For Notification toastr</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.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>

C:\xampp\htdocs\reset\resources\views\notification.blade.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.1.0/js/bootstrap-notify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.1.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>

Laravel notification alert using bootstrap notify plugin example

By Hardik Savani March 11, 2017 Category : PHP Laravel Bootstrap jQueryWe 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 and laravel 9 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

<?phpnamespace 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:

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

I hope it can help you...

PreviousLaravel notification message popup using toastr js plugin (ok)NextHow to use sweetalert message box in Laravel? (ok)

Last updated 3 years ago

Was this helpful?