前回記事「Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃6：ミドルウェアの設定と認証ページ作成」では、ログインユーザーのマイページとして認証ページの作成を行いましたが、今回はその続きでマイページからユーザー情報の編集ができるデータベースの更新処理や、ユーザーのIDに合わせてルーティングを動的に制御する方法を見ていきます。   この記事では、ログイン用のテストユーザーが作成されており、基本的なアプリケーションの環境構築が出来上がっている前提で進めていきます。これまでの内容については過去記事等をご参考ください。 （これまでの内容はこちらの記事から） Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃1：Docker環境構築 Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃2：Laravelのインストール Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃3：静的ページの作成とルーティング Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃4：ログイン認証ユーザー作成 Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃5：ログイン認証機能の実装 Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃6：ミドルウェアの設定と認証ページ作成    

1. ユーザーマイページの動的ルーティングの設定

現状ではユーザーのマイページが固定ルーティングのため、ログインユーザーことにマイページを共有する必要があります。そこでURLにユーザー固有のIDを含む動的なルーティングになるよう変更していきます。下記のようにルーティングへidという名前のパラメータを渡す形に変更していきます。こうすることで、Controller側で変数として扱えるようになります。 【routes/web.php】※一部抜粋

Route::middleware(['admin_auth'])->group(function () {
  // admin user mypage
  Route::get('/admin/{id}', 'AdminController@index')->name('admin');
});

  これで、マイページのURLは「http://localhost:8000/admin/ユーザーID」という形で扱えるようになります。    

2. 動的ルーティング実装に伴いControllerの編集

動的ルーティングの設定が終わるとControllerの方でパラメーターを変数として受けとり、その変数をもとにログインユーザーの情報を取得し、View側へ情報として受け渡していきます。受け取るパラメーター名がそのまま変数名になりますので、その値であるユーザーのIDを「findOrFail()」メソッドでデータベースから検索します。同じく「find()」メソッドもありますが、findOrFail()メソッドの場合、見つからなければそのまま404エラーが返ってくるのでこちらを採用します。 【app/Http/Controllers/AdminController.php】

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Models\AdminUsers;

class AdminController extends Controller
{
  public function index($id) {
    $admin_user = AdminUsers::findOrFail($id);
    return view('admin.index')->with([
      'admin_user' => $admin_user
    ]);
  }
}

  上記の通り、動的ルーティングによりURLが変わるので、routeメソッドでリンクを設定している場合には、第二引数でパラメーターの値を入れるように変更していきます。

// 変更前
<a href="{{ route('admin') }}">ユーザーマイページ</a>

↓

// 変更後
<a href="{{ route('admin', $admin_user['id']) }}">ユーザーマイページ</a>

  この際にView側でユーザー情報を持っていない場合にはエラーとなるので、Controller側からユーザー情報を受け渡しておきます。 【app/Http/Controllers/HomeController.php】

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Support\Facades\Auth;

class HomeController extends Controller
{
  public function index() {
    $admin_user = Auth::user();
    return view('home.index')->with([
      'admin_user' => $admin_user
    ]);
  }
}

  これでユーザーIDに合わせて個別のマイページのルーティングが完成しました。URLにユーザーIDを含むようになり、ユーザーごとに専用のURLが用意されるようになります。

// 固定ルーティング
http://localhost:8000/admin/

↓

// 動的ルーティング
http://localhost:8000/admin/1

   

3. ユーザー情報編集ページ用Viewファイル作成

次はユーザー情報の編集ページを作成していきます。まずはViewファイルとなるBladeのテンプレートを作成していきます。ユーザーマイページのトップである「index.blade.php」に対して「edit.blade.php」というファイルを作成していきます。

$ touch resources/views/admin/edit.blade.php

  ディレクトリ構成は下記のようになります。ここからこれまで同様にControllerとルーティングの設定、ページテンプレートを作り込んでいきます。

resources
  ┣ views
    ┣ admin
      ┣ index.blade.php （ユーザー情報確認ページ）
      ┗ edit.blade.php （ユーザー情報編集ページ）

   

4. ユーザー情報編集ページ表示の処理をControllerへ追記

Viewファイルができたら、それを表示させるための処理をControllerに追加していきます。ユーザーマイページ同様にURLのパラメーターであるIDを使って、データベースからユーザーデータを取得し、View側へ受け渡しておきます。 【app/Http/Controllers/AdminController.php】※一部省略

.......

class AdminController extends Controller
{
  .......

