XOOPS輕鬆架 - 線上書籍

:::

Laravel 5.8 入門講義 
=================

1. 接著開啟`/專案/resources/views/product/index.blade.php`一般可以利用`@foreach`及`@endforeach`寫法來產生迴圈，以便列出所有商品，不過此處，我們改用@forelse、@ematy、@endforelse來產生迴圈，並可在沒有資料的情況下，顯示相關資訊。
2. 至於排版部份，我們使用BootStrap4的卡片疊（<https://bootstrap.hexschool.com/docs/4.2/components/card/#card-decks>）來呈現商品，其好處是頭尾可以等高，看起來較為整齊：
    
     
    ```php
    @extends('layouts.app')
    @section('content')
        <h1>商品一覽</h1>
        <div class="card-deck">
        @forelse($products as $product)
            <div class="card mb-4">
                <img src="{{ $product->image_url }}" class="card-img-top" alt="{{ $product->title }}">
                <div class="card-body">
                    <h5 class="card-title">{{ $product->title }}</h5>
                </div>
                <div class="card-footer text-center">
                    ${{ $product->price }}
                    <a href="#" class="btn btn-primary">加入購物車</a>
                </div>
            </div>
            @if($loop->iteration % 2 == 0)
                <div class="w-100 d-none d-sm-block d-md-none"></div>
            @endif
            @if($loop->iteration % 3 == 0)
                <div class="w-100 d-none d-md-block d-lg-none"></div>
            @endif
            @if($loop->iteration % 4 == 0)
                <div class="w-100 d-none d-lg-block d-xl-none"></div>
            @endif
            @if($loop->iteration % 5 == 0)
                <div class="w-100 d-none d-xl-block"></div>
            @endif
        @empty
            <div class="card mb-4">
                <div class="card-body">
                    <h1 class="card-title">目前無任何商品</h1>
                </div>
            </div>
        @endforelse
        </div>
    @endsection
    
    ```
3. 不過卡片疊的缺點是無法自適應，所以，我們在16~27行，根據出現的數量，讓程式根據目前螢幕大小自動加入類似換行語法（其實不是換行，只是看起來會有類似效果）。
4. 以3個就換行的「`w-100 d-none d-md-block d-lg-none`」為例，當螢幕不大時（如平板），一列出現三個商品，所以，每三個商品就出現一次換行區塊。 
    - `w-100`代表寬度100%，詳細可參考：<https://bootstrap.hexschool.com/docs/4.2/utilities/sizing/>
    - `d-`代表bootstrap4的`display`屬性
    - `none`表示一般是不顯示；
    - `md-block`，代表螢幕可限範圍符合md標準（約768 ~ 991 px之間）時，以區塊顯示（就會有換行效果）；
    - `lg-none`，代表螢幕可視範圍符合md標準時（約 992 ~ 1199 px），也不顯示。
    - 這些呈現效果上的用法可參考：<https://bootstrap.hexschool.com/docs/4.2/utilities/display/>
5. `$loop->iteration`是所謂的循環變數，用來取得現在跑到第幾圈，可以用的變數有：<https://learnku.com/docs/laravel/5.8/blade/3902#the-loop-variable>
6. `$loop->iteration % 5 == 0`，其中`%`是求餘數，也就是說目前的圈數若可以被5整除（餘數=0），亦即每出現五組商品時，就加入類似換行的效果：  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/43/pic082.png)
7. 當螢幕比較小時，兩組就行![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/43/pic083.png)
8. 若是沒有資料，則顯示自訂資訊：  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/43/pic081.png)
9. 大功告成！請直接在網址輸入： [myshop.test/product](myshop.test/product)或 <http://myshop.test>（注意，後面不可以有 / ，否則路由以後會誤判）
 
[![到GitHub觀看此單元程式異動](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/34/to_github.png)](https://github.com/tad0616/myshop/commit/0cbe709fcab013098bcd830ad62c1a9e01714d24)

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1424

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器