How to add fields on the default Jetstream Registration Page in Laravel 8

Question

By default the registration page has name, email, password and confirm password on its form like the following:

<div class="container d-flex flex-column justify-content-between vh-100">
    <div class="row justify-content-center mt-5">
      <div class="col-xl-5 col-lg-6 col-md-10">
        <div class="card">
          <div class="card-header bg-primary">
            <div class="app-brand">
              <a href="/index.html">
              </a>
            </div>
          </div>
          <div class="card-body p-5">
            <h4 class="text-dark mb-5">Register</h4>
            <form method="POST" action="{{ route('register') }}">
              @csrf
  
              <div class="row">
                <div class="form-group col-md-12 mb-4">
                  <input type="text" name="name" :value="old('name')" required autofocus autocomplete="name" class="form-control input-lg" id="name" aria-describedby="nameHelp" placeholder="Name">
                  
                  @if ($errors->has('name'))
                  <span class="invalid-feedback">
                      <strong>{{ $errors->first('name') }}</strong>
                  </span>
                 @endif


                </div>
                <div class="form-group col-md-12 mb-4">
                  <input type="email" name="email" :value="old('email')" required class="form-control input-lg" id="email" aria-describedby="emailHelp" placeholder="Email">
                </div>
                <div class="form-group col-md-12 ">
                  <input type="password" name="password" required autocomplete="new-password" class="form-control input-lg" id="password" placeholder="Password">
                </div>
                <div class="form-group col-md-12 ">
                  <input type="password" name="password_confirmation" required autocomplete="new-password" class="form-control input-lg" id="cpassword" placeholder="Confirm Password">
                </div>
                <div class="col-md-12">

                  <input type="checkbox" name="terms" value="true" {{ !old('terms') ?: 'checked' }}>
                  <label>Do you agree to Terms & Conditions</label><br/><br/>


                  <button type="submit" class="btn btn-lg btn-primary btn-block mb-4">Sign Up</button>
                  <p>Already have an account?
                    <a class="text-blue" href="{{ route('login') }}">Sign in</a>
                  </p>
                </div>
              </div>
            </form>

          </div>
        </div>
      </div>

Then on the User Model we have the following fillable data:

protected $fillable = [
    'name',
    'email',
    'password',
];

Since I am a beginner with laravel, I want to add two fields and make sure that they are also saved in the database. I want to add the phone and date of birth fields.

I was wondering what are the steps to make in order to make this fillable and add them to the database?

Answer 1

You have two options to do it

1.Adding columns in fillable like below

 protected $fillable = [
        'name',
        'email',
        'password',
        'username',
         'phone',
       'date_of_birth'
    ];

2.using $guarded

 protected $guarded=['id'];

this will allow fillable all other than id

Add two inputs in blade file

<div class="form-group col-md-12 mb-4">
                  <input type="text" name="phone" :value="old('phone')" required autofocus autocomplete="phone" class="form-control input-lg" id="name" aria-describedby="nameHelp" placeholder="Phone">
                  
                  @if ($errors->has('phone'))
                  <span class="invalid-feedback">
                      <strong>{{ $errors->first('name') }}</strong>
                  </span>
                 @endif

   <div class="form-group col-md-12 mb-4">
                  <input type="text" name="date_of_birth" :value="old('date_of_birth')" required autofocus autocomplete="date_of_birth" class="form-control input-lg" id="name" aria-describedby="nameHelp" placeholder="Date Of Birth">
                  
                  @if ($errors->has('date_of_birth'))
                  <span class="invalid-feedback">
                      <strong>{{ $errors->first('name') }}</strong>
                  </span>
                 @endif

In App\Http\Controllers\Auth\RegisterController change method

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

If you need validation then you add that too

 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'],
            'phone' => ['required', 'number'],
            'date_of_birth' => ['required',],
        ]);
    }