基于WordPress的預約系統(tǒng)開發(fā)研究

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

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

add_action(‘a(chǎn)dmin_post_nopriv_myform’,’ myform_function’)

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

2)提交到當前頁面

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

第一步：截獲表單數(shù)據(jù)

add_action( ‘template_redirect’,’ treat_submitted_form’);

此方法在WordPress 處理表單前截獲表單數(shù)據(jù)，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( ‘a(chǎn)dd_message’,’1’,$redirect_address));

第三步：當前頁面處理返回數(shù)據(jù)

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

< ? php if ( isset( $_GET[‘a(chǎn)dd_message’])&&$_GET[‘a(chǎn)dd_message’]==1){?>

3)提交到REST API

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

Route 和endpoint 是WordPress 中REST API 的兩個重要概念。Route 是URI，即路由，endpoint 是訪問的資源。通過register_rest_route()創(chuàng)建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 執(zhí)行，用于對用戶權限進行驗證，只有當返回為true時，后續(xù)callback才會被執(zhí)行。

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

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

1.2.1.2 數(shù)據(jù)庫

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

1.2.1.3 身份驗證

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

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

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

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

function myStartSession(){

if(!session_id()){

session_start();}}

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

1.2.2 超鏈接法

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

2 系統(tǒng)實現(xiàn)

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

2.1 頁面

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

圖2 預約業(yè)務流程

2.1.1 預約頁面

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

1)局部刷新

利用iframe 框架和JavaScript 腳本實現(xiàn)頁面局部刷新（實際上是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 子頁面右側會自動產(chǎn)生滑動條，滑動條對移動端不友好，采用JavaScript 消除滑動條實現(xiàn)頁面整體滑動。方法是在iframe子頁面獲取頁面高度，然后將該數(shù)據(jù)發(fā)送給父頁面，父頁面根據(jù)該數(shù)據(jù)更新iframe元素height值。

2.1.2 修改和取消預約頁面

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

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

2.1.3 日歷和時間控件

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

2.1.4 終端適配

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

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

2.2 數(shù)據(jù)庫

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

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

圖3 數(shù)據(jù)庫設計

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

2.3 身份驗證

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

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

3 結論

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