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 App\Http\Livewire\Admin;
use App\Models\Service;
use App\Models\ServiceCategory;
use Carbon\Carbon;
use Livewire\Component;
use Livewire\WithFileUploads;
use Illuminate\Support\Str;
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.
