Help us understand the problem. What is going on with this article?

Laravel:フラッシュメッセージを表示する

More than 1 year has passed since last update.

概要

記事が追加された時に上の方にメッセージを表示するようにします。
セッションを使って、リダイレクト先で一回だけ表示できます。

▶ 動作確認環境

  • php 7
  • Laravel 5.7

やり方

▶ Controller を編集

セッションにフラッシュメッセージを渡します。

書き方は色々あります

Controllerのstoreメソッド
    return redirect('/')->with('flash_message', '投稿が完了しました');

とか

Controllerのstoreメソッド
    session()->flash('flash_message', '投稿が完了しました');
    return redirect('/');
Controllerのstoreメソッド
    \Session::flash('flash_message', '投稿が完了しました');
    return redirect('/');

こんな感じで。

▶ Viewを編集する

- Viewにメッセージ表示領域を追加する

Viewの中にフラッシュメッセージを表示する場所を作ります。
どこでもいいですが私は親テンプレートに追加します。

フラッシュメッセージがある時だけ表示させたいので@ifで括ります。

resources/views/layouts/myapp.blade.php
        <!-- フラッシュメッセージ -->
        @if (session('flash_message'))
            <div class="flash_message">
                {{ session('flash_message') }}
            </div>
        @endif

        <main class="mt-4">
            @yield('content')
        </main>

基本これでOKです。

スタイルをあてる

おしゃれにしたいから

▶ レシピ1:BootstrapとJavaScript

- CSS

Bootstrapでsuccessな感じにする

viewのどこか
<!-- フラッシュメッセージ -->
        @if (session('flash_message'))
            <div class="flash_message bg-success text-center py-3 my-0">
                {{ session('flash_message') }}
            </div>
        @endif

- JavaScript

ちょっと時間おいたらふーっと消えてもらう。
ただし消える時はdiv要素ごとなので、
消えた途端にフラッシュメッセージの下のコンテンツがごそっと上に動く

public/js/main.js
(function() {
    'use strict';

    // フラッシュメッセージのfadeout
    $(function(){
        $('.flash_message').fadeOut(3000);
    });

})();

▶ レシピ2 toastrを使う

- 必要なスクリプトを埋め込む

この3つをviewに埋め込む

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

- フラッシュメッセージの表示部を埋め込む

とりあえずsuccessのみ用意。

        <!-- フラッシュメッセージ -->
        <script>
            @if (session('flash_message'))
                $(function () {
                        toastr.success('{{ session('flash_message') }}');
                });
            @endif
        </script>

- 動作確認

flash_msg.png

良さそうです。

- 成功、失敗のそれぞれ用意する

成功のグリーンのメッセージと
失敗時の赤いメッセージとそれぞれ作る

<script type="text/javascript">
            // {{--成功時--}}
            @if (session('msg_success'))
                $(function () {
                    toastr.success('{{ session('msg_success') }}');
                });
            @endif

            // {{--失敗時--}}
            @if (session('msg_danger'))
                $(function () {
                    toastr.danger('{{ session('msg_danger') }}');
                });
            @endif
</script>

Controllerの名前も変える。
よきところにmsg_dangerも置く。

Controllerのstoreメソッド
    // ”msg_success”に名前を変える
    session()->flash('msg_success', '投稿が完了しました');
    return redirect('/');

ログイン、ログアウトにも利用する

記事の投稿・更新だけではなく、ログイン、ログアウトした時にも表示するようにします。

▼ ログイン

セッションにフラッシュメッセージをセットするだけでOKです。

app/Http/Controllers/Auth/LoginController.php
    /**
     * ログインした時のリダイレクト先
     * Where to redirect users after login.
     *
     * @var string
     */
    // protected $redirectTo = '/home';
    protected function redirectTo() {
        session()->flash('msg_success', 'ログインしました');
        return '/home';
    }

▼ ログアウト

ログアウトに関してはIlluminate\Foundation\Auth\AuthenticatesUsersトレイトでlogtou()が定義されているので、これをオーバーライドします。

(テスト中)

参考

:link: readouble.com フラッシュデータを保存するリダイレクト
:link: readouble.com フラッシュデータ
:link: Github [Laravel] Session(Flash)の使い方

usaginooheso
PHP勉強中です。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした