Laravel 5 notification alert using bootstrap notify plugin example
By Hardik Savani
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.4 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
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...
Source:It Solution Stuff
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.4 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
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...
Source:It Solution Stuff
No comments:
Post a Comment