Laravelで、体重管理アプリを作成するにあたって必要となる知識の整理

環境
ログイン機能
シーダー、ファクトリを利用してダミーデータを入れる
1. ファクトリ×日本語
HTML/CSSでパーツをうまく作成するためのチップス
1. ボタン
できるだけコーディング量を減らすテクニック
1. CSSのコーディングを減らすためには、、、
HTML/CSSだけで、JavaScriptやLivewireライブラリを使用せずに、モーダル画面を作成する方法

環境

PHP 7.4、Laravel 8を使用することとする。データベースはMySQLを使用。Webサーバーは、nginxを使用。docker環境構築してます。dockerでのphpコンテナ内にcomposerをインストール済です。

ログイン機能

BreezeとかFortifyなどがあるが、ここでは、Fortifyを選択してます。

Fortifyのセットアップ

Fortifyを、ServiceProviderの仕組みを利用して、使用できるようにしていきます。

phpコンテナ内に入り、

composer require laravel/fortify

php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"

その後、マイグレーションをしておきます。

php artisan migrate

次に、configディレクトリ内のapp.phpを下記のように修正します。

①　'locale' => 'ja'

② 
 'provider' => [
//中略
App\Providers\FortifyServiceProvider::class,
]

③FortifyServiceProvider.php内のbootメソッドの修正

bootメソッド内に下記を入れておきます。

　　　　Fortify::createUsersUsing(CreateNewUser::class);

        Fortify::registerView(function () {
            return view('auth.register');
        });

        Fortify::loginView(function () {
            return view('auth.login');
        });

        RateLimiter::for('login', function (Request $request) {
            $email = (string) $request->email;

            return Limit::perMinute(10)->by($email . $request->ip());
        });

④RouteServiceProvider.phpの修正検討

⑤エラー文を日本語にするために日本語ファイルのインストール

composer require laravel-lang/lang:~7.0 --dev
cp -r ./vendor/laravel-lang/lang/src/ja ./resources/lang/

Bladeファイルの用意

Fortifyを利用する場合は、自分でBladeファイルを用意する必要があります。その場合、埋め込むように要求されたものを埋め込んでおかないと、うまくいきません。

登録画面に必要な埋め込みコード

なお、Actions>fortify>PasswordValidationRules.phpの 'confirmed' を削除することで確認パスワードを無効にすることができます。

ログイン画面に必要な埋め込みコード

登録画面やログイン画面に、バリデーションをつける方法

FortifyServiceProvider.php内に下記を記載すれば、自分が作成したLoginRequestを反映することができる。

$this->app->bind(FortifyLoginRequest::class, LoginRequest::class);

シーダー、ファクトリを利用してダミーデータを入れる

ファクトリ×日本語

config/app.php内の

'faker_locale' => 'ja_JP'

HTML/CSSでパーツをうまく作成するためのチップス

ボタン

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            display: block;
            padding: 8px 32px;
            border: none;
            background-color: #82756A;
            color: #FFF;
            font-size: 16px;
            cursor: pointer;
            margin: 60px auto 0;
        }
    </style>
</head>
<body>
    <button>承諾</button>
</body>
</html>

できるだけコーディング量を減らすテクニック

CSSのコーディングを減らすためには、、、

Bladeファイルの仕組みを利用する。すなわち、layoutsディレクトリ内に、app.blade.phpを作成し、その中に、共通規則を記載したcommon.cssを読み込むようにしておく。

なお、リセットcss？もここに入れておく。

すなわち、app.blade.php内の、headタグ内の最後に下記をいれておく。

　<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
  <link rel="stylesheet" href="{{ asset('css/common.css')}}">