Laravel notification message popup using toastr js plugin

By Hardik Savani | August 9, 2016 | | 1993 Viewer | Category : Laravel Bootstrap


Share this post:

In this post, i would like show you how to add toastr js plugin notification popup in Laravel from scratch. toastr plugin provide us success message notification, info message notification, warning message notification, error message notification that way we can add notification with good layout.

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

<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.






We are Recommending you: