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 config\filesystem.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.
