Laravel E-Commerce Project - Create User Profile

In this video, we will learn how to create a user profile.

Let's explore how to achieve this. First, we need to create a model and migration for the profile.

Switch to the command prompt and run the following command:

php artisan make:model –m

Next, open the create_profile_table migration file and add some columns:

<?php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
class CreateProfilesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('profiles', function (Blueprint $table) {
            $table->id();
            $table->bigInteger('user_id')->unsigned();
            $table->string('image')->nullable();
            $table->string('mobile')->nullable();
            $table->string('line1')->nullable();
            $table->string('line2')->nullable();
            $table->string('city')->nullable();
            $table->string('province')->nullable();
            $table->string('country')->nullable();
            $table->string('zipcode')->nullable();
            $table->timestamps();
            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('profiles');
    }
}

Now, open the User model and create a new function:

public function profile()
{
	return $this->hasOne(Profile::class,'user_id');
}

Run the migration by switching to the command prompt and running the following command:

php artisan migrate

Create a new Livewire component for the user profile:

php artisan make:livewire user/UserProfileComponent

Open the web.php file and add a new route for the component inside the user middleware route group:

Route::get('/user/profile',UserProfileComponent::class)->name('user.profile');

Open the UserProfileComponent.php class file and write the following code:

<?php
namespace AppHttpLivewireUser;
use AppModelsProfile;
use AppModelsUser;
use IlluminateSupportFacadesAuth;
use LivewireComponent;
class UserProfileComponent extends Component
{
    public function render()
    {
        $userProfile = Profile::where('user_id',Auth::user()->id)->first();
        if(!$userProfile)
        {
            $profile = new Profile();
            $profile->user_id = Auth::user()->id;
            $profile->save();
        }
        $user = User::find(Auth::user()->id);
        return view('livewire.user.user-profile-component',['user'=>$user])->layout('layouts.base');
    }
}

Open the user-profile-component.blade.php view file and display the user profile details:

<div>
    <div class=`container` style=`padding: 30px 0`>
        <div class=`row`>
            <div class=`panel panel-default`>
                <div class=`panel-heading`>
                    Profile
                </div>
                <div class=`panel-body`>
                    <div class=`col-md-4`>
                        @if($user->profile->image)
                            <img src=`{{asset('assets/images/profile')}}/{{$user->profile->image}}` width=`100%` />
                        @else
                            <img src=`{{asset('assets/images/profile/default.jpg')}}` width=`100%` />
                        @endif
                    </div>
                    <div class=`col-md-8`>
                        <p><b>Name: </b>{{$user->name}}</p>
                        <p><b>Email: </b>{{$user->email}}</p>
                        <p><b>Phone: </b>{{$user->profile->mobile}}</p>
                        <hr>
                        <p><b>Line1: </b>{{$user->profile->line1}}</p>
                        <p><b>Line2: </b>{{$user->profile->line2}}</p>
                        <p><b>City: </b>{{$user->profile->city}}</p>
                        <p><b>Province: </b>{{$user->profile->province}}</p>
                        <p><b>Country: </b>{{$user->profile->country}}</p>
                        <p><b>Zip Code: </b>{{$user->profile->zipcode}}</p>                                             
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Go to the project directory, then open the public folder, and navigate to the assets folder. Inside the assets folder, create a new folder called profile.

Download a default profile image from Google and add it to the profile directory.

Open the base layout file and add a link to the user profile in the user menu:

<li class=`menu-item` >
	<a title=`My Profile` href=`{{ route('user.profile') }}`>My Profile</a>
</li>

Now, let's test the functionality. Switch to the browser and refresh the page. Go to the user menu and click on `My Profile`. You should see the user profile.

By following these steps, you can create a user profile. In the next video, we will learn how to update the profile.