基于WordPress的預約系統開發研究

第二步：表單中添加名為action的輸入項

第三步：在當前主題的function.php文件中添加回調函數

add_action(‘admin_post_nopriv_myform’,’ myform_function’)

其中myform_function 是回調函數名（即表單處理函數），該函數也需在function.php文件里定義。

2)提交到當前頁面

表單寫法，表單處理方法如下：

第一步：截獲表單數據

add_action( ‘template_redirect’,’ treat_submitted_form’);

此方法在WordPress 處理表單前截獲表單數據，treat_submitted_form是表單處理程序。

第二步：設置跳轉地址URL并添加處理標志

表單處理后，跳轉到新URL 地址，添加處理結束標志，比如add_message=1：

$redirect_address = ( empty( $_POST[‘_wp_http_referer’])?

site_url():$_POST[‘_wp_http_referer’]);

wp_redirect(add_query_arg( ‘add_message’,’1’,$redirect_address));

第三步：當前頁面處理返回數據

在當前頁面中添加PHP代碼，根據處理結束標志進行相應處理（本例中標志為add_message=1)

< ? php if ( isset( $_GET[‘add_message’])&&$_GET[‘add_message’]==1){?>

3)提交到REST API

REST(Representational State Transfer) 是由Roy Fielding于2000年在其博士論文中提出的一種軟件架構設計風格，具有以下特點：①無狀態通信。Server不保存任何請求狀態信息；②統一接口。采用標準的HTTP 方法實現對資源的創建、檢索、更新和刪除；③URI標識資源。URI是系統中每一個資源的唯一地址或ID，對資源的訪問及資源間的通信都通過URI完成[7]。

Route 和endpoint 是WordPress 中REST API 的兩個重要概念。Route 是URI，即路由，endpoint 是訪問的資源。通過register_rest_route()創建REST 資源，例如：

register_rest_route(‘micro_nano_instrument/v1/’,‘booking’,

array(

‘method’=‘post’,

‘callback’=‘micro_nano_instrument_booking’,

‘permission_callback’ => ‘micro_nano_instrument_permission’

));

其中permission_callback 先于callback 執行，用于對用戶權限進行驗證，只有當返回為true時，后續callback才會被執行。

使用REST API處理表單時，表單里不寫action內容，通過頁面內JavaScript腳本處理表單，例如：

WordPress 自帶了jQuery 庫，通過隊列函數wp_enqueue_scripts()關聯后即可使用，還可以采用AJAX 方法，實現頁面局部刷新。WordPress 還為PHP和JavaScript 提供了傳遞變量的函數wp_localize_script()。

1.2.1.2 數據庫

WordPress 安裝時會創建自己的數據庫，當使用MySQL數據庫時數據庫名稱為wpsql，插件可以在wpsql 數據庫中創建數據表。雖然WordPress 支持數據庫原生API，但WordPress提供的數據庫API功能更多也更安全。WordPress 在每個頁面都創建了wpdb 對象，方便數據庫操作，除了普通的數據庫指令，如update、insert、delete 外，還有get_row、get_col、get_results等，使數據操作更方便。為防止SQL 注入風險，可使用占位符功能，%s 表示字符串占位符，%d 表示整數占位符，然后用$wpdb->prepare()指令檢查安全性，最后可以將檢查無誤地輸出結果，作為最終查詢指令傳遞給get_results()完成數據庫查詢。插件可以利用WordPress 的數據庫API 在wpsql 數據庫中建立數據表，提高了數據的安全性。

1.2.1.3 身份驗證

WordPress 本身具有基于角色的身份驗證功能，預設了六個用戶角色，功能權限由大到小依次為超級管理員、管理員、編輯、作者、貢獻者、訂閱者[8]。這些角色是依據管理網站、發布和管理帖子或文章的權限劃分的，預約系統的人員角色，一般包括管理員和預約人員，劃分的依據則是預約軟件的管理權限和預約權限。可見預約系統與WordPress本身的角色劃分依據和用途不同，但如果僅僅為了實現身份驗證，仍然可以借用WordPress的角色系統。可以直接將預約系統的人員設置成WordPress 內置的角色，也可以通過WordPress 函數添加新角色，然后將預約系統的人員設置成這些新角色。這種方法的優點是可以利用WordPress 提供的一套人員管理函數，方便地實現人員管理，比如添加人員、人員登錄狀態查詢等。插件也可以不采用WordPress 的人員管理系統，利用數據庫創建和保存預約系統人員的登錄信息，實現身份驗證。

