🔰

LaravelでTodoリストを実装してみよう！～実装編６：ログイン機能の実装～

に公開
初心者
初心者向け
tech

はじめに

今回は、ログイン機能の実装をしていきます！

laravel breezeの導入

まず、ログイン機能の実装するために、breezeというライブラリを導入します。

breezeとは、laravelにログイン機能を追加するためのライブラリです。

laravel breezeのインストール

breezeのインストールには、以下のコマンドを実行します！

sail composer require laravel/breeze --dev
sail artisan breeze:install
Which Breeze stack would you like to install? → Blade with Alpine 
Would you like dark mode support? → No
Which testing framework do you prefer? → PHPUnit

breezejpのインストール

breezejpはbreezeを日本語化してくれるライブラリです。

以下のコマンドを実行してインストールします。

sail composer require askdkc/breezejp --dev
sail artisan breezejp

動作確認

http://localhost/にアクセスして、画面右上に「Login」「Register」ボタンが追加されていれば、成功です。

「Register」ボタンを押すと以下の画面が表示され、アカウントを新規登録できます。

これで、breezeの導入は完了です！

ログインしないと操作できないようにする

ライブラリの導入が完了したので、ログインしないとTodoアプリの操作ができないようにします。

web.phpの修正

routes/web.phpのTodoアプリに関するルーティングを以下のように修正します。

routes/web.php
Route::middleware('auth')->group(function (){
    Route::get('todolist', \App\Http\Controllers\TodolistController::class)
    ->name('todolist');

    Route::get('addtodo-page',\App\Http\Controllers\Todolist\AddTodo\AddTodoPageController::class)
        ->name('addtodo-page');

    Route::post('todo/addtodo',\App\Http\Controllers\Todolist\AddTodo\AddTodoController::class)
        ->name('addtodo');

    Route::get('edittodo-page/{todoId}', \App\Http\Controllers\Todolist\EditTodo\EditTodoPageController::class)
        ->name('edittodo-page')->where('todoId', '[0-9]+');

    Route::put('todo/edittodo/{todoId}', \App\Http\Controllers\Todolist\EditTodo\EditTodoController::class)
        ->name('edittodo')->where('todoId', '[0-9]+');

    Route::delete('todo/delete/{todoId}', \App\Http\Controllers\Todolist\DeleteTodo\DeleteTodoController::class)
        ->name('deletetodo')->where('todoId', '[0-9]+');

    Route::put('todo/checktodo/{todoId}', \App\Http\Controllers\Todolist\CheckTodoController::class)
        ->name('checktodo')->where('todoId', '[0-9]+');

    Route::get('restoretodo-page', App\Http\Controllers\Todolist\RestoreTodo\RestoreTodoPageController::class)
        ->name('restoretodo-page');

    Route::put('todo/restoretodo/{todoId}', \App\Http\Controllers\Todolist\RestoreTodo\RestoreTodoController::class)
        ->name('restoretodo')->where('todoId', '[0-9]+');
});

前回までで作成したルーティングの記述を以下のミドルウェアでグループ化することで、囲われたルーティングのURLにアクセスする場合、ログインを求めるようになります。

Route::middleware('auth')->group(function (){
    // ログイン処理したいルーティング //
});

ログインしたアカウントのTodoのみを表示する

ここまでで、Todoアプリの操作にログインを要求できるようになりました。

前回までは、すべてのTodoが表示されてました。

ログインしたアカウントのTodoのみを表示できるようにします。

TodolistController.phpの修正

ログインしたアカウントの名前とTodoのみをDBから取得し、フロントエンドにデータとして渡すために、以下のような修正を加えます。

app/Http/Controllers/Todolist/TodolistController.php
public function __invoke(Request $request)
{
+    $user_id = Auth::id();
+    $user_name = Auth::user()->name;
-    $todolists = Todolist::where([['status', '=', 0]])->get();
+    $todolists = Todolist::where([['user_id', '=', $user_id], ['status', '=', 0]])->get();
-    return view('todolist.todolist')->with(['todolists' => $todolists]);
+    return view('todo.todolist')->with(['user_name'   => $user_name, 'todolists' => $todolists]);
}

動作確認

http://localhost/todolistにアクセスして、下の画像のように、ログインしたユーザー名が表示され、ユーザーのTodoが表示されていれば成功です。

  • 「Test User」でログインした場合

なお、新規作成したログインすると、画像のようにTodoが表示されていません。

  • 「ケンベル」でログインした場合

ログアウトボタンの実装

Todoアプリにログアウトボタンを実装します。

todolist-single.blade.phpの編集

ヘッダーの部分にログアウトボタンを実装します。

resources/views/components/layout/todolist-single.blade.php
<header class="flex fixed top-0 bg-green-500 w-full items-center">
    <h1>
        <a href={{ route('todolist') }} class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-10 h-10">
                <path d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" />
                <path d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" />
                <path d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" />
                </svg>
                <p class="text-2xl">Todoアプリ</p>
        </a>       
    </h1>
+    <nav class="flex-auto">
+        <ul class="flex mr-3 text-xl uppercase list-none justify-end">
+            <li class="ml-3 hover:text-gray-600">
+            <form method="POST" action="{{ route('logout') }}">
+                @csrf
+                <button onclick="event.preventDefault(); this.closest('form').submit();">
+                    ログアウト
+                </button>
+            </form>
+            </li>
+        </ul>
+    </nav>
</header>

localhostのアクセス先をtodolistにする

毎回http://localhost/todolistを直接入力するのは大変なので、
http://localhostアクセスしたときに、自動的にhttp://localhost/todolistにアクセスするようにします。

routes/web.php
- Route::get('/', function () {
-     return view('welcome');
- });
+ Route::redirect('/', 'todolist');

動作確認

http://localhostにアクセスして、Todoリストの一覧ページの右上にログアウトボタンが表示されているか確認します。

ログアウトボタンを押すとログイン画面に遷移することができれば成功です。

Todoの追加機能にアカウントIDを追加

これまでは、Todoの追加をする際に、アカウントのIDがなくても追加できるようになっていました。

今回は、アカウントごとにTodoを管理していきたいので、Todoの追加・編集の際にアカウントIDを付与できるようにコントローラーを編集します。

AddTodoRquest.phpの修正

新規登録するTodoにアカウントのIDを付与するために、リクエストにuserId()メソッドを追加します。

app/Http/Requests/Todolist/AddTodoRquest.php
    ////省略////
    public function userId() : int {
        return $this->user()->id;
    }

AddTodoController.phpの修正

Todo追加機能のコントローラーであるAddTodoController.phpを以下のように書き換えます。

app/Http/Controllers/Todolist/AddTodo/AddTodoController.php
public function __invoke(AddTodoRquest $request)
{
    $todo = new Todolist();
+    $todo->user_id = $request->userId();
    $todo->content = $request->content();
    $todo->deadline = $request->deadline();
    $todo->save();
    return redirect()->route('todolist');
}

これで、問題なくTodoを追加することができるはずです！

おわりに

今回は、ログイン機能の実装をしました！

次回は、アカウント情報の閲覧と退会機能を実装しようと思います！

ではでは！

Discussion