目的

投稿内容と一緒に画像を投稿する方法をまとめる

実施環境

筆者の実施環境を記載する。
ハードウェア環境

項目	情報
OS	macOS Catalina(10.15.5)
ハードウェア	MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)
プロセッサ	2 GHz クアッドコアIntel Core i5
メモリ	32 GB 3733 MHz LPDDR4
グラフィックス	Intel Iris Plus Graphics 1536 MB

ソフトウェア環境

項目	情報	備考
PHP バージョン	7.4.8	Homebrewを用いてこちらの方法で導入→Mac HomebrewでPHPをインストールする
Laravel バージョン	8.6.0	commposerを用いてこちらの方法で導入→Mac Laravelの環境構築を行う
MySQLバージョン	8.0.19 for osx10.13 on x86_64	Homwbrewを用いてこちらの方法で導入→Mac HomebrewでMySQLをインストールする
Node.jsバージョン	v12.14.1	Homwbrewを用いてこちらの方法で導入→Mac HomebrewでNode.jsをインストールする

前提条件

下記の記事の作業が完了していること。
- Laravel8 CRUD処理を使った投稿アプリを作成するその8 ベースレイアウトの作成と反映

前提情報

作成するアプリ名は「laravel8_crud」とする。
作成するMySQLのデータベース名は「laravel８_crud_DB」とする。
下記に今回の作業のあとのソースコードのリモートリポジトリのリンクを記載する。
- https://github.com/miriwo0104/laravel8_crud/tree/No09

概要

.envファイルの記載
シンボリックリンクの作成
マイグレーションファイルの記載とマイグレート
コントローラファイルの修正
ベースレイアウトファイルの作成
ビューファイルの編集
確認

詳細

.envファイルの記載
1. laravel8_crudディレクトリで下記コマンドを実行して.envファイルを開く。
```
$ vi .env
```
2. 下記の内容を.envファイルに追記する。
  laravel8_crud/.env
```
FILESYSTEM_DRIVER=public
```
シンボリックリンクの作成
1. laravel8_crudディレクトリで下記コマンドを実行してシンボリックリンクを作成する。
```
$ php artisan storage:link
```

マイグレーションファイルの記載とマイグレート

laravel8_crudディレクトリで下記コマンドを実行してモデルファイルとマイグレーションファイルを作成する。
```
$ php artisan make:model ContentImage -m
```
laravel8_crudディレクトリで下記コマンドを実行して作成したマイグレーションファイルを開く。
```
$ vi database/migrations/YYYY_MM_DD_HHMMSS_create_content_images_table.php
```
up側に下記の内容を記載する。
laravel8_crud/database/migrations/YYYY_MM_DD_HHMMSS_create_content_images_table.php
```
$table->integer('content_id');
$table->string('file_path');
$table->string('file_name');
```

記載後の全内容を下記に記載する。

laravel8_crud/database/migrations/YYYY_MM_DD_HHMMSS_create_content_images_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateContentImagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('content_images', function (Blueprint $table) {
            $table->id();
            // 下記を追記する
            $table->integer('content_id');
            $table->string('file_path');
            $table->string('file_name');
            // 上記までを追記する
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('content_images');
    }
}

laravel8_crudディレクトリで下記コマンドを実行してマイグレーションを行う。
```
$ php artisan migrate
```

コントローラファイルの修正

laravel8_crudディレクトリで下記コマンドを実行してコントローラファイルを開く。
```
$ vi app/Http/Controllers/ContentController.php
```

下記のように修正する。

laravel8_crud/app/Http/Controllers/ContentController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Content;
// 下記を追記する
use App\Models\ContentImage;
use Illuminate\Support\Facades\Storage;
// 上記までを追記する

class ContentController extends Controller
{
    public function input()
    {
        return view('contents.input');
    }

    public function save(Request $request)
    {
        $input_content = new Content();
        $input_content->content = $request['content'];
        $input_content->save();

        // 下記を追記する
        if ($request->file('file')) {
            $this->validate($request, [
                'file' => [
                    // 空でないこと
                    'required',
                    // アップロードされたファイルであること
                    'file',
                    // 画像ファイルであること
                    'image',
                    // MIMEタイプを指定
                    'mimes:jpeg,png',
                ]
            ]);
    
            if ($request->file('file')->isValid([])) {
                $file_name = $request->file('file')->getClientOriginalName();
                $file_path = Storage::putFile('/images', $request->file('file'), 'public');
                
                $image_info = new ContentImage();
                $image_info->content_id = $input_content->id;
                $image_info->file_name = $file_name;
                $image_info->file_path = $file_path;
                $image_info->save();
            }
        }
        // 上記までを追記する
        return redirect(route('output'));
    }

