【Laravel チュートリアル】タスク管理アプリ開発：タスク編集画面

2020年1月29日 Git Laravel プログラミング

icon by Icons8

PHPのフレームワークLaravelのチュートリアルとしてタスク管理アプリを開発する手順をまとめていきます。Gitを使ったバージョン管理も行なっていきます。

今回はデータベースにあるデータを利用して、タスクの編集画面を作成します。CRUDの「Update：更新」です。

CRUDについてはこちらを参考ください

【Laravel 入門】タスク管理アプリ開発：タスク詳細画面 で実装したweb.php , TasksController と resources/views/tasks/show.blade.php も修正します。

Form画面を実装

編集画面はすでにデータベースに保存されているデータを編集します。そのため画面表示の際には「どのデータを編集するのか？」ということを明らかにしないといけません。そしてさらに、データを編集するためのformが必要です。

タスク詳細画面と同じように、RoutingでURLに id を含む形にすることで「どのデータを編集するのか？」を明らかにすることができます。

まずはformを表示するための画面を実装します。

Routingの実装

web.php を修正し、 /edit/1 や /edit/2 のようにid を含むURL（ /edit/{id} ）にアクセスしたときに、 TasksController の edit アクションが実行されるようにします。

※ 【Laravel 入門】タスク管理アプリ開発：タスク詳細画面 の web.php と同じように id は 0 ~ 9 の複数桁にしています。

<?php

Route::get('/edit/{id}', 'TasksController@edit')->where('id', '[0-9]+');

Controllerの実装

TasksController の editアクションの引数に int $id を追加します。そうすると edit アクションの中でURLに含まれている id を使用できます。

※ int というは integerの略で数値を表します。 $id は数値ですと明示しています。

そして view() を使って resources/views/tasks/edit.blade.php を表示します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Task;

class TasksController extends Controller
{
    ・・・・・
    ・・・・・

    public function edit(int $id)
    {
        $task = Task::findOrFail($id);
        return view('tasks.edit', ['task' => $task]);
    }
}

Viewの実装

resources/views/tasks ディレクトリ配下に edit.blade.php を新規作成してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TaskApp</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
    <body>
        <form action="/edit/{{ $task->id }}" method="post">
            @csrf
            @method('PUT')
            <label>タイトル（必須）</label>
            <input type="text" name="title" value="{{ $task->title }}">
            <label>内容</label>
            <textarea name="contents" cols="50" rows="10">{{ $task->contents }}</textarea>
            <button type="submit" class="submit-button">更新</button>
        </form>
    </body>
</html>

formの action にはPUT先のURLを指定します。データ送信をするために <input type="submit"> は必須なので忘れないでください。

formのinputタグ の name はデータベースのカラム名を指定しておくと登録が楽に実装できます。

今回のHTTPリクエストメソッドは PUT です。そのためformタグには method="POST" を指定するのですが、formの中で @method('PUT') を指定する必要があります。

サーバを起動して確認する

ターミナルで以下のコマンドを実行してブラウザから http://127.0.0.1:8000/edit/1 などのデータベースに存在するデータの id を指定して、アクセスしてみましょう。

$ php artisan serve

以下のようにフォームと既存データが表示されていればOKです 👍

Formからデータを送信するURLを実装

画面の表示が完了したら、続いてデータを送信するURLと、データ更新の実装をしていきます。

Routingの実装

web.php を修正し、 /edit/{id} というURLにPUTしたときに、 TasksController の update アクションが実行されるようにします。

※ PUT先のURLを作成するので Route::put となっていることに注意してください。HTTPリクエストがリクエストなので同じURLでも問題ありません。

<?php

Route::put('/edit/{id}', 'TasksController@update')->where('id', '[0-9]+');

Controllerの実装

TasksController の update アクションの引数には編集画面から送信された Request $request とURLに含まれている int $idを書きます。

update アクションの中では大きく分けて以下4つの実装をします。

  1. 送信されたデータが正しいかを判断するvalidation
  2. データベースから指定の id のデータを取得
  3. 取得したデータを更新
  4. 画面表示するURLにリダイレクト
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Task;

class TasksController extends Controller
{
    ・・・・・
    ・・・・・

    public function update(Request $request, int $id)
    {
        // validation
        $validate = $request->validate([
            'title'    => 'required',
            'contents' => 'nullable'
        ]);

        // データベースから指定idのデータを取得
        $task = Task::findOrFail($id);

        // 取得したデータを更新
        $task->update($validate);

        // 画面表示するURLにリダイレクト
        return redirect('/' . $task->id);
    }
}

送信されたデータが正しいかを判断するvalidation

validate() の引数に連想配列を持たせて送信されたデータをvalidationかけることができます。上記の例は以下のvalidationルールを表しています。

  • title → 必須
  • contents → データが無くてもOK

連想配列のキーはformの inputタグ の name を指定してください。

データベースから指定idのデータを取得

findOrFail() を使って引数に指定した $id のデータを取得します。

データの更新

update() を使うとデータの更新が可能です。validationをした結果を update() の引数に追加してください。

画面表示するURLにリダイレクト

redirect() を使って特定のURLにリダイレクトさせます。redirect() の引数には web.php に登録されているURLを指定します。

上記の例では /1 などの id を含んだURLにアクセスします。

編集してみる

http://127.0.0.1:8000/edit/1 にアクセスして、データを編集しましょう。編集後、タスク詳細画面が表示されて、データが更新されていればOKです 👍

見た目を整える

ViewファイルとSassファイルを修正して見た目を整えます。LaravelでSassを使ってスタイルを反映させる方法は以下の記事にまとまっていますのでご参考ください。

参考：LaravelでSassを利用する

お好きなように実装していただいて問題ありませんが、私が実装した結果を掲載しておきます。実装した画面は以下になります。

※ 一覧画面に戻るためのボタンを追加しました

※ CSSは【Laravel 入門】タスク管理アプリ開発：タスク新規作成画面 で作ったものをそのまま利用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TaskApp</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
    <body>
        <div class="header">
            <h1>タスク編集</h1>
            <a href="/" class="button">一覧に戻る</a>
        </div>
        <div class="main">
            <form action="/edit/{{ $task->id }}" method="post" class="create-form">
                @csrf
                @method('PUT')
                <label>タイトル（必須）</label>
                <input type="text" name="title" value="{{ $task->title }}">
                <label>内容</label>
                <textarea name="contents" cols="50" rows="10">{{ $task->contents }}</textarea>
                <button type="submit" class="submit-button">更新</button>
            </form>
        </div>
    </body>
</html>

また show.blade.php も修正します。

<!DOCTYPE html>
<html lang="ja">
・・・・・
・・・・・
<body>
    <div class="header">
        <h1>タスク詳細</h1>
        <a href="/" class="button">一覧に戻る</a>
        {{--編集画面へのリンクを追加--}}
        <a href="/edit/{{ $task->id }}" class="button">編集</a>
    </div>
    ・・・・・
    ・・・・・
</body>
</html>

終了 👍

git status コマンドで修正されたファイルが表示されているかを確認してください。

git addとgit commitを実行してローカルリポジトリに登録し
git pushでリモートリポジトリへ更新履歴を登録してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です