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.