4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Laravel基本の流れ② 認証画面を作ろう。(Laravel Breezeを導入する)

Last updated at Posted at 2023-06-12

 前回で、環境設定と基本画面、データベースの作成が終わりました。現在は下のページwelcome.blade.phpだけが存在している状況です。

名称未設定のデザイン (4).png

 これに必要なページや機能をつけていくことになりますが、認証機能(ユーザー管理・ログイン管理)は多くの場合必要となるため、ライブラリが用意されています。これを導入すると簡単に認証管理を行うことができます。今回は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にアクセスしてみると、

3.png

 分かりにくいですが、右上にLog inRegisterがあり、すでに「ログイン機能」と「ユーザー登録機能」が実装されています。例えば、Log inをクリックしてみると

3.png

 このようなログイン画面ができていることが分かります。 
 当然このページのコードもproject内に出来ているので、そこを書き直せばデザイン・機能を変更・追加することが可能です。

 また、「localhost:8080」にアクセルしてデータベースを見てみると、
failed_jobs
migrations
password_resets
personal_access_tokens
users
の5つのテーブルができています。このうちusersが登録したユーザーを管理するテーブルとなります。

Step.4 テストユーザーの作成(※任意)

 Laravelには「seeder」という機能があり、テスト用のユーザーを簡単に作成することができます。必須ではありませんが、開発する際には便利ですので、そのやり方も記しておきます。

project内
 database -> seeders -> DatabaseSeeder.php を次のように編集します。

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」です。

phpmyadmin image phpmyadminphpmyadmin links - mysqlmysql ports - 808080 environment MYSQL_USERNAME ${DB_USERNAME} MYSQL_ROOT_PASSWORD ${DB_PASSWORD} PMA_HOST mysql networks - sail (2).png

次の記事

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?