今天開始會分兩天,上、下集來介紹單純使用 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 就來看看整個流程如何運作。筆者會盡量讓程式碼越少越好,幫助大家理解哦。
留言