XOOPS輕鬆架 - 線上書籍

:::

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

1. 最後，只要製作好樣板，讓資料顯示出來即可，請建立 `/專案/resources/views/product/show.blade.php`：
    
     
    ```php
    @extends('layouts.app') 
    @section('title', $product->title) 
    @section('content')
        <div class="card">
            <div class="card-body product-info">
                <div class="row">
                    <div class="col-sm-5">
                        <img class="img-fluid" src="{{ $product->image_url }}" alt="{{ $product->title }}">
                    </div>
                    <div class="col-sm-7">
                        <div class="h2">{{ $product->title }}</div>
                        <div class="h3">特價 {{ $product->price }}元</div>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">數量</span>
                            </div>
                            <input type="text" class="form-control input-sm" value="1">
                            <div class="input-group-append">
                                <span class="input-group-text">件</span>
                            </div>
                            <div class="input-group-append">
                                <button class="btn btn-primary btn-add-to-cart">加入購物車</button>
                            </div>
                        </div>                        
                        {!! $product->description !!}
                    </div>
                </div>
            </div>
        </div>
    @endsection
    ```
2. 設計上主要是利用BootStrap4的Card來製作其頁面，詳情：<https://bootstrap.hexschool.com/docs/4.2/components/card/#body>
    - 圖片部份，利用`img-fluid`使圖片可以自適應，而不會破版。
    - 數量和加入購物車按鈕主要是利用表單群組來組成：<https://bootstrap.hexschool.com/docs/4.2/components/input-group/#multiple-addons>
    - 最後的`{!! $product->description !!}`就是不會將 `<`會變成`<` 的寫法，否則所見即所得編輯器產生的HTML標籤就不會有作用了。
3. 其中我們為了讓瀏覽器視窗的標題（或頁籤標題）可以直接顯示出商品名稱，所以，也用`@section('title', $product->title)` 多用了一個變數`title`，所以，被繼承的`layouts.app`（即`\專案\resources\views\layouts\app.blade.php`）也要設定一個`title`變數才會有作用： 
    ```php
    
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        
        <meta name="csrf-token" content="{{ csrf_token() }}">
    
        <title>@yield('title') {{ config('app.name', 'Laravel') }}</title>
    
    ```
4. 看起來效果像這樣：  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/43/pic090.png)
5. 最後，我們希望在商品列表就能點擊商品圖片、標題，就能觀看商品詳情頁面，所以，我們再修改一下`\專案\resources\views\product\index.blade.php`，加入連結： 
    ```php
    <div class="card mb-4">
        <a href="product/{{ $product->id }}">
        <img src="{{ $product->image_url }}" class="card-img-top" alt="{{ $product->title }}">
        </a>
        <div class="card-body">
            <h5 class="card-title">
                <a href="product/{{ $product->id }}">{{ $product->title }}</a>
            </h5>
        </div>
        <div class="card-footer text-center">
            ${{ $product->price }}
            <a href="#" class="btn btn-primary">加入購物車</a>
        </div>
    </div>
    ```
    
    如：  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/43/pic089.png)
 
[![到GitHub觀看此單元程式異動](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/34/to_github.png)](https://github.com/tad0616/myshop/commit/e7b2e8fe63781d58fa162f78923682b0c7624594)

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器