Laravel 8 Project Home Services - Admin Add New Service Category
In this video, we will learn about adding a new service category.
Let's see how we can add a new service category.
First of all, let's create a new Livewire component for adding a new service category.
Switch to the command prompt and type the command to create a new Livewire component:
php artisan make:livewire admin/AdminAddServiceCategoryComponent
Now, switch to the project and let's create the route for the AdminAddCategoryComponent.
Open the web.php file and inside the route group, add the following code:
Route::get('/admin/service-category/add',AdminAddServiceCategoryComponent::class)->name('admin.add_service_category');
Now, open the AdminAddCategoryComponent 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 Category</h1>
<div class=`crumbs`>
<ul>
<li><a href=`/`>Home</a></li>
<li>/</li>
<li>Add Service Category</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 Category
</div>
<div class=`col-md-6`>
<a href=`{{route('admin.service_categories')}}` class=`btn btn-info pull-right`>All Categories</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=`createNewCategory`>
@csrf
<div class=`form-group`>
<label for=`name` class=`control-label col-sm-3`>Category 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`>Category 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`>Category 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 Category</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>Now, open the AdminAddServiceCategoryComponent class file and first of all, let's add the layout:
public function render()
{
return view('livewire.admin.admin-add-service-category-component')->layout('layouts.base');
}
Now, open the AdminServiceCategoryComponent View file and add a link for adding a new category inside the header:
<div class=`panel-heading`>
<div class=`row`>
<div class=`col-md-6`>
All Service Categories
</div>
<div class=`col-md-6`>
<a href=`{{route('admin.add_service_category')}}` class=`btn btn-info pull-right`>Add New</a>
</div>
</div>
</div>Alright, now go to the AdminAddServiceCategoryComponent Class file and inside this file, let's create three properties:
public $name;
public $slug;
public $image
Now, bind these properties with the input field in the form on the AdminAddCategoryComponent View file.
Now, go to the class file and create a function for generating the slug from the category name:
public function generateslug()
{
$this->slug = Str::slug($this->name,'-');
}
Now, call this function on the keyup event. So, inside the view file, add the keyup event:
<div class=`form-group`>
<label for=`name` class=`control-label col-sm-3`>Category 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>
Alright, now create a function for creating a new category:
public function createNewCategory()
{
$this->validate([
'name' => 'required',
'slug' => 'required',
'image' => 'required|mimes:jpeg,png'
]);
$scategory = new ServiceCategory();
$scategory->name = $this->name;
$scategory->slug = $this->slug;
$imageName = Carbon::now()->timestamp. '.' . $this->image->extension();
$this->image->storeAs('categories',$imageName);
$scategory->image = $imageName;
$scategory->save();
session()->flash('message','Category has been created successfully!');
}
Also, add the Livewire lifecycle hook method updated:
public function updated($fields)
{
$this->validateOnly($fields,[
'name' => 'required',
'slug' => 'required',
'image' => 'required|mimes:jpeg,png'
]);
}
Now, call this function on form submit:
<form class=`form-horizontal` wire:submit.prevent=`createNewCategory`>
@csrf
<div class=`form-group`>
<label for=`name` class=`control-label col-sm-3`>Category 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>Go to the configfilesystem.php file and modify the local array. Add the images directory which contains categories and services images:
'local' => [
'driver' => 'local',
// 'root' => storage_path('app'),
'root' => public_path('images'),
],
Now, before the form, display the message:
@if(Session::has('message'))
<div class=`alert alert-success` role=`alert`>{{Session::get('message')}}</div>
@endif
Now, everything is done. Let's check it.
Switch to the browser and refresh the page. Now, enter the category name, such as `Washing Machine`. And here, you can see the slug is auto-generated.
Now, click on submit. And you can see the message `Category has been added successfully`.
Now, click on this link to see all categories. And here, you can see the newly created category.
So, in this way, you can add a service category.