フレームワーク

Laravelでユーザ更新画面を作成!!②(更新機能を付与)

フレームワーク

以下の記事の続きです。

前回は、更新画面の表示まででしたが、今回は更新動作まで実装していきたいと思います。

コントローラに関数追加

前回作成した「UsersController」クラスに以下の関数を追加します。

/**
 * ユーザ更新関数
 */
public function postEdit($id, Request $request)
{
    // フォームから渡されたデータの取得
    $user = $request->post();
        
    // DBへ更新依頼
    $this->user->updateUserFindById($user);
  
    // 再度編集画面へリダイレクト
    return redirect()->route('users.edit', ['id' => $id]);
}

「$this->user->updateUserFindById();」は後程作成する、ユーザ更新を行うモデルの関数です。

最終的に以下の様になっていればOKです。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Dao\User;

class UsersController extends Controller
{
    protected $user;

    /**
     * コンストラクタ
     */
    public function __construct(User $user)
    {
        $this->user = $user;
    }

    /**
     * 画面表示件データ一件取得用
     */
    public function getEdit($id)
    {
        $user = $this->user->selectUserFindById($id);
        return view('users.edit', compact('user'));
    }

    /**
     * ユーザ更新関数
     * 
     * @param unknown $id
     * @param Request $request
     * @return \Illuminate\Http\RedirectResponse
     */
    public function postEdit($id, Request $request)
    {
        // フォームから渡されたデータの取得
        $user = $request->post();
        
        // DBへ更新依頼
        $this->user->updateUserFindById($user);

        // 再度編集画面へリダイレクト
        return redirect()->route('users.edit', ['id' => $id]);
    }
}

モデルに関数を追加

前回作成した「User」クラス(Models/Dao/User.php)に以下の関数を追加します。

/**
 * IDで指定したユーザを更新する
 */
public function updateUserFindById($user)
{
    return $this->where([
        'id' => $user['id']
    ])->update([
        'name' => $user['name'],
        'email' => $user['email']
    ]);
}

このクラスはSQLのUPDATE文を発行する関数です。IDでどのレコードを更新するか指定し、update()の部分で更新するカラムとデータを指定しています。

最終的に以下の様になっていればOKです。

<?php
namespace App\Models\Dao;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Hash;

class User extends Model
{

    /**
     * IDから一件のデータを取得する
     */
    public function selectUserFindById($id)
    {
        // 「SELECT id, name, email WHERE id = ?」を発行する
        $query = $this->select([
            'id',
            'name',
            'email'
        ])->where([
            'id' => $id
        ]);
        // first()は1件のみ取得する関数
        return $query->first();
    }

    /**
     * IDで指定したユーザを更新する
     */
    public function updateUserFindById($user)
    {
        // 「UPDATE FROM users SET name = ?, email = ? WHERE id = ?」を発行する
        return $this->where([
            'id' => $user['id']
        ])->update([
            'name' => $user['name'],
            'email' => $user['email']
        ]);
    }
}

ルーティングの追加

更新用関数が作成できたので「routes/web.php」にルーティングを追加しなければいけません。
「Route::group([‘prefix’ => ‘users’], function() { ~~ });」に以下を追加してください。

Route::post('edit/{id}', 'UsersController@postEdit')->name('users.postEdit');

viewの修正

前回のformタグ部分が

<form action="" method="post">

となっていましたが、このままでは更新関数が実行されません。
以下の様に修正してみましょう。

<form action="{{ route('users.postEdit', ['id' => $user->id]) }}" method="post">

「users.postEdit」と指定することで更新ボタン押下時にUsersControllerのpostEdit関数にデータを送って動作させるようになっています。
また、[‘id’ => $user->id]と記述していることでpostEdit関数の第一引数の$idにデータ(ユーザID)を送っています。

最終的に以下の様になっていればOKです。

@extends('layouts.app') @section('content')
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">ユーザ編集</div>
        <div class="card-body">
          <form action="{{ route('users.postEdit', ['id' => $user->id]) }}" method="post">
            @csrf
            <p>ID: {{ $user->id }}</p>
            <input type="hidden" name="id" value="{{ $user->id }}" />
            <p>名前</p>
            <input type="text" name="name" value="{{ $user->name }}" />
            <p>メール</p>
            <input type="text" name="email" value="{{ $user->email }}" /><br />
            <input type="submit" value="更新" />
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

確認する

前回同様、apache,mysqlなど各種起動してログインしてください。
ログイン後に以下のアドレスにアクセスしてみましょう。
http://localhost/<プロジェクトフォルダ名>/public/users/edit/1
※idが1のユーザが存在していること
※apache等でルーティングを設定している方は「 /users/edit/1 」を意識してください

前回と同じく以下の様な画面になるはずです。

更新前データも確認しておきましょう。

テキストフォームの値を変更し更新ボタンを押してみましょう。

画面がリロードされたらOKです。本当は画面上部等に「更新しました」など表示するように実装したいですが今回は割愛します。このままだと解りにくいのでDBの方も見てみます。

更新されていますね。皆さんも同じように変更されましたら更新画面の完成です。

さいごに

今回はIDが1の画面でしか試していませんが複数のユーザを作って試してみましょう。

更新後にまた同じ更新画面を開くようになっています。システムによって一覧に移動したりと動作は変わってくるはずです。そういった仕様に合わせてリダイレクト等を使い、画面遷移をできるようにしましょう。
実際の業務では更にバリデーションなども実装していきます。メッセージの実装なども合わせるとこれだけでは済みませんが更新画面の基礎にはなるはずなので、ぜひ本記事を参考にしていただければと思います。

タイトルとURLをコピーしました