Laravel 8 Project Home Services - Admin Add New Service
In this video, we will learn about adding a new service in the admin panel of our Laravel 8 project.
Let's see how we can add a new service.
First of all, let's create a new Livewire component for adding a new service.
Switch to the command prompt and type the following command:
php artisan make:livewire admin/AdminAddServiceComponent
Now, switch to the project and let's create a route for this component.
Open the web.php file and create a new route inside the admin middleware route group:
Route::get('/admin/services/add',AdminAddServiceComponent)->name('admin.add_service');
Now, let's open the AdminAddServiceComponent class file and add the following code:
<?php
namespace AppHttpLivewireAdmin;
use AppModelsService;
use AppModelsServiceCategory;
use CarbonCarbon;
use LivewireComponent;
use IlluminateSupportStr;
use LivewireWithFileUploads;
class AdminAddServiceComponent 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 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',
'image'=> 'required|mimes:jpeg,png',
'thumbnail'=> 'required|mimes:jpeg,png',
'description'=> 'required',
'inclusion'=> 'required',
'exclusion'=> 'required'
]);
}
public function createService()
{
$this->validate([
'name'=> 'required',
'slug'=> 'required',
'tagline'=> 'required',
'service_category_id'=> 'required',
'price'=> 'required',
'image'=> 'required|mimes:jpeg,png',
'thumbnail'=> 'required|mimes:jpeg,png',
'description'=> 'required',
'inclusion'=> 'required',
'exclusion'=> 'required'
]);
$service = new Service();
$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));
$imageName = Carbon::now()->timestamp . '.' . $this->thumbnail->extension();
$this->thumbnail->storeAs('services/thumbnails',$imageName);
$service->thumbnail = $imageName;
$imageName2 = Carbon::now()->timestamp . '.' . $this->image->extension();
$this->image->storeAs('services',$imageName2);
$service->image = $imageName2;
$service->save();
session()->flash('message','Service has been created successfully!');
}
public function render()
{
$categories = ServiceCategory::all();
return view('livewire.admin.admin-add-service-component',['categories'=>$categories])->layout('layouts.base');
}
}
Next, go to the AdminAddServiceComponent 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>Add Service</h1>
<div class=`crumbs`>
<ul>
<li><a href=`/`>Home</a></li>
<li>/</li>
<li>Add 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`>
Add New 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=`createService`>
@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=`thumbnail` />
@error('thumbnail') <p class=`text-danger`>{{$message}}</p> @enderror
@if($thumbnail)
<img src=`{{$thumbnail->temporaryUrl()}}` 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=`image` />
@error('image') <p class=`text-danger`>{{$message}}</p> @enderror
@if($image)
<img src=`{{$image->temporaryUrl()}}` width=`60` />
@endif
</div>
</div>
<button type=`submit` class=`btn btn-success pull-right`>Add Service</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Now, it's done. Let's check it.
Switch to the browser and refresh the page. Enter the service details, and then click on `Add Service`.
The service has been added. Now, click here, and you can see the new service.
So, in this way, you can create a new service.