Laravel notification message popup using toastr js plugin (ok)

https://www.itsolutionstuff.com/post/laravel-notification-message-popup-using-toastr-js-pluginexample.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="http://code.jquery.com/jquery.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/toastr.js/latest/toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script>
  @if(Session::has('success'))
    toastr.success("{{ Session::get('success') }}");
  @endif
  @if(Session::has('info'))
    toastr.info("{{ Session::get('info') }}");
  @endif
  @if(Session::has('warning'))
    toastr.warning("{{ Session::get('warning') }}");
  @endif
  @if(Session::has('error'))
    toastr.error("{{ Session::get('error') }}");
  @endif
</script>

Laravel notification message popup using toastr js plugin

Laravel have also several package for notification but i use toastr js plugin, that provide nice layout and pretty interesting.

We require to add one time toastr jquery code for notification, then we can manage using session. In this example you can easily understand how to implement and use.

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

app/Http/routes.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

namespace App\Http\Controllers;use App\Http\Requests;use Illuminate\Http\Request;class HomeController extends Controller{    public function notification()    {        session()->set('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 toastr</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 toastr.js 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

Read Also: Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch

<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script><link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css"><script>  @if(Session::has('success'))  		toastr.success("{{ Session::get('success') }}");  @endif  @if(Session::has('info'))  		toastr.info("{{ Session::get('info') }}");  @endif  @if(Session::has('warning'))  		toastr.warning("{{ Session::get('warning') }}");  @endif  @if(Session::has('error'))  		toastr.error("{{ Session::get('error') }}");  @endif</script>

Now, we are ready to check, so let's check...

you can get more demo from here : Click Here.

PreviousLaravel 8/7 Notification Tutorial | Create Notification with Laravel 8/7 (ok)NextLaravel notification alert using bootstrap notify plugin example (ok)

Last updated