CodeIgniter 4: Динамические категории и подкатегории в Codeigniter

Динамические зависимые выпадающие списки обычно используются в веб-приложениях для того, чтобы пользователи могли выбрать элемент из выпадающего списка, который основан на значении, выбранном в другом выпадающем списке. Например, пользователь может выбрать категорию в одном выпадающем списке, и тогда элементы во втором выпадающем списке будут основаны на выбранной категории.

В этом руководстве вы узнаете, как создать динамический зависимый выпадающий список категорий и подкатегорий с помощью CodeIgniter 4, популярного PHP-фреймворка.

Как сделать динамическое выпадение категорий и подкатегорий в Codeigniter

Выполнив шаги, описанные в этом руководстве, вы сможете создать удобный интерфейс, позволяющий пользователям легко выбирать элементы на основе значения, выбранного в другом выпадающем списке. Эта функция может быть полезна в широком спектре приложений, от веб-сайтов электронной коммерции до онлайн-форм и опросов. CodeIgniter 4 предоставляет простой и эффективный способ реализации этой функции, что делает его идеальным выбором для веб-разработчиков, которые хотят создавать динамичные и интерактивные веб-приложения.

Шаг 1: Настройка проекта CodeIgniter 4

Первым шагом является создание проекта CodeIgniter 4. Вы можете следовать официальной документации для создания нового проекта.

Шаг 2: Создание таблицы базы данных

Вам необходимо создать две таблицы в базе данных. Одну для категорий, а другую для подкатегорий. Таблица категорий будет иметь два столбца - id и name. Таблица подкатегорий будет иметь три столбца - id, name и category_id.

Для создания таблиц базы данных вы будете использовать файлы миграции. Выполните следующую команду для создания файлов миграции:

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

Откройте файл миграции 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');
    }
}

Откройте файл миграции 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');
    }
}

После добавления кода выполните следующую команду для создания таблиц базы данных:

php spark migrate

Шаг 3: Создание контроллеров

Создайте контроллер с именем CategoryController и добавьте следующий код:

<?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);
    }
}

Шаг 4: Создание моделей

Создайте две модели с именами CategoryModel и SubcategoryModel и добавьте следующий код:

<?php namespace App\Models;

use CodeIgniter\Model;

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

Для модели подкатегории:

// SubcategoryModel.php

<?php namespace App\Models;

use CodeIgniter\Model;

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

Шаг 5: Создание представлений

Создайте представление с именем categories.php и добавьте следующий код:

<!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",
                        dаta:{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>

Шаг 6: Тестирование приложения

Запустите сервер разработки, выполнив следующую команду:

php spark serve

Откройте веб-браузер и перейдите на сайт http://localhost:8080/category. Вы увидите два выпадающих списка - Категория и Подкатегория.

Выберите категорию из выпадающего списка Категория. Элементы в раскрывающемся списке Подкатегории будут основаны на выбранной категории.

Вывод

В этом руководстве мы показали вам, как создать динамический зависимый выпадающий список категорий и подкатегорий с помощью CodeIgniter 4. Следуя шагам, приведенным в этой статье, вы сможете создать удобный интерфейс, который позволит пользователям легко выбирать элементы на основе значения, выбранного в другом выпадающем списке. Эта функция может быть полезна в широком спектре приложений, от веб-сайтов электронной коммерции до онлайн-форм и опросов. CodeIgniter 4 предоставляет простой и эффективный способ реализации этой функции, что делает его идеальным выбором для веб-разработчиков, которые хотят создавать динамичные и интерактивные веб-приложения. Мы надеемся, что эта статья была вам полезна, и теперь вы можете создавать динамические зависимые выпадающие элементы в своих проектах CodeIgniter 4.