Laravelでウィザード形式のユーザー登録を実装してみた

2021.01.18

以前railsで実装したことがあったのでlaravelでもやってみようと思いやってみました。

ページ転移していきながら、ユーザー登録していくやつです。ここで紹介する方法が100%正しいやり方ではないので、ご了承ください。

laravel7.x系になります。

大まかな流れを

モデル、マイグレーションファイルを作成。アソシエーションを設定。

ルーティングを設定。

コントローラーにアクションを設定。

ビューファイル作成。

上記のような流れで実装していきます。

モデル、マイグレーションファイルを作成

まずはユーザー、アドレス、電話番号のテーブル、を作成していきます。-mをつけてマイグレーションファイルも一緒に作成します。

php artisan make:model モデル名(exp: Address) -m

カラムについては適宜加えていってください。今回は説明のために少なくしてあります。

address
public function up()
   {
       Schema::create('addresses', function (Blueprint $table) {
           $table->id();
           $table->foreignId('user_id')->constrained();
           $table->string('post_code');
           $table->timestamps();
       });
   }

tel
public function up()
   {
       Schema::create('tels', function (Blueprint $table) {
           $table->id();
           $table->foreignId('user_id')->constrained();
           $table->string('number');
           $table->timestamps();
       });
   }

public function up()
   {
       Schema::create('users', function (Blueprint $table) {
           $table->id();
           $table->string('name');
           $table->string('email', 191)->unique();
           $table->timestamp('email_verified_at')->nullable();
           $table->string('password', 191);
           $table->rememberToken();
           $table->timestamps();
       });
   }

php artisan migrate

上記がうまく行かなかったら

php artisan migrate:fresh

それぞれカラムを追加していきました。次はモデルに記述を加えていきます。1対1のリレーションを書いていきます。

Userモデル

   protected $fillable = [
       'name', 'email', 'password', 'name'
   ];   
   
   public function address()
   {
       return $this->hasOne('App\Address');
   }

   public function tel()
   {
       return $this->hasOne('App\Tel');
   }

Telモデル
   protected $fillable = ['user_id', 'number'];

   public function user()
   {
       return $this->belongsTo('App\User');
   }

   protected $fillable = ['user_id', 'post_code'];

   public function user()
   {
       return $this->belongsTo('App\User');
   }

上記が書けたらモデルの設定は完了です。

ルーティングを設定

意外と大事な部分です。

基本的にpostアクションだけ用意しておいて、書き込みをするviewはアクションを設定したりrouteを書いたりすることはありません。

viewファイルとpostアクションだけ用意していくイメージです。

Auth::routes();
Route::post('/register/address', 'Auth\RegisterController@create_address')->name('create_address');
Route::post('/register/tel', 'Auth\RegisterController@create_tel')->name('create_tel');
Route::post('/register/user', 'Auth\RegisterController@create_do')->name('create_do');

ビューファイル作成

大事な部分はactionでどこに送るかを正しくしてすることです。routeではpostアクションにしているのでmethodはpostにしておきましょう。

ユーザー情報入力
<form method="POST" action="{{ route('create_address') }}">
  @csrf
  <input type="text" class="form-control name="name" value="{{ old('name') }}">
  <div class="form-group row mb-0">
      <div class="col-md-6 offset-md-4">
          <button type="submit" class="btn btn-primary">
              {{ __('住所登録へ') }}
          </button>
       </div>
  </div>
</form>

住所登録
<form method="POST" action="{{ route('create_tel') }}">
  @csrf
  <input type="text" class="form-control name="post_code" value="{{ old('post_code') }}">
  <div class="form-group row mb-0">
      <div class="col-md-6 offset-md-4">
          <button type="submit" class="btn btn-primary">
              {{ __('電話番号登録へ') }}
          </button>
       </div>
  </div>
</form>

電話番号登録
<form method="POST" action="{{ route('create_do') }}">
  @csrf
  <input type="text" class="form-control name="number" value="{{ old('number') }}">
  <div class="form-group row mb-0">
      <div class="col-md-6 offset-md-4">
          <button type="submit" class="btn btn-primary">
              {{ __('登録する') }}
          </button>
       </div>
  </div>
</form>

コントローラーにアクションを設定

Session::putを使用して次のページに飛ばす時に情報を渡しています。渡す情報については$requestから取得しています。

use Session;の宣言も忘れずにつけましょう。

use App\User;
use App\Address;
use App\Tel;
use Session;
use Illuminate\Support\Facades\Auth;


。。。省略


   protected function create_address(Request $request)
   {
       $user = new User();
       
       $user->name = $request->name;
       $user->email = $request->email;
       $user->password = $request->password;
       Session::put('user', $user);
       return view('auth.address');
   }

   public function create_tel(Request $request) 
   {
       $address = new Address();
       $address->post_code = $request->post_code;
       Session::put('address', $address);
       return view('auth.tel');
   }

   public function create_do(Request $request)
   {
       $all = Session::all();
       $user = new User();
       $user->name = $all['user']->name;
       $user->email = $all['user']->email;
       $user->password = $all['user']->password;
       $user->save();

       $address = new Address();
       $address->post_code = $all['address']->post_code;
       $address->user_id = $user->id;
       $address->save();

       $tel = new Tel();
       $tel->number = $request->number;
       $tel->user_id = $user->id;
       $tel->save();
       
       Auth::login($user);
       return redirect()->route('home');
   }

eval(\Psy\sh());を使ったりしながら値が正しく送られているか確認しながら進むと良いかと思います。

$all = Session::all();
$all['user']->name;
みたいな感じで取得できます。

Auth::login($user);
return redirect()->route('home');

最後にユーザーをログインさせて、homeにリダイレクトすれば完成です。右上にユーザー名が表示される形になるかと思います。

ポイント

ルーティングの設定。

このフォームからどこに飛ばすのか？

sessionの保存

$requestで取得した情報をSession::putでsessionに追加していく。

return view()

飛ばされた先のアクションではreturn viewを使いページ転移する。

eval(\Psy\sh());

これでデバックしながら値を確認する。$all[‘user’]->name;で取得する。

以上が記述できればうまく処理されます。

なんか惜しいとこ

sessionをputする部分と最後に保存する部分でnewを3回しているのがあんまりかっこよくないなと。最初はnewしたくないけど、オブジェクトで渡したいな。

なんかうまくできないかな〜と。。。(もし参考になるようなものがあれば教えていただきたいです。)

まとめ

最初に想像していたより軽く実装できました。

やっている事はsessionに保存しながら、view転移していき最後にまとめて保存するといった流れです。

routeの設定やactionの指定を正しく出来れば流れは作れるかと思います。

バリデーションとかも実装していけば完成度も上げていけそうです！

それにしても今日は暑かった。。。30度超えてくると飼っている猫ちゃん達が床で横にダラーンと溶けて伸びてますw

今日は夜運動してから寝ようと思います。

今回はそんな感じで！

以上！

programing-note

書いた人

勝野天欄

Tenra Katsuno