前回までで、Laravelで開発を行うために下記3点を行いました。
・composerのインストール
・Laravelプロジェクトの作成
・Webサーバーの起動
ここまででLaravelプロジェクトの内容を見れるようになったわけですが、今回はLaravelを実際に使えるようにするために、
・npmのインストール
・フロントエンドパッケージのインストール
・laravel初期設定
・データベース接続
を行います。
npmのインストール
npmとは、javascriptライブラリのパッケージ管理ツールです。
PHPを扱っているのにjavascript?と思うかもしれませんが
Laravel公式ドキュメントによると、Laravelは bootstrap、react、vueを提供しており、これらはjavascriptのフレームワークです。そういった別パッケージと連携する際に、npmを使うと自動的にソースコード をダウンロードしてきてくれるなど、便利なことがたくさんあります。
詳細についてはまだまだ勉強中なので別記事で書こうと思います。
とりあえず、下記コマンドを叩いてnpmをインストールしておきます。
npm install
下記コマンドでバージョンが表示されれば成功です。
npm -v
//このように表示されます
//7.4.0
フロントエンドパッケージのインストール
Laravelでもフロントエンド開発を簡単に行うためにフロントエンドパッケージというものがあります。
とりあえず、下記コマンドでインストール!
composer require laravel/ui
成功すると、ターミナルでこのような↓画面が出るが、これはUIに関する様々なパッケージをインストールされたということです。
vueやbootstrapも使いたい場合はここでインストールしておきます。
php artisan ui vue
php artisan ui bootstrap
npm install && npm run dev をしてくださいと表示されるので、指示通りに実行します。
npm install
npm run dev
Laravel初期設定
タイムゾーン、言語設定
作成したプロジェクトをVSコードで開き、config /app.phpの中を下記のように変更します。(検索かけると早いです。コマンド+Fで検索窓でてきます。)
'timezone' => 'Asia/Tokyo',
'locale' => 'ja',
データベース文字コード設定
config / database.php の中を下記のように変更します。
'charset' => 'utf8',
'collation' => 'utf8_unicode_ci',
デバックバーのインストール
表示されている情報やデータベースとのやり取りで役に立つ機能なので、デバックバーをインストールしておきましょう。
ターミナルで下記コマンドをたたきます。
composer require barryvdh/laravel-debugbar
web表示を確認して、下の方にデバックバーが出ていればOKです。
ちなみにデバックバーは、本番環境で表示されるといけないので、表示/非表示を切り替えることができます。
切り替える場所は、VSコードで開いた中の、.envファイルのAPP_DEBUGです。
APP_DEBUG=true (デバックする)
or
APP_DEBUG=false (デバックしない)
データベース接続
では、いよいよデータベース接続を行います。
Macの方はMAMPを、Windowsの場合はXAMPPを起動してください。
phpMyAdminより新しくデータベースを作り、laravel_testと名前をつけます。(名前は任意です)
phpMyAdmin の Privilegesというところから、新しくユーザーを追加し、User nameをlaravel_test_user、passwordを test1234 と設定します。(名前とパスワードは任意で決めてください。)
.envファイルで、下記のようにデータベース設定をします。
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889 //変更箇所
DB_DATABASE=laravel_test //設定したデータベース名
DB_USERNAME=laravel_test_user //設定したユーザー名
DB_PASSWORD=test1234 //設定したパスワード
その上で、ターミナルで下記コマンドをたたきます。
php artisan migrate
成功すれば、データベース内にいくつかテーブルが作成されています!
phpMyAdminで下記のようにテーブルが確認できたら、Laravelとデータベースが接続できています!
お疲れ様でした!!