4️⃣
【Laravel】CRUD機能を作成する④削除機能(Delete)
はじめに
下記の続きになります。
削除を押すとダイアログが表示され、「OK」をクリックした場合に削除されるようにしてみたいと思います。
削除ボタンの追加
ユーザー一覧から削除ボタンを追加してください。
resources/views/users/index.blade.php
@extends('layouts.app')
@section('title', 'ユーザー一覧')
@section('content')
<h1 class="text-2xl font-bold mb-4">ユーザー一覧</h1>
<!-- ユーザー登録ページへのリンク -->
<a href="{{ route('users.create') }}"
class="mb-4 inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
ユーザー登録
</a>
<!-- セッションメッセージ -->
@if (session('message'))
<div><strong>{{ session('message') }}</strong></div>
@endif
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr>
<th class="px-6 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
<th class="px-6 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">名前</th>
<th class="px-6 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@if (isset($users))
@foreach ($users as $user)
<tr>
<td class="px-6 py-4 whitespace-nowrap">{{ $user->id }}</td>
<td class="px-6 py-4 whitespace-nowrap"><a href="{{ route('users.show', $user->id) }}"
class="text-blue-500 hover:underline">{{ $user->name }}</a></td>
<td class="px-6 py-4 whitespace-nowrap">
<a href="{{ route('users.edit', $user->id) }}"
class="text-indigo-600 hover:text-indigo-900">編集</a>
<form action="{{ route('users.destroy', $user->id) }}" method="POST" class="inline">
@csrf
@method('DELETE')
<button type="submit" class="text-red-600 hover:text-red-900 ml-20"
onclick="return confirm('本当に削除しますか?')">削除</button>
</form>
</td>
</tr>
@endforeach
@endif
</tbody>
</table>
</div>
@endsection
@method('DELETE')
ウェブのフォームは、データをサーバーに送信するための基本的な手段として、GET
とPOST
メソッドを使用することができます。
しかし、データを更新したり削除したりする場合、より適切な方法はPUT
(更新)やDELETE
(削除)を使うことです。Laravelでは@method('DELETE')
を使用して、フォームが送信するPOST
リクエストに隠しフィールドを加え、サーバー側でこのリクエストをDELETE
操作として解釈できるようにします。
confirm()
ダイアログボックスを表示し、ユーザーが「OK」をクリックした場合はtrue
を、それ以外の場合はfalse
を返します。
onclick
属性にreturn
文が含まれているため、confirm()
関数の戻り値によって、ボタンがクリックされたときに実行されるアクションが変わります。ユーザーが「OK」をクリックした場合にはtrue
が返され、削除操作が実行されます。
コントローラー設定
destroy
メソッドを作成してください。
app/Http/Controllers/UsersController.php
public function destroy(User $user)
{
try {
$user->delete();
return redirect()->route('users.index')->with('message', 'ユーザーが削除されました');
} catch (\Exception $e) {
return redirect()->route('users.index')->with('message', 'ユーザーの削除中にエラーが発生しました: ' . $e->getMessage());
}
}
ルート設定
web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UsersController;
Route::prefix('users')->group(function () {
Route::get('/', [UsersController::class, 'index'])->name('users.index');
Route::get('/create', [UsersController::class, 'create'])->name('users.create');
Route::post('/store', [UsersController::class, 'store'])->name('users.store');
Route::get('/{user}', [UsersController::class, 'show'])->name('users.show');
Route::get('/{user}/edit', [UsersController::class, 'edit'])->name('users.edit');
Route::put('/{user}', [UsersController::class, 'update'])->name('users.update');
Route::delete('/{user}', [UsersController::class, 'destroy'])->name('users.destroy');
});
画像アップロード、管理者権限、パスワード確認欄、ページングを追加する記事も書きましたので、よければ参考にしてください。
終わりに
何かありましたらお気軽にコメント等いただけると助かります。
ここまでお読みいただきありがとうございます🎉
Discussion