"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

はじめてLaravel6.0:プロジェクト生成&Hello World的なこと迄/Windows10+XAMPP

はじめと一歩として、Laravel6.0のインストールと新規プロジェクト作成をして、とりあえず、「Hello World」的なものを動かしてみます。

f:id:arakan_no_boku:20191003220222p:plain

 

はじめに

 

Laravel6.0を覚えようと思います。

もともとPHPは自分にとってはサブ言語で、Pythonが使えない環境で使い捨てツールを作成するくらいにしか使っていませんでした。

なので環境構築のハードルが低く、学習コストの低い「素のPHP」+一部「CodeIgniter3」って感じでやってました。

でも、

今回モダンPHPにきちんと向き合うなら、多少、初期の学習コストがかかっても何か「フルスタックフレームワーク」を覚える方がいいと考えをあらためたわけです。

そうすると、今や日本でも海外でも「1強」に近い存在になりつつある「Laravel」の最新版LTSである「6.0」しかないだろう・・と考えたわけです。

ということで。

まずは、インストールからやっていきます。

 

最初に、Laravelのインストール

 

当たり前ですが、まずはLaravel6.0のインストールから。

readouble.com

こちらのページでバージョンごとに選べるので、最新版の6.0を選んでみます。

 

インストール方法と必要条件

 

インストール方法はこちらにあります。

readouble.com

インストールの条件として以下が必要と書かれています。

 

XAMPPでインストールの条件をクリアする

 

今回は、Windows版のXAMPPでやってみます。

www.apachefriends.org

Windows版のPHPは上記の拡張ははいっているみたいなので。

XAMPPのインストールと設定については、中途半端にここで書くよりわかりやすそうな記事があったので、そのリンクをはっておきます。

www.radia.jp

あと、Laravel6.0のプロジェクトのために必要なXAMPPの設定は、後の方で書くことにします。

 

インストールコマンド実行

 

さて。

とりあえず、XAMPPのインストールと設定が終わったという前提で、以下のコマンドでインストールします。

composer global require laravel/installer

インストールできたら、環境変数のPathに以下を追加しておきます。

C:\Users\xxxxxx\AppData\Roaming\Composer\vendor\bin

C:\Users\xxxxxxの「xxxxxx」は自分の環境に読み替えます。

さて。

laravelコマンドが動くかどうかだけ確認しときます。

laravel --help 

f:id:arakan_no_boku:20191002233952p:plain

 動きました。

次にいきましょう。

 

プロジェクトの初期作成

 

プロジェクトの作り方は、こちらを参考にしました。

readouble.com

プロジェクトをインストールするフォルダを用意します。

今回はとりあえず「C:\02_Laravel」とでもしておきます。

そこをカレントフォルダにして、CMDで「laravel new」コマンドを使います。

プロジェクト名は「boku_laravel_tutorial」を略して、「blt」にしときます。

だから、こうですね。

laravel new blt

実行すると、カレントフォルダに大量のファイルがダウンロードされていきます。

ああ・・、今風ですね。

f:id:arakan_no_boku:20191003222738p:plain

ちなみに・

もうひとつの方法として、composerを使う方法も書いてあります。

composer create-project --prefer-dist laravel/laravel [project_name」

ただ、こちらを見る限り

ja.stackoverflow.com

composer経由の方がインストールが遅いみたいです。

だから、古いバージョンをインストールしたいとき以外は「laravel new」を使えばOKと覚えとけばよさそうです。

 

ビルトインサーバーを使ってとりあえず画面表示を確認する

 

Laravel6.0は、インストールしたら、とりあえず動かせる状態になってます。

まず動かして、インストールが正常にできているかを確認します。

なお。

Laravel6.0を動かすベースの、PHPApacheMySQLMariaDB)などは上記でインストール・設定したXAMPPです

ここからはPHP.EXEにPathも通っているという想定ですすめます。

実行には、Laravelのビルトインサーバーを使ってみます。

プロジェクトフォルダをカレントにして(cd blt)

