laravel８に画像をアップロードするやり方③画像表示編

前回の実装内容

ページから画像をアップロードし、DBに保存する仕組みを実装しました。
前回の記事

スタート画面

ゴール画面

具体的に製作するもの

• 名前欄とコメント欄の制作
  • 入力欄の作成
  • 入力した内容をreturn を使って表示させるようにする
  • 入力内容のバリデーション

名前欄とコメント欄を作る

edit.php

<form action="表示させたいところのパス" method="post" enctype='multipart/form-data'>     
    <p>口コミ投稿フォーム</p>
    <input type="text" name="name"><br><br>
    <textarea name="comment" rows="8" cols="40">
    </textarea><br><br>

これによりブラウザ上に入力欄の作成ができました。

入力した内容をreturn を使って表示させるようにする

edit.php から入力内容が、post 方式で Controller にデータが送られることが分かります。それではそのデータをリダイレクトさせる処理を Controller に書き込みます。

UserController.php

        if($request->hasFile('image')) {
            return redirect("表示させたいところのパス")->with([
                "message" => "投稿に成功しました。",
                "name" => $name,
                "comment"  => $comment,
                "image"  => basename($path)]);
        }else{
            return redirect("表示させたいところのパス")->with([
                "message" => "投稿に成功しました。",
                "name" => $name,
                "comment"  => $comment]);
        }

上記のコードは、画像をアップロードする場合としない場合で、 if 文で場合分けをして書いています。
そして次は、 redirect された情報を表示させるため edit.blade.php に書き込みます。

edit.php

@if(Session::has('name'))
<h2>{{ session('name') }}さんの直前の投稿</h2>
{{ session('comment') }}
<br><hr>
@endif

これで、redirect された内容を受け取ることができました。ここまでの結果が以下のようになります。

成功できました！！！？？？

最後に入力内容のバリデーション

なぜバリデーションをするのか

今の状態はどんな内容でも表示させることができます。しかし入力欄としては、適切な場所に対応したものを書いて欲しいものです。そのために入力できる内容を制限できるバリデーションという機能を使います。

バリデーションを行う

用語	設定内容
required	入力必須

今回はバリデーションをする！と言って大口叩いていますが、実際は入力なしを禁止するだけですw。
ちなみに用語を詳しくまとめてくれた記事があったのでリンクを載せておきます。
用語のまとめサイト
それではこの内容を実装していきます。まずは、書く場所ですが送られてくる情報が正しいか調べるのでControllerを変更していきます。

UserController.php

        $validated = $request->validate([
            'name' => 'required',
            'comment' => 'required',
        ]);

上記により内容を書いてない場合、 Controller から redirect を受けて元のページに戻るようになりました。しかし利用者からするとなぜ戻ったのか理解することはできません。そこで次は edit.blade.php にエラー内容を表示させるように書き加えます。

edit.php

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

これによりエラー内容は表示されました。以下が結果になります。

これで完成です！！！いけましたか？もし何かわからない点などありましたら、コメントで教えてください。またいい記事だと思ったらフォローお願いします(*ﾟ▽ﾟ)ﾉ