今天開始會分兩天，上、下集來介紹單純使用 PHP，不使用 PHP 框架的方法，來搭建一個購物網站。

圖 14-1: Terry's 商店

原本想一口氣完成這個範例，不過今天下班回到家已經很晚了，很臨時地用了 Bootstrap 4 當作前端 CSS 的基礎，搭了購物網的首頁如上圖。

今日的程式碼放在範例，目前是一個骨架，並不會有會員功能。只是示範使用 Sinopac PHP SDK 從瀏覽商品，下單、選擇付款方式、付款完成後到感謝頁面這一連串流程。

檔案結構

.
├── app
│   ├── controllers
│   │   ├── checkout_controller.php
│   │   ├── home_controller.php
│   │   ├── order_controller.php
│   │   └── product_controller.php
│   ├── resource
│   │   └── product_data.json
│   ├── storage
│   ├── views
│   │   ├── checkout.php
│   │   ├── home.php
│   │   ├── main.php
│   │   ├── order_error.php
│   │   ├── order_received.php
│   │   └── product.php
│   ├── config.php
│   ├── functions.php
│   └── route.php
├── public
│   ├── index.php
│   └── style.css
├── vendor
├── composer.json
└── composer.lock

目錄: public

public 目錄放置的是入口檔案 index.php 會載入的檔案。

目錄: app

放置主要網站應用的部分如下。

路由: route.php

為了讓範例越簡潔越好，能隨便跑起來，不需要設定 Nginx 或 Apache 的網址改寫功能，並無使用靜態路由網址功能。

路由: config.php

設定測試資料的地方。

幫助函式: functions.php

簡易的 template 載入、讀取 controller 等等。

目錄: controllers

各頁面的邏輯切分。在 Day 15 有進一步說明。

目錄: resource

放置商品的模擬資料 JSON 檔。

目錄: views

頁面的樣板檔案。

目錄: storage

由於本範例不使用資料庫，訂單資料會以訂單的 ID 為檔案名稱，以 JSON 結構存放資料在這個目錄中。

目錄: vender

vendor、composer.json、composer.lock 目錄是 composer 安裝 Sinopac PHP SDK 會自動產生的檔案。

頁面規劃

預計會有以下頁面：

• home: 首頁、商品列表頁面
• product: 商品介紹頁
• checkout: 結帳頁面
• order_received: 結帳結果頁面（感謝頁面）

圖 14-1: Terry's 商店 - 商品介紹頁

從首頁選取任何一個商品之後，來到商品介紹頁。點擊前往「結帳按紐」進入結帳頁。

圖 14-1: Terry's 商店 - 結帳頁面

填寫完收件人資料後，按下進行付款，會開始本次金流串接的主要流程。

接下來 Day 15 就來看看整個流程如何運作。筆者會盡量讓程式碼越少越好，幫助大家理解哦。

本文更新於筆者的 TerryL 部落格，Day 14 - PHP SDK: 用 Pure PHP 建立購物網 (上)，有興趣可前往閱讀及討論。