    public function output()
    {
        $contents_get_query = Content::select('*');
        $items = $contents_get_query->get();

        // 下記を追記する
        foreach ($items as &$item) {
            $file_path = ContentImage::select('file_path')
            ->where('content_id', $item['id'])
            ->first();
            if (isset($file_path)) {
                $item['file_path'] = $file_path['file_path'];
            }
        }
        // 上記までを追記する
    
        return view('contents.output', [
            'items' => $items,
        ]);
    }

    public function detail($content_id)
    {
        $content_get_query = Content::select('*');
        $item = $content_get_query->find($content_id);

        // 下記を追記する
        $file_path = ContentImage::select('file_path')
        ->where('content_id', $item['id'])
        ->first();
        if (isset($file_path)) {
            $item['file_path'] = $file_path['file_path'];
        }
        // 上記までを追記する

        return view('contents.detail', [
            'item' => $item,
        ]);
    }

    public function edit($content_id)
    {
        $content_get_query = Content::select('*');
        $item = $content_get_query->find($content_id);

        return view('contents.edit', [
            'item' => $item,
        ]);
    }

    public function update(Request $request)
    {
        $content_get_query = Content::select('*');
        $content_info = $content_get_query->find($request['id']);
        $content_info->content = $request['content'];
        $content_info->save();
        return redirect(route('output'));
    }

    public function delete(Request $request)
    {
        $contents_delete_query = Content::select('*');
        $contents_delete_query->find($request['id']);
        $contents_delete_query->delete();

        // 下記を追記
        $content_images_delete_query = ContentImage::select('*');
        if ($content_images_delete_query->find($request['id'] !== '[]')) {
            $content_images_delete_query->delete();
        }
        // 上記までを追記

        return redirect(route('output'));
    }
}

ビューファイルの編集

laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。
```
$ vi resources/views/contents/input.blade.php
```

下記のように編集する。

laravel8_crud/resources/views/contents/input.blade.php

@extends('layouts.app')

@section('content')

<h1>input</h1>

{{-- 下記を修正する --}}
<form action="{{route('save')}}" method="post" enctype="multipart/form-data">
    @csrf
    <textarea name="content" cols="30" rows="10"></textarea>
    {{-- 下記を追記する --}}
    <br>
    @error('file')
        {{$message}}
        <br>
    @enderror
    <input type="file" name="file">
    {{-- 上記までを追記する --}}
    <input type="submit" value="送信">
</form>

@endsection

laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。
```
$ vi resources/views/contents/output.blade.php
```

下記のように編集する。

laravel8_crud/resources/views/contents/output.blade.php

@extends('layouts.app')

@section('content')

<h1>output</h1>

@foreach ($items as $item)
<hr>
{{-- 下記を追記する --}}
@if (isset($item['file_path']))
<img src="{{asset('storage/' . $item['file_path'])}}" alt="{{asset('storage/' . $item['file_path'])}}">
@endif
{{-- 上記までを追記する --}}
<p>{{$item['content']}}</p>
<a href="{{route('detail', ['content_id' => $item['id']])}}">詳細</a>
<a href="{{route('edit', ['content_id' => $item['id']])}}">編集</a>
@endforeach

@endsection

laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。
```
$ vi resources/views/contents/detail.blade.php
```

下記のように編集する。

laravel8_crud/resources/views/contents/detail.blade.php

@extends('layouts.app')

@section('content')

<h1>detail</h1>

{{-- 下記を追記する --}}
@if (isset($item['file_path']))
<img src="{{asset('storage/' . $item['file_path'])}}" alt="{{asset('storage/' . $item['file_path'])}}">
@endif
{{-- 上記までを追記する --}}
<p>投稿ID: {{$item['id']}}</p>
<p>投稿内容: {{$item['content']}}</p>
<p>投稿時間: {{$item['created_at']}}</p>
<a href="{{route('edit', ['content_id' => $item['id']])}}">編集</a>
<form action="{{route('delete')}}" method="post">
    @csrf
    <input type="hidden" name="id" value="{{$item['id']}}">
    <input type="submit" value="削除">
</form>

@endsection

確認
1. laravel8_crudディレクトリで下記コマンドを実行してローカルサーバを起動する。
```
$ php artisan serve
```
2. ブラウザで下記にアクセスする。
  - http://127.0.0.1:8000/input
3. コメントを入力後に「ファイルを選択」をクリックしてjpegかpngファイルを選択して「送信」をクリックする。
4. 下記にアクセスする。
  - http://127.0.0.1:8000/output
5. 画像が表示されることを確認する。
6. 詳細をクリックする。
7. 投稿内容の詳細とともに画像が表示されることを確認する。