🔰
LaravelでTodoリストを実装してみよう！～実装編３：Todo編集機能の実装～
はじめに
今回は、登録したTodoの編集機能を実装していきます！
前回の記事はこちら↓
Todo編集画面の作成
まずは、編集画面を作っていきます！
ビューの作成
まず、ビューを作っていきます。ビューの生成には、以下のコマンドを実行します。
sail artisan make:view todolist.edittodo
生成されたresources/views/todolist/edittodo.blade.phpを以下のように書き換えます。
resources/views/todolist/edittodo.blade.php
<x-layout.layout title="Todo編集 | Todoアプリ">
<x-layout.todolist-single>
<form method="POST" action="{{ route('todolist')}}" class="justfy-center">
@method('PUT')
@csrf
<div class="flex flex-col justify-center">
<div class="flex justify-center mb-4 text-4xl font-extralight text-green-500">Todoを編集</div>
@csrf
<div class="flex justify-center items-center">
<div class="text-xl w-20">Todo</div>
<input type="text" name="content" value="{{ $todo->content }}" class="@error('content') is-invalid @enderror w-full ml-4 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-green-500 dark:focus:border-green-600 focus:ring-green-500 dark:focus:ring-green-600 rounded-md shadow-sm">
</div>
@error('content')
<div style="color: red" class="alert alert-danger">{{ $message }}</div>
@enderror
<div class="flex justify-center items-center mt-4">
<div class="flex text-xl w-20">期限</div>
<input type="date" name="deadline" value="{{ $todo->deadline }}" class="@error('deadline') is-invalid @enderror flex w-full ml-4 border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-green-500 dark:focus:border-green-600 focus:ring-green-500 dark:focus:ring-green-600 rounded-md shadow-sm">
</div>
@error('deadline')
<div style="color: red" class="alert alert-danger">{{ $message }}</div>
@enderror
<div class="flex mt-4 justify-center">
<x-element.button-addtodo>確 定</x-element-button-addtodo>
</div>
</div>
</form>
</x-layout.todolist-single>
</x-layout.layout>
<form method="POST" action="{{ route('todolist')}}" class="justfy-center">の部分は便宜上既にあるtodolistにパスをつないでいますが、後程書き換えます。
コントローラーの作成
次に、コントローラーを作成します。
コントローラーファイルの生成には、以下のコマンドを実行します。
sail artisan make:controller Todolist/EditTodo/EditTodoPageController --invokable
生成されたapp/Http/Controllers/Todolist/EditTodo/EditTodoPageController.phpファイルを以下のように書き換えます。
app/Http/Controllers/Todolist/EditTodo/EditTodoPageController.php
<?php
namespace App\Http\Controllers\Todolist\EditTodo;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class EditTodoPageController extends Controller
{
/**
* Handle the incoming request.
*/
public function __invoke(Request $request)
{
+ $todoId = (int) $request->route('todoId');
+ $todo = Todolist::where('id', $todoId)->firstOrFail();
+ return view('todolist.edittodo')->with('todo', $todo);
}
}
ルーティング
最後に、ルーティングでパスをつないで完成です！
routes/web.phpに以下のコードを書き加えます。
routes/web.php
//// 省略 ////
Route::get('edittodo-page',\App\Http\Controllers\Todolist\EditTodo\EditTodoPageController::class)
->name('edittodo-page');
http://localhost/edittodo-page/2等にアクセスすると以下のような画面が表示されていれば完成です！
Todo追加機能の作成
画面周りの作成が終わったので、実際にTodoを追加するための仕組みを作成していきます！
リクエストの作成
続いて、確定ボタンを押したときに、編集した情報をコントローラーに送信できるようにリクエストを作っていきます。
sail artisan make:request Todolist/EditTodoRquest
生成されたapp/Http/Requests/Todolist/EditTodoRquest.phpファイルを以下のように書き換えます。
app/Http/Requests/Todolist/EditTodoRquest.php
<?php
namespace App\Http\Requests\Todolist;
use Illuminate\Foundation\Http\FormRequest;
class EditTodoRquest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*/
public function authorize(): bool
{
- return false;
+ return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
*/
public function rules(): array
{
return [
+ 'content' => 'required',
+ 'deadline' => 'required|date',
];
}
+ public function todoId(): int {
+ return (int) $this->route('todoId');
+ }
+ public function content(): string {
+ return $this->input('content');
+ }
+ public function deadline(): string {
+ return $this->input('deadline');
+ }
}
コントローラーの作成
次に、コントローラーを作成していきます。
sail artisan make:controller Todolist/AddTodo/AddTodoController --invokable
生成されたapp/Http/Controllers/Todolist/EditTodo/EditTodoController.phpを以下のように書き換えます。
app/Http/Controllers/Todolist/EditTodo/EditTodoController.php
<?php
namespace App\Http\Controllers\Todolist\EditTodo;
use App\Http\Controllers\Controller;
+use App\Http\Requests\Todolist\EditTodoRquest;
+use App\Models\Todolist;
class EditTodoController extends Controller
{
/**
* Handle the incoming request.
*/
- public function __invoke(Request $request)
+ public function __invoke(EditTodoRquest $request)
{
+ $todo = Todolist::where('id', $request->todoId())->firstOrFail();
+ $todo->content = $request->content();
+ $todo->deadline = $request->deadline();
+ $todo->save();
+ return redirect()
+ ->route('todolist');
}
}
ルーティング
routes/web.phpに以下のコードを書き加えます。
routes/web.php
//// 省略 ////
Route::put('todo/edittodo/{todoId}', \App\Http\Controllers\Todolist\EditTodo\EditTodoController::class)
->name('edittodo')->where('todoId', '[0-9]+');
ビューの修正
そして、ビューファイルの便宜上todolistにパスをつないでいた
<form method="POST" action="{{ route('todolist')}}" class="justfy-center">の部分を書き換えます。
resources/views/todolist/edittodo.blade.php
<x-layout.layout title="Todo編集 | Todoアプリ">
<x-layout.todolist-single>
- <form method="POST" action="{{ route('todolist')}}" class="justfy-center">
+ <form method="POST" action="{{ route('edittodo', ['todoId' => $todo->id]) }}" class="justfy-center">
{{--省略--}}
これで、編集機能は完成です！
おわりに
今回は、Todo編集画面と機能をコーディングしました。
次回は、Todo削除機能とチェック機能を追加できればと思います！
ではまた！
Discussion