php artisan serve

です。

これで「http:localhost:8000」でブラウザからアクセスできるようになります。

アクセスすると、こんな感じの画面。

f:id:arakan_no_boku:20191003224459p:plain

OKですね。

 

ついでにPHPUnitも動かしてみる

 

ドキュメントによればユニットテストに使うPHPUnitも設定済らしいです。

サンプルのテストも用意されているそうなので、一応、それも動かしてみます。

さきほどの、プロジェクトフォルダをカレントにした状態のまま、以下のコマンドをうちこみます。

.\vendor\bin\phpunit

テストケースが2件だけ動きます。

f:id:arakan_no_boku:20191007203938p:plain

サンプルテストはちゃんと動いてます。

 

ガイドに書かれているその他もろもろについて

 

ガイドに書かれている他のチェックポイントについて補足します。

まず「パーミッション」・・ですね。

これはLinuxとかを想定した話なので、今回のようにWindowsだと関係ありません。

あと、アプリケーションキーの設定。

これはインストール後に見たら、ちゃんと「.env」に設定されてました。

ガイドには、.env.exsampleを.envにリネームうんぬん書かれてます。

どうも、それは必要なさそうです。

念のため、2つのファイルを比較してみましたが、この2つのファイルはAPP_KEYが設定されている以外は「.env」と「.env.exsample」は全く同じでした。

ちなみに、左側が.envです。

f:id:arakan_no_boku:20191003231056p:plain

OKですね。

 

XAMPP側の設定

 

ビルトインサーバーで動いたからと言って、すべてOKのわけはなく・・。

XAMPP側のapacheでも実行できるようにしたり、MySQL(MariaDB)をLaravelから使えるようにしておく必要があります。

今度は、それをします。

 

XAMPP側の設定①・・apache

 

apacheのドキュメントルートを、LaravelプロジェクトのPublicフォルダにします。

apache経由でも実行できるようにするためです。

XAMPPのapacheのconfフォルダにあるhttpd.confを開き、以下を書き換えます。

f:id:arakan_no_boku:20191003230024p:plain

今回は、「C:\02_Laravel\blt」にプロジェクトを生成したから「C:\02_Laravel\blt\public」にしてます。

設定はこれだけです。

変更・保存したら、XAMPPのコントロールパネルからApacheを動かします。

f:id:arakan_no_boku:20191006211937p:plain

そして、Apacheの設定に従い「localhost」へアクセスします。

ビルトインサーバーの時と同じページが表示されたらOK。

よしよし。

なお、Laravel6.0プロジェクトのPublicフォルダには「.htaccess」も用意されてます。

URLパスにフロントコントローラのindex.phpを付けなくても良いように用意されているものです。

ガイドには、mod_rewriteの設定なんたら書いてありますが、XAMPPはインストールした時点で「mod_rewrite」モジュールは有効になっています。

なので、特に何もしなくても大丈夫です。

 

XAMPP側の設定②・・MySQL

 

MySQLにLaravel6.0のプロジェクトで使うデータベースとユーザを設定します。

f:id:arakan_no_boku:20191003233544p:plain

コントロールパネルで、MySQLをたちあげて、Shellの画面で、

mysql -u root -p

でパスワードを入れて、rootにログインして、データベースを作ります。

今回は「bltdb」にしときます。

create database bltdb;

次は、ユーザです。

今回はユーザ名は「bltuser」、パスワードは「bltpass」にしときます。

create user bltuser identified by 'bltpass';

次に、作成したユーザに権限を付与します。

単純にALLにしときます。

GRANT ALL ON bltdb.* TO 'bltuser'@'localhost' IDENTIFIED BY 'bltpass';

これで、一度「quit」して再度ログインします。

mysql bltdb -u bltuser -p

これでログインできればMySQL側はOKです。

 

Laravel側のデータベース設定をする

 

データベース名等のログイン情報をLaravel6.0のプロジェクトに教えます。

