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 App\Http\Livewire\Admin;

use App\Models\Category;
use Livewire\Component;
use Illuminate\Support\Str;

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.