DEV Community

loading...
Cover image for Add new field to user profile in Laravel 8

Add new field to user profile in Laravel 8

Arif Iqbal
PHP, WordPress, and WooCommerce Dev. Learning Laravel now.
・3 min read

Note: For this article, I suppose you already have installed a fresh copy of Laravel 8 with the Jetstream and Inertia authentication stack.

The default installation of Laravel has only two fields in the profile information section of a user profile. These two fields are the name and email fields as shown in the screenshot below:

Laravel user profile

To add a new field in this section, we need to go through the following steps. In this example, we are going to add a phone field to the profile.

Step 1: Add field to the UI

Go the file \resources\js\Pages\Profile\UpdateProfileInformationForm.vue and locate the HTML code segment for the email field. Duplicate this code for the new field and replace the email keywords with the phone.

<!-- Email -->
<div class="col-span-6 sm:col-span-4">
    <jet-label for="email" value="Email" />
    <jet-input id="email" type="email" class="mt-1 block w-full" v-model="form.email" />
    <jet-input-error :message="form.errors.email" class="mt-2" />
</div>

<!-- Phone -->
<div class="col-span-6 sm:col-span-4">
    <jet-label for="phone" value="Phone" />
    <jet-input id="phone" type="text" class="mt-1 block w-full" v-model="form.phone" />
    <jet-input-error :message="form.errors.phone" class="mt-2" />
</div>
Enter fullscreen mode Exit fullscreen mode

Further down the same file, add the new field to the form data. In the code snippet below, you can see I have added the line phone: this.user.phone below the email field line email: this.user.email.

data() {
    return {
        form: this.$inertia.form({
            _method: 'PUT',
            name: this.user.name,
            email: this.user.email,
            phone: this.user.phone,
            photo: null,
        }),

        photoPreview: null,
    }
},
Enter fullscreen mode Exit fullscreen mode

Now, run the npm run dev command so that the changes in the javascript file are compiled. With this, the UI part of your task is done. You can now see the new field added to your profile section.

new field added

Step 2: Update Database Schema

Now that we have added the new field to our UI, we need to add it to the database too. We will run a php artisan command to make a database migration file.

php artisan make:migration add_phone_to_users --table="users"
Enter fullscreen mode Exit fullscreen mode

Running this command will generate the migration file with the up() and down() methods as below.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddPhoneToUsers extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            //
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            //
        });
    }
}

Enter fullscreen mode Exit fullscreen mode

We then add our phone field in the up() method like this:

public function up()
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('phone')->after('email_verified_at')->nullable();
    });
}
Enter fullscreen mode Exit fullscreen mode

The up() method is called with the php artisan migrate command and the field is added to the database table, as shown in the screenshot below:

new field added to db

We need to add the field in the down() method too, for rollback option.

public function down()
{
    Schema::table('users', function (Blueprint $table) {
        $table->dropColumn('phone');
    });
}
Enter fullscreen mode Exit fullscreen mode

The down() method is called with the php artisan migrate:rollback command and the field is dropped from the database table.

Step 3: Add the implementation logic

The implementation logic goes in two files:

  1. The \app\Actions\Fortify\UpdateUserProfileInformation.php file
  2. And the \app\Models\User.php file

In the UpdateUserProfileInformation.php file, we need to update two functions, update() and updateVerifiedUser().

In the update() function, add the new field in two places, one in the validation array and the other in the array for the save function call as shown below.

add field to validation array

The other place in the same file is the function updateVerifiedUser as shown below:

add field to save function array

Next, we need to add the phone field into the fillable array of the User Model in app\Models\User.php file.

/**
 * The attributes that are mass assignable.
 *
 * @var array
 */
protected $fillable = [
    'name',
    'email',
    'password',
    'phone',
];
Enter fullscreen mode Exit fullscreen mode

That was it!

Side notes

Discussion (0)