Dynamic Category and Subcategory in Codeigniter

Dynamic dependent dropdowns are commonly used in web applications to allow users to select an item from a dropdown list that is based on the value selected in another dropdown list. For example, a user may select a category in one dropdown list, and then the items in the second dropdown list will be based on the category selected.

In this tutorial, you will learn how to create a dynamic dependent category and subcategory dropdown using CodeIgniter 4, a popular PHP framework.

How to Make Dynamic Category and Subcategory Dropdown in Codeigniter

By following the steps provided in this tutorial, you can create a user-friendly interface that allows users to easily select items based on the value selected in another dropdown list. This feature can be useful in a wide range of applications, from e-commerce websites to online forms and surveys. CodeIgniter 4 provides a simple and efficient way to implement this feature, making it an ideal choice for web developers who want to create dynamic and interactive web applications.

• Step 1: Setup CodeIgniter 4 Project
• Step 2: Create Database Table
• Step 3: Create Controllers
• Step 4: Create Models
• Step 5: Create Views
• Step 6: Test the Application

Step 1: Setup CodeIgniter 4 Project

The first step is to setup a CodeIgniter 4 project. You can follow the official documentation to create a new project.

Step 2: Create Database Table

You need to create two tables in the database. One for categories and another for subcategories. The categories table will have two columns – id and name. The subcategories table will have three columns – id, name, and category_id.

You will use migration files to create the database tables. Run the following command to create the migration files:

php spark make:migration create_categories_table
php spark make:migration create_subcategories_table

Open create_categories_table.php migration files and add the following code:

// create_categories_table.php

<?php namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class CreateCategoriesTable extends Migration
{
    public function up()
    {
        $this->forge->addField([
            'id'          => ['type' => 'INT', 'unsigned' => true, 'auto_increment' => true],
            'name'        => ['type' => 'VARCHAR', 'constraint' => '100'],
        ]);
        $this->forge->addKey('id', true);
        $this->forge->createTable('categories');
    }

    public function down()
    {
        $this->forge->dropTable('categories');
    }
}

Open create_subcategories_table.php migration files and add the following code:

// create_subcategories_table.php

<?php namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class CreateSubcategoriesTable extends Migration
{
    public function up()
    {
        $this->forge->addField([
            'id'          => ['type' => 'INT', 'unsigned' => true, 'auto_increment' => true],
            'name'        => ['type' => 'VARCHAR', 'constraint' => '100'],
            'category_id' => ['type' => 'INT', 'unsigned' => true],
        ]);
        $this->forge->addKey('id', true);
        $this->forge->createTable('subcategories');
    }

    public function down()
    {
        $this->forge->dropTable('subcategories');
    }
}

After adding the code, run the following command to create the database tables:

php spark migrate

Step 3: Create Controllers

Create a controller named CategoryController and add the following code:

<?php namespace App\Controllers;

use App\Models\CategoryModel;
use App\Models\SubcategoryModel;
use CodeIgniter\API\ResponseTrait;

class CategoryController extends BaseController
{
    use ResponseTrait;

    public function index()
    {
        $categoryModel = new CategoryModel();
        $data['categories'] = $categoryModel->findAll();

        return view('categories', $data);
    }

    public function getSubcategories()
    {
        $subcategoryModel = new SubcategoryModel();
        $subcategories = $subcategoryModel->where('category_id', $this->request->getVar('category_id'))->findAll();

        return $this->respond($subcategories);
    }
}

Step 4: Create Models

Create two models named CategoryModel and SubcategoryModel and add the following code:

<?php namespace App\Models;

use CodeIgniter\Model;

class CategoryModel extends Model
{
    protected $table = 'categories';
    protected $primaryKey = 'id';
    protected $allowedFields = ['name'];
}

For SubcategoryModel:

// SubcategoryModel.php

<?php namespace App\Models;

use CodeIgniter\Model;

class SubcategoryModel extends Model
{
    protected $table = 'subcategories';
    protected $primaryKey = 'id';
    protected $allowedFields = ['name', 'category_id'];
}

Step 5: Create Views

Create a view named categories.php and add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Dependent Dropdown - CodeIgniter 4</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#category').change(function(){
                var category_id = $('#category').val();
                if(category_id != ''){
                    $.ajax({
                        url:"<?= base_url('category/getSubcategories'); ?>",                    method:"POST",
                    data:{category_id:category_id},
                    success:function(data){
                        $('#subcategory').html(data);
                    }
                });
            }
        });
    });
</script>
</head>
<body>
    <h1>Dynamic Dependent Dropdown - CodeIgniter 4</h1><div>
    <label>Category:</label>
    <select id="category">
        <option value="">Select Category</option>
        <?php foreach($categories as $category): ?>
            <option value="<?= $category['id']; ?>"><?= $category['name']; ?></option>
        <?php endforeach; ?>
    </select>
</div>

<div>
    <label>Subcategory:</label>
    <select id="subcategory">
        <option value="">Select Subcategory</option>
    </select>
</div>
</body>
</html>

Step 6: Test the Application

Start the development server by running the following command:

php spark serve

Open a web browser and navigate to http://localhost:8080/category. You will see two dropdown lists – Category and Subcategory.

Select a category from the Category dropdown list. The items in the Subcategory dropdown list will be based on the category selected.

Conclusion

In this tutorial, we have shown you how to create a dynamic dependent category and subcategory dropdown using CodeIgniter 4. By following the steps provided in this article, you can create a user-friendly interface that allows users to easily select items based on the value selected in another dropdown list. This feature can be useful in a wide range of applications, from e-commerce websites to online forms and surveys. CodeIgniter 4 provides a simple and efficient way to implement this feature, making it an ideal choice for web developers who want to create dynamic and interactive web applications. We hope you found this article helpful and that you are now able to create dynamic dependent dropdowns in your CodeIgniter 4 projects.

Recommended CodeIgniter Tutorials