Fippiyのプログラム学習内容アウトプットBlog

日々の学習内容をアウトプットして振り返りを実施する。

Laravel開発、ログインページをカスタマイズする

現在作成しているサイトについて、ログイン機能はとりあえずついていますが、LaravelのAuth機能をつけたのみで、デフォルトで表示されるログインページで代用していました。

今回は、きっちりと自分でビューを作成し、新規登録・ログインページを使えるようにしていきます。

今回の目的

自作のログインページを作成して、ログインできるようにする

なぜやるか

デフォルトのページでログインはできるが、オリジナル作品としてログインページについてもオリジナル化したい

やりたいこと

ビューをオリジナルに変更する

オリジナル化に伴う編集作業について、内容を理解する

やったこと

自作ログインページの作成方法を知る

組み込むページを何処にするか決める

ミドルウェア設定を修正する

ルーティングの書き方を考える

使用できるルーティングを確認する

 

実施内容

まずはログインページをLaravel標準の物からオリジナル化する手順を確認しました。

以下のサイトを参考にさせて頂きました、ありがとうございます。 

laraweb.net

laraweb.net

このほかに、初めにLaravelを学習するのに使用した本も再び利用しています。

https://www.amazon.co.jp/gp/product/B07CLLW4MX/ref=ppx_yo_dt_b_d_asin_title_o01?ie=UTF8&psc=1

 

どこに作成するかを決める

以前、マイページのトップを作成する際にuser.indexビューを準備し作成しました。user関連情報としてuserコントローラーがあるので、今回はこのuserコントローラ内にユーザー情報である、ユーザーの新規登録とログインを扱うページを作ることにしました。

 

ログインページ作成

ログインページビューをuser.authとして作成し、表示させることから始めました。

後から新規登録ページも作成するので、ログイン関連ページとして「専用のレイアウト+ビュー」という形で今回は作成していきます。

コントローラについても、同じくuserコントローラを利用することとします。 

 

レイアウトビュー

# ~/resouces/views/layouts/auth-layout.blade.php

f:id:Fippiy:20190404122944p:plain

ユーザ認証用レイアウト

ログインビュー

# ~/resouces/views/layouts/user/auth.blade.php

f:id:Fippiy:20190404122818p:plain

ユーザ認証用フォーム

userコントローラにログイン処理を追加

# ~/app/Http/Controllers/UserController.php

f:id:Fippiy:20190404144733p:plain

コントローラ、ログイン処理

ログイン時のユーザ名取得にはAuth::getUser()という処理を記載していますが、こちらについては下記サイト情報を元に設定しました。ありがとうございます。

nextat.co.jp

これらの設定で一度動作確認をしましたが、動作せず…。 

 

ミドルウェア設定を修正する

web.phpのルート設定に問題がありました。

# ~/routes/web.php

f:id:Fippiy:20190404123029p:plain

ルーティング設定

userのルート情報にはmiddleware('auth')の設定をしています。

こちらは、ログイン済みかどうかの判定をしています。

今までの仕様では、トップページとデフォルトAuthページ以外はログイン時のみ利用することを目的としていたので、ログイン必須ページとしていました。

"->middleware('auth)"という設定ですね。

今回作成したアクションは、userコントローラに設定したgetLoginです。

しかし、上記設定だとuserを含むルートには"->middleware('auth)"が設定されており、ログインしていないのでアクセスできない状態となっていました。

そして、未ログイン時の処理としては、ログインページにリダイレクトです。このログインページは最初に作成していたauth機能で最初に出来ていたログインページであり、今回作成したログインページではないという状態になっていました。

 

f:id:Fippiy:20190404123249p:plain

デフォルトログインページ

原因が分かったので修正します。

# ~/routes/web.php

f:id:Fippiy:20190404123333p:plain

ルート設定修正後

userルートの中で今回のauthに関してはログイン処理となる為、resourceから切り出して個別に記述することでmiddlewareによるログイン判定を回避しました。

 

ルーティング記載方法を考える

この項目は結論として、記載方法変更は今回はしていません、いろいろ試したことを記載したのみです。

しかし、これではuserに対しての個別のルーティングがどんどんふえてしまいます。

ログインページ作成を現在していますが、この後に新規登録ページも増えます。

本情報検索用の"/book/find"も個別にルート設定してあります。

 

この当たりのルートの記述方法を探してみました、こちらを参考にさせて頂きました、ありがとうございます。

qiita.com

※しかし、これは結果的に使えませんでした。

以下の記述が使えるということでした。

Route::controller('hello/', 'App\Controllers\helloController');

 

よくサイト内を確認しているとLaravel5.3 で削除されている機能となっており、非対応になっていました。

 

現在使用している自分のアプリを確認してみると

"Laravel Framework 5.8.7"

非対応でした。

 

今回は、ルーティングは現状の書き方で実装することとします。

 

使用できるルーティングを確認

次に、現在設定済みのルーティングを一覧表示できる方法を探して確認することにしました。

 

確認方法については、こちらを参考にさせて頂きました、ありがとうございます。

qiita.com

こちらの方法でルート一覧は表示できました。

$ php artisan route:list

 

 

ログインページ見直し

