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 Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

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 App\Http\Livewire\User;

use App\Models\Profile;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;

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.