Laravel 11 E-Commerce - Admin Create New Category

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

Creating a New Function in AdminController

So, let's see how we can create a new category. First, go to the Admin Controller and create a new function:

public function add_category()
{
    return view("admin.category-add");
}

Creating the Route

Now, let's create a route for this function:

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

Creating the View

Now, let's create a new view. So, go to the resources directory and create a new file, category-add.blade.php.

Now, let's open the brand-add.blade.php file and copy all the content from here. Then, paste it inside the category-add.blade.php file. Now, let's make some changes as follows:

@extends('layouts.admin')

@section('content')
<div class="main-content-inner">
    <!-- main-content-wrap -->
    <div class="main-content-wrap">
        <div class="flex items-center flex-wrap justify-between gap20 mb-27">
            <h3>Category infomation</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>
                    <a href="{{route('admin.categories')}}"><div class="text-tiny">Categories</div></a>
                </li>
                <li>
                    <i class="icon-chevron-right"></i>
                </li>
                <li>
                    <div class="text-tiny">New Category</div>
                </li>
            </ul>
        </div>
        <!-- new-category -->
        <div class="wg-box">
            <form class="form-new-product form-style-1" action="{{route('admin.category.store')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <fieldset class="name">
                    <div class="body-title">Category Name <span class="tf-color-1">*</span></div>
                    <input class="flex-grow" type="text" placeholder="Category name" name="name" tabindex="0" value="{{old('name')}}" aria-required="true" required="">
                </fieldset>
                @error("name") <span class="alert alert-danger text-center">{{$message}}</span> @enderror

                <fieldset class="name">
                    <div class="body-title">Category Slug <span class="tf-color-1">*</span></div>
                    <input class="flex-grow" type="text" placeholder="Category Slug" name="slug" tabindex="0" value="{{old('slug')}}" aria-required="true" required="">
                </fieldset>
                @error("slug") <span class="alert alert-danger text-center">{{$message}}</span> @enderror

                <fieldset>
                    <div class="body-title">Upload images <span class="tf-color-1">*</span></div>
                    <div class="upload-image flex-grow">
                        <div class="item" id="imgpreview" style="display:none">                            
                            <img src="{{asset('images/upload/upload-1.png')}}" class="effect8" alt="">
                        </div>
                        <div id="upload-file" class="item up-load">
                            <label class="uploadfile" for="myFile">
                                <span class="icon">
                                    <i class="icon-upload-cloud"></i>
                                </span>
                                <span class="body-text">Drop your images here or select <span class="tf-color">click to browse</span></span>
                                <input type="file" id="myFile" name="image" accept="image/*">
                            </label>
                        </div>
                    </div>
                </fieldset> 
                @error("image") <span class="alert alert-danger text-center">{{$message}}</span> @enderror

                <div class="bot">
                    <div></div>
                    <button class="tf-button w208" type="submit">Save</button>
                </div>
            </form>
        </div>
        <!-- /new-category -->
    </div>
    <!-- /main-content-wrap -->
</div>                    

</div>
@endsection

Adding JavaScript Code

After this, let's add the @push directive and inside this, let's add the JavaScript code for previewing the category image and also for generating the slug:

@push("scripts")
    <script>
            $(function(){
                $("#myFile").on("change",function(e){
                    const photoInp = $("#myFile");                    
                    const [file] = this.files;
                    if (file) {
                        $("#imgpreview img").attr('src',URL.createObjectURL(file));
                        $("#imgpreview").show();                        
                    }
                });

                $("input[name='name']").on("change",function(){
                    $("input[name='slug']").val(StringToSlug($(this).val()));
                });
                
            });   
            
            function StringToSlug(Text) {
                return Text.toLowerCase()
                .replace(/[^\w ]+/g, "")
                .replace(/ +/g, "-");
            }     
    </script>
@endpush

Creating a New Function in AdminController

Now, go to the AdminController and create a new function here:

public function add_category_store(Request $request)
{        
    $request->validate([
        'name' => 'required',
        'slug' => 'required|unique:categories,slug',
        'image' => 'mimes:png,jpg,jpeg|max:2048'
    ]);

    $category = new Category();
    $category->name = $request->name;
    $category->slug = Str::slug($request->name);
    $image = $request->file('image');
    $file_extention = $request->file('image')->extension();
    $file_name = Carbon::now()->timestamp . '.' . $file_extention;
    $this->GenerateCategoryThumbailImage($image,$file_name);
    $category->image = $file_name;        
    $category->save();
    return redirect()->route('admin.categories')->with('status','Record has been added successfully !');
}

Creating the Route

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

Route::post('/admin/category/store',[AdminController::class,'add_category_store'])->name('admin.category.store');

Adding the Route to the Form Action

Now, go to the category-add.blade.php file and add this route to the form action:

action="{{route('admin.category.store')}}"

Checking the Result

Now, it's done. So, let's check. Go to the browser and refresh the page. Now, click on the add category link, and here you can see the add category form. Now, enter the category name and select the category image. Now, click on submit, and here you can see the category has been added. Now, add one more category.

So, in this way, you can create an add category admin page.

That's all about creating an add category admin page in the Laravel E-Commerce project.