當用戶瀏覽多個頁面時，可利用cookie 和會話機制確認用戶身份。WordPress 要求瀏覽器使用cookie功能，PHP 會話可以利用cookie 在瀏覽器端保存PHP會話ID，服務器端通過檢查cookie 和PHP 會話ID 實現會話變量共享。PHP 會話包括四個步驟：啟動會話、注冊會話變量、使用變量和銷毀變量[9]。

在WordPress 插件中使用PHP 會話，需要先將啟動會話程序添加到WordPress的鉤子，例如：

add_action(‘init’,‘myStartSession’,1);

function myStartSession(){

if(!session_id()){

session_start();}}

用戶結束預約時，系統應該銷毀該會話。由于插件沒有使用WordPress 本身的登錄系統，所以不能使用wp_logout作為執行銷毀會話的鉤子,插件可以基于預約流程創建自己的logout 鉤子，然后將會話銷毀程序鏈接到這個鉤子，當用戶退出登錄時銷毀會話。通過do_action()產生新的鉤子，用add_action()將PHP 銷毀程序鏈接到新鉤子。

1.2.2 超鏈接法

超鏈接法，是將預約系統文件部署在WordPress網站根目錄下，通過在WordPress頁面插入超鏈接，跳轉到預約系統。由于跳轉頁面是WordPress 內部頁面，因此可以利用WordPress內容管理功能，設置該頁面的訪問權限，從而利用WordPress 本身的身份認證功能，簡化預約系統身份驗證功能的實現。該方法在程序設計上具有更大的自由度，有利于降低軟件開發難度，縮短開發周期。下面介紹采用該方法實現的預約系統。

2 系統實現

本平臺使用場景如下：申請者參加設備使用培訓，培訓合格后將紙質申請表交給平臺管理員，平臺管理員將申請者信息錄入后臺數據庫，申請者登錄預約系統預約。根據此流程，從系統和軟件角度歸納出需求如下：1)預約時間輸入。要求以日歷控件形式實現；2)預約提交、查詢、修改、取消。要求實現表單和動態頁面；3)身份驗證。要求驗證登錄者身份；4)數據存儲。要求以數據庫形式存儲；5)跨平臺。要求軟件可以在電腦和移動設備上正常運行。

2.1 頁面

將系統業務流程分成預約、修改預約和取消預約，三條無交叉的并行流程，如圖2 所示。頁面的實現，既可以采取多頁面逐級提交方案，也可以采取單頁面一次提交方案。前者提交次數多，但每個頁面的實現都相對容易；后者提交次數少，但頁面實現難度更大。單次提交用戶體驗更好，本系統采用單次提交方案。

圖2 預約業務流程

2.1.1 預約頁面

應用場景：初次打開預約頁面時，頁面里除了顯示表單外，還顯示當天已預約信息；當用戶選擇其他預約日期后，頁面內已預約信息也隨之更新為新日期下的預先信息。該頁面有兩個技術難點：局部刷新、頁面整體滑動。本預約系統采用iframe框架和JavaScript腳本實現此功能。

1)局部刷新

利用iframe 框架和JavaScript 腳本實現頁面局部刷新（實際上是iframe子頁面刷新）。預約頁面加載時默認日期為當天日期，iframe 子頁面顯示當天預約情況。當用戶選擇不同預約日期后，iframe 子頁面隨之刷新。采用分離腳本原則，將JavaScript與HTML代碼分離開[8]。具體方法如下：

父頁面標簽內給表單內的日期輸入項(id=”bookdate_s”)添加處理程序

window.onload=function(){

document.getElementById(‘bookdate_s’).oninput =myScript;};

其中myScript.js內容如下

var newDate = parent.document.getElementById(“bookdate_s”);

var downiframe = document.getElementById(‘bookinfo’)

downiframe.src=“./booked.php?checkDate=”+new-Date.value;

iframe子頁面內容如下

2)頁面整體滑動

當頁面內容較多時，iframe 子頁面右側會自動產生滑動條，滑動條對移動端不友好，采用JavaScript 消除滑動條實現頁面整體滑動。方法是在iframe子頁面獲取頁面高度，然后將該數據發送給父頁面，父頁面根據該數據更新iframe元素height值。

