Laravelでポートフォリオ作り vol.10【データ削除編】

今回もポートフォリオを進めていきます。
今回はデータ削除処理を作成します。
削除処理を実装すると、データの「表示」「登録」「更新」「削除」ができるようになり、システムからのDB操作が一通り実装完了となります。

前回

ルーティングの定義

早速実装を進めていきます。
今回作成する削除機能については画面を用意しません。
詳細画面からボタンを押下することで削除処理が実行されるようにします。
そのため、ルーティングも削除機能用のものを定義すればOKです。削除機能はPOSTで定義していきます。
登録画面のように大きなデータを送るわけでは無いので、GETでも定義できてしまいますが、データの更新という大きな仕事をする処理なのでPOSTで定義しておきます。
今までに定義した生徒管理機能の下に定義しました。削除機能も指定のレコードに対する機能になるので、ルートパラメータにidを含めています。

// 以降のルーティングはこの下に書いていく
Route::get('/student', [StudentController::class, 'index'])->name('student.index'); // 生徒一覧
Route::get('/student/{id}/detail', [StudentController::class, 'detail'])->name('student.detail'); // 生徒詳細
Route::get('/student/create', [StudentController::class, 'create'])->name('student.create'); // 生徒登録
Route::get('/student/{id}/edit', [StudentController::class, 'edit'])->name('student.edit'); // 生徒編集
Route::post('/student/store/{id?}', [StudentController::class, 'store'])->name('student.store'); // 生徒登録処理
Route::post('/student/{id}/delete', [StudentController::class, 'delete'])->name('student.delete'); // 生徒削除処理

削除ボタンの設置

続いて、削除ボタンを設置していきます。
POSTによる処理になるため、登録や更新と同じようにformタグを用いて実装します。
入力要素は必要ないので、formタグに中にボタンを配置すればOKですね
今回は生徒情報カードの右下に削除ボタンを配置します。

まずはbladeファイル(resources/views/student/detail.blade.php)から。
下の方にformタグを追加しました。

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            生徒詳細
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 pb-2 text-gray-900">
                    <a class="text-sky-500" href="{{ $student['student_edit_url'] }}">編集</a>
                    <div class="bg-white border shadow-sm rounded-xl p-4 mb-3">
                        <h3 class="text-lg font-bold text-gray-800">
                            {{ $student['student_name'] }}
                        </h3>
                        <p class="mt-1 text-xs font-medium text-gray-500">
                            期間({{ $student['kikan_from'] }}~{{ $student['kikan_to'] }})
                        </p>
                        <p class="mt-2 text-gray-800">
                            {{ $student['student_memo'] }}
                        </p>
                    </div>
                </div>

                <form class="p-1 text-right" action="{{ $student['student_delete_url'] }}" method="post">
                    @csrf
                    <button class="bg-red-700 hover:bg-red-600 text-white rounded px-4 py-2">削除</button>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>

formタグのactionに設定している変数をController(Http/Controllers/StudentController.php)で定義します。
詳細画面表示のdetailメソッドを下記のように修正。$studentの値を修正しました。

public function detail(Student $id){
    $student = [
        'student_name' => $id->student_sei . $id->student_mei,  // 生徒名
        'kikan_from' => $id->student_from_date,  // 期間(開始日)
        'kikan_to' => $id->student_to_date,  // 期間(終了日)
        'student_memo' => $id->student_memo,  // 生徒メモ
        'student_edit_url' => route('student.edit', ['id' => $id->id]),  // 生徒詳細URL
        'student_delete_url' => route('student.delete', ['id' => $id->id]),  // 面談URL
    ];


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

これで削除ボタンが表示されます。

削除処理の実装

続いて削除処理の実装をしていきます。
前回作成した更新処理と削除処理は非常に似ています。更新処理は指定のレコードのインスタンスで「save」メソッドを実行しましたが、削除処理についてはインスタンスで削除用のメソッドを実行すればOKです。
では、Controllerに削除用のメソッドを実装していきます。

/**
 * 削除処理
 */
public function delete(Request $req, Student $id){
    // 保存
    $id->delete();

    return redirect(route('student.index'));
}

これだけです。
それでは削除ボタンを押下してみましょう。

対象が削除されて一覧画面に戻れれば実装完了です。

今回の記事でシステムからのDB操作が一通り実装できました。
今回は生徒登録でしたが、先生登録や面談登録など、システムが必要なデータの処理は概ねこの流れで実装できます。
「ルート定義→Controller処理実装→bladeでの画面実装」が基本の流れになるので、この流れをしっかりと覚えておきましょう。