さくらレンタルサーバ にLaravelのお問い合わせフォームを設置する

環境

本番環境

• さくらのレンタルサーバ スタンダード
• Laravel v8.20.1
• PHP7.4.10

開発環境

• mac + docker + Laravel sail
• Laravel v8.20.1
• PHP v7.4.13

要件

• お問い合わせフォームのURLは、https://xxxxx.com/contact として、contact配下のみでLaravelを実行する
• フォームは、入力＋確認＋完了の一般的なもの
• google reCaptcha でbotスパム対策する
• デザインはLaravel UIをベースにする
• ユニットテスト
• さくらへのデプロイは、Github Actionsで自動化
• サンプル送付希望の場合、住所入力を必須にするvalidation
• 郵便番号から住所補完機能
• レスポンシブ表示

フォーム入力内容／必須項目の有無

開発環境の構築

https://zenn.dev/hdmt/articles/132a5014bda7ad

本番：さくらレンタルサーバ にLaravel環境を設置

ローカルで

• githubリポジトリにローカルのソースコードをpush

さくらサーバで

• githubとさくらが通信できるようにSSHkeyを登録
• さくら上で、リポジトリをclone

https://pointsandlines.jp/server-infra/sakura-github

• gitconfigでユーザ名、メアドを設定
• コミット、pushできることを確認する
• composer をインストール
• composer を実行し、Laravelのvendorディレクトリ をダウンロード
• .httaccess 編集
• .env の作成
• '/contact' にシンボリックリンク設置
• Laravelの表示確認

https://mike-neko.github.io/blog/laravel-sakura/

github actions でローカルから本番さくらサーバへ自動デプロイ

ローカル環境にLivewireをインストール

./vendor/bin/sail composer require livewire/livewire

お問い合わせフォームの入力、確認、完了画面の各Livewireコンポーネントを作成

./vendor/bin/sail php artisan make:livewire Input
./vendor/bin/sail php artisan make:livewire Confirm
./vendor/bin/sail php artisan make:livewire Complete

https://readouble.com/livewire/2.x/ja/making-components.html

UIは、TailwindCSSで作られたテンプレートを利用する

https://github.com/thedevdojo/tails

Debug bar を 開発環境にインストール

./vendor/bin/sail composer require barryvdh/laravel-debugbar --dev

.env の APP_DEBUG=true となっていることを確認

https://github.com/barryvdh/laravel-debugbar

mailable クラスでメール送信

mailableクラスを生成

./vendor/bin/sail php artisan make:mail Contact

メール本文のviewファイル resources/views/email/contact.blade.php を作成

https://readouble.com/laravel/8.x/ja/mail.html

キャッシュクリア

./vendor/bin/sail php artisan cache:clear
./vendor/bin/sail php artisan config:clear
./vendor/bin/sail php artisan config:cache

ローカルのMailHogにアクセス

http://localhost:8025/

checkbox のバリデーションがめんどくさい問題

check選択して、外すと、↓のようにfalseが残り、これがvalidationの邪魔をしてしまう。
選択したものだけ、[ key => value ] だけ保持して、submitさせたい。

対応

Livewireのライフサイクルフックで、checkbox 配列の値がfalseのとき、filterする。

    public function updatedPosts()
    {
        $this->posts['request'] = array_filter(
            $this->posts['request'],
            function($value) {
                return $value !== false;
            }
        );
    }

↑の修正。$postsプロパティが更新されたら、毎回実行されてしまって、
$this->posts['request'] が定義されていない、エラーが出るので、以下に修正。

updatedPostsRequest() のようにしたいが、うまく動かなかった。

public function updatedPosts()
    {
        if(!empty($this->posts['request'])) {
            $this->posts['request'] = array_filter(
                $this->posts['request'],
                function($value) {
                    return $value !== false;
                }
            );
        }
    }

https://readouble.com/livewire/2.x/ja/lifecycle-hooks.html