Laravel 8 Project Home Services - Admin Edit Service
In this video, we will learn about editing a service in the admin panel of our Laravel 8 project.
Let's see how we can edit a service.
First of all, let's create a new Livewire component.
Switch to the command prompt and type the following command:
php artisan make:livewire admin/AdminEditServiceComponent
Now, switch to the project and let's create a route for this component.
Go inside the routes directory, open the web.php file, and create a new route inside the admin middleware route group:
Route::get('/admin/service/edit/{service_slug}',AdminEditServiceComponent::class)->name('admin.edit_service');
Now, let's open the AdminEditServiceComponent class file and add the following code:
<?php
namespace AppHttpLivewireAdmin;
use AppModelsService;
use AppModelsServiceCategory;
use CarbonCarbon;
use LivewireComponent;
use LivewireWithFileUploads;
use IlluminateSupportStr;
class AdminEditServiceComponent extends Component
{
use WithFileUploads;
public $name;
public $slug;
public $tagline;
public $service_category_id;
public $price;
public $discount;
public $discount_type;
public $image;
public $thumbnail;
public $description;
public $inclusion;
public $exclusion;
public $newthumbnail;
public $newimage;
public $service_id;
public function mount($service_slug)
{
$service = Service::where('slug',$service_slug)->first();
$this->service_id= $service->id;
$this->name = $service->name;
$this->slug = $service->slug;
$this->tagline = $service->tagline;
$this->service_category_id = $service->service_category_id;
$this->price = $service->price;
$this->discount = $service->discount;
$this->discount_type = $service->discount_type;
$this->image = $service->image;
$this->thumbnail = $service->thumbnail;
$this->description = $service->description;
$this->inclusion = str_replace(`|`,`
`,$service->inclusion);
$this->exclusion = str_replace(`|`,`
`,$service->exclusion);
}
public function generateSlug()
{
$this->slug = Str::slug($this->name,'-');
}
public function updated($fields)
{
$this->validateOnly($fields,[
'name'=> 'required',
'slug'=> 'required',
'tagline'=> 'required',
'service_category_id'=> 'required',
'price'=> 'required',
'description'=> 'required',
'inclusion'=> 'required',
'exclusion'=> 'required'
]);
if($this->newthumbnail)
{
$this->validateOnly($fields,[
'newthumbnail'=> 'required|mimes:jpeg,png'
]);
}
if($this->newimage)
{
$this->validateOnly($fields,[
'newimage'=> 'required|mimes:jpeg,png'
]);
}
}
public function updateService()
{
$this->validate([
'name'=> 'required',
'slug'=> 'required',
'tagline'=> 'required',
'service_category_id'=> 'required',
'price'=> 'required',
'description'=> 'required',
'inclusion'=> 'required',
'exclusion'=> 'required'
]);
if($this->newthumbnail)
{
$this->validate([
'newthumbnail'=> 'required|mimes:jpeg,png'
]);
}
if($this->newimage)
{
$this->validate([
'newimage'=> 'required|mimes:jpeg,png'
]);
}
$service = Service::find($this->service_id);
$service->name = $this->name;
$service->slug = $this->slug;
$service->tagline = $this->tagline;
$service->service_category_id = $this->service_category_id;
$service->price = $this->price;
$service->discount = $this->discount;
$service->discount_type = $this->discount_type;
$service->description = $this->description;
$service->inclusion = str_replace(`
`,'|',trim($this->inclusion));
$service->exclusion = str_replace(`
`,'|',trim($this->exclusion));
if($this->newthumbnail)
{
unlink('images/services/thumbnails'.'/'.$service->thumbnail);
$imageName = Carbon::now()->timestamp . '.' . $this->newthumbnail->extension();
$this->newthumbnail->storeAs('services/thumbnails',$imageName);
$service->thumbnail = $imageName;
}
if($this->newimage)
{
unlink('images/services'.'/'.$service->image);
$imageName2 = Carbon::now()->timestamp . '.' . $this->newimage->extension();
$this->newimage->storeAs('services',$imageName2);
$service->image = $imageName2;
}
$service->save();
session()->flash('message','Service has been updated successfully!');
}
public function render()
{
$categories = ServiceCategory::all();
return view('livewire.admin.admin-edit-service-component',['categories'=>$categories])->layout('layouts.base');
}
}
Next, open the AdminEditServiceComponent view file and add 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 Service</h1>
<div class=`crumbs`>
<ul>
<li><a href=`/`>Home</a></li>
<li>/</li>
<li>Edit Service</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 Service
</div>
<div class=`col-md-6`>
<a href=`{{route('admin.all_services')}}` class=`btn btn-info pull-right`>All Services</a>
</div>
</div>
</div>
<div class=`panel-body`>
@if(Session::has('message'))
<div class=`alert alert-success` role=`alert`>{{Session::get('message')}}</div>
@endif
<form class=`form-horizontal` wire:submit.prevent=`updateService`>
@csrf
<div class=`form-group`>
<label for=`name` class=`control-label col-sm-3`>Name: </label>
<div class=`col-sm-9`>
<input type=`text` class=`form-control` name=`name` wire:model=`name` wire:keyup=`generateSlug` />
@error('name') <p class=`text-danger`>{{$message}}</p> @enderror
</div>
</div>
<div class=`form-group`>
<label for=`slug` class=`control-label col-sm-3`>Slug: </label>
<div class=`col-sm-9`>
<input type=`text` class=`form-control` name=`slug` wire:model=`slug` />
@error('slug') <p class=`text-danger`>{{$message}}</p> @enderror
</div>
</div>
<div class=`form-group`>
<label for=`slug` class=`control-label col-sm-3`>Tagline: </label>
<div class=`col-sm-9`>
<input type=`text` class=`form-control` name=`slug` wire:model=`tagline` />
@error('tagline') <p class=`text-danger`>{{$message}}</p> @enderror
</div>
</div>
<div class=`form-group`>
<label for=`slug` class=`control-label col-sm-3`>Service Category: </label>
<div class=`col-sm-9`>
<select class=`form-control` wire:model=`service_category_id`>
<option value=``>Select Servie Category</option>
@foreach($categories as $category)
<option value=`{{$category->id}}`>{{$category->name}}</option>
@endforeach
</select>
@error('service_category_id') <p class=`text-danger`>{{$message}}</p> @enderror
</div>
</div>
<div class=`form-group`>
<label for=`slug` class=`control-label col-sm-3`>Price: </label>
<div class=`col-sm-9`>
<input type=`text` class=`form-control` name=`price` wire:model=`price` />
@error('price') <p class=`text-danger`>{{$message}}</p> @enderror
</div>
</div>
<div class=`form-group`>
<label for=`slug` class=`control-label col-sm-3`>Discount: </label>
<div class=`col-sm-9`>
<input type=`text` class=`form-control` name=`discount` wire:model=`discount` />
@error('discount') <p class=`text-danger`>{{$message}}</p> @enderror
</div>
</div>
<div class=`form-group`>
<label for=`slug` class=`control-label col-sm-3`>Discount Type: </label>
<div class=`col-sm-9`>
<select class=`form-control` wire:model=`discount_type`>
<option value=``>Select Discount Type</option>
<option value=`fixed`>Fixed</option>
<option value=`percent`>Percent</option>
</select>
@error('discount_type') <p class=`text-danger`>{{$message}}</p> @enderror
</div>
</div>
<div class=`form-group`>
<label for=`slug` class=`control-label col-sm-3`>Description: </label>
<div class=`col-sm-9`>
<textarea class=`form-control` wire:model=`description`></textarea>
@error('description') <p class=`text-danger`>{{$message}}</p> @enderror
</div>
</div>
<div class=`form-group`>
<label for=`slug` class=`control-label col-sm-3`>Inclusion: </label>
<div class=`col-sm-9`>
<textarea class=`form-control` wire:model=`inclusion`></textarea>
@error('inclusion') <p class=`text-danger`>{{$message}}</p> @enderror
</div>
</div>
<div class=`form-group`>
<label for=`slug` class=`control-label col-sm-3`>Exclusion: </label>
<div class=`col-sm-9`>
<textarea class=`form-control` wire:model=`exclusion`></textarea>
@error('exclusion') <p class=`text-danger`>{{$message}}</p> @enderror
</div>
</div>
<div class=`form-group`>
<label for=`slug` class=`control-label col-sm-3`>Thumbnail: </label>
<div class=`col-sm-9`>
<input type=`file` class=`form-control-file` name=`thumbnail` wire:model=`newthumbnail` />
@error('newthumbnail') <p class=`text-danger`>{{$message}}</p> @enderror
@if($newthumbnail)
<img src=`{{$newthumbnail->temporaryUrl()}}` width=`60` />
@else
<img src=`{{asset('images/services/thumbnails')}}/{{$thumbnail}}` width=`60` />
@endif
</div>
</div>
<div class=`form-group`>
<label for=`slug` class=`control-label col-sm-3`>Image: </label>
<div class=`col-sm-9`>
<input type=`file` class=`form-control-file` name=`image` wire:model=`newimage` />
@error('newimage') <p class=`text-danger`>{{$message}}</p> @enderror
@if($newimage)
<img src=`{{$newimage->temporaryUrl()}}` width=`60` />
@else
<img src=`{{asset('images/services')}}/{{$image}}` width=`60` />
@endif
</div>
</div>
<button type=`submit` class=`btn btn-success pull-right`>Update Service</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Now, go to the admin-services-component.blade.php view file and add a link for editing a service:
<a href=`{{route('admin.edit_service',['service_slug'=>$service->slug])}}`><i class=`fa fa-edit fa-2x text-info`></i></a>
Now, everything is done. Let's check it.
Switch to the browser and refresh the page. Now, let's edit any service.
Change the name and image, and then click on `Update`.
And here you can see the service has been updated.
So, in this way, you can edit a service. That's all about editing a service.