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.
