【Laravel】保存処理時にフラッシュメッセージを表示【汎用的】

登録処理の際、下記イメージGIFのようにフラッシュメッセージを表示する方法を紹介します。

イメージ

イメージは登録処理が成功した時のフラッシュメッセージです。

登録処理が失敗した時に「登録が失敗しました」というフラッシュメッセージも表示するように実装します。

通信の問題であったり、予期せぬことで登録出来ていないことに気づかなかった！なんてことにならないように、コンテンツ管理システムなどでほとんどのケースで取り入れています。

※フラッシュメッセージの実装に必要部分を抜粋したソースのみ記述するので、イメージのような新着機能の紹介しておりません。

では実装していきます!!

Controllerの記述

先ずはコントローラの記述です。 bladeのform部分の記述は省略致します。

app\Http\Controllers\Admin\NewsController.php

public function store(News $news, Request $request)
    {
        $inputs = $request->all();

        $result = $news->fill($inputs)->save();

        if ($result) {
            session()->flash('flash.success', '登録に成功しました');
        } else {
            session()->flash('flash.error', '登録に失敗しました');
        }

        return redirect()->route('admin_news');
}

解説

登録処理のメソッド部分を抜粋しています。

入力されたデータを$inputsに格納します。

fille($inputs)->save()で保存処理を行い、問題なく処理が出来ていたらtrue、反対に問題が起きていたらfalseが返るので、 if($result) 戻り値によってflash()のキーと値を変えます。

色々と書き方はありますが、ここではsession()->flash('キー', 値);でflashメッセージを格納しています。

格納したら最後の行で一覧ページにリダイレクトしています。

それでは遷移先の一覧ページにフラッシュメッセージを呼び出します。

View(blade)

システム全体の保存処理時にフラッシュメッセージを同じように表示されたいので、 extend元のbase.bladeに記述しましょう。

1ページのみの実装なら該当のページのみで構いません。

base.blade.php

@if( session('flash') )
    @foreach (session('flash') as $key => $item)
      <div class="alert alert-{{ $key }}">{{ session('flash.' . $key) }}</div>
    @endforeach
  @endif

解説

@if session('flash')でflashに値があるか確認しています。

@foreachで先ほどflashのドットの後のキーを呼び出します。

呼び出したキーをclassと変数で呼び出すことで汎用的に利用します。

これだけでフラッシュメッセージの呼び出しは完了です。

あとは、cssとjsで徐々に消えていく動作を記述していきます。

cssは好みとなりますので、サイズや色を書き換えて参考程度にしてください。

CSS

/*フラッシュメッセージ*/
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-success {
    position: fixed;
    top: 9%;
    width: 100%;
    color: #1d643b;
    background-color: #d7f3e3;
    border-color: #c7eed8;
    transform: translateY(-50%);
    text-align: center;
    z-index: 99;
}

.alert-error {
    position: fixed;
    top: 9%;
    width: 100%;
    background: #f00;
    color: #fff;
    font-size: 1.5rem;
    transform: translateY(-50%);
    text-align: center;
    z-index: 99;
}

JS

setTimeout(function() {
    $(".alert-success,.alert-error")
        .fadeOut(5000)
        .queue(function() {
            this.remove();
        });
}, 1000);

以上で完了です。お疲れ様でした!!