ログインページの作成を行ったので、続いて新規登録ページも同様に作成します。

ここで、作成しているビューファイルについてですが、

"user/auth.blade.php"でまず作成していました。

 

ルーティングをどうするか再検討したところ、

/user/login

/user/signup

この2つのルートとして作成して、ログインと新規登録機能をつけることしました。

そこで、先程のログインビューのファイル名を"user/login.blade.php"に修正することにしました。

併せて、フォーム内のpost送信先、web.phpのルーティング名変更します。

 

 

新規登録フォームを作成

ここからユーザ新規登録ページを"user/signup.blade.php"というファイル名で作成していきます。

レイアウトは先程のログインと同じ物を使用します。

 

ベースとなるページは初めに紹介した本を参考に作成していたのですが、ログインページのみオリジナル作成手順があり、新規登録画面については詳細されていませんでした。

そこで、フォームはログインページをベースに作成し、設定不足分はLaravelで初めに実装していたフォームを参考に作成してみました。

# ~/resouces/views/layouts/user/signup.blade.php

f:id:Fippiy:20190404140835p:plain

新規登録用フォーム

ログイン用フォームを流用してアクションをサインアップ用に修正

 # ~/app/Http/Controllers/UserController.php

f:id:Fippiy:20190404141132p:plain

コントローラ設定

この他に、コントローラに"App\UserとIlluminate\Support\Facades\Hash"設定を追加

# ~/app/Http/Controllers/UserController.php

f:id:Fippiy:20190404141339p:plain

コントローラ設定2

これで一度動作させてみました。

{"name":"aaaaaaaaaaa","email":"testtest@test.com","updated_at":"2019-04-04 05:03:58","created_at":"2019-04-04 05:03:58","id":2}

登録後にビュー画面の指定等を実施していなかったので、ブラウザに処理結果がそのまま表示されました。

新規登録はできるようになったので後は登録後の画面表示処理がなかったので追加。

 

f:id:Fippiy:20190404143628p:plain

コントローラ、新規登録

登録結果によって、処理分岐を追加し、ビュー表示させます。

f:id:Fippiy:20190404143742p:plain

登録完了のメッセージ表示

これで新規登録とログイン画面のカスタマイズが完了…といいたいところですが。

ログインや新規登録後は、ユーザが利用するサイト内に遷移させる機能がまだついていません。

他にもスタイルを全く適用していないので、こちらのカスタマイズも必要です。

これらを次に実施します。

 

見栄えを変更する

デザイン変更

こちらはLaravelの話からはそれてcssでの作業となるので、今回は割愛させていただきます。

リンク変更

トップページの"新規登録"、"ログイン"のリンクが初期作成時のページになっているので、今回作成したページに遷移できるように変更しました。

 

リダイレクト処理 

ログインが完了した際にサイト内コンテンツに自動的にリダイレクトされる設定変更を実施しました。

新規登録時にもログインしてサイト内にリダイレクトされるような処理もしたかったのですが、新規登録時は一端「登録完了しました、ログインしてください」で対応することにしました。

 

 

バリデーション設定

新規登録時のインプット情報について、バリデーション設定がない為、空欄であったり入力ミス時には、現状のままだとサーバーエラーが表示されてしまう状態となっています。 

そこでバリデーション設定を追加しました。

設定方法についてはこちらを参考にさせて頂きました、ありがとうございます。

laraweb.net

 これを元に新規登録時のデータに対してバリデーションを設定しました。

f:id:Fippiy:20190404170924p:plain

新規登録ページに使うバリデーション

次にバリデーションエラー時のエラー内容をビューファイル上で表示させます。

設定方法についてはこちらを参考にさせて頂きました、 ありがとうございます。

readouble.com

 これを元に、エラーメッセージを表示させてみます。

f:id:Fippiy:20190404171028p:plain

エラーメッセージ表示設定

エラーメッセージはフラッシュメッセージとして設定されます。

エラーメッセージがある時のみ、その内容が表示されます。

 

実際に表示されるか確認。

f:id:Fippiy:20190404170726p:plain

バリデーションエラーの表示

メッセージは表示されましたが、デザインが崩れてしまっています。

エラーメッセージ表示欄に高さを指定していました、最初は複数行のメッセージをだす想定をしていなかった為です。

スタイルシートの修正でこちらはすぐ直りました。

 

次に、エラーメッセージが英語表記ですので、日本語化します。

日本語化手順については、こちらを参考にさせて頂きました、ありがとうございます。

qiita.com

これを元に日本語化設定を反映させてみました。

 

f:id:Fippiy:20190404183619p:plain

エラーメッセージ日本語化

 name,emailなど、一部がまだ日本語化されていない為、こちらも直します。

attributes設定に追加で対応できるようです。

# ~/resource/lang/ja/validation.php

f:id:Fippiy:20190404183925p:plain

attributes設定

日本語表記変換を記載。

f:id:Fippiy:20190404184050p:plain

attributes設定後

これで再度表示確認。

f:id:Fippiy:20190404190325p:plain

日本語化後のエラーメッセージ

以上でオリジナルのログインページ作成は完了です。

登録とログインのみの実装ですので、変更や削除処理は対象となっていませんでしたが、こちらはまた別途対応したいと考えています。