Laravelはconfigフォルダにある「database.php」で以下のように見ます。

'host' => env('DB_HOST', '127.0.0.1'),
'port' => env('DB_PORT', '3306'),
'database' => env('DB_DATABASE', 'forge'),
'username' => env('DB_USERNAME', 'forge'),
'password' => env('DB_PASSWORD', ''),

env()は、環境変数もしくは「.env」ファイルから取得するということ。

なので、「DA_DATABASE」他キー名に対応する情報を、システムの環境変数か、「.env」ファイルに登録してやれば良いことになります。

ちなみに。

試してみたところ、「.env」にも、システムの環境変数にも同じ設定があるときは、システムの環境変数のほうを優先するようです。

なので、下手に環境変数に登録すると面倒なので、プロジェクト毎に個別に設定できる「.env」ファイルに以下のように更新することになります。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=bltdb
DB_USERNAME=bltuser
DB_PASSWORD=bltpass

ちなみに、「.env」ファイルを編集するときには以下に注意ください。

  • 必ず、バックアップをとっていつでも戻せるようにしてから変更する。
  • API_KEYが文字化けしないよう「UTF-8」で開く

なぜかというと、エディタによってはAPI-KEYが文字化けすることがあるからです。

自分はサクラエディタを使ってます。

最初に何気に開いた時に文字コードを「UTF-7」に誤認識してしまって、API_KEYが文字化けして危うくつぶすところでした。

くれぐれも注意してさわるようにしないと・・です(反省)。

 

「Hellow world」的なチュートリアル

 

今回の最後に,「Hello World」的なことをやってみます。

やることは2つだけ。

  • URLを構成するルートを設定する。
  • 表示するページを作成し、ルートに関連づける

です。

表示するページは、Laravelの作法とか・・まあ、そのへんは今回深く考えないことにしときます。

さて。

URLを決める「ルート設定」です。

routes/web.php ファイルに書くことになっているので、まず、デフォルトページのルート設定をサンプルとして見てみます。

すると・・こんな感じ。

Route::get('/', function () {
    return view('welcome');
});

なるほど。

つまり「/」(例えば、http://localhost:8000/」)の時に、view('welcom')をreturn。

それで「welcome.blade.php」を表示している・・ということです。

わかりやすいですね。 

ということは 、上記をコピーして、ちょっと変えて

Route::get('/hello', function () {
    return view('hello');
});    

としてやれば「http://localhost:8000/hello」で、hello.blade.phpを呼び出してくれる。 

となるはずです。

そのhello.blade.phpを作るのは「resources/views 」ディレクトリです。

ここに「welcome.blade.php」も置いてあります。

コピーして、hello.blade.phpを作ります。

こんな感じにしてみました。

resources/views/hello.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Hello</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Styles -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    </head>
    <body>
        <div class="card bg-primary text-white mb-3" style="width: 24rem;">
            <div class="card-body">
                <h1 class="card-title">こんにちは!!</h1>
                <p class="card-text">
                    Laravelで「Hello World!」です。
                    機能が豊富なのでいろいろたのしめそうではあります。
                </p>
           </div>
        </div>
    </body>
</html>
    

レイアウトのCSSはBootStrap4をリンクで読み込んで使うことにしました。

別に動作確認だから体裁なんかどうでもいいのですが、ここはお遊びで(笑)

使うのは「Card」コンポーネントくらいで、javaScriptが必要なコンポーネントは使ってないので、CSSだけ<linkしてます。

getbootstrap.com

同じようにお遊びですけど、 welcome.blade.phpで、Googleフォントが使われてたので、別の日本語フォントもリンクはって、どんな感じにみえるか試してます。

fonts.google.com

googlefonts.github.io

で。

以下のURLをたたいてみました。

http://localhost:8000/hello

そしたら、以下のような画面が・・。

f:id:arakan_no_boku:20191005012042p:plain

OKですね。

とりあえず「HelloWorld的なこと」まではできました。

今回はこんな感じです。

ではでは。