基于WordPress的预约系统开发研究

郭训华，莫亭亭，刘武

（上海交通大学电子信息与电气工程学院，上海 200240)

0 引言

建设创新型国家需要强化科研设施与仪器的开放共享，为提高贵重仪器设备使用效率，上海交通大学微纳电子学系成立了微纳分析测试平台（后简称平台）。平台实行预约使用制度，最初采用微信群预约，这种方法虽然简单，但由于预约信息分散，导致预约查询、机时统计不方便，同时还存在预约消息干扰等缺点。为克服这些缺点，上海交通大学微纳电子学系决定开发一款具有后台数据库的网上预约系统，实现网上预约，提高预约数据管理水平。

WordPress 是一款内容管理系统(CMS，Content Management System)，它为用户提供了图形化管理界面，即使用户没有PHP 和HTML 等语言基础，也可以对网站进行管理和维护[1]。据网站架构和技术分析软件wappalyzer 官网提供的数据，2023 年WordPress 在CMS市场的占有率为75.3%[2]。

对WordPress的研究和应用主要集中在内容管理方面，例如，张素红的基于WordPress的高等数学在线教育平台的设计[3]，利用Astra 主题和Tutor LMS 插件实现了视频播放、成绩测试和线上互动等功能；罗黎霞的基于WordPress 的课程管理系统的开发与研究[4]，通过商用插件和开发主题构建了网络课程管理系统。

但在实际应用中，还可能在其他应用领域对WordPress 提出需求。比如某单位采用WordPress 建设了门户网站，后来该单位又出现建设网上预约系统需求，在这种情况下，如果能在已有WordPress网站上开发，不仅能节省域名申请和网站建设工作、降低软硬件和网络资源投入，而且还可以提高信息集成度。本文将分析这种应用的可行性并完成预约系统开发。

1 WordPress开发预约系统可行性分析

1.1 软件运行环境可行性分析

LAMP(Linux、Apache、MySQL 和PHP) 是Word-Press平台常用的一种运行环境，所使用的软件都是免费开源的，是公认的成熟的架构框架[5]，如图1 所示，上海交通大学微纳电子学系网站就采用此架构。

图1 LAMP系统架构

预约系统的软件架构与LAMP 环境类似，唯一的区别是WordPress 管理软件。如果WordPress 管理软件能够实现设备预约功能，那么LAMP 环境就适用于预约系统。

1.2 功能实现可行性分析

WordPress 是面向内容管理的软件，本身没有提供预约功能，但它为用户提供了许多扩展功能的应用接口(API) ，包括插件(Plugin) 、微件(Widget)、短代码(Shortcode)、REST API 等。根据预约系统特点，提出两种WordPress 开发预约系统的方法：插件法和超链接法。

1.2.1 插件法

插件是一种基于PHP语言的脚本，可以扩展或改变WordPress 核心功能[6]。插件程序通过add_action()函数链接到WordPress的钩子(hook)，这样当钩子运行时,插件也会被运行。主要挑战如下：

1.2.1.1 表单

表单是预约系统的关键功能，浏览器通过表单将预约信息提交给服务器，产生表单有两种方法：一是用PHP 代码直接输出包含表单的页面；二是将表单HTML 代码转换成短代码，通过页面内插入短代码添加表单。商用表单插件Formidable Forms 就采用了短代码方式。

提交表单有以下三种方式：

1)提交到admin-post.php或admin-ajax-post.php

WordPress 在admin-post.php 和admin-ajax-post.php 文件中创建了四种钩子，可利用这些钩子实现表单处理。以钩子admin_post_nopriv_{$action}为例，使用方法如下：

第一步：表单中将表单提交地址设置为adminpost.php

/wp-admin/admin-post.php”……>

第二步：表单中添加名为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){?>

Thank for your submission!

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 端和移动端自动适配，提高了预约效率和设备管理水平。在此基础上，计划将平台其余设备也纳入系统，进一步完善预约功能，提高平台信息化管理水平。