Laravel 8 E-Commerce - Admin Add New Category

In this video, we will learn about how to add a new category as an Admin.

Let's see how we can add a new category. First, we need to create a new Livewire component for adding a new category.

Switch to the command prompt and run the command:

php artisan make:livewire admin/AdminAddCategoryComponent

Next, switch to the project and create a route for the AdminAddCategoryComponent. Open the web.php file and add the following route inside the admin route group:

Route::get('/admin/category/add',AdminAddCategoryComponent::class)->name('admin.addcategory');

Now, open the admin-add-category-component.blade.php view file and write the following code:

<div>
    <div class=`container` style=`padding: 30px 0;`>
        <div class=`row`>
            <div class=`col-md-12`>
                <div class=`panel panel-default`>
                    <div class=`panel-heading`>
                        <div class=`row`>
                            <div class=`col-md-6`>
                                Add New Category
                            </div>
                            <div class=`col-md-6`>
                                <a href=`{{route('admin.categories')}}` class=`btn btn-success pull-right`>All Category</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=`storeCategory`>
                            <div class=`form-group`>
                                <label class=`col-md-4 control-label`>Category Name</label>
                                <div class=`col-md-4`>
                                    <input type=`text` placeholder=`Category Name` class=`form-control input-md` wire:model=`name` wire:keyup=`generateslug` />                                    
                                    @error('name')  <p class=`text-danger`>{{$message}}</p> @enderror
                                </div>
                            </div>
                            <div class=`form-group`>
                                <label class=`col-md-4 control-label`>Category Slug</label>
                                <div class=`col-md-4`>
                                    <input type=`text` placeholder=`Category Slug` class=`form-control input-md` wire:model=`slug` />                                    
                                    @error('slug')  <p class=`text-danger`>{{$message}}</p> @enderror
                                </div>
                            </div>
                            <div class=`form-group`>
                                <label class=`col-md-4 control-label`></label>
                                <div class=`col-md-4`>
                                    <button type=`submit` class=`btn btn-primary`>Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Open the AdminAddCategoryComponent.php class file and write the following code:

<?php
namespace AppHttpLivewireAdmin;
use AppModelsCategory;
use LivewireComponent;
use IlluminateSupportStr;
class AdminAddCategoryComponent extends Component
{
    public $name;
    public $slug;
    public function generateslug()
    {
        $this->slug = Str::slug($this->name);
    }  
    
    public function updated($fields)
    {
        $this->validateOnly($fields,[
            'name' => 'required',
            'slug' => 'required|unique:categories'
        ]);
    }
    public function storeCategory()
    {    
        $this->validate([
            'name' => 'required',
            'slug' => 'required|unique:categories'
        ]);    
        $category = new Category();
        $category->name = $this->name;
        $category->slug = $this->slug;
        $category->save();
        session()->flash('message','Category has been created successfully!');
    }
    public function render()
    {
        return view('livewire.admin.admin-add-category-component')->layout('layouts.base');
    }
}

Next, open the AdminCategoryComponent 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 Categories
		</div>
		<div class=`col-md-6`>
			<a href=`{{route('admin.addcategory')}}` class=`btn btn-success pull-right`>Add New</a>
		</div>
	</div>
</div>

Before the form is displayed, show the following message:

@if(Session::has('message'))
<div class=`alert alert-success` role=`alert`>{{Session::get('message')}}</div>
@endif

Now, it's done. Let's check it. Switch to the browser and refresh the page.

In the Admin Categories Page, click on the `Add New` button to add a new category.

After this, you will see the add new category form. Enter the category name, and you can see that the slug is auto-generated.

Click on submit, and you can see the message `Category has been added successfully`.

Click on the `All Categories` link to see all categories, and you can see the newly created category.

So, in this way, you can create a new product category.