Laravel E-Commerce Project - Update User Profile

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

Let's explore how to achieve this. First, we need to create a new Livewire component.

Switch to the command prompt and run the following command:

php artisan make:livewire user/UserEditProfileComponent

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

 Route::get('/user/edit',UserEditProfileComponent)->name('user.profile_edit');

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

    namespace App\Http\Livewire\User;
    
    use App\Models\User;
    use Carbon\Carbon;
    use Illuminate\Support\Facades\Auth;
    use Livewire\Component;
    use Livewire\WithFileUploads;
    class UserEditProfileComponent extends Component
    {
            use WithFileUploads;
            public $name;
            public $email;
            public $mobile;
            public $image;
            public $line1;
            public $line2;
            public $city;
            public $province;
            public $country;
            public $zipcode;
            public $newimage;
            public function mount()
            {
                $user = User::find(Auth::user()->id);
                $this->name = $user->name;
                $this->email = $user->email;
                $this->mobile = $user->profile->mobile;
                $this->image = $user->profile->image;
                $this->line1 = $user->profile->line1;
                $this->line2 = $user->profile->line2;
                $this->city = $user->profile->city;
                $this->province = $user->profile->province;
                $this->country = $user->profile->country;
                $this->zipcode = $user->profile->zipcode;
            }
        public function updateProfile()
        {
            $user = User::find(Auth::user()->id);
            $user->name = $this->name;
            $user->save();
            $user->profile->mobile = $this->mobile;
            if($this->newimage)
            {
                if($this->image)
                {
                    unlink('assets/images/profile/'.$this->image);
                }
                $imageName = Carbon::now()->timestamp . '.' . $this->newimage->extension();
                $this->newimage->storeAs('profile',$imageName);
                $user->profile->image = $imageName;
            }
            $user->profile->line1 = $this->line1;
            $user->profile->line2 = $this->line2;
            $user->profile->city = $this->city;
            $user->profile->province = $this->province;
            $user->profile->country = $this->country;
            $user->profile->zipcode = $this->zipcode;
            $user->profile->save();
            session()->flash('message','Profile has been updated successfully!');
        }
        public function render()
        {
            return view('livewire.user.user-edit-profile-component')->layout('layouts.base');
        }
    }

Now lets open user-profile-component.blade.php file and here write the following code.

    <div class="container" style="padding: 30px 0">
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Update Profile 
                </div>
                <div class="panel-body">
                    @if(Session::has('message'))
                    <div class="alert alert-success" role="alert">
                        {{Session::get('message')}}</div>
                    @endif
                    <form wire:submit.prevent="updateProfile">
    
                        <div class="col-md-4">
                            @if($newimage) <img src="{{$newimage->temporaryUrl()}}" width="100%" />
                            @elseif($image) <img src="{{asset('assets/images/profile')}}/{{$user->profile->image}}"
                                width="100%" />
                            @else <img src="{{asset('assets/images/profile/default.jpg')}}" width="100%" />
                            @endif <input type="file" class="form-control" wire:model="newimage" />
                        </div>
                        <div class="col-md-8">
                            <p>
                                <b>Name: </b><input type="text" class="form-control" wire:model="name" />
                            </p>
                            <p>
                                <b>Email: </b>{{$email}}
                            </p>
                            <p>
                                <b>Phone: </b><input type="text" class="form-control" wire:model="mobile" />
                            </p>
                            <hr>
                            <p>
                                <b>Line1: </b><input type="text" class="form-control" wire:model="line1" />
                            </p>
                            <p>
                                <b>Line2: </b><input type="text" class="form-control" wire:model="line2" />
                            </p>
    
                            <p>
                                <b>City: </b><input type="text" class="form-control" wire:model="city" />
                            </p>
                            <p>
                                <b>Province: </b><input type="text" class="form-control" wire:model="province" />
                            </p>
                            <p>
                                <b>Country: </b><input type="text" class="form-control" wire:model="country" />
                            </p>
                            <p>
                                <b>Zip Code: </b><input type="text" class="form-control" wire:model="zipcode" />
                            </p>
                            <button type="submit" class="btn btn-info pull-right">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Alright, now go to the user-profile-component.blade.php view file. Here add link for update the profile.

    <a href="{{route('user.editprofile')}}" class="btn btn-info pull-right">Update Profile</a>

Now its done so lets check it. Switch to the browser and refresh the page. Now you can see here the update profile link. Now lets click on it.And here lets select the profile image, and enter mobile no and address details.Now click on update profile. And here you can profile updated. If I go to the profile page here you can profile has been updated.

So in this way you can Update User Profile.