やりたいこと
Laravel に最初から用意されているログイン機能を自由にカスタマイズできるようになりたい。
今回はユーザー登録時の登録項目を増やしたいと思います。
【デフォルトのユーザー登録画面】
名前、メールアドレス、パスワードが登録できます。
環境
CentOS: 7.4
Apache: 2.4
MySQL: 5.7
PHP: 7.2
Laravel: 5.6
下準備
ターミナルで以下の２つを叩きます。
php artisan make:auth
これで認証関連のルートやらビューやらを一発で作ってくれます。
php artisan migrate
これで Laravel 標準装備の Users テーブルを作ってくれます。
テーブルに新しいカラム（列）を追加
今回は Users テーブルに性別と年齢の項目を増やしてみたいと思います。
まずはマイグレーションファイルを作成。
コマンドを叩きます。
php artisan make:migration add_column_to_users_table
先ほど作ったマイグレーションファイルを編集します。
public function up()
{
Schema::table('users', function(Blueprint $table) {
$table->string('gender');
$table->integer('age');
});
}
最後にマイグレーションファイルを実行します。
php artisan migrate
これで users テーブルに gender と age のカラムが追加されたかと思います。
ビューの編集
こんな感じで Gender と Age の入力欄を追加します。
最初から用意されている Name などのフォーム部分をコピペして中身を書き換えます。
<!-- 省略 -->
<!-- 性別の入力欄 -->
<div class="form-group row">
<label for="gender" class="col-md-4 col-form-label text-md-right">Gender</label>
<div class="col-md-6" style="padding-top: 8px">
<input id="gender-m" type="radio" name="gender" value="male">
<label for="gender-m">Male</label>
<input id="gender-f" type="radio" name="gender" value="female">
<label for="gender-f">Female</label>
@if ($errors->has('gender'))
<span class="invalid-feedback">
<strong>{{ $errors->first('gender') }}</strong>
</span>
@endif
</div>
</div>
<!-- 年齢の入力欄 -->
<div class="form-group row">
<label for="age" class="col-md-4 col-form-label text-md-right">Age</label>
<div class="col-md-6">
<input id="age" type="number" min="1" class="form-control{{ $errors->has('age') ? ' is-invalid' : '' }}" name="age" value="{{ old('age') }}" required>
@if ($errors->has('age'))
<span class="invalid-feedback">
<strong>{{ $errors->first('age') }}</strong>
</span>
@endif
</div>
</div>
<!-- 省略 -->
モデルの編集
コントローラーの編集に入る前にちょこっとモデルを編集します。
User モデル内の $fillable に先ほど追加した２項目を追加します。
protected $fillable = [
'name', 'gender', 'age', 'email', 'password',
];
DB への登録を許可するためにはホワイトリスト $fillable に項目を追加する必要があります。
詳しく知りたい方は以下のサイトが参考になるかと思います。
コントローラーの編集
バリデーション
追加した２項目のバリデーションを設定します。
ここらへんの設定は自由に行っていただければと思います。
protected function validator(array $data)
{
return Validator::make($data, [
'name' => 'required|string|max:255',
'gender' => 'required',
'age' => 'required|integer',
'email' => 'required|string|email|max:255|unique:users',
'password' => 'required|string|min:6|confirmed',
]);
}
DB への保存
特に何も考えず、gender と age を登録できるように追加しましょう。
protected function create(array $data)
{
return User::create([
'name' => $data['name'],
'gender' => $data['gender'],
'age' => $data['age'],
'email' => $data['email'],
'password' => Hash::make($data['password']),
]);
}
ユーザー登録してみる
項目を埋めてポチっとな。
正常にログインできました。
次にバリデーション機能を確認するために、性別をわざと未入力で登録してみます。
ポチっとな。
あれ、確かに DB からはじかれてるけどエラーメッセージが出ない...。
$errors の中身を確認すると確かにエラーメッセージは吐き出されてます。
"The gender field is required."
HTML を確認してみると、エラーメッセージを囲っている <span> タグがなぜか display: none; になってました。
原因はわからなかったですが、とりあえず <span style="display:inline;"> とインライン指定してあげたところ正常にエラーメッセージが表示されました。
う～ん、原因わかるひとがいたら教えていただけると助かります_(._.)_
今日はここまで。