  public function edit($id) {
    $admin_user = AdminUsers::findOrFail($id);
    return view('admin.edit')->with([
      'admin_user' => $admin_user
    ]);
  }
}

   

5. ユーザー情報編集ページ表示のルーティングを追加

次にユーザー情報編集ページのルーティングを設定していきます。こちらもユーザーマイページ同様にユーザーIDがURLに含まれる動的ルーティングとして処理できるようにしていきます。 【routes/web.php】※一部抜粋

<?php

use Illuminate\Support\Facades\Route;

.......
Route::middleware(['admin_auth'])->group(function () {
  // admin user mypage
  Route::get('/admin/{id}', 'AdminController@index')->name('admin');

  // admin user edit
  Route::get('/admin/{id}/edit', 'AdminController@edit')->name('admin-edit');
});

  この際に、合わせてユーザーマイページのテンプレート内にユーザー情報編集ページへのリンクを追加しておき、ユーザー情報編集ページへの動線を用意しておきます。 【resources/views/admin/index.blade.php】※一部抜粋

.......
@section('content')
  <main>
    <h1>マイページ</h1>
    <table>
      <tbody>
        <tr>
          <th>ID</th>
          <td>{{ $admin_user['id'] }}</td>
        </tr>
        <tr>
          <th>メールアドレス</th>
          <td>{{ $admin_user['email'] }}</td>
        </tr>
        <tr>
          <th>ユーザー名</th>
          <td>{{ $admin_user['name'] }}</td>
        </tr>
        <tr>
          <th>登録日</th>
          <td>{{ $admin_user['created_at']->format('Y年m月d日') }}</td>
        </tr>
        <tr>
          <th>最終更新日</th>
          <td>{{ $admin_user['updated_at']->format('Y年m月d日') }}</td>
        </tr>
      </tbody>
    </table>
    <a href="{{ route('admin-edit', $admin_user['id']) }}">編集する</a>
  </main>
@endsection
.......

   

6. ユーザー情報編集ページのページテンプレートとデータベース更新フォームの作成

ユーザー情報の編集ですが、フォームに入力した値をデータベースに更新していく形になるので、そのために必要なフォームを作成していきます。この際に重要なのは、formからはHTTPのPUTメソッドを使うことで、データベースに登録されている値を上書き更新していくのですが、form要素の属性には「POST」と指定し、Laravelのディレクティブで「@method('PUT')」とする形にしておきます。合わせて「@csrf」も追加しておき、CSRF対策も行います。 【resources/views/admin/edit.blade.php】※一部抜粋

.......
@section('content')
  <main>
    <h1>ユーザー情報編集</h1>
    <form action="{{ route('admin-edit', $admin_user['id']) }}" method="POST">
      @method('PUT')
      @csrf
      <table>
        <tbody>
          <tr>
            <th>ID</th>
            <td>{{ $admin_user['id'] }}</td>
          </tr>
          <tr>
            <th>メールアドレス</th>
            <td>
              <input type="email" name="email" value="{{ $admin_user['email'] }}">
            </td>
          </tr>
          <tr>
            <th>ユーザー名</th>
            <td>
              <input type="text" name="name" value="{{ $admin_user['name'] }}">
            </td>
          </tr>
        </tbody>
      </table>
      <input type="submit" value="更新する">
    </from>
  </main>
@endsection
.......

  それ以外は、各フォーム要素のname属性の値がユーザー情報を受け取る際のキーになるので、合わせて設定しておき、フォームの初期値にはデータベースに登録されているユーザー情報が入るようにしておきます。    

7. ユーザー情報編集処理の追加とルーティングの設定

フォームは出来上がりましたが、まだデータベースへの更新ができない状況ですので、Controllerでデータベースの更新処理を追加していきます。データベース更新用の処理を追加し、その中でユーザー情報編集ページからフォームに入力された値を受け取り、「save()」メソッドを使うことで、データベースに保存するようにしていきます。保存ができたら、そのままユーザーマイページにリダイレクトされるようにします。 【app/Http/Controllers/AdminController.php】※一部省略

.......

class AdminController extends Controller
{
  .......

  public function update(Request $request, $id) {
    $admin_user = AdminUsers::findOrFail($id);
    $admin_user->name = $request->input('name');
    $admin_user->email = $request->input('email');
    $admin_user->save();
    return redirect(route('admin', $admin_user['id']))->with(['message' => 'ユーザー情報を更新しました']);
  }
}

  Controller側で作成した上記処理を呼び出すためにルーティングを追加します。ここではユーザー情報編集ページに対して、PUTメソッドを使っているので、Route::get()メソッドではなく、「Route::put()」メソッドで設定していきます。 【routes/web.php】※一部抜粋

