下記のサイトを参考にやってみた。DBを少し触り、フロントエンドのCSS周りのことも少し触れられるかと。
⚠Filamentを使う場合はこの辺りのことを自動でしてくれるので関係ない。
(Laravel BreezeはTailwindCSSとAlpine.js使ってレイアウトされている)
- Laravelのusersテーブルにカラムを追加してカスタマイズする
- Laravelでプルダウンをスマートに書く!編集画面もあり
- https://nerdcave.com/tailwind-cheat-sheet
便利なコマンド
curl.exe -X POST -d myData=XXXXXXXX http://localhost:8080/api/data概要
Laravelではmigrationファイルでデータベースの構造とバージョンを管理している。変更を加える場合は、下記のコマンドを使用して雛形ファイルを作成する。
php atrtisan make:migration <名前>ファイルはdatabase/migrationsフォルダーに作成されるので、編集をする。編集ができたら、下記のコマンドを使用して、データベースに反映させる。
php artisan migrateあとは、モデルやコントローラーを必要に応じて変更していく。
usersテーブルにカラムを追加する
参考サイトではついでに論理削除のカラムも追加していたが、自分は入れないことにした。
雛形ファイルのフォルダに移動してVSCodeを起動する。
cd /database/migrations/
code .雛形ファイルを編集する。
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::table('users', function (Blueprint $table) {
$table->date('date_of_birth')->nullable();
$table->string('school_name')->nullable();
$table->string('school_type')->nullable();
$table->integer('grade')->nullable();
$table->string('class_name')->nullable();
});
}
public function down(): void
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('date_of_birth');
$table->dropColumn('school_name');
$table->dropColumn('school_type');
$table->dropColumn('grade');
$table->dropColumn('class_name');
});
}
};appフォルダに戻り、データベースに適用する
cd /app
php artisan migrateモデルを編集する
/app/Models/User.php
~中略~
protected $fillable = [
'name',
'email',
'password',
'date_of_birth',
'school_name',
'school_type',
'grade',
'class_name',
];
~中略~コントローラーを編集する
/app/Http/Controllers/Auth/RegisteredUserController.php
public function store(Request $request): RedirectResponse
{
$request->validate([
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:'.User::class],
'password' => ['required', 'confirmed', Rules\Password::defaults()],
'date_of_birth' => ['nullable', 'date'],
'school_name' => ['nullable', 'string', 'max:255'],
'school_type' => ['nullable', 'string', 'max:255'],
'grade' => ['nullable', 'integer'],
'class_name' => ['nullable', 'string', 'max:255'],
]);
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => Hash::make($request->password),
'date_of_birth' => $request->date_of_birth,
'school_name' => $request->school_name,
'school_type' => $request->school_type,
'grade' => $request->grade,
'class_name' => $request->class_name,
]);
event(new Registered($user));
Auth::login($user);
return redirect(RouteServiceProvider::HOME);
}ビューを編集する
/app/resources/views/auth/register.blade.php
<!-- date_of_birth -->
<div class="mt-4">
<x-input-label for="date_of_birth" :value="__('date_of_birth')" />
<x-text-input id="date_of_birth" class="block mt-1 w-full" type="date" name="date_of_birth" :value="old('date_of_birth')" required autofocus autocomplete="date_of_birth" />
<x-input-error :messages="$errors->get('date_of_birth')" class="mt-2" />
</div>
<!-- school_name -->
<div class="mt-4">
<x-input-label for="school_name" :value="__('school_name')" />
<x-text-input id="school_name" class="block mt-1 w-full" type="text" name="school_name" :value="old('school_name')" required autofocus autocomplete="school_name" />
<x-input-error :messages="$errors->get('school_name')" class="mt-2" />
</div>
<!-- school_type -->
<div class="mt-4">
<x-input-label for="school_type" :value="__('school_type')" />
<x-text-input id="school_type" class="block mt-1 w-full" type="text" name="school_type" :value="old('school_type')" required autofocus autocomplete="school_type" />
<x-input-error :messages="$errors->get('school_type')" class="mt-2" />
</div>
<!-- grade -->
<div class="mt-4">
<x-input-label for="grade" :value="__('grade')" />
<x-text-input id="grade" class="block mt-1 w-full" type="text" name="grade" :value="old('grade')" required autofocus autocomplete="grade" />
<x-input-error :messages="$errors->get('grade')" class="mt-2" />
</div>
<!-- class_name -->
<div class="mt-4">
<x-input-label for="class_name" :value="__('class_name')" />
<x-text-input id="class_name" class="block mt-1 w-full" type="text" name="class_name" :value="old('class_name')" required autofocus autocomplete="class_name" />
<x-input-error :messages="$errors->get('class_name')" class="mt-2" />
</div>