blade系package(3-3) laravel-form-components チェックボックス等

の続き

チェックボックス(単一)

このパターンは複数チェックボックスと単一チェックボックスの2つに別れるが今回は単一のみ。このパターンは大抵DBにbool型を持っている奴である。重要か重要でないかflag is_important を定義してみよう

        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->boolean('is_important'); // これ
            $table->timestamps();
        });

<x-guest-layout>
    <!-- Session Status -->
    <x-auth-session-status class="mb-4" :status="session('status')" />
    <x-form action="{{ route('posts.store') }}" class="mb-3">
        <x-form-input name="title" label="{{ __('Title') }}" />
        <x-form-textarea name="body" label="{{ __('Body') }}" />

        <x-form-checkbox name="is_important" label="Important" />

        <div class="flex items-center justify-end mt-4">
            <x-form-submit class="ml-3">
                {{ __('Post') }}
            </x-form-submit>
        </div>
    </x-form>

チェックボックスを生やす

ただ、この場合、チェックボックスを空にして送信すると

General error: 1364 Field 'is_important' doesn't have a default value

とか言われちゃうから、バックエンドでnullの時は0を入れるようにするとか

        <input type="hidden" name="is_important" value="0">
        <x-form-checkbox name="is_important" label="Important" />

のように隠しフィールドを仕込んでおくとか、工夫が必要だ。隠しフィールドの方が楽っすかね、編集の事もあるし。

でまあその編集画面もコピペ対応。とりあえずここではベタで書いてくことにしよう

<x-guest-layout>

    @bind($post)
    <x-form action="{{ route('posts.update', $post) }}" method="put" class="mb-3">
        <x-form-input name="title" label="{{ __('Title') }}" />
        <input type="hidden" name="is_important" value="0">
        <x-form-checkbox name="is_important" label="Important" />

        <x-form-textarea name="body" label="{{ __('Body') }}" />

        <div class="flex items-center justify-end mt-4">
            <x-form-submit class="ml-3">
                {{ __('Edit') }}
            </x-form-submit>
        </div>
    </x-form>
    @endbind

</x-guest-layout>

初期値がcheckedの時とか、チェックボックスの見た目を大幅に変更させる場合とかはまた結構めんどくさくて、基本、ブラウザのデフォルトの見た目になる。見た目の変更は別項でやりまひょ。この辺をちゃんとやろうとするとたかだかチェックボックス1つでもまあまあかかるって事ですナ

セレクトボックス

セレクトボックスのパターンの場合、大概リレーションになってる事が多いんじゃないだろーか。ここではPostCategoryというモデルを作成した。

% ./vendor/bin/sail artisan make:model PostCategory -ms

   INFO  Model [app/Models/PostCategory.php] created successfully.

   INFO  Migration [database/migrations/2023_08_29_104907_create_post_categories_table.php] created successfully.

   INFO  Seeder [database/seeders/PostCategorySeeder.php] created successfully.

ただまあ親テーブルを後から作るとテーブル作成の順番が面倒くさいので日付けを変更したりとかウンヌンカンヌン

ま、ともあれちゃっちゃと作る

    public function up(): void
    {
        Schema::create('post_categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }

seederでマスターデーターを投入

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class PostCategorySeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        $categories = [
            'news',
            'blog',
            'tutorial',
            'review',
        ];

        foreach ($categories as $name) {
            \App\Models\PostCategory::create(['name' => $name]);
        }
    }
}

DatabaseSeederからコールして

<?php

namespace Database\Seeders;

// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     */
    public function run(): void
    {
        // \App\Models\User::factory(10)->create();

        // \App\Models\User::factory()->create([
        //     'name' => 'Test User',
        //     'email' => 'test@example.com',
        // ]);
        $this->call([
            PostCategorySeeder::class,
        ]);
    }
}

% ./vendor/bin/sail artisan migrate:fresh --seed

  Dropping all tables ......................................................................................................... 70ms DONE

   INFO  Preparing database.

  Creating migration table .................................................................................................... 28ms DONE

   INFO  Running migrations.

  2014_10_12_000000_create_users_table ........................................................................................ 41ms DONE
  2014_10_12_100000_create_password_reset_tokens_table ........................................................................ 57ms DONE
  2019_08_19_000000_create_failed_jobs_table .................................................................................. 42ms DONE
  2019_12_14_000001_create_personal_access_tokens_table ....................................................................... 60ms DONE
  2023_08_28_204738_create_posts_table ........................................................................................ 22ms DONE
  2023_08_29_104907_create_post_categories_table .............................................................................. 23ms DONE


   INFO  Seeding database.

  Database\Seeders\PostCategorySeeder ........................................................................................... RUNNING
  Database\Seeders\PostCategory

こんな感じでDBを作り直している。

    <x-form action="{{ route('posts.store') }}" class="mb-3">
        <x-form-input name="title" label="{{ __('Title') }}" />
        <x-form-textarea name="body" label="{{ __('Body') }}" />

        <x-form-select name="post_category_id" :options="$postCategories" label="Categories" />

        <x-form-checkbox name="is_important" label="Important" />

        <div class="flex items-center justify-end mt-4">
            <x-form-submit class="ml-3">
                {{ __('Post') }}
            </x-form-submit>
        </div>
    </x-form>

とまあこんな感じになる。まだまだ続きますよ〜