Notification alert using Bootstrap in laravel – with notify plugin
In this post we will learn how to implement notifiction in laravel using notify plugin its a bootstrap notification plugin type.
It is usefull to provide notification for error, warning , success and info messages.
Steps:
Step 1: Install Laravel and Create Application
Step 2: Create Controller
Step 3: Create Notification blade file
Step 4: Create Route
Step 5: Run application
Create laravel application : using below composer command create new laravel application
composer create-project --prefer-dist laravel/laravel notifyapp
Get in laravel application
cd notifyapp
Create controller
Create a controller using artisan command, in controller function we will call blade(view) file, run below php artisan command for create controller.
php artisan make:controller notifyController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class notifyController extends Controller
{
public function index(){
session()->put('success','Success Notification message goes here!!!');
// session()->put('info','Info Notification message goes here!!!');
// session()->put('error','Erro Notification message goes here!!!');
// session()->put('warning','Warning Notification message goes here!!!');
return view('checknotification');
}
}
Create view file inside resources\views\checknotification.php
<!DOCTYPE html>
<html>
<head>
<title> Notification Using Laravel </title>
</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-body">
Test Notification
</div>
</div>
</div>
</div>
</div>
</body>
</html> Create notification blade file for alert message resources\views\notification.blade.php
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/css/bootstrap-notify.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/js/bootstrap-notify.min.js"></script>
<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> Create Route : Create route inside web.php for accessing controller function.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\notifyController;
/*
|--------------------------------------------------------------------------
| 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!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('notify',[notifyController::class,'index']);
Now run application using below command and access url
php artisan servehttp://127.0.0.1:8000/notify
