BladeTemplate(Laravel11)

# 概要
今日はLaravelのBladeTemplateについて知ってみます。
開発方法論にはMVCパターンというものがあります。
簡単に説明すると以下のような内容になります。

(M)odel：DB接続と関連する部分
(V)iew：画面に見せる部分
(C)ontroller：プログラミング部分

本記事では(V)iew部分にて各変数内容を画面に表示して確認します。
※(M)odleと(C)ontrollerは本記事では利用しないです。

# 事前準備
Laravel11の環境がすでに準備されている方はこの事前準備はスキップしても大丈夫です。
Raspberry環境でLaravel11環境を構築については下記の記事を参照してみてください。
■Raspberry PIにLaravel11をインストール

https://qiita.com/neomi/items/ffb54af8b5597b3fc54d

■Hello World出力(Laravel11)

https://qiita.com/neomi/items/8dd20390b51d5d93db24

# Viewで設定した変数内容を画面に表示
①次の画面通りにソースコードを作成します。
PATH：[/]-[routes]-[web.php]ファイルに追加します。
~~~php
Route::get('/list', function(){
    return view('list',[
        'boradName'=>'掲示板',
        'lists'=> [
            [
                'no' => 1,
                'title' => 'No１タイトル',
                'body' => 'ここが本文です。'
            ],
            [
                'no' => 2,
                'title' => 'No２タイトル',
                'body' => 'ここが本文です。'
            ],
        ]
    ]);
});
~~~
②追加した画面です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/94b51749-be68-b069-7cea-56f01d8165e1.png)

③次はweb.phpに定義した変数内容を画面表示するコードを追加します。
PATH：[/]-[resources]-[views]-[list.blade.php]ファイルに追加します。
~~~php
<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <h1>{{ $boradName }}</h1>
        @foreach($lists as $row)
        <h2>{{$row['title']}}</h2>
        <p>{{$row['body']}}</p>
        @endforeach
    </body>
</html>
~~~
④追加した画面です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/63c74d8b-cc42-fe95-91fc-ab49fcc9a4ea.png)

⑤次のURLから結果を確認します。
確認URL：http://192.168.1.65:8000/list
⑥以下のように画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/fb055361-1262-4917-675d-7eb554e10562.png)
⑦コードの説明です。
下記はroute-web.phpの説明です。
~~~php
#/-routes-web.php
#'/list'：URLに指定する「http://xxx.xxx.xxx/list」が該当する部分です。
#'view('list'：「list.blade.phpに次のboardName、listsを出力するBlade Template名です。
#'lists'変数には配列タイプで複数のデータを定義しています。
Route::get('/list', function(){
    return view('list',[
        'boradName'=>'掲示板',
        'lists'=> [
            [
                'no' => 1,
                'title' => 'No１タイトル',
                'body' => 'ここが本文です。'
            ],
            [
                'no' => 2,
                'title' => 'No２タイトル',
                'body' => 'ここが本文です。'
            ],
        ]
    ]);
});
~~~
下記はlist.blade.phpの説明です。
※HTMLタグ部分は省略します。
~~~php
#/-resources-view-list.blade.php
<h1>{{ $boradName }}</h1>　# $boardName変数の値を表示するタグ部分です。
@foreach($lists as $row)   # listsの配列を表示するため、foreach文です。
<h2>{{$row['title']}}</h2> # 配列のタイトル部分を表示するタグです。
<p>{{$row['body']}}</p>　  # 配列の本文部分を表示するタグです。
@endforeach              　# listsの配列を表示するため、foreach文です。
~~~
laravelでは変数の値を表示するためには以下のように書きます。
■Laravel式
~~~php
{{$変数名}}
~~~
既存のPHPで書く方法は、次のコードです。Laravel式と比べると少し長いですね。
■PHP式
~~~php
<?php echo $変数名 ?>
~~~

phpのforeachループは下記のような書きます。
他の繰り返し構文は次の参照サイトを参考してみてください。
~~~php
@foreach($lists as $row)
@endforeach
~~~

★参照サイト★

https://webplus8.com/laravel-blade-loop/

# if文を利用して表示
①次のようにif文を追加して掲示板の表示されるリストの件数を表示します。
~~~php
        <h1>
            {{ $boradName }}：
            @if(count($lists)>0)
            {{count($lists)}}件
            @endif
        </h1>
~~~
②追加した画面です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/a2771f87-561b-f734-622b-9708117c93a9.png)

③次のURLから画面を確認します。
確認URL:http://192.168.1.65:8000/list
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/8d7b2319-6813-f388-201f-054627cfb1e0.png)

# 終わりに
MVCパターンの中でViewだけで画面にデータを表示するサンプルを作ってみました。
変数の値表示、配列の値を表示、IF文を利用して表示などを学ぶことができました。今日はここまでです。ありがとうございます。