前回で、環境設定と基本画面、データベースの作成が終わりました。現在は下のページwelcome.blade.php
だけが存在している状況です。
これに必要なページや機能をつけていくことになりますが、認証機能(ユーザー管理・ログイン管理)は多くの場合必要となるため、ライブラリが用意されています。これを導入すると簡単に認証管理を行うことができます。今回はLaravel Breezeというライブラリを使用します。
Step.1 ファイルをダウンロード、インストールする
まずは忘れずにprojectへ移動しておきましょう。
cd Laravelproject
この状態で、必要なファイルをダウンロードします。
./vendor/bin/sail composer require laravel/breeze --dev
続いてこれをインストールします。
./vendor/bin/sail php artisan breeze:install
・「使用する言語は何にしますか?」 -> 今回は「blade」を指定します。
・「ダークモードを使用しますか?」 -> お好みで。
最後にもう1問ありますが、これは「no」で大丈夫です。
Step.2 npmをインストール、ビルドする
その他に必要なパッケージをインストールし、ビルドします。次のコマンドを順に実行しましょう。
./vendor/bin/sail npm install
./vendor/bin/sail npm run build
Step.3 migrateを実行し、Breezeを実装する
処理が終わったら、次のコマンドを実行してBreezeを実装します。
./vendor/bin/sail php artisan migrate
localhost
にアクセスしてみると、
分かりにくいですが、右上にLog in
とRegister
があり、すでに「ログイン機能」と「ユーザー登録機能」が実装されています。例えば、Log in
をクリックしてみると
このようなログイン画面ができていることが分かります。
当然このページのコードもproject内に出来ているので、そこを書き直せばデザイン・機能を変更・追加することが可能です。
また、「localhost:8080」にアクセルしてデータベースを見てみると、
failed_jobs
migrations
password_resets
personal_access_tokens
users
の5つのテーブルができています。このうちusers
が登録したユーザーを管理するテーブルとなります。
Step.4 テストユーザーの作成(※任意)
Laravelには「seeder」という機能があり、テスト用のユーザーを簡単に作成することができます。必須ではありませんが、開発する際には便利ですので、そのやり方も記しておきます。
project内
database -> seeders -> DatabaseSeeder.php を次のように編集します。
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
// 🔽 この行がコメントアウトされているので、アクティブにする
\App\Models\User::factory(10)->create();
// 🔽 こちらはそのまま
// \App\Models\User::factory()->create([
// 'name' => 'Test User',
// 'email' => 'test@example.com',
// ]);
}
}
1行分のコメントアウトを外すだけです。
文章も「Modelを介してUsersテーブルに10個のデータをcreateしてね」という感じに読めますね。
できたら、ターミナルで
php artisan db:seed
を実行します。
データベースを確認してみると、10人分の架空のユーザーが登録されています。
Step.3で作ったログイン画面からログインできるか確認をしてみましょう。
下のような画面に移ることができればログインできています。この画面もあとでデザインなどを変更していきましょう。
パスワードは「ハッシュ化」といって暗号化されていますが、全員「password」です。
次の記事