iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

1

今天介紹圖片上傳的部分

網站圖片儲存方式

在儲存圖片資訊道資料表欄位時,通常都會儲存圖片存放的箱對路徑,像是images/merchandise/xxx.jpg,這樣我們才保有以後置換圖片主機的彈性,像是在一開始網站比較小時,會傾向將圖片直接存到與網站相同的主機上,而Laravel的對外公開目錄為public資料夾,所以圖片放置的位置就會放到public/images/merchandise/xxx.jpg,這樣就可以使用網址 http://localhost:6943/images/merchandise/xxx.jpg 直接存取到該圖片。

若在流量變大,為了降低原本主機的負擔,需要把圖片主機移到其他機器,像是AWS S3時,就可以將整個public/images/目錄下的圖片,完整的複製到新的圖片主機上,而我們可以讓 http://images.shop-laravel.local/ 的網址是指向新的圖片主機,所以原本的圖片網址會需要變成 http://images.shop-laravel.local/images/merchandise/xxx.jpg ,而因為在資料表欄位儲存的是圖片的相對位置,所以直接修改程式將圖片網址改掉,就可以馬上完成圖片主機異動的工作了!

//取得圖片網址
if(!is_null($Merchandise->photo))
{
    //設定商品照片網址
    $Merchandise->photo = "http://images.shop-laravel.local/" + $Merchandise->photo;
    //$Merchandise->photo = url($Merchandise->photo);
}

商品編輯頁模板

在透過商品編號取得商品資料後,將商品的資訊設定在$binding變數中,使用merchandise.editMerchandise模板當作資料的顯示,並將$binding變數的資料傳送到模板中作顯示。

根據商品資料表的欄位規劃,我們需要有商品狀態(status)商品名稱(name)商品英文名稱(name_en)商品介紹(introduction)商品英文介紹(introduction_en)商品照片(photo)商品價格(price)商品剩餘數量(remain_count)的資料欄位,在這樣的規劃下,商品編輯頁的模板會長的像下面這樣

resources/views/merchandise/editMerchandise.blade.php

<!-- 指定繼承 layout.master 母模板 -->
@extends('layout.master')

<!-- 傳送資料到母模板,並指定變數為title -->
@section('title', $title)

<!-- 傳送資料到母模板,並指定變數為content -->
@section('content')
<div class="container">
    <h1>{{ $title }}</h1>

    <!-- 錯誤訊息模板元件 -->
    @include('components.validationErrorMessage')

    <form action="/merchandise/{{ $Merchandise->id }}"
        method="post"
        enctype="multipart/form-data">
        <!-- 隱藏方法欄位 -->
        {{ method_field('PUT') }}

        <div>
            商品狀態:
            <select name="status">
                <option value="C" 
                    @if(old('status', $Merchandise->status) == 'C') 
                        selected 
                    @endif
                >建立中</option>
                <option value="S" 
                    @if(old('status', $Merchandise->status) == 'S') 
                        selected 
                    @endif
                >可販售</option>
            </select>
        </div>

        <div>
            商品名稱:
            <input type="text" name="name" placeholder="商品名稱" value="{{ old('name', $Merchandise->name) }}" />
        </div>

        <div>
            商品英文名稱:
            <input type="text" name="name_en" placeholder="商品英文名稱" value="{{ old('name_en', $Merchandise->name_en) }}" />
        </div>

        <div>
            商品介紹:
            <input type="text" name="introduction" placeholder="商品介紹" value="{{ old('introduction', $Merchandise->introduction) }}" />
        </div>

        <div>
            商品英文介紹:
            <input type="text" name="introduction_en" placeholder="商品英文介紹" value="{{ old('introduction_en', $Merchandise->introduction_en) }}" />
        </div>

        <div>
            商品照片:
            <input type="file" name="photo" placeholder="商品照片">
            <img class="img_edit" src="{{ $Merchandise->photo = $Merchandise->photo ?? '/assets/images/default-merchandise.jpg' }}" />
        </div>

        <div>
            商品價格:
            <input type="text" name="price" placeholder="商品價格" value="{{ old('price', $Merchandise->price) }}" />
        </div>

        <div>
            商品剩餘數量:
            <input type="text" name="remain_count" placeholder="商品剩餘數量" value="{{ old('remain_count', $Merchandise->remain_count) }}" />
        </div>
        <div>
            <button type="submit" class="btn btn-default">更新商品資訊</button>
        </div>

        <!-- 自動產生 csrf_token 隱藏欄位-->
        {!! csrf_field() !!}
    </form>
</div>
@endsection

加點CSS

public/css/style.css

div{
    margin-top: 5px;
    margin-bottom: 5px;
}

.img_edit{
    width: 150px;
    height: 100px;
}

輸入 http://localhost:6943/merchandise/create

會自動建立一筆資料
https://ithelp.ithome.com.tw/upload/images/20191014/20105694gzvj9zM6L7.png

以下為顯示畫面(自動轉址)
http://localhost:6943/merchandise/1/edit
https://ithelp.ithome.com.tw/upload/images/20191014/20105694hfqgaiSrY7.png

模板顯示預設資料

在商品圖片的欄位,這邊一樣使用 {{ }} 列印資料方法,將商品圖片網址放到圖片來源中,而Laravel提供的列印資料方法,當資料為空時,可以使用 or 關鍵字,顯示預設的資料。

所以當商品的圖片找不到時,則會列印/assets/images/default-merchandise.png的資料,用這樣的方法可以在沒有資料時,至少能夠帶入預設值的資料,讓模板資料呈現時,不會因為沒有資料,導致畫面發生錯誤的情況。

{{ $Merchandise->photo = $Merchandise->photo ?? '/assets/images/default-merchandise.jpg' }}

在設定完模板資料後,就可以在畫面上看到商品的資料了!


上一篇
[Day 34] Laravel實作 - 商品管理與瀏覽(一)
下一篇
[Day 36] Laravel實作 - 商品管理與瀏覽(三)
系列文
Laravel從入門到放棄…………原生PHP (疑?48

尚未有邦友留言

立即登入留言