استفاده از Bootstrap Notification در لاراول 5

ما معمولا بعد از هر عملی مثل حذف آیتم ها احتیاج به یک notification popup داریم که پیامی شبیه "آیتم مورد نظر حذف شد" داریم, همین کار در زمینه ساخت و آپدیت و سایر عملیات ها صدق می کنه. از اونجا که معمولا ما در پنل ادمین کار میکنیم, این یک امر ضروریست.

بنابراین من می خواهم به شما نشان بدم چطوری پلاگین bootstrap notify.js رو برای popup ها به لاراول 5.4 اضافه کنید. پلاگین bootstrap notify انواع پیام ها و اخطار ها مثل پیام موفقیت, پیام اطلاع رسانی, پیام هشدار, اخطار رو فراهم میکنه که ما میتونیم notification ها رو با استایل جالب بوت استرپ به اپلیکیشن اضافه کنیم.

همجنین لاراول پکیج های زیادی برای notification داره اما من از پلاگین notify.js استفاده میکنه, چون با بوت استرپ سازگار هست.

خب اول از همه چند مسیر تستی در فایل routes/web.php مثل زیر میسازیم :

Route::get('notification', 'HomeController@notification');

حالا ما باید یک متد کنترلر اضافه کنیم, پس اگر شما کنترلر HomeController رو ندارید, باید بسازید. کد زیر رو داخلش قرار بدید :

//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');
    }

}

حالا باید فایل 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>

در آخر ما باید فایل notification.blade.php رو بای نمایش bootstrap notify بسازیم. این فایل رو ما در سایر فایل های view وارد میکنیم, با اینکار یک تکه کد رو چند بار نمی نویسیم.

پس اول 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>

حالا کافیه php artisan serve رو وارد کنید و به مسیر http://localhost:8000/notification بروید.

برای مشاهده ی دمو کلیک کنید.

در مثالی که مشاهده کردید ما از success استفاده کردیم اما شما میتونید info, warning, error رو هم جایگزین کنید.

منبع