Laravelでユーザー登録の際にアバターも一緒に登録する方法
1002 回閲覧されました
みなさんこんにちは、jonioです。
Laravelでユーザー登録をする時にアバター画像の登録もしたいと思ったのですがネットの情報があまりにもなく実装の工程が開設されている記事が1つだけあったのですがその記事の解説は間違っていて完全ではありませんでした。
私は他の情報と組み合わせて実装できたのですが次に同じ事をしないといけなくなった時にすぐできる為の記事を残します。
Laravelのバージョンは8で実行環境はMAMPを使っています。
目次
Git
GitのURLを載せますので必要な方はコードを使って下さい。
デモ画像
アカウント登録の画面で↓の様に赤枠の部分にアバター画像の登録ができます。（アバター画像の登録は任意です）
アカウントを登録した後にアバターが表示されるページに飛ぶと↓の赤枠の様に登録アバターがない場合の画像が表示されます。
それでは実装を始めます。
composer require laravel/uiで登録機能を実装する
ユーザー登録の画面とログイン画面（↓の赤枠）を実装します。
これの実装の方法を解説すると話がそれるので実装方法は↓を読んで下さい。
実装が終わるとuserテーブルができるのですがアバターを追加するavatarカラムを追加します。
avatarカラムの追加
ターミナルでLaravelのプロジェクトまで移動してからuserカラムにavatarカラムを追加する為に「php artisan make:migration add_column_avatar_to_user_table —table=users」のコマンドを叩きます。
すると「Laravelのプロジェクト > database > migrations > 本日の日付_add_column_avatar_to_user_table」が作成されるのでコードを↓にします。
17行目は「nameカラムの次のカラムにavatarカラムを作ります」という意味で29行目は「php artisan migrate:rollback」をした時の為の記述です。
記述が終わったら「php artisan migrate」でavatarカラムがnameカラムの右にできているのが確認できます。
userテーブルにavatarカラムの内容を登録できるようにする
Userモデルを編集しますが「Laravelのプロジェクト > app > Models > User.php」のコードを↓にします。
20行目の「protected $fillable」の中に23行目の「’avatar’」を追加する事でユーザー登録の際にアバターの登録ができるようになります。
Registerコントローラーにavatarカラムを追加する
「Laravelのプロジェクト > app > Http > Controllers > Auth > RegisterController.php」を編集しますがこのコントローラーはユーザー登録をする時のコントローラーです。
55行目ですが「[‘image’]」はアバターの登録が必須ではない状態ですが実際使う事を考えた時に人によっては登録しない人もいるはずなのでアバターの登録がない場合はその場合用の画像を表示する事にしました。
もしアバターの登録を必須にする場合は「[‘required’, ‘image’]」として下さい。
70行目〜86行目ですが70行目〜80行目のelseの前はアバター画像がある場合で80行目のelseの後〜86行目はアバター画像がない場合です。
71行目・72行目ですがユーザー登録をした際に画像を登録するコードです。
実際にユーザー登録をする時にシンボリックリンクという物を作成しているのですが画像の登録の流れとシンボリックリンクが何かを知らない方は↓の記事を読めば理解できると思います。
ユーザー登録用のbladeを編集
ユーザー登録のビューにアバターの登録の項目を追加します。
「Laravelのプロジェクト > resources > views > auth > register.blade.php」を編集します。
58行目〜69行目を追加して11行目を少し修正しています。
11行目に「enctype=‘multipart/form-data‘」を追加していますが何なのかは↓の記事を読んで下さい。
62行目でアバターを必須にしていてアバター画像の登録をせずにユーザー登録をしようとしたりよっぽど容量が大きい画像の登録をした場合はエラー文が赤色になります。
エラーの表示が63行目〜67行目です。
これでユーザー登録をした場合にアバターの登録をしたらアバターが表示されてアバターの登録のしない場合はその時用の画像が表示されます。
ビューで確認
私はhome.blade.phpにアバターを表示して確認しました。
ルーティングとコントローラーは解説しませんがコードのみを載せます。
コントローラーですが短縮した書き方になっていてこのまま使うとエラーになりますがそうならない様に「Laravelのプロジェクト > app > Providers > RouteServiceProvider.php」の中の30行目あたりに↓のコードがありますがコメントを外して下さい。
home.blade.phpは↓にします。
7行目はアバターを登録した場合で9行目はアバターを登録しなかった場合です。
アバターを登録しない場合の画像ですが「Laravelのプロジェクト > public > storage > images」の下に> default.jpgを置いています。
ちなみにavatarカラムですが画像を登録してない場合は「NULL」と表示されているのが確認できます。
これで完成です。