【PHPフレームワーク】Laravelのbladeテンプレートで、includeディレクティブやassetで普通のサイトを作る方法

今回はよく使われているフレームワークLaravelのbladeテンプレートを使って、普通のwebサイトを作ってみます。管理人はLaravelはあまり使ったことが無かったんですけど、コツや流れを掴めば、そこまで難しくない印象です。さっそく内容を確認していきましょう。

下準備～Laravelをインストールし、bladeファイルやpublic

ちょっと長くなるので省きますが、ローカル環境にxampp&composerコマンドインストールでLaravelを準備しておきました。プロジェクト名は『test』で、
『http://localhost/laravel/test/public/』が公開ディレクトリになります。

このディレクトリで、普通のwebサイトが見れるように設定していきます。

インストールディレクトリ/resources/views/にbladeファイルを用意する

『インストールディレクトリ/resources/views/』がbladeテンプレート入っているとこですね。最初に『welcome』が入っているのでわかりやすい感じ。welcomeのほか、以下のテンプレートを用意しました。

この構成だと、indexの他に『test01，test02』のぺージができます（ルーティング設定してないのでまだ出ません）。『includes』のフォルダには共通（になる予定）のヘッダー・フッターが入っており、@includeディレクティブで読み込むために、名前を『header.blade.php，footer.blade.php』としています。

通常の公開ディレクトリ（public）にcssやjavascript，画像を置いておく

中にはリンク書き換えてurlにpublic入れないようにしているケースもありますが、とりあえず、公開して大丈夫なものはpublicに入れておきます

index.phpやrobots.txtはもともと入っているもので、サイト表示用に『css，img，js』を用意してます。

インストールディレクトリ/routes/web.phpで、ルーティング設定する（名前付きで）

次はルーティングを指定していきます。とりあえず、welcomeはもともとあったので、そのほかの『index，test01，test02（残り二つは仮）』を設定しました。 昔のバージョンはこのあとコントローラーも指定していた気がしますが、バージョン10.7.1（App::VERSION()で確認）だと、そこまでしなくて大丈夫な様子。

なお、『->name('index')』のような名前付きルーティングにしてますが、これを指定しておくと波括弧や『{!!〇〇 !!}』のように書いてリンク出力が容易です。書いとかないと『見つかりません』みたいなエラー出ました。

bladeテンプレートにassetやincludeディレクティブでパーツやスクリプトを読み込んでいく

次はpublicにアクセスしたときに表示するindex.blade.phpを作ってみます。フレームワーク特有の書き方を押さえていきましょう。

head、htmlヘッダー部分

head内のcssは『asset』で読み込みました。相対パスとかでも読めるんだけど、assetで読んだ方が、Laravelで設定されたパスが出てくるので間違いなさそう。

また、共通パーツにする予定の『includes/header.blade.php』は@includeディレクティブで読みました。書き方はフォルダ名はスラッシュじゃなくてドットで、『blade.php』は入れない、という書き方になります。

コンテンツやフッター部分

コンテンツ部分、（シンボリックリンクみたいな問題はありますけど）公開フォルダに置いて大丈夫な画像とかは、assetで。

フッターにbxsliderとかローディング画面みたいなスクリプトも使ったんですけど、これらもassetでできました。

@includeディレクティブで読み込むパーツのリンク

他のページはまだできてないんですけど、ヘッダーパーツはこんな感じで別ページリンクを。名前付きルーティングにすると、こういう2重波括弧でリンクを入れたりできます。

なお、『{{route('index')}}』のように波括弧で書いたときはエスケープ処理が入り、『{!!route('index') !!}』のときはエスケープしない、といった違いがあるようです。内部でhtmlspecialcharsをかけるとのこと。

Laravel 10.x Bladeテンプレート
https://readouble.com/laravel/10.x/ja/blade.html

Laravel bladeテンプレートで普通のサイト・表示例

では、xamppを起動して設定したhttp://localhost/laravel/test/public/で見てみましょうか。 写真とかヘッダーのパーツも大丈夫そうですね。

真ん中の食べ物一覧もok！

なお、Bladeの{{ }}エコー文やassetで読んだ場合、こんな感じの絶対パスurlで出してくれます。

あとがき・まとめ

まとめると、こんなところでしょうか。次はパラメータとかで切り替えるページのルーティング設定とかもやってみたいと思います。