Laravel8 CRUD処理を使った投稿アプリを作成する その6 投稿編集機能の作成

# 目的

- 投稿された内容を編集するページを作成する

# 実施環境

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

| 項目 | 情報 |
| --- | --- |
| 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をインストールする](https://qiita.com/miriwo/items/cd54077aad7e139cf518) |
| Laravel バージョン | 8.6.0 | commposerを用いてこちらの方法で導入→[Mac Laravelの環境構築を行う](https://qiita.com/miriwo/items/adaaaeecae69d6392e08) |
| MySQLバージョン | 8.0.19 for osx10.13 on x86_64 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでMySQLをインストールする](https://qiita.com/miriwo/items/ef6a064bc545fbea29d9) |
| Node.jsバージョン | v12.14.1 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでNode.jsをインストールする](https://qiita.com/miriwo/items/73d1546220f1c091a7d5) |
# 前提条件

- 下記の記事の作業が完了していること。
    - [Laravel8 CRUD処理を使った投稿アプリを作成する その5 投稿詳細画面の作成](https://qiita.com/miriwo/items/a35614b4f94b8972efe3)

# 前提情報

- 作成するアプリ名は「laravel8_crud」とする。
- 作成するMySQLのデータベース名は「laravel８_crud_DB」とする。
- 下記に今回の作業のあとのソースコードのリモートリポジトリのリンクを記載する。
    - [https://github.com/miriwo0104/laravel8_crud/tree/No06](https://github.com/miriwo0104/laravel8_crud/tree/No06)
- 投稿された内容の編集ページのURLは[http://127.0.0.1:8000/edit/投稿ID](http://127.0.0.1:8000/detail/投稿ID)とする。
- 編集完了後のリダイレクトされるページは投稿一覧ページである[http://127.0.0.1:8000/output](http://127.0.0.1:8000/output)とする。

# 概要

1. ルーティング情報の記載
1. コントローラファイルの記載
1. ビューファイルの作成と記載
1. 確認

# 詳細

1. ルーティングの記載
    1. laravel8_crudディレクトリで下記コマンドを実行してルーティングファイルを開く。

        ```terminal
        $ vi routes/web.php 
        ```
    1. 開いたファイルに下記の行を追記する。

        ```laravel8_crud/routes/web.php
        Route::get('/edit/{content_id}', [ContentController::class, 'edit'])->name('edit');
        Route::post('/update', [ContentController::class, 'update'])->name('update');
        ```
    1. 追記後のルーティングファイルの内容を下記に記載する。

        ```laravel8_crud/routes/web.php
        <?php
        
        use Illuminate\Support\Facades\Route;
        use App\Http\Controllers\ContentController;
        
        /*
        |--------------------------------------------------------------------------
        | Web Routes
        |--------------------------------------------------------------------------
        |
        | Here is where you can register web routes for your application. These
        | routes are loaded by the RouteServiceProvider within a group which
        | contains the "web" middleware group. Now create something great!
        |
        */
        
        Route::get('/', function () {
            return view('welcome');
        });
        
        Auth::routes();
        
        Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
        
        Route::get('/input', [ContentController::class, 'input'])->name('input');
        Route::post('/save', [ContentController::class, 'save'])->name('save');
        Route::get('/output', [ContentController::class, 'output'])->name('output');
        Route::get('/detail/{content_id}', [ContentController::class, 'detail'])->name('detail');
        // 下記を追記する
        Route::get('/edit/{content_id}', [ContentController::class, 'edit'])->name('edit');
        Route::post('/update', [ContentController::class, 'update'])->name('update');
        // 上記までを追記する
        ```
1. コントローラファイルの記載
    1. laravel8_crudディレクトリで下記コマンドを実行して作成したコントローラファイルを開く。

        ```terminal
        $ vi app/Http/Controllers/ContentController.php 
        ```
    1. 下記の内容をクラス内に追記する。

        ```laravel8_crud/app/Http/Controllers/ContentController.php
        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'));
        }
        ```
    1. 追記後のコントローラファイルの内容を下記に記載する。

        ```laravel8_crud/app/Http/Controllers/ContentController.php
        <?php
        
        namespace App\Http\Controllers;
        
        use Illuminate\Http\Request;
        use App\Models\Content;
        
        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();
                return redirect(route('output'));
            }
        
            public function output()
            {
                $contents_get_query = Content::select('*');
                $items = $contents_get_query->get();
            
                return view('contents.output', [
                    'items' => $items,
                ]);
            }
        
            public function detail($content_id)
            {
                $content_get_query = Content::select('*');
                $item = $content_get_query->find($content_id);
        
                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'));
            }
            // 上記までを追記する
        }
        ```
1. ビューファイルの作成と記載
    1. laravel8_crudディレクトリで下記コマンドを実行してビューファイルを作成する。

        ```terminal
        vi resources/views/contents/edit.blade.php
        ```
    1. 作成して開いたビューファイルに下記の内容を記載する。
    
        ```laravel8_crud/resources/views/contents/output.blade.php
        <h1>edit</h1>
        
        <p>投稿ID: {{$item['id']}}</p>
        <form action="{{route('update')}}" method="post">
            @csrf
            <input type="hidden" name="id" value="{{$item['id']}}">
            <textarea name="content" cols="30" rows="10">{{$item['content']}}</textarea>
            <input type="submit" value="送信">
        </form>
        <p>投稿時間: {{$item['created_at']}}</p>
        ```
1. 確認
    1. laravel8_crudディレクトリで下記コマンドを実行してローカルサーバを起動する。

        ```terminal
        $ php artisan serve
        ```
    1. ブラウザで下記にアクセスする。
        - [http://127.0.0.1:8000/output](http://127.0.0.1:8000/output)
    1. 下記の様に投稿内容が表示され「編集」のリンクがあることを確認する。（投稿内容は下記画像と一致しなくて良い）

        ![127_0_0_1_8000_output.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/0b42a5d5-501b-6167-4a0e-9de9cc25c6a4.png)

    1. 「編集」のリンクをクリックすると下記のページが開くこと、すでに投稿済みの投稿内容がテキストボックスに表示されていることを確認する。

        ![127_0_0_1_8000_edit_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/21635361-ab4f-f0f1-bf69-7ab1d4897280.png)

    1. テキストボックス内の投稿内容を任意のものに修正し「送信」をクリックする。

        ![127_0_0_1_8000_edit_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/32a0b958-2929-f14a-b9f9-21d5a075a748.png)

    1. 投稿一覧ページにリダイレクトし投稿内容が編集された状態で一覧に表示されていることを確認できたら本記事の作業は完了である。

        ![127_0_0_1_8000_output.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/d161c10c-da98-81b7-56a4-36d9a322f70a.png)