Laravel 11 E-Commerce - Admin Category Page

Welcome back to the Laravel E-Commerce Project Tutorial! In this video, we will learn about creating the Category page for the Admin.

Creating the Model and Migration for Category

Let's see how we can create the category page. First, let's create the model and migration for the category. For that, go to the command prompt and run the command:


php artisan make:model Category –m

Alright, the model and migration are created. Now, let's open the create_categories_table migration.

So, go to the database directory and then migration. From here, let's open the create_categories_table migration and add the following columns:


public function up(): void
{
    Schema::create('categories', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('slug')->unique();
        $table->string('image')->nullable();
        $table->string('parent_id')->nullable();
        $table->timestamps();
    });
}

Now, let's migrate the migration. So, run the command:


php artisan migrate

Creating the Categories Page for Admin

Now, let's create the categories page for admin for viewing all the categories. For that, go to the AdminController and create a new function here:


public function categories()
 {
        $categories = Category::orderBy('id','DESC')->paginate(10);
        return view("admin.categories",compact('categories'));
 }

Creating the Route

Now, let's create the route for this function. So, go to the web.php file and create a new route:


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

Creating the View

Now, let's create this view. So, go to the resources folder and the admin. Now, create a new file here, categories.blade.php file.

Now, let's open the brands.blade.php file. Now, let's copy all the content from here and paste it inside the categories.blade.php file. Now, let's make some changes as follows:


@extends('layouts.admin')

@section('content')
<style>
    .table-striped  th:nth-child(1), .table-striped  td:nth-child(1) {
        width: 100px;   
    }
    .table-striped  th:nth-child(2), .table-striped  td:nth-child(2) {
        width: 250px;   
    }
</style>
<div class="main-content-inner">                            
    <div class="main-content-wrap">
        <div class="flex items-center flex-wrap justify-between gap20 mb-27">
            <h3>Categories</h3>
            <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
                <li>
                    <a href="{{route('admin.index')}}">
                        <div class="text-tiny">Dashboard</div>
                    </a>
                </li>                                                                           
                <li>
                    <i class="icon-chevron-right"></i>
                </li>
                <li>
                    <div class="text-tiny">All Category</div>
                </li>
            </ul>
        </div>
        
        <div class="wg-box">
            <div class="flex items-center justify-between gap10 flex-wrap">
                <div class="wg-filter flex-grow">
                    <form class="form-search">
                        <fieldset class="name">
                            <input type="text" placeholder="Search here..." class="" name="name" tabindex="2" value="" aria-required="true" required="">
                        </fieldset>
                        <div class="button-submit">
                            <button class="" type="submit"><i class="icon-search"></i></button>
                        </div>
                    </form>
                </div>
                <a class="tf-button style-1 w208" href="{{route('admin.category.add')}}"><i class="icon-plus"></i>Add new</a>
            </div>
            <div class="wg-table table-all-user">
                @if(Session::has('status'))
                    <p class="alert alert-success">{{Session::get('status')}}</p>
                @endif
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Slug</th>
                            <th>Products</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($categories as $category)
                        <tr>
                            <td>{{$category->id}}</td>    
                            <td class="pname">
                                <div class="image">
                                    <img src="{{asset('uploads/categories')}}/{{$category->image}}" alt="" class="image">
                                </div>
                                <div class="name">
                                    <a href="#" class="body-title-2">{{$category->name}}</a>                                       
                                </div>  
                            </td>
                            <td>{{$category->slug}}</td>      
                            <td><a href="{{route('admin.category.products',['category_slug'=>$category->slug])}}" target="_blank">{{$category->products()->count()}}</a></td>                               
                            <td>
                                <div class="list-icon-function">                                    
                                    <div class="item edit">
                                          <i class="icon-edit-3"></i>
                                   </div>

                                    <div class="item text-danger delete">
                                          <i class="icon-trash-2"></i>
                                   </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach                                  
                    </tbody>
                </table>   
            </div>
            <div class="divider"></div>
            <div class="flex items-center justify-between flex-wrap gap10 wgp-pagination">                
                {{$categories->links('pagination::bootstrap-5')}}
            </div>
        </div>
    </div>
</div>
@endsection

Adding the Categories Link

Now, go to the admin.blade.php layout file and add here the categories link:


<li class="menu-item has-children">
       <a href="javascript:void(0);" class="menu-item-button">
              <div class="icon"><i class="icon-layers"></i></div>
              <div class="text">Category</div>
       </a>
       <ul class="sub-menu">
              <li class="sub-menu-item">
                     <a href="#" class="">
                     <div class="text">New Category</div>
                     </a>
              </li>
              <li class="sub-menu-item">
                     <a href="{{route('admin.categories')}}" class="">
                     <div class="text">Categories</div>
                     </a>
              </li>
       </ul>
</li>