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

圖 14-1
圖 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
圖 14-1: Terry's 商店 - 商品介紹頁

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

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

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

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

最後修改日期: 2022-02-08

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。