2.1.2 修改和取消預約頁面

從兩方面考慮修改和取消預約頁面實現：一是須為用戶提供修改和取消任意一條預約信息的途徑，二是確保提交后服務器能夠判斷出哪一條或哪幾條預約被修改或取消。

本系統采用如下方法：為每一條預約創建一個表單，包括供用戶修改或取消的輸入項和提交按鈕。這樣既實現了對任意一條預約的修改或取消，也便于服務器判斷哪一條預約被修改或取消。雖然一次提交只能修改一條預約，但由于在實際應用中，用戶一次修改的預約數量很少，所以此方法適用。

2.1.3 日歷和時間控件

采用日歷和時間控件有兩個目的：1)保證預約數據格式統一；2)提高數據輸入效率和用戶體驗。常見做法是在頁面嵌入JavaScript 腳本。這種方法雖然可以在頁面實現豐富交互功能的日歷，但也增加了頁面設計的復雜度，是否有更簡單的方法呢？實際上，隨著技術改進和普及，通過HTML5語言中date和time兩種輸入類型，就可以實現日歷和時間控件。這種方法比嵌入JavaScript 腳本更簡單和高效，而且由于HTML5優秀的跨平臺特性，對系統推廣更加有利。

2.1.4 終端適配

為了使頁面同時適配PC 端和移動端設備，在頁面中添加以下代碼：

在CSS樣式表文件中，利用@media(hover:none)或@media (hover:hover)判斷終端設備是移動設備還是PC，進而設置不同的樣式，實現界面適配。

2.2 數據庫

數據庫是本預約系統的主要目標之一，能大大提高數據管理水平。在預約數據庫中建立兩種數據表：預約數據表和人員數據表。預約數據表存儲預約數據，包括預約人、預約設備、預約日期等；人員數據表存儲預約人和管理員數據。人員數據表為身份認證提供數據支持。

人員數據表和預約數據表都有兩種實現方法，一是為每臺設備建立一個預約數據表和人員數據表，二是建一個總的人員數據表和預約數據表，將所有設備的人員和預約信息都分別放在一個表中。第一種方法便于人員和預約數據管理，但增加了軟件的邏輯處理負擔；第二種方法則反之。本系統采用第一種方法。如圖3所示。

圖3 數據庫設計

預約系統的功能、表單和數據庫密切相關，要一體化考慮。前面介紹過，修改預約時，本系統為每一個預約創建了一個表單，那么服務器端如何確定提交的表單對應哪一個預約呢？本系統做法是：在預約數據表里設置兩套時間字段，分別是初始預約時間和最新預約時間（都包括起始和結束時間），用戶修改預約時，僅修改最新預約時間，保持初始預約時間不變，這樣就可以通過初始預約時間和預約人，判斷出修改的是哪一條預約。為了解用戶預約規律、方便統計課題組使用機時及擴展功能，預約表中還記錄了預約修改次數，導師信息和預約審核狀態等。

2.3 身份驗證

身份驗證是本預約系統必需的一個功能，也是一個技術難點。根據平臺使用流程可知，預約人員并非自行注冊產生，而是經過設備培訓后由管理員錄入。在這種應用場景下，本系統采取如下方法：

由于WordPress 網站已安裝學校統一身份驗證API，因此可以在管理界面，設置預約系統的跳轉頁面要求進行學校統一身份驗證，從而實現初級身份驗證。當用戶輸入學校統一身份信息登錄后，服務器端會通過PHP會話獲取用戶信息，然后與數據庫中人員數據表中的數據比對，進一步實現預約資格的驗證。因此本系統采用了兩級身份驗證，只有兩級驗證都通過，才能進入后續預約。

3 結論

本文提出了WordPress平臺開發預約系統的兩種方法。對插件法中的主要挑戰進行了技術分析，為插件法實現預約系統提供了參考。采用超鏈接法，結合上海交通大學微納分析測試平臺具體運行場景，開發了一個預約系統。該系統已納入一臺設備試運行，系統運行穩定，界面響應迅速，數據記錄完整，PC 端和移動端自動適配，提高了預約效率和設備管理水平。在此基礎上，計劃將平臺其余設備也納入系統，進一步完善預約功能，提高平臺信息化管理水平。