第22回 WindowsでPHPの開発環境構築とLaravelのログイン画面の表示
公開日:2021-02-06 更新日:2021-02-07
1. 概要
Windows上にPHPの開発環境構築をして、Laravelのログイン画面を表示するところまで行います。
2. 動画
3. PHPの開発環境構築
Pleiades のインストールを行います。
Pleiades には、Eclipse、Apache、MariaDB(MySQL)、PHP が含まれています。
https://mergedoc.osdn.jp/にアクセスします。
Eclipse 2020 をクリックして、
Windows64bit、PHP、full edition の Download をクリックします。
クリックすると、URLが表示されるので、それをクリックすると、Pleiades のダウンロードが開始されます。
zip のダウンロードが完了したら、
Pleiades をインストールする場所に移動かコピします。
パスが長くなると解凍時にエラーが出る場合があるため、
zip のファイル名を、pleiades.zip にリネームします。
zip を解凍します。
今回はDドライブ直下に解凍しました。以降のパスは、適宜読み替えてください。
解凍すると、pleiades フォルダの下にさらに pleiades フォルダができるため、
pleiades フォルダが1つになるようにファイルの移動をして、以下のようなフォルダ構造にします。
次に、xampp の初期設定を行うため、
d:/pleiades/xampp/setup_xampp.bat を1度だけ実行します。
d:/pleiades/xampp/xampp_start.exe を実行して、xampp を起動します。
xampp を停止する場合は、同じ階層にある xampp_stop.exe を実行してください。
コマンドプロンプトを起動して、
PHP と MySQL にパスを通します。
MySQLのパスワードの設定をします。
mysql -u root -p を実行後、パスワードを入力して MySQL に接続できれば OK です。
phpMyAdmin に MySQL のパスワードを設定します。
d:/pleiades/xampp/phpMyAdmin/config.inc.php に、パスワードを指定してください。
http://localhost/dashboard/ にアクセスして、
画面の右上の phpmyadmin で、DBに接続できれば OK です。
Pleiades には、Eclipse、Apache、MariaDB(MySQL)、PHP が含まれています。
https://mergedoc.osdn.jp/にアクセスします。
Eclipse 2020 をクリックして、
Windows64bit、PHP、full edition の Download をクリックします。
クリックすると、URLが表示されるので、それをクリックすると、Pleiades のダウンロードが開始されます。
zip のダウンロードが完了したら、
Pleiades をインストールする場所に移動かコピします。
パスが長くなると解凍時にエラーが出る場合があるため、
zip のファイル名を、pleiades.zip にリネームします。
zip を解凍します。
今回はDドライブ直下に解凍しました。以降のパスは、適宜読み替えてください。
解凍すると、pleiades フォルダの下にさらに pleiades フォルダができるため、
pleiades フォルダが1つになるようにファイルの移動をして、以下のようなフォルダ構造にします。
d:/
└ pleiades/
├ .metadata.default
├ eclipse
└ xampp
次に、xampp の初期設定を行うため、
d:/pleiades/xampp/setup_xampp.bat を1度だけ実行します。
d:/pleiades/xampp/xampp_start.exe を実行して、xampp を起動します。
xampp を停止する場合は、同じ階層にある xampp_stop.exe を実行してください。
コマンドプロンプトを起動して、
PHP と MySQL にパスを通します。
set PATH=%PATH%;d:\pleiades\xampp\php;
set PATH=%PATH%;d:\pleiades\xampp\mysql\bin;
php -v でバージョンがでれば OK です。MySQLのパスワードの設定をします。
mysqladmin -u root password root
mysql -u root -p を実行後、パスワードを入力して MySQL に接続できれば OK です。
phpMyAdmin に MySQL のパスワードを設定します。
d:/pleiades/xampp/phpMyAdmin/config.inc.php に、パスワードを指定してください。
$cfg['Servers'][$i]['password'] = 'root';
http://localhost/dashboard/ にアクセスして、
画面の右上の phpmyadmin で、DBに接続できれば OK です。
4. composer のインストール
カレントディレクトリを htdocs にします。
https://getcomposer.org/download/ にアクセスして、
表示されている4行のコマンドをコマンドプロンプトで実行します。
htdocs 配下に、composer.phar が作成されます。
以下のコマンドでバージョンが表示されれば OK です。
cd d:\pleiades\xampp\htdocs
https://getcomposer.org/download/ にアクセスして、
表示されている4行のコマンドをコマンドプロンプトで実行します。
htdocs 配下に、composer.phar が作成されます。
以下のコマンドでバージョンが表示されれば OK です。
php composer.phar -V
5. laravel/installer のインストール
d:\pleiades\xampp\htdocs\laravel_installer と言うフォルダを作成します。
htdocs 配下の composer.phar を、
laravel_installer 配下にコピーします。
カレントディレクトリを laravel_installer にします。
次のコマンドで、laravel/installer をインストールします。
htdocs 配下の composer.phar を、
laravel_installer 配下にコピーします。
カレントディレクトリを laravel_installer にします。
cd d:/pleiades/xampp/htdocs/laravel_installer
次のコマンドで、laravel/installer をインストールします。
php composer.phar require laravel/installer
6. laravel のプロジェクトの作成
カレントディレクトリを htdocs にします。
cd d:/pleiades/xampp/htdocs
以下のコマンドにより、laravel_test と言うプロジェクトを作成します。
php laravel_installer/vendor/laravel/installer/bin/laravel new laravel_test
実行後、
http://localhost/laravel_test/public/ にアクセスして、画面が出れば OK です。
7. ログイン画面の追加
d:/pleiades/xampp/htdocs/laravel_test 配下に、composer.phar をコピーします。
カレントディレクトリを laravel_test にします。
以下のコマンドにより、ログイン画面を追加します。
カレントディレクトリを laravel_test にします。
cd d:/pleiades/xampp/htdocs/laravel_test
以下のコマンドにより、ログイン画面を追加します。
php composer.phar require laravel/ui
php artisan ui vue --auth
8. node.js のインストール
https://nodejs.org/ja/download/ にアクセスします。
Windows Binary の 64bit をクリックします。
zip のファイル名を、node.zip にリネームします。
d:\pleiades 配下に zip を移動して解凍します。
解凍すると、pleiades の時と同様に、フォルダが1階層多く作成されるため、
d:/pleiades/node/node.exe になるように、ファイルの移動をします。
node にパスを通します。
Windows Binary の 64bit をクリックします。
zip のファイル名を、node.zip にリネームします。
d:\pleiades 配下に zip を移動して解凍します。
解凍すると、pleiades の時と同様に、フォルダが1階層多く作成されるため、
d:/pleiades/node/node.exe になるように、ファイルの移動をします。
node にパスを通します。
set PATH=%PATH%;d:\pleiades\node;
node -v でバージョンがでれば OK です。9. node.js のインストール
ログイン画面の追加時に表示されていた、次のコマンドを実行します。
http://localhost/laravel_test/public/ にアクセスすると、
右上にログインのリンクが追加されます。
クリックするとログイン画面に遷移します。
CSS が有効になっていないため、もう一度次のコマンドを実行します。
cd d:/pleiades/xampp/htdocs/laravel_test
npm install && npm run dev
http://localhost/laravel_test/public/ にアクセスすると、
右上にログインのリンクが追加されます。
クリックするとログイン画面に遷移します。
CSS が有効になっていないため、もう一度次のコマンドを実行します。
npm run dev
ログイン画面を再読み込み後、CSS が有効になって、画面がキレイに表示されれば OK です。10. データベースの作成
MySQL に接続して、次の SQL により、データベースを作成します。
laravel_test 配下にある .env を開いて、MySQLのパスワードを設定します。
d:/pleiades/xampp/htdocs/laravel_test/.env
テーブルを作成します。
laravel_test/database/migrations 配下の
PHP で書かれたテーブル定義から、
次のコマンドでテーブルを作成します。
これで、画面からユーザ登録が行えるようになります。
CREATE DATABASE laravel_test DEFAULT CHARACTER SET utf8mb4;
laravel_test 配下にある .env を開いて、MySQLのパスワードを設定します。
d:/pleiades/xampp/htdocs/laravel_test/.env
DB_DATABASE=laravel_test
DB_USERNAME=root
DB_PASSWORD=root
テーブルを作成します。
laravel_test/database/migrations 配下の
PHP で書かれたテーブル定義から、
次のコマンドでテーブルを作成します。
cd d:/pleiades/xampp/htdocs/laravel_test
php artisan migrate
これで、画面からユーザ登録が行えるようになります。
11. JavaScript と SCSS のビルド
laravel_test 配下の resources/js/app.js に、
以下のように追加します。
プロジェクト配下の resources/views\home.blade.php に、
以下のように追加します。
プロジェクト配下の resources/views/sass/app.scss の一番下に、
以下のように追加します。
JavaScript と SCSS を
次のコマンドでビルドします。
ビルドの結果は、public 配下の css と js に出力されます。
http://localhost/laravel_test/public/home にアクセスして、
画面が青くなれば OK です。
また、ブラウザの検証のコンソールで、
app.message = "test" として、画面が変われば OK です。
以上です。お疲れさまでした。
以下のように追加します。
const app = new Vue({
el: '#app',
data: { //追加
message: 'Hello, World ' //追加
} //追加
});
window.app = app; //追加
プロジェクト配下の resources/views\home.blade.php に、
以下のように追加します。
{{ __('You are logged in!') }} <!-- この下に追加 -->
<div id="app"> <!-- 追加 -->
@{{ message }}<br /> <!-- 追加 -->
</div> <!-- 追加 -->
プロジェクト配下の resources/views/sass/app.scss の一番下に、
以下のように追加します。
#app {
background-color:$cyan;
}
JavaScript と SCSS を
次のコマンドでビルドします。
cd d:/pleiades/xampp/htdocs/laravel_test
npm run dev
ビルドの結果は、public 配下の css と js に出力されます。
http://localhost/laravel_test/public/home にアクセスして、
画面が青くなれば OK です。
また、ブラウザの検証のコンソールで、
app.message = "test" として、画面が変われば OK です。
以上です。お疲れさまでした。