Laravel Home Services Project - Update Service Provider's Profile
In this video, we will learn about updating a service provider's profile in our Laravel project.
Let's see how we can update a service provider's profile.
First, let's create a new Livewire component.
So, go to the command prompt and run the following command:
php artisan make:livewire Sprovider/EditSproviderProfileComponent
Now, run the application:
php artisan serve
Switch to the project and let's create a route for this component.
So, go to the web.php file and create a route in the service provider middleware route group:
Route::get('/sprovider/profile/edit',EditSproviderProfileComponent::class)->name('sprovider.edit_profile');
Now, let's open the EditSproviderProfileComponent.php class file and add the following code:
<?php
namespace App\Http\Livewire\Sprovider;
use App\Models\ServiceCategory;
use App\Models\ServiceProvider;
use Carbon\Carbon;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
use Livewire\WithFileUploads;
class EditSproviderProfileComponent extends Component
{
use WithFileUploads;
public $service_provider_id;
public $image;
public $about;
public $city;
public $service_category_id;
public $service_locations;
public $newimage;
public function mount()
{
$sprovider = ServiceProvider::where('user_id',Auth::user()->id)->first();
$this->service_provider_id = $sprovider->id;
$this->image = $sprovider->image;
$this->about = $sprovider->about;
$this->city = $sprovider->city;
$this->service_category_id = $sprovider->service_category_id;
$this->service_locations = $sprovider->service_locations;
}
public function updateProfile()
{
$sprovider = ServiceProvider::where('user_id',Auth::user()->id)->first();
if($this->newimage)
{
$imageName = Carbon::now()->timestamp . '.' . $this->newimage->extension();
$this->newimage->storeAs('sproviders',$imageName);
$sprovider->image = $imageName;
}
$sprovider->about = $this->about;
$sprovider->city = $this->city;
$sprovider->service_category_id = $this->service_category_id;
$sprovider->service_locations = $this->service_locations;
$sprovider->save();
session()->flash('message','Profile has been updated successfully!');
}
public function render()
{
$scategories = ServiceCategory::all();
return view('livewire.sprovider.edit-sprovider-profile-component',['scategories'=>$scategories])->layout('layouts.base');
}
}
Next, open the edit-sprovider-profile-component.blade.php view file and write the following code:
<div>
<div class="section-title-01 honmob">
<div class="bg_parallax image_02_parallax"></div>
<div class="opacy_bg_02">
<div class="container">
<h1>Edit Profile</h1>
<div class="crumbs">
<ul>
<li><a href="/">Home</a></li>
<li>/</li>
<li>Edit Profile</li>
</ul>
</div>
</div>
</div>
</div>
<section class="content-central">
<div class="content_info">
<div class="paddings-mini">
<div class="container">
<div class="row portfolioContainer">
<div class="col-md-8 col-md-offset-2 profile1">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
Edit Profile
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<form class="form-horizontal" wire:submit.prevent="updateProfile">
<div class="form-group">
<label for="newimage" class="control-label col-md-3">Profile Image: </label>
<div class="col-md-9">
<input type="file" class="form-control-file" name="newimage" wire:model="newimage" />
@if($newimage)
<img src="{{$newimage->temporaryUrl()}}" width="220" />
@elseif($image)
<img src="{{asset('images/sproviders')}}/{{$image}}" width="220" />
@else
<img src="{{asset('images/sproviders/default.jpg')}}" width="220" />
@endif
</div>
</div>
<div class="form-group">
<label for="about" class="control-label col-md-3">About: </label>
<div class="col-md-9">
<textarea class="form-control" name="about" wire:model="about"></textarea>
</div>
</div>
<div class="form-group">
<label for="city" class="control-label col-md-3">City: </label>
<div class="col-md-9">
<input type="text" class="form-control" name="city" wire:model="city"/>
</div>
</div>
<div class="form-group">
<label for="service_category_id" class="control-label col-md-3">Servicey Category: </label>
<div class="col-md-9">
<select class="form-control" name="service_category_id" wire:model="service_category_id">
@foreach($scategories as $scategory)
<option value="{{$scategory->id}}">{{$scategory->name}}</option>
@endforeach
</select>
</div>
</div>
<div class="form-group">
<label for="service_locations" class="control-label col-md-3">Service Locations Zipcode/Pincode: </label>
<div class="col-md-9">
<input type="text" class="form-control" name="service_locations" wire:model="service_locations" />
</div>
</div>
<button type="submit" class="btn btn-success pull-right">Update Profile</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Now, go to the sprovider-profile-component.blade view file and add a link for editing the profile:
<a href="{{route('sprovider.edit_profile')}}" class="btn btn-info pull-right">Edit Profile</a>
Now, it's done. Let's check the result.
Switch to the browser and refresh the page.
Here, you can see the edit link.
Now, click on this link.
You can see the edit page.
Now, let's change the profile image, add the about text, and also add the service location pin code or zip code.
Now, click on update, and here you can see the message "Profile updated".
Now, let's check the profile, and here you can see the updated profile.
So, in this way, you can update a service provider's profile.
