＜設計＞ユーザ編集画面・更新

概要

【PHP/Laravel】プログラミング初学者によるアプリケーション開発
https://qiita.com/AlpacaFace/items/b8e05a3da599815d8e31

上記トークアプリ開発の設計を説明します。

対象機能

• ユーザ編集画面・更新

基本設計

*** 【定義】 ***

・ユーザ編集画面・更新とは、
ログインした状態で、自分の名前をクリックすると、ユーザ情報の編集を行う画面が表示される。

*** 【画面仕様】 ***

・ユーザ情報の編集画面では、以下の情報が表示される。

ユーザ情報を編集する
[エラーを表示する場所]

[ユーザ名]

[メールアドレス]

[パスワード]

[パスワードの確認]

退会するボタン 更新するボタン

更新するボタンは作る。
退会するボタンはまだいらない。

今回は、ルーターとコントローラーで対応する。

*** 【操作権限】 ***

＜まとめ＞ユーザ編集画面と操作者のパーミッション

凡例　「 ○ 」 ...... 操作可能　／　「 - 」 ...... 操作不可

詳細設計

*** 【Router】 ***

コントローラを使う記述をルータに書いていく。

routes/web.php
web.php

// ユーザ情報編集画面
Route::get('/user/{id}', 'UsersController@edit')->name('user.edit');

*** 【Controller】 ***

コントローラを編集

app/Http/Controllers/UsersController.php

use App\User;

class UsersController extends Controller
{
public function edit($id)
    {
        $user = User::findOrFail($id);

        return view('users.edit', [
            'user' => $user,
        ]);
    }

    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    protected function update(array $data)
    {
        return User::store([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);
    }

}

*** 【View】 ***

resources/views/users/edit.blade.php
edit.blade.php

[ユーザ編集画面・更新のみ]------------------------------------------------------

@extends('layouts.app')
        
@section('content')

<h2 class="mt-5 mb-3">ユーザ情報を編集する</h2>
<div class="w-75 m-auto">@include('commons.error_messages')</div>
<form method="POST" action="{{ route(user.update) }}">
    @csrf
    <input type="hidden" name="id" value="" />
        <div class="form-group">
            <label for="name">ユーザ名</label>
            <input class="form-control" value="{{ old('name') }}" name="name" />
        </div>

        <div class="form-group">
            <label for="email">メールアドレス</label>
            <input class="form-control" value="{{ old('email') }}" name="email" />
        </div>

        <div class="form-group">
            <label for="password">パスワード</label>
            <input class="form-control" type="password" name="password" />
        </div>

        <div class="form-group">
            <label for="password_confirmation">パスワードの確認</label>
            <input class="form-control" type="password" name="password_confirmation" />
        </div>

        <div class="d-flex justify-content-between">
            <button type="submit" class="btn btn-primary">更新する</button>
        </div>
</form>

@endsection

Try & Error

＜開発＞ユーザ編集画面・更新
https://github.com/yukihiroLaravel/joint_develop/commits/feature/fukushi/user_edit_update