フラッシュメッセージについて

Laravelではセッションが用意されています。

Laravelでのセッション操作まとめ

セッションはページを推移しても値が保持されるので便利ですね。

ただ、次のリクエスト間だけセッションにアイテムを保存したいケースもあります。

例えば、「登録完了しました！」「修正完了しました！」などのようなステータスメッセージを表示するときです。

このようなケースの場合はflashメソッドを使ってフラッシュメッセージを表示させます。

セッションだと最後にセッションの中身を空にする必要があります。

しかし、flashメソッドを使った場合は、直後のHTTPリクエストの間だけセッションにデータを保存します。それ以降は自動的に削除されます。

今回はこのフラッシュメッセージを使ってみます。

 

完成形

何も入力せずに「登録」ボタンを押すと「エラー！メールアドレスを入力してください」というモーダルウィンドウが開きます。

メールアドレスを入力して「登録」ボタンを押すと「登録完了！」というモーダルウィンドウが開きます。

完成形はこちらになります。

フラッシュメッセージ（デモ）

 

作成手順

ルーティング（GET）

最初にアクセスしたときに表示する画面です。

Route::get('flash/practice','FlashController@getIndex');

 

コントローラ （GET）

artisanコマンドでスケルトンを作成。

php artisan make:controller FlashController

 

そのままビューファイルを返します。

public function getIndex()
{
    return view('flash.practice');
}

 

ビュー （GET）

Bootstrap4のスターターテンプレートでページを作成します。

Bootstrap4 スターターテンプレート

フォームはポスト送信します。

<nav class="navbar navbar-light bg-light mb-5">
    <a class="navbar-brand" href="#">Flashメッセージ（デモ）</a>
</nav>
<div class="container">
    <form action="" method="post">
        {{ csrf_field() }}
        <div class="form-group row">
            <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" name="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-10 offset-sm-2">
                <button type="submit" class="btn btn-primary">登録</button>
            </div>
        </div>
    </form>
</div><!-- /container -->

 

ルーティング（POST）

ポスト送信されたときのルーティングの処理を記述。

Route::post('flash/practice','FlashController@postIndex');

 

 

コントローラ （POST）

sessionグローバルヘルパ ＋ flashメソッドを使います。

メールアドレスの存在チェックをして自分自身のURLにリダイレクト。

public function postIndex(Request $req)
{
    // メールアドレスがあるか？ないか？
    if($req->has('email')){
        session()->flash('flashmessage','登録完了！');
    }else {
        session()->flash('flashmessage','エラー！：メールアドレスを入力してください');
    }
    return redirect('flash/practice');
}

 

ビュー （POST）

ビューにメッセージ表示領域を追加します。

Bootstrapのコンポーネント「アラート」でもいいのですが、今回はモーダルウィンドウを使いました。

@if(Session::has('flashmessage')) を挟んでフラッシュメッセージがあったときだけモーダルウィンドウを表示させます。

：
@if(Session::has('flashmessage'))
    <!-- モーダルウィンドウの中身 -->
    <div class="modal fade" id="myModal" tabindex="-1"
         role="dialog" aria-labelledby="label1" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    {{ session('flashmessage') }}
                </div>
                <div class="modal-footer text-center">
                </div>
            </div>
        </div>
    </div>
@endif
：

 

jQueryでページが読み込まれたら自動でモーダルウィンドウを起動されるように設定します。(※$(window).on ('load')関数)

jQueryのCDNの読み込みより下に記述します。

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
    // モーダルウィンドウ
    $(window).on('load',function(){
        $('#myModal').modal('show');
    });
</script>
</body>
：

 

以上です。

 

 

 

-基礎知識