Laravel E-Commerce Project - Admin Create Subcategories

In this video, we will learn how to create subcategories.

Let's explore how to create subcategories. First, we need to create a model and migration for subcategories.

To do this, switch to the command prompt and run the following command:

php artisan make:model Subcategory –m

Next, switch to the project and open the subcategory migration file. Go to the database directory, then migration, and open the create_subcategory_table_migration file. Add the following columns:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateSubcategoriesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('subcategories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('slug');
            $table->bigInteger('category_id')->unsigned()->nullable();            
            $table->timestamps();
            $table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('subcategories');
    }
}

Add some columns as needed. Then, migrate the migration by switching to the command prompt and running the following command:

php artisan migrate

Now, run the application by writing the following command:

php artisan serve

Switch to the project and open the admin-add-category-component.blade.php view file. Add a select control for the parent category:

<div class="form-group">
	<label class="col-md-4 control-label">Parent Category</label>
	<div class="col-md-4">
		<select class="form-control input-md" wire:model="category_id">
			<option value="">None</option>
			@foreach($categories as $category)
			<option value="{{$category->id}}">{{$category->name}}</option>
			@endforeach
		</select>
	</div>
</div>

Next, go to the AdminAddCategoryComponent.php class file and inside the render method, fetch all categories and pass them to the component view file:

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

Inside the storeCategory method, add the following code:

public function storeCategory()
{    
	$this->validate([
		'name' => 'required',
		'slug' => 'required|unique:categories'
	]);  
	
	if($this->category_id)
	{
		$scategory = new Subcategory();
		$scategory->name = $this->name;
		$scategory->slug = $this->slug;
		$scategory->category_id = $this->category_id;
		$scategory->save();
	}
	else{
		$category = new Category();
		$category->name = $this->name;
		$category->slug = $this->slug;
		$category->save();
	}        
	session()->flash('message','Category has been created successfully!');
}

That's it! Let's test the functionality.

Switch to the browser and refresh the page. Add a category by entering the category name and keeping the parent category as "None". Click on "Add Category".

Now, add a subcategory by entering the subcategory name and choosing the parent category. Click on "Add". Add another subcategory by following the same steps.

Let's check the database by going to phpMyAdmin and opening the database. Browse the category table and you will see the parent category "Electronics". Browse the subcategories table and you will see the subcategories "Mobile" and "Laptop" with the parent category ID as 3, which is the ID of "Electronics".

In this way, you can create subcategories. In the next tutorial, we will learn how to display categories with their subcategories.