Laravel 8 Project Home Services - Admin Create Service Categories Page

In this video, we will learn about how to create an Admin Service Categories Page.

Let's see how we can create a services categories page for the admin.

Now, let's create a new Livewire component for categories.

Switch to the command prompt and type the following command to create the Livewire component:

php  artisan make:livewire admin/AdminServiceCategoryComponent

Alright, the component has been created. Now, switch to the project and let's create the route for the category component.

Go inside the routes directory, then open the web.php file. Inside the admin middleware group, let's create the route:

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

Now, open the base layout file. Go inside the resources directory, then views -> layouts, and from here, open base.blade.php.

Inside this layout file, let's find the admin menu and before the logout link, let's create a link for the Service category:

<li><a href="{{route('admin.service_categories')}}">Service Categories</a></li>

Now, let's open the Categories Component Class file and set the layout:

return view('livewire.admin.admin-service-category-component')->layout('layouts.base');

Now, import the WithPagination and use it inside the class as follows:

<?php

namespace App\Http\Livewire\Admin;

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

class AdminServiceCategoryComponent extends Component
{
    use WithPagination;
    
    public function render()
    {
        $scategories = ServiceCategory::paginate(10);
        return view('livewire.admin.admin-service-category-component',['scategories'=>$scategories])->layout('layouts.base');
    }
}

Alright, now open the admin-category-component view file and add the following code:

<div>
    <style>
        nav svg{
            height: 20px;
        }
        nav .hidden{
            display: block !important;
        }
    </style>
    <div class="section-title-01 honmob">
        <div class="bg_parallax image_02_parallax"></div>
        <div class="opacy_bg_02">
            <div class="container">
                <h1>Service Categories</h1>
                <div class="crumbs">
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li>/</li>
                        <li>Service Categories</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-12 profile1">
                            <div class="panel panel-default">
                                <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>
                                <div class="panel-body">
                                    @if(Session::has('message'))
                                        <div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
                                    @endif
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Image</th>
                                                <th>Name</th>
                                                <th>Slug</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($scategories as $scategory)
                                                <tr>
                                                    <td>{{$scategory->id}}</td>
                                                    <td><img src="{{asset('images/categories')}}/{{$scategory->image}}" height="60" /> </td>
                                                    <td>{{$scategory->name}}</td>
                                                    <td>{{$scategory->slug}}</td>
                                                    <td>    
                                                        <a href="{{route('admin.services_by_category',['category_slug'=>$scategory->slug])}}" style="margin-right: 10px;"><i class="fa fa-list fa-2x text-info"></i></a>                                                    
                                                        <a href="{{route('admin.edit_service_category',['category_id'=>$scategory->id])}}"><i class="fa fa-edit fa-2x text-info"></i></a>
                                                        <a href="#" onclick="confirm('Are you sure, you want to delete this service category!') || event.stopImmediatePropagation()" wire:click.prevent="deleteServiceCategory({{$scategory->id}})" style="margin-left:10px;"><i class="fa fa-times fa-2x text-danger"></i></a>
                                                    </td>                              
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    {{$scategories->links()}}
                                </div>
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

Now, it's done. Let's check it.

First of all, run the application. Switch to the command prompt and type the command:

Php artisan serve

Now, switch to the browser and refresh the page. Inside the admin menu, you can see the category link. Now, click on it.

Now, you can see the categories.

So, in this way, you can create an Admin Service Category Page.