Zenn
🔰

LaravelでTodoリストを実装してみよう！～実装編７：アカウント情報の閲覧と退会機能の実装～

2024/10/04に公開
初心者
初心者向け
tech

はじめに

今回は、アカウント情報の閲覧と削除(退会)機能を実装していこうと思います。

アカウント情報閲覧機能の実装

ビューの作成

以下のコマンドを用いて、ビューを生成します。

sail artisan make:view todolist.userinfo

生成された、resources/views/todolist/userinfo.blade.phpを以下のように書き換えます。

resources/views/todolist/userinfo.blade.php
<x-layout.layout title="アカウント情報 | Todoアプリ">
    <x-layout.todolist-single>
        <div class="flex flex-col items-center">
            <div class="my-4 text-4xl font-extrabold text-green-500">
                アカウント情報
            </div>
            <div class="items-start">
                <div class="flex items-start">
                    <div class="flex text-xl max-w-36 w-full">ユーザー名</div>
                    <div class="flex ml-4 text-xl">
                        {{ $name }}
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="flex text-xl max-w-36 w-full">メールアドレス</div>
                    <div class="flex ml-4 text-xl">
                        {{ $email }}
                    </div>
                </div>
            </div>
            
            <div class="flex mt-4">
                <x-element.button-a :href="route('todolist')">一覧に戻る</x-element>
                <x-element.button-withdrawal></x-element.button-withdrawal>
            </div>
        </div>
    </x-layout.todolist-single>
</x-layout.layout>

コントローラーの作成

以下のコマンドを用いて、コントローラーを生成します。

sail artisan make:controller Todolist/User/UserInfoController --invokable

生成されたapp/Http/Controllers/Todolist/User/UserInfoController.phpを以下のように書き換えます。

app/Http/Controllers/Todolist/User/UserInfoController.php
public function __invoke(Request $request)
{
+    $user = Auth::user();
+    return view('todo.userinfo')->with(['name' => $user->name, 'email' => $user->email]);
}

ルーティング

routes/web.phpにuserinfoビューのルーティングを書き加えます。

routes/web.php
Route::middleware('auth')->group(function (){
   ////省略////
+ 　Route::get('userinfo-page', App\Http\Controllers\Todolist\User\UserInfoController::class)
+    ->name('userinfo-page');
});

退会機能の実装

退会ボタンの作成

続いて、退会ボタンを実装します。

退会ボタンの生成は、以下のコマンドを実行します。

sail artisan make:component element.button-withdrawal --view

生成されたresources/views/components/element/button-withdrawal.blade.phpを以下のように書き換えます。

resources/views/components/element/button-withdrawal.blade.php
<form action="{{ route('withdrawal') }}" method="POST" onclick="return confirm('アカウントを削除してもよろしいですか？\r\n※一度削除すると再度アカウントを登録する必要があります。');">
    @method('DELETE')
    @csrf
    <button type="submit" class="
    inline-flex justify-center
    ml-4
    py-2 px-4
    text-white bg-red-500 hover:bg-red-600 focus:ring-red-500
    border border-transparent
    shadow-sm
    text-lg
    font-medium
    rounded-md
    focus:outline-none focus:ring-2 focus:ring-offset-2">
    退会する
    </button>
</form>

コントローラーの作成

以下のコマンドを用いて、コントロールを生成します。

sail artisan make:controller Todolist/User/WithdrawalController --invokable

生成したコントローラを以下のように書き換えます。

app/Http/Controllers/Todolist/User/WithdrawalContriller.php
public function __invoke(Request $request)
{
+    $user_id = Auth::id();
+    $user = User::where('id', $user_id)->firstOrFail();
+    $user->delete();
+    return redirect()->route('todolist');
}

ルーティング

routes/web.phpに退会機能のルーティングを書き加えます。

routes/web.php
Route::middleware('auth')->group(function (){
    ////省略////
+    Route::delete('user/delete', \App\Http\Controllers\Todolist\User\WithdrawalController::class)
+        ->name('withdrawal');
});

おわりに

今回は、アカウント情報の閲覧と削除機能を実装しました！

次回は、管理者アカウントを専用の簡単な管理画面を作っていきたいと思います！

ではでは！

Discussion