<?php

use Illuminate\Support\Facades\Route;

.......
Route::middleware(['admin_auth'])->group(function () {
  // admin user mypage
  Route::get('/admin/{id}', 'AdminController@index')->name('admin');

  // admin user edit
  Route::get('/admin/{id}/edit', 'AdminController@edit')->name('admin-edit');
  Route::put('/admin/{id}/edit', 'AdminController@update')->name('admin-update');
});

  これでひとまずはデータベースに登録されているユーザー情報を更新できるようになります。ただ、バリデーション処理がないので、値が空でも登録できたり、入力値のフォーマットが誤った状態で更新される可能性もあります。そのためバリデーション処理を追加する必要があります。    

8. バリデーション処理の追加

フォームの入力値に対してバリデーションを適用できるようにしていきます。Controller側にあるデータベースの更新処理に、「Validator::make()」メソッドでバリデーションを行っていきます。このメソッドで第二引数にバリデーションルール、第三引数にバリデーションメッセージをそれぞれ連想配列の形で指定していきます。今回は必須入力とメールアドレスの形式チェックを適用していきます。 【app/Http/Controllers/AdminController.php】※一部省略

.......
use Illuminate\Support\Facades\Validator;
use App\Models\AdminUsers;

class AdminController extends Controller
{
  .......
  public function update(Request $request, $id) {
    $validate = Validator::make($request->all(), [
        'name' => ['required'],
        'email' => ['required', 'email'],
      ],
      [
        'name.required' => 'ユーザー名を入力してください',
        'email.required' => 'メールアドレスを入力してください',
        'email.email' => 'メールアドレスの形式が異なります',
      ]
    );
    if($validate->fails()) {
      return back()->withErrors($validate->messages());
    }
    $admin_user = AdminUsers::findOrFail($id);
    $admin_user->name = $request->input('name');
    $admin_user->email = $request->input('email');
    $admin_user->save();
    return redirect(route('admin', $admin_user['id']))->with(['message' => 'ユーザー情報を更新しました']);
  }
}

  バリデーションルールにマッチしない場合には、エラーメッセージを受け渡してそのままユーザー編集ページを再表示されるようにします。このエラーメッセージはフォームがあるユーザー情報編集ページで表示させることができます。   フォーム側でバリデーションのエラーメッセージを表示させるように「@error」ディレクティブを使ってメッセージ部分の要素を追加していきます。 【resources/views/admin/edit.blade.php】※一部抜粋

.......
@section('content')
  <main>
    <h1>ユーザー情報編集</h1>
    <form action="{{ route('admin-edit', $admin_user['id']) }}" method="POST">
      @method('PUT')
      @csrf
      <table>
        <tbody>
          <tr>
            <th>ID</th>
            <td>{{ $admin_user['id'] }}</td>
          </tr>
          <tr>
            <th>メールアドレス</th>
            <td>
              <input type="email" name="email" value="{{ $admin_user['email'] }}">
              @error('email')
                <p style="color: red;">{{ $message }}</p>
              @enderror
            </td>
          </tr>
          <tr>
            <th>ユーザー名</th>
            <td>
              <input type="text" name="name" value="{{ $admin_user['name'] }}">
              @error('name')
                <p style="color: red;">{{ $message }}</p>
              @enderror
            </td>
          </tr>
        </tbody>
      </table>
      <input type="submit" value="更新する">
    </from>
  </main>
@endsection
.......

  実際にバリデーションルールにマッチしない場合には、ログイン画面同様にエラーメッセージが表示され、データベースへの更新処理は行われないままになることが確認できます。  

---

  今回はユーザーマイページからユーザー情報を更新するケースを例に、データベース更新処理を作成していきました。このようにデータベースから特定の値を取得して、その値を更新するというのはウェブアプリケーションでも基本的な機能になります。また動的ルーティングについても、ブログサイトなどページを動的に増やしていく際には必須となるので合わせて覚えておきたいですね。   （これまでの内容はこちらの記事から） Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃1：Docker環境構築 Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃2：Laravelのインストール Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃3：静的ページの作成とルーティング Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃4：ログイン認証ユーザー作成 Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃5：ログイン認証機能の実装 Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃6：ミドルウェアの設定と認証ページ作成