Laravel 8 E-Commerce - Admin Category Page

In this video, we will learn about creating an Admin Category Page.

Let's see how we can create a category page for the Admin. First, we need to log in using the admin credentials.

After logging in, you can see the admin menu with two links: one for the dashboard and another for the logout link.

Now, let's create a new Livewire component for categories. Switch to the command prompt and run the command:


php artisan make:livewire admin/AdminCategoryComponent

Next, switch to the project and create a route for the category component. Go to the routes directory and open the web.php file.

Inside the admin middleware group, create the route:


Route::get('/admin/categories',AdminCategoryComponent::class)->name('admin.categories');

Now, open the base.blade.php layout file. Find the admin menu and add a link for the category before the logout link:


<li class="menu-item" >
<a title="Categories" href="{{ route('admin.categories') }}">Categories</a>
</li>

Open the AdminCategoriesComponent.php Class file and add the code:


<?php

namespace App\Http\Livewire\Admin;

use App\Models\Category;
use Livewire\Component;
use Livewire\WithPagination;

class AdminCategoryComponent extends Component
{
    use WithPagination;    

    public function render()
    {
        $categories = Category::paginate(5);
        return view('livewire.admin.admin-category-component',['categories'=>$categories])->layout('layouts.base');
    }
}

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


<div>
    <style>
        nav svg{
            height: 20px;
        }
        nav .hidden{
            display: block !important;
        }
    </style>
    <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">
                                All Categories
                            </div>
                            <div class="col-md-6">
                                <a href="#" class="btn btn-success pull-right">Add New</a>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">                       
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Category Name</th>
                                    <th>Slug</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($categories as $category)
                                    <tr>
                                        <td>{{$category->id}}</td>
                                        <td>{{$category->name}}</td>
                                        <td>{{$category->slug}}</td>
                                        <td></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{$categories->links()}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>