こんにちは!
前回はlaravelの環境構築をして、welcomeページの表示までやりました。
まだデータベースなどの設定ができていないので、そこらへんの設定をしながら、認証機能を追加したいと思います!
はい、それでは、データベースの設定から始めます。
- チュートリアル説明
- プログラミングの準備(エディタ、dockerの用意、環境構築)
- 認証機能を追加してログイン機能を実装する(今ここ)
- ブログのタイトルと記事を登録する
- ブログの記事へタグを登録する
- ブログの一覧表示、編集機能の実装
- ブログの検索機能の実装
- ユーザーへの通知機能の実装
データベースの設定
一旦、
http://localhost:4040
をブラウザに入力してみてください。
はい、こんな感じの画面が出るかと思います。(もしかしたらエラーになってない方もいるかも。でもlaravelの設定はします!のでスキップしないでね)
これは、phpmyadminというsqlクライアントツールで、データベースの中身を確認しやすくしてくれるツールです。
さくらのサーバーやxserverにも使用されています。
で、見ての通り、設定ができてないのでerrorとなっています。
なので設定していきましょう!
Tutorial/blog/.envファイルを開いてください。
で、以下のように書き換えてください。
APP_NAME=Tutorial ←書き換え
APP_ENV=local
APP_KEY=base64:BnfWoJ+0X36b55Oe/SYaxXTWMR78EO/njOxfDQ2oogE=
APP_DEBUG=true
APP_URL=http://localhost:8080 ←書き換え
LOG_CHANNEL=stack
DB_CONNECTION=mysql
DB_HOST=mysql ←書き換え
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=user ←書き換え
DB_PASSWORD=password ←書き換え
BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
MAIL_DRIVER=smtp
MAIL_HOST=mailcatcher ←書き換え
MAIL_PORT=1025 ←書き換え
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=from_address@example.com ←書き換え
MAIL_FROM_NAME="${APP_NAME}"
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
データベースの設定のついでに、mailcatcherなどの設定もしています。
(mailcatcherは後ほど紹介します。また、APP_NAME,APP_URLについてはこのアプリケーションの名前と、ベースとなるurl(ビギナーエンジニアブログで言うと、https://begien.com/の部分)になります。)
はい、そしたら、
docker-compose down
して、
docker-compose up
してみてください。
それで、
http://localhost:4040
とブラウザに入力してみてください。
はい、こんな画面が表示されれば成功です。
もし、エラーが解消されない場合、
まず、Tutorial/docker/mysql/dataディレクトリの中身を見て
laravel
というディレクトリがあるか確認してください。
もし、ない場合はTutorial/docker/mysql/dataディレクトリを一旦削除してください。
で、
docker-compose down --volumes
と入力して、サーバーを落としたあと、
docker-compose build --no-cache
と入力して再ビルドしたあと、
docker-compose up --build
と入力してみてください。
で、Tutorial/docker/mysql/dataディレクトリの中を見て、
laravel
というディレクトリが作られれば一旦成功?で、再度、
http://localhost:4040
をブラウザに入力してみてください。
というのも、私自身設定後もエラーとなっており、上記の手順を踏んだら表示できたので、もしエラーが解消されない場合は試してみてください。
それでもエラーが解消されない場合は、いろいろ調べてみてください!すいません🙇♂️
ここで一旦、laravelとデータベースが連携できているか確認して、できていればデフォルトのテーブルを作成したいと思います。
docker-compose exec app bash
と入力してappコンテナの中に入ってください。
で、
php artisan tinker
と入力してみてください。
で、画像のように
DB::connection()->getDatabaseName()
を入力してエンターキーを押してください。
画像のようにデータベース名が帰って来ればオッケーそうなので、多分大丈夫でしょう。
(普段はphp artisan migrateを実行して成功すれば接続できてる。失敗すれば接続できてないと判断をしていたので、これは初めて知りました。)
では、laravelにデフォルトで用意されているテーブルを作成します。
デフォルトのテーブルの作成
まず、Tutorial/blog/database/migrationsディレクトリの中身を確認してみます。
はい、こんな感じで3つ用意されていると思います。
画像で開いているファイルは
xxxx_xx_xx_000000_create_users_table.php
です。
見てみると、createとか、idとかnameとかemailとか書いてありますね。
これはmigration(マイグレーション)ファイルといって、データベースを操作するファイルになります。
laravelでの開発では、基本的にこのmigrationファイルを実行してデータベースを操作します。
例えばテーブルを作成したり、フィールドを追加したり、フィールドの型を変更したり。などなど。
ちなみにruby on railsもmigrationファイルがあるので、フレームワークではおなじみなのかもしれません。
ということで、このマイグレーションファイルを実行してテーブルを作成していきます。
今tinkerが起動中であれば、
quit または exit
と入力してtinkerを終了してください。
で、
php artisan migrate
と入力してください。
こんな感じで終了したらOKです。
(Xdebugがなんか言ってますが、無視してオッケーです。今後も)
そしたらphpmyadminを見てみましょう。
はい、こんな感じでlaravelというデータベースの中に4つテーブルが作成されました!
オッケーです!
ちなみにmigrationsテーブルは、先ほど確認したマイグレーションファイルの中になかったテーブルですが、これは
php artisan migrate
を実行した際に、自動的に作成されています。このテーブルはテーブル名の通り、migrationファイルを管理するテーブルになっています。
今はふーんと思っていれば大丈夫です!
(作成される過程が気になる方は
こちらを参照してください。)
ということで、必要なテーブルが揃ったので、今度はlaravelの認証機能を追加していきます!
認証機能の追加
認証機能とはログイン、ログアウト、会員登録など、ユーザーに権限を付与できる機能です!
このビギナーエンジニアブログも、ログインユーザーしか記事の投稿はできませんし、記事のお気に入りもできません。
認証機能を追加すると、一気にアプリ感がでるので、早速やっていきましょう!
ということで、
こちらに記載のある通りにやっていきます。
appコンテナの中にいることを確認して、
composer require laravel/ui "^1.0" --dev
と入力してエンターキーを押して実行してください。
色々ダウンロードされるかと思います。
そしたら次に、
php artisan ui vue --auth
を入力して実行してください。
参考に今のターミナルの状況は以下の通りです。
はい。そしたら、
Please run "npm install && npm run dev" to compile your fresh scaffolding.
と記載されているため、実行しておきます。
npm install && npm run dev
少し時間かかると思いますが(パソコンも悲鳴を上げると思いますが)、以下のようになったら終了です。
はい、そしたら、
http://localhost:8080/public
とブラウザに入力してwelcomeページを見てみましょう。
はい、右上にLOGIN,REGISTERが追加されてますね!
そしたら早速会員登録のテストをしてみましょう。
会員登録のテスト
REGISTERをクリックしてください。
こんな感じで適当に入力して、Registerをクリックしてみましょう。
はい、会員登録が正常に終了し、右上に先ほど入力したnameが表示されてますね!
では、念の為phpmyadminでusersテーブルを見てみましょう。
はい、こんな感じでちゃんとデータベースに登録されてますね!
成功です!
そしたら、現在ログイン後にDashboardのページに遷移しているので、今後の実装に備えてログイン後もwelcomeページに遷移するように設定します。
app/controllers/Auth/LoginControllerへ以下のように編集してください。
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
class LoginController extends Controller
{
/*
|--------------------------------------------------------------------------
| Login Controller
|--------------------------------------------------------------------------
|
| This controller handles authenticating users for the application and
| redirecting them to your home screen. The controller uses a trait
| to conveniently provide its functionality to your applications.
|
*/
use AuthenticatesUsers;
/**
* Where to redirect users after login.
*
* @var string
*/
protected $redirectTo = RouteServiceProvider::HOME;
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('guest')->except('logout');
}
//↓追加
public function redirectPath()
{
return '/';
}
}
追加した記述は、ログイン、または会員登録後のリダイレクト先を指定するアクションになります。
今はへーとだけ思っていれば大丈夫です!
それでは、ちゃんと遷移先が変更されたか確認しましょう。右上のユーザーの名前が表示されている箇所をクリックして、ログアウトしてください。
で、右上の「LOGIN」をクリックして、さきほど登録したメールアドレスとパスワードを入力して、ログインしてみてください。
welcomeページが表示されたでしょうか?されていればオッケーです!
Mailcatcherでパスワードリセットができるかテストする
そしたら今度は、パスワードリセットを通じてmailcatcherがちゃんと設定されているか確認していきます。
そしたら、再度ログアウトし、ログイン画面を表示してください。で、Forgot Your Password?をクリックしてください。
で、先ほど入力したメールアドレスを入力し、Send Password Reset Linkをクリックしてみましょう。
以下のようなフラッシュメッセージが表示されたら、ひとまず正常にメール送信されたはずです。
はい、そしたら、ブラウザに
http://localhost:1080
と入力してみましょう!
はい、こんな感じの画面が表示され、from_address@example.comからパスワードリセット用のリンクがついたメールが送信されてますね!
mailcatcherの設定はうまくいっているようですね!オッケーです!
(from_address@example.comは.envで記載した送信元アドレスです。)
こんな感じでmailcatcherはローカルでのメール送信状況を簡単に把握することができます!
それでは、メールにあるResetPasswordをクリックしてパスワードリセットページにいきましょう!
はい、こんなページに遷移するので、パスワードリセットしてみてください。
できましたか?
できていれば、認証系の処理は正常に動いているということです!
やったぜ!これでパスワードリセットし放題です!
xdebugの設定
さて、次にプログラミングで最も大事なデバッグツールの設定をしていきます。
この説明を最後に本記事を終了したいと思います。
あとちょい!頑張ってください!
vs codeの四角?のアイコンをクリックして、
PHP Debug
と検索して、こいつをインストールしてください。
虫のアイコンをクリックして、「launch.jsonファイルを作成します」をクリック
表示されるプルダウンから「PHP」を選択してください。
(もしPHP以外を選択した場合は、多分大丈夫だと思いますが、念の為作成されたlaunch.jsonを削除して、もう一度PHPを選択してください。)
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9000
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}"
},
//↓以下を追加
{
"name": "XDebug on docker",
"type": "php",
"request": "launch",
"port": 9000,
"pathMappings": {
"/var/www/html":"/Users/ユーザーの名前/Documents/laravel/Tutorial/blog",
}
}
]
}
/Users/ユーザーの名前/Documents/laravel/Tutorial/blog
の部分は、ご自身のパソコンでblogディレクトリに移動して、
pwd
と入力すると、パスを確認できます。参考としてください。(appコンテナではなく、あくまでパソコンの中のディレクトリです)
そしたらcommand + sで保存して、一度
docker-compose down
でサーバーを落とします。
で、再度
docker-compose up
してください。
(※以下に紹介する手順でブレークポイントで止まらなかったら、docker-compose build --no-cacheなど、サーバーを立ち上げたり落としたりを繰り返してみてください。私もこの記事書いている時、すんなり止まりませんでした。ので、いろいろ試してみてください!すいません)
で、虫のアイコンをクリック
下マークをクリックして、XDebug on dockerを選択してください。で、再生マークをクリック
するとこんなバーが表示されます。
そしたら、Tutorial/blog/public/index.phpを開いてください。
適当にコードが書かれている行番号の左側をクリックすると赤い丸が表示されます。
で、laravelのブラウザをリロードしてみてください。
はい!こんな感じで止まったら成功です!
やりました!これからこのxdebugの力を駆使してプログラミングしていきます!xdebugまじ便利なんでこれはでかいですよ!
(確かruby on railsはライブラリインストールするだけでxdebugと同じようなデバッグツール使えたはずです。pry-railsて名前だったような。c言語とかもデフォルトであるとか聞いたことあります。phpはめんどくさいですね!)
ちなみにこのストップした状態を解除するには、バーの再生ボタンをクリックするか、停止(四角)のボタンをクリックすれば解除できます。
このあたりはご自身でポチポチして確認してみてください。
ということで今回の記事はこれで終了になります。お疲れ様でした!
次回はいよいよ記事の投稿機能を実装していきます!
ではまた!