iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

1
Modern Web

Laravel從入門到放棄…………原生PHP (疑?系列 第 42

[Day 42] Laravel實作 - 商品購買與交易記錄(一)

今天要開始購買商品的部分

商品購買與交易記錄

在實作購買邏輯前,我們必須要有所有可購買的商品清單頁,讓使用者可以瀏覽選購,接下來我們就來開始實作商品的瀏覽及購買流程吧

商品購買路由

在商品購買的路由中,我們有規劃商品清單檢視及商品單品檢視這兩個路由,我們不會限制身份,所有會員及非會員都可以看到這些畫面。購買商品及交易記錄這兩個路由,將會限制需要登入的會員才能夠存取、進行商品購買,會員有登入我們才能知道消費記錄要記錄在哪個會員上,以及消費記錄要呈現哪位登入使用者的交易記錄。

說明 網址規範 方法 權限
商品清單檢視 /merchandise GET 不限制
商品單品檢視 /merchandise/{merchandise_id} GET 不限制
購買商品 /merchandise/{merchandise_id}/buy POST 需會員身份
交易記錄 /transaction GET 需會員身份

routes/web.php(只列出相關的)

<?php

//商品
Route::group(['prefix' => 'merchandise'], function(){
    //商品清單檢視
    Route::get('/', 'MerchandiseController@merchandiseListPage');

    //指定商品
    Route::group(['prefix' => '{merchandise_id}'], function(){
        //商品單品檢視
        Route::get('/', 'MerchandiseController@merchandiseItemPage');

        //購買商品
        Route::post('/buy', 'MerchandiseController@merchandiseItemBuyProcess')->middleware(['user.auth']);

    });
});

//交易
Route::get('/transaction', 'TransactionController@transactionListPage')->middleware(['user.auth']);;

?>

由於交易記錄與購買商品一樣需要登入的會員才能夠存取,所以我們直接使用我們使用者驗證的中繼層user.auth來當作交易記錄路由的中繼層

//交易
Route::get('/transaction', 'TransactionController@transactionListPage')->middleware(['user.auth']);;

商品清單檢視頁控制器

商品清單僅可顯示可販售的商品資料,在商品清單檢視頁控制器的邏輯會像這樣

app/Http/Controllers/MerchandiseController.php

<?PHP
namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Shop\Entity\Merchandise;
use Illuminate\Support\Facades\Log;
use Validator; //驗證器
use Image;

class MerchandiseController extends Controller
{
    //商品清單檢視
    public function merchandiseListPage()
    {
        //每頁資料量
        $row_per_page = 10;
        //撈取商品分頁資料
        $MerchandisePaginate = Merchandise::OrderBy('updated_at', 'desc')
            ->where('status', 'S') //可販售
            ->paginate($row_per_page);
        //設定商品圖片網址
        foreach($MerchandisePaginate as $Merchandise)
        {
            if(!is_null($Merchandise->photo))
            {
                //設定商品照片網址
                $Merchandise->photo = url($Merchandise->photo);
            }
        }

        $binding = [
            'title' => '商品列表',
            'MerchandisePaginate' => $MerchandisePaginate,
        ];

        return view('merchandise.listMerchandise', $binding);
    }

}
?>

透過Merchandise Eloquent ORM Model,限制商品資料排序方式為最近更新的商品排在前面,使用paginate()方法建立商品分頁資料,並限制每頁資料量為10筆。

//每頁資料量
$row_per_page = 10;
//撈取商品分頁資料
$MerchandisePaginate = Merchandise::OrderBy('updated_at', 'desc')
    ->where('status', 'S') //可販售
    ->paginate($row_per_page);

在正確取得商品分頁資料後,判斷每個商品中的商品照片(photo)資料是否有資料,如果有的話,則將圖片相對位置轉換成網址位置(http://),讓模板資料能夠正確的呈現圖片資訊

//設定商品圖片網址
foreach($MerchandisePaginate as $Merchandise)
{
    if(!is_null($Merchandise->photo))
    {
        //設定商品照片網址
        $Merchandise->photo = url($Merchandise->photo);
    }
}

在撈取完商品後,將商品分頁資料設定在$binding變數中,使用merchandise.listMerchandise模板當作資料的顯示,並將$binding變數的資料傳送到模板中做顯示。

商品清單檢視頁模板

在商品清單中,我們需要讓使用者知道商品名稱(name)商品照片(photo)商品價格(price)商品剩餘數量(remain_count)的資料,讓消費者知道商品概況,在這樣的規劃下,我們商品清單頁的模板會長的像下面這樣

resources/views/merchandise/listMerchandise.blade.php

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

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

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

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

    <table class="table table-condensed">
        <thead>
            <tr>
                <th>名稱</th>
                <th>照片</th>
                <th>價格</th>
                <th>剩餘數量</th>
            </tr>
        </thead>
        <tbody>
        @foreach($MerchandisePaginate as $Merchandise)
        <tr>
            <td>
                <a href="/merchandise/{{ $Merchandise->id }}">
                    {{ $Merchandise->name }}
                </a>
            </td>
            <td>
                <a href="/merchandise/{{ $Merchandise->id }}">
                    <img class="img_show" src="{{ $Merchandise->photo = $Merchandise->photo ?? '/assets/images/default-merchandise.jpg' }}"/>
                </a>
            </td>
            <td>{{ $Merchandise->price }}</td>
            <td>{{ $Merchandise->remain_count }}</td>
        </tr>
        @endforeach
        </tbody>
    </table>

    {{-- 分頁頁數按鈕 --}}
    {{ $MerchandisePaginate->links() }}
</div>
@endsection

在模板中使用@foreach及@endforeach將商品資料依序顯示出來,並在商品名稱(name)商品照片(photo)中設定連結連接到商品單品檢視頁merchandise/{{ $Merchandise->id }},讓消費者可以點擊了解商品詳細資訊。在最後一樣用$MerchandisePaginate->links()的方法產生出分頁頁數按鈕HTML

加點CSS

public/css/style.css

.img_show{
    width: 40px;
    height: 30px;
}

結果畫面
http://localhost:6943/merchandise
https://ithelp.ithome.com.tw/upload/images/20191015/20105694cYWrBV2XUR.png


上一篇
[Day 41] Laravel實作 - 商品管理與瀏覽(八)
下一篇
[Day 43] Laravel實作 - 商品購買與交易記錄(二)
系列文
Laravel從入門到放棄…………原生PHP (疑?47

尚未有邦友留言

立即登入留言