Web Applications in PHP

Appearance

Customize the register page ​

  • The default register page is very basic (name, email and password fields)
  • In this chapter we will add one extra field (phone) to the register page, but you can add as many fields as you want
  • Watch the video below to see how it works

Add the phone field to database ​

  • Open the database/migrations/2014_10_12_000000_create_users_table.php file and add the phone-field to migration
php
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->string('phone')->nullable();    
        ...
    });
}
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->string('phone')->nullable();    
        ...
    });
}
  • Run the migration to update the database
bash
php artisan migrate:fresh
php artisan migrate:fresh
  • Open the app/Models/User.php file and add the phone-field to the fillable array
php
protected $fillable = [
    'name',
    'email',
    'password',
    'active',
    'admin',
    'phone',        
];
protected $fillable = [
    'name',
    'email',
    'password',
    'active',
    'admin',
    'phone',        
];

Add the phone field to the register form ​

  • Open the resources/views/auth/register.blade.php file and add the phone-field to the form
php
<form method="POST" action="{{ route('register') }}">
    @csrf

    <div>
        <x-label for="name" value="{{ __('Name') }}" />
        <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
    </div>

    <div class="mt-4">
        <x-label for="email" value="{{ __('Email') }}" />
        <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
    </div>

    <div class="mt-4">      
        <x-label for="phone" value="{{ __('Phone') }}" />
        <x-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required />
    </div>
    ...
</form>
<form method="POST" action="{{ route('register') }}">
    @csrf

    <div>
        <x-label for="name" value="{{ __('Name') }}" />
        <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
    </div>

    <div class="mt-4">
        <x-label for="email" value="{{ __('Email') }}" />
        <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
    </div>

    <div class="mt-4">      
        <x-label for="phone" value="{{ __('Phone') }}" />
        <x-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required />
    </div>
    ...
</form>
  • The code behind this form has to validate the phone field and store the phone number in the database
  • Open the app/Actions/Fortify/CreateNewUser.php file and add the phone-field to the validation rules and to the create method
    • The phone-field is optional, so we don't add the required rule
    • But if it is filled in, it must be a string with a minimum of 9 characters and a maximum of 20 characters
php
public function create(array $input)
{
    Validator::make($input, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'phone' => 'min:9|max:20',     
        'password' => $this->passwordRules(),
        'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['accepted', 'required'] : '',
    ])->validate();

    return User::create([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'],     
        'password' => Hash::make($input['password']),
    ]);
}
public function create(array $input)
{
    Validator::make($input, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'phone' => 'min:9|max:20',     
        'password' => $this->passwordRules(),
        'terms' => Jetstream::hasTermsAndPrivacyPolicyFeature() ? ['accepted', 'required'] : '',
    ])->validate();

    return User::create([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'],     
        'password' => Hash::make($input['password']),
    ]);
}

Register page validation error

Update the user profile page ​

  • After a successful registration, the user can update his profile, and we have to add the phone-field to this page
  • Open the resources/views/profile/update-profile-information-form.blade.php file and add the phone-field to the form
php
<!-- Name -->
<div class="col-span-6 sm:col-span-4">
    <x-label for="name" value="{{ __('Name') }}" />
    <x-input id="name" type="text" class="mt-1 block w-full" wire:model="state.name" autocomplete="name" />
    <x-input-error for="name" class="mt-2" />
</div>

<!-- Email -->
<div class="col-span-6 sm:col-span-4">
    <x-label for="email" value="{{ __('Email') }}" />
    <x-input id="email" type="email" class="mt-1 block w-full" wire:model="state.email" />
    <x-input-error for="email" class="mt-2" />

    @if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::emailVerification()) && ! $this->user->hasVerifiedEmail())
        ...
    @endif
</div>

<!-- Phone -->          
<div class="col-span-6 sm:col-span-4">
    <x-label for="phone" value="{{ __('Phone') }}" />
    <x-input id="phone" type="text" class="mt-1 block w-full" wire:model="state.phone" />
    <x-input-error for="phone" class="mt-2" />
</div>
<!-- Name -->
<div class="col-span-6 sm:col-span-4">
    <x-label for="name" value="{{ __('Name') }}" />
    <x-input id="name" type="text" class="mt-1 block w-full" wire:model="state.name" autocomplete="name" />
    <x-input-error for="name" class="mt-2" />
</div>

<!-- Email -->
<div class="col-span-6 sm:col-span-4">
    <x-label for="email" value="{{ __('Email') }}" />
    <x-input id="email" type="email" class="mt-1 block w-full" wire:model="state.email" />
    <x-input-error for="email" class="mt-2" />

    @if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::emailVerification()) && ! $this->user->hasVerifiedEmail())
        ...
    @endif
</div>

<!-- Phone -->          
<div class="col-span-6 sm:col-span-4">
    <x-label for="phone" value="{{ __('Phone') }}" />
    <x-input id="phone" type="text" class="mt-1 block w-full" wire:model="state.phone" />
    <x-input-error for="phone" class="mt-2" />
</div>

Update profile page with phone field

  • And, of course, we have to validate the phone-field and update the database on the backend
  • Open the app/Actions/Fortify/UpdateUserProfileInformation.php file and update the code
php
...
Validator::make($input, [
    'name' => ['required', 'string', 'max:255'],
    'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($user->id)],
    'phone' => 'min:9|max:20',   
    'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024'],
])->validateWithBag('updateProfileInformation');
...
protected function updateVerifiedUser($user, array $input)
{
    $user->forceFill([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'],    
        'email_verified_at' => null,
    ])->save();

    $user->sendEmailVerificationNotification();
}
...
Validator::make($input, [
    'name' => ['required', 'string', 'max:255'],
    'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($user->id)],
    'phone' => 'min:9|max:20',   
    'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024'],
])->validateWithBag('updateProfileInformation');
...
protected function updateVerifiedUser($user, array $input)
{
    $user->forceFill([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'],    
        'email_verified_at' => null,
    ])->save();

    $user->sendEmailVerificationNotification();
}

Update profile page validation error

Conclusion ​

As you can see, it is very easy to add extra fields to the registration form and the user profile page. All you have to do is:

  1. Add the extra fields to the users migration in the database/migrations/2014_10_12_000000_create_users_table.php file
  2. Add the fields to the fillable array in the app/Models/User.php file
  3. Add the fields to the register form in the resources/views/auth/register.blade.php file
  4. Add the fields to the validation rules in the app/Actions/Fortify/CreateNewUser.php file and to the create method
  5. Add the fields to the update profile form in the resources/views/profile/update-profile-information-form.blade.php file
  6. Add the fields to the validation rules in the app/Actions/Fortify/UpdateUserProfileInformation.php file and to the forceFill method

Last updated:

© 2023 - Vince Colson, Jordi De Roeck & Patrick Verhaert