Создание древовидного списка категорий в Laravel для HTML select

В этом руководстве мы покажем, как использовать Laravel для создания древовидного списка категорий в HTML select. Мы начнем с создания проекта Laravel, определим модель Category, настроим фабрику для заполнения данных категорий и создадим представление для отображения древовидного списка в HTML select.

Шаг 1: Установка Laravel

Для начала создадим новый проект Laravel с использованием Composer. Откройте терминал и выполните команду:

composer create-project --prefer-dist laravel/laravel categories-app

Перейдите в каталог вашего проекта:

cd categories-app

Шаг 2: Создание модели Category и миграции

Создадим модель Category с миграцией для таблицы категорий:

php artisan make:model Category -m

Редактируйте миграцию create_categories_table для добавления поля parent_id:

// database/migrations/create_categories_table.php

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->unsignedBigInteger('parent_id')->nullable();
        $table->timestamps();
    });
}

Запустите миграции для создания таблицы категорий:

php artisan migrate

Шаг 3: Создание фабрики и заполнение тестовыми данными

Создайте фабрику для модели Category:

php artisan make:factory CategoryFactory --model=Category

Отредактируйте фабрику CategoryFactory для заполнения данных:

// database/factories/CategoryFactory.php

use App\Models\Category;
use Illuminate\Database\Eloquent\Factories\Factory;

class CategoryFactory extends Factory
{
    protected $model = Category::class;

    public function definition()
    {
        return [
            'name' => $this->faker->unique()->word,
            'parent_id' => null, // Родительские категории пока пустые
        ];
    }
}

Запустите фабрику для создания тестовых данных:

php artisan tinker

// Создаем 10 категорий с помощью фабрики
Category::factory()->count(10)->create();

exit

Шаг 4: Создание древовидного списка категорий в HTML select

Отредактируйте метод getCategoryOptions в модели Category для формирования древовидной структуры:

// app/Models/Category.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Category extends Model
{
    public function children()
    {
        return $this->hasMany(Category::class, 'parent_id');
    }

    public static function getCategoryOptions($categories, $prefix = '-')
    {
        // Реализация метода getCategoryOptions, как упомянуто в предыдущих примерах
    }
}

Создайте контроллер CategoryController с методом create для передачи данных в представление:

// app/Http/Controllers/CategoryController.php

namespace App\Http\Controllers;

use App\Models\Category;
use Illuminate\Http\Request;

class CategoryController extends Controller
{
    public function create()
    {
        $categories = Category::with('children')->whereNull('parent_id')->get();
        $categoryOptions = Category::getCategoryOptions($categories);
        
        return view('categories.create', compact('categoryOptions'));
    }
}

Создайте представление create.blade.php для отображения HTML select с древовидными категориями:

<!-- resources/views/categories/create.blade.php -->

<select name="category_id">
    <option value="">Выберите категорию</option>
    @foreach($categoryOptions as $categoryId => $categoryName)
        <option value="{{ $categoryId }}">
            {{ $categoryName }}
        </option>
    @endforeach
</select>

Настройте маршрут для использования контроллера и метода:

// routes/web.php

use App\Http\Controllers\CategoryController;

Route::get('/categories/create', [CategoryController::class, 'create']);

Теперь посетив соответствующий маршрут, вы увидите HTML select с древовидной структурой категорий, отображаемых в виде вложенных опций.

Это руководство позволяет вам создать и заполнить базу данных категорий, а затем вывести их в HTML select с древовидной структурой при помощи Laravel.

Коментарии

Коментарии отсутствуют, будьте первым(ой) кто напишет под этим постом!

Написать коментарий