第二步：表單中添加名為action的輸入項(xiàng)

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

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

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

2)提交到當(dāng)前頁(yè)面

表單寫(xiě)法，表單處理方法如下：

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

add_action( ‘template_redirect’,’ treat_submitted_form’);

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

第二步：設(shè)置跳轉(zhuǎn)地址URL并添加處理標(biāo)志

表單處理后，跳轉(zhuǎn)到新URL 地址，添加處理結(jié)束標(biāo)志，比如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));

第三步：當(dāng)前頁(yè)面處理返回?cái)?shù)據(jù)

在當(dāng)前頁(yè)面中添加PHP代碼，根據(jù)處理結(jié)束標(biāo)志進(jìn)行相應(yīng)處理（本例中標(biāo)志為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年在其博士論文中提出的一種軟件架構(gòu)設(shè)計(jì)風(fēng)格，具有以下特點(diǎn)：①無(wú)狀態(tài)通信。Server不保存任何請(qǐng)求狀態(tài)信息；②統(tǒng)一接口。采用標(biāo)準(zhǔn)的HTTP 方法實(shí)現(xiàn)對(duì)資源的創(chuàng)建、檢索、更新和刪除；③URI標(biāo)識(shí)資源。URI是系統(tǒng)中每一個(gè)資源的唯一地址或ID，對(duì)資源的訪問(wèn)及資源間的通信都通過(guò)URI完成[7]。

Route 和endpoint 是WordPress 中REST API 的兩個(gè)重要概念。Route 是URI，即路由，endpoint 是訪問(wèn)的資源。通過(guò)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í)行，用于對(duì)用戶權(quán)限進(jìn)行驗(yàn)證，只有當(dāng)返回為true時(shí)，后續(xù)callback才會(huì)被執(zhí)行。

使用REST API處理表單時(shí)，表單里不寫(xiě)action內(nèi)容，通過(guò)頁(yè)面內(nèi)JavaScript腳本處理表單，例如：

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

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

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

1.2.1.3 身份驗(yàn)證

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

當(dāng)用戶瀏覽多個(gè)頁(yè)面時(shí)，可利用cookie 和會(huì)話機(jī)制確認(rèn)用戶身份。WordPress 要求瀏覽器使用cookie功能，PHP 會(huì)話可以利用cookie 在瀏覽器端保存PHP會(huì)話ID，服務(wù)器端通過(guò)檢查cookie 和PHP 會(huì)話ID 實(shí)現(xiàn)會(huì)話變量共享。PHP 會(huì)話包括四個(gè)步驟：?jiǎn)?dòng)會(huì)話、注冊(cè)會(huì)話變量、使用變量和銷(xiāo)毀變量[9]。

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

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

function myStartSession(){

if(!session_id()){

session_start();}}

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

1.2.2 超鏈接法

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

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

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

2.1 頁(yè)面

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

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

2.1.1 預(yù)約頁(yè)面

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

1)局部刷新

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

父頁(yè)面標(biāo)簽內(nèi)給表單內(nèi)的日期輸入項(xiàng)(id=”bookdate_s”)添加處理程序

window.onload=function(){

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

其中myScript.js內(nèi)容如下

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

var downiframe = document.getElementById(‘bookinfo’)

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

iframe子頁(yè)面內(nèi)容如下

2)頁(yè)面整體滑動(dòng)

當(dāng)頁(yè)面內(nèi)容較多時(shí)，iframe 子頁(yè)面右側(cè)會(huì)自動(dòng)產(chǎn)生滑動(dòng)條，滑動(dòng)條對(duì)移動(dòng)端不友好，采用JavaScript 消除滑動(dòng)條實(shí)現(xiàn)頁(yè)面整體滑動(dòng)。方法是在iframe子頁(yè)面獲取頁(yè)面高度，然后將該數(shù)據(jù)發(fā)送給父頁(yè)面，父頁(yè)面根據(jù)該數(shù)據(jù)更新iframe元素height值。

2.1.2 修改和取消預(yù)約頁(yè)面

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

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

2.1.3 日歷和時(shí)間控件

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

2.1.4 終端適配

為了使頁(yè)面同時(shí)適配PC 端和移動(dòng)端設(shè)備，在頁(yè)面中添加以下代碼：

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

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

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

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

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

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

2.3 身份驗(yàn)證

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

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

3 結(jié)論

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