DAY8-練習撰寫Laravel框架中的blade模版-(3)

2024 iThome 鐵人賽

DAY 8

自我挑戰組

PHP框架-Laravel自學挑戰系列第 8 篇

16th鐵人賽 laravel php

阿寶

2024-09-08 15:01:58

215 瀏覽

分享至

哈囉大家好！
時間過得好快啊～不知不覺就來到鐵人賽的第8天啦！
今天要來學習如何傳遞較大的數據給blade模版，以及如何利用條件式判斷與迴圈來顯示數據。
那就開始吧LET'S GO~

昨天試著透過with() function傳遞少數的數據，但如果想要一次傳遞很多數據，要如何一次就把所有的數據傳遞呢？
在Providers目錄中的AppServiceProvider.php檔案中傳遞的數據改成陣列形式：

Facades\View::composer('user.profile', function(View $view) {
            #要傳遞的陣列
            $dataToBePassed = Array(
                'name' => 'JoJo',
                'age' => 23,
                'hobby' => 'swimming',
                'favorite food' => 'chocolate',
                'height' => '170cm',
                'weight' => '50kg', 
            );
            #要傳遞的物件
            $passedObject = (object) $dataToBePassed;
            
            $view->with('anotherMessage', $dataToBePassed)
                 ->with('objectHere', $passedObject);
        });

這裡一樣透過with() function來傳遞數據，只是傳遞的數據為$dataToBePassed這個陣列以及$passedObject這個物件。
我現在想要利用回圈的方式將數據顯示在畫面上：

<!DOCTYPE HTML>
<html>
    <head></head>
    <body>
    <h1>Personal Profile</h1>
    @foreach($anotherMessage as $key => $info)
        <p>{{ $key }}: {{ $info }}</p> 
    @endforeach
    <h1>Object loop below</h1>
    @foreach($objectHere as $key => $info)
        <p>{{ $key }}: {{ $info }}</p>
    @endforeach
    </body>
</html>

要跑迴圈的區域必須用＠foreach和@endforeach標籤包起來，然後迴圈內部的語法和Plain PHP大同小異，
於是畫面上就會顯示如下：

Personal Profile
name: JoJo
age: 23
hobby: swimming
favorite food: chocolate
height: 170cm
weight: 50kg
Object loop below
name: JoJo
age: 23
hobby: swimming
favorite food: chocolate
height: 170cm
weight: 50kg

這樣的方式也可以又用到之後傳送請求呼叫API，得到回傳資料時就可以直接傳送陣列或物件類型的資料。
除了可以用@foreach跑迴圈，也可以用@for和@while，根據需求來選擇跑迴圈的方式。

那如果想要根據特定條件來判斷數據是否顯示呢？這時候就可以用到@if條件句來判斷：

@foreach($anotherMessage as $key => $info)
        @if ($key === 'age')
            @if ($info > 18) 
                <p>You are over 18! Niceee~</p>
            @endif
        @else
            <p>{{ $key }}: {{ $info }}</p> 
        @endif
@endforeach

除了傳統的@if statement之外，blade template也有支援@switch statement如下：

@switch($age)
    @case(18)
        <p>sooooo young</p>
        @break
    @case(28)
        <p>sooo young</p>
        @break
    @case(38)
        <p>so young</p>
        @break
    @case(48)
        <p>young</p>
        @break
    @default
        <p>forever young</p>
@endswitch

需要一次比較很多值的話，就很適合使用@switch statement，整體程式碼也會比else if 好閱讀一些。

在blade template中，使用迴圈和條件式判斷語法時，要記得用@endforeach和@endif來包住對應的區塊。
其實關於blade template的語法上還有很多眉眉角角，只是沒有辦法一次學完，剩下沒有碰到的話之後小專案要實現特定功能的時候再來解決！

雖然blade template的語法和有些前端框架的語法很類似，但我在撰寫程式碼還是有點不習慣。
後來搜尋了一下，發現有支援的套件inertia讓我們可以在Laravel框架下撰寫前端(React, Vue⋯⋯等）
除了Laravel之外，inertia官方文檔中也表示支援其他框架如：Ruby on Rails, Django⋯⋯等，讓開發者可以更彈性選擇自己想要編寫的前端語言，而不是僅限於blade template。
因為這次分享的主題是Laravel，所以這次畫面就先用blade template的方式來撰寫！
有興趣的邦友也可以到官網看看喔～

那麼今天的分享就告一個段落啦～快樂的時光總是過得特別快，明天又要開啟新的禮拜一了～
明天要來學習如何發送API請求以及處理回傳的資料，希望可以透過實際操作加強對「Laravel框架的設計理念」、「邏輯部分如何切割」等部分的概念！
那就明天再見囉 881~