基于Web的体育场馆预约系统

刘美琪,李婉萍,孙方斌,付国强

(1.杭州电子科技大学 通信工程学院,浙江 杭州　310018;2.西安电子科技大学 电子工程学院,陕西 西安　710071)



基于Web的体育场馆预约系统

刘美琪1,李婉萍2,孙方斌2,付国强2

(1.杭州电子科技大学 通信工程学院,浙江 杭州310018;2.西安电子科技大学 电子工程学院,陕西 西安710071)

摘要为提高体育场馆预约效率,文中开发了一种基于Web的体育场馆预约系统,为用户提供了一个方便快捷的网络预约方式。预约系统包含场馆信息展示、用户注册登录、提交预定信息、预定状态图与后台管理等功能。该系统采用HTML、CSS、JavaScript (JQuery)等技术实现Web前端界面交互,服务器端使用了PHP语言以及ThinkPHP框架和MySQL数据库来开发。测试结果表明,系统使用方便、界面友好,实用价值较高。

关键词体育场馆预约;Web;HTML;数据库;PHP;ThinkPHP框架

为了改变体育场馆传统的人工预约方式,文中开发了一种基于Web的体育场馆预约系统,从而实现一种更加高效快捷的预约方式。

1系统设计

体育馆预约系统包含了场馆信息展示,用户注册登录,提交预定信息,预定状态图和后台管理等功能。其中系统用户有着不同的权限等级,大体上分为3类:普通用户,审批老师和系统管理员。普通用户只有查看、添加自身预定情况和个人信息的权限,审批老师增加了审批和添加场地信息等功能,管理员增加了用户管理和审批老师添加等权限。结构如图1所示。

2关键技术

2.1前端技术

本系统界面效果为实现美观大方、简洁明了的前端设计,使用了包括HTML、CSS和JavaScript[1]在内的前端设计技术,JavaScript中使用了JQuery函数库,减小了原生代码书写量,提高整个系统的编写效率和兼容性。

HTML语言是具有简易性的特点,主要以各种标签的形式存在,本系统在HTML的使用上不但采用严格的W3C标准来制作网页,而且注重了很多细节。比如HTML的语义化,在各个功能上使用不同的标签,在菜单栏使用

标签,段落地方采用标签,使得搜索引擎较好的收录网站。

CSS级联样式表是对HTML等超文本标记语言修饰的,本系统采用HTML和CSS分开,然后通过link标签进行引用[2]。例如若在之前要给表格加边框需要,有了CSS,只需在CSS上添加table{border:1px}.让网站程序和对网站美化效果分离,使搜索引擎容易采集到网站信息,维护修改网站也比较方便。

JavaScript,简称JS,是1995年网景公司推出的一种前端脚本语言,经过多年的发展,其能让浏览器展现出各种动态交互样式,并产生了各种通用、开放的JavaScript函库数组件,提高了编程效率和质量[3]。本系统采用开源的JavaScript函数库JQuery来实现和数据库的交互。

图1　预约系统结构图

2.2后端语言

本系统采用PHP+MySQL,PHP连接MySQL数据库是使用方便,mysql_connect在执行MySQL代码时候,一个query(),就能解析MySQL语言[4]。

PHP又称为超文本预处理器,其语法简单,且是标准面向对象的语言,有着严格的权限,语法吸收了C语言、Java和Perl的特点,使用广泛,框架也较多。本系统采用开源的ThinkPHP框架,其是一种PHP框架,可简化网站开发,可移植性较好。ThinkPHP有着强大的过滤功能,能有效地阻止SQL注入,XSS等基本的网络攻击。ThinkPHP强大的功能还表现在其路由上,能自定义网站的URL地址,生成.html结尾的路径,实现了网站页面的静态化,降低了服务器的负荷,而不用在服务器端的伪静态中实现。

系统采用的数据库是MySQL。因其开源、免费、性能优秀、小型的数据库系统,适合本系统的开发。通过编写SQL语句,来实现对MySQL数据库的访问,系统在查询数据库时候进行了优化,比如同时查询多个表的时候,进行多表的联合查询,提高了查询效率,增加了数据库的可维护性。

2.3服务器程序

系统使用的Web服务器是现在比较出众的ngnix开源服务器,资源消耗低,性能高,首先其所需的内存较小,例如在512 MB内存的机子上运行;其次安全性能也较高,故采用其来编写服务器程序。

3数据库设计

系统数据库采用MySQL数据库,网站第三方用户系统基于UCenter开发,所以数据库基于UCenter开发,在UCenter的MySQL数据库中添加字段,数据库名称为zyk_ding,下面介绍本系统最重要的数据表结构设计。

3.1表zyk_members

zyk_members表是包含了所有用户数据信息的用户数据表。包括uid(索引ID,自增长)、username(用户昵称)、password(双层md5加密的密码)、email(用户邮箱)、regip(注册IP地址)、regdate(注册时间),lastloginip(最后登录IP)、lastlogintime(最后登录时间),level(用户级别),主键为uid,自增长、唯一,用来关联其他表索引使用。这个表存储了用户基本信息和安全验证信息,可用于用户行为分析。

3.2表zyk_backg

zyk_backg表示场地信息,包含id(索引ID,主键,唯一,自增长)、backgname(场地名称),两个字段,当管理员或审批人员添加一些场地信息,会在此添加相应的字段。同时,用户在提交场地信息时,表格也会在可选择选项里显示对应的信息。

3.3表zyk_add

zyk_add表是用户提交审批场地信息的核心的表,保存了用户提交的所有信息。包括id(int类型,索引ID,主键,唯一,自增长);backg_id(场地信息id,这个字段与zyk_backg表中的id对应,在联表查询时,可方便地查出zyk_backg中的backgname字段,从而查出对应的场地名称);tel(varchar类型,电话),about(varchar类型,备注信息);t_time(varchar类型,提交审批信息时间);user_uid(varchar类型,其用来提交预定信息的用户id,这一字段与zyk_members表中的uid对应,在联表查询时,可方便地查出zyk_members中的username,email等字段,从而查出用户邮箱,昵称等信息);college(varchar类型,用户所在单位);ip(varchar类型,用户填写信息时候的IP地址);user_time_1(varchar类型,用户使用场地日期);user_time_2(varchar类型,用户使用场地时间,具体到上午,下午,晚上);status(varchar类型,当前状态,包含待审批,审批通过,审批不通过);go_id(varchar类型,审批人id,对应zyk_members中的uid,可方便查出哪位老师负责的这项审批),detail(varchar类型,一些细节问题保存在此处)。

4系统功能

展示最新预定信息与已受理信息,其中最新预定信息包含预定人、预定单位、预定场地、预定时间、预定单位和当前审批状态等;最新受理信息包含预定人、预定单位、预定场地、预定时间和受理人等信息。整体前端效果如图2所示。

图2　系统前端效果

点击“我要预定”按钮,用户需要在此填写场地信息,预定单位,预定时间,场地名称,联系电话,备注信息等。用户提交后便可在最新预定信息中查看状态,如图3所示。

图3　预定页效果

模块主要是以图表形式显示最近一周内的预定状态,包含正在预定信息和已经通过审批的预定信息,这样用户便能方便的看出有哪些场地空余,在预定页面提交预定信息的时候也提高了查找的效率,如图4所示。

图4　预定状态图

这里列出了所有详细信息,包括预定人、预定单位、预定场地、预定时间、预定单位和当前审批状态等,与首页基本相同,只是比首页多了分页功能。

5系统测试

5.1浏览器兼容测试

由于存在多种不同核心的浏览器和不同版本浏览器,使系统能在不同浏览器下面均能正确显示,必须保持系统对浏览器的兼容性[5]。通过IE Tester这工具,可测试各种版本IE浏览器浏览同一个预约系统的效果,同时安装Chrome、Firefox、Safari等浏览器对预约系统进行测试。最终,本系统在IE6、IE7、IE8、IE9、IE10、IE11、Chrome、Firefox、Safari上测试通过。

5.2安全测试

安全测试主要从XSS,MySQL等代码层次进行测试,类似CC攻击等服务器端强制攻击在此不做涉及。在网站系统设计上,添加了一定的过滤和检验,例如在提交表单的时候会进行token令牌检测‘TOKEN_ON’⟹true,//是否开启令牌验证 ‘TOKEN_NAME’⟹‘__hash__’,//令牌验证的表单隐藏字段名称 ‘TOKEN_TYPE’⟹‘md5’,//令牌哈希验证规则 默认为MD5,有效防止用户重复提交,或模拟POST事件对网站后台进行请求。同时设置了‘VAR_FILTERS’⟹‘htmlspecialchars,stripslashes,strip_tags’,这样的过滤函数,保证一些JavaScript或者MySQL的字符恶意执行,产生安全隐患。同时,在配置服务器的操作系统时候,需要启动操作系统的防火墙,禁止对80以外端口访问,限制对系统后台访问的IP地址范围。最后,当关闭ThinkPHP的入口文件的调试开关define(‘APP_DEBUG’,FALSE)时,保证不会输出错误信息,按照404错误来处理,防止黑客利用。通过360公司提供的Webscan网站漏洞扫描系统,对本系统进行扫描,未检测出安全漏洞[6]。

5.3性能测试

运行本系统所用ngnix服务器的对内存需求低,通过对服务器的参数文件.conf进行配置,对性能优化可起到明显提高。同时注重PHP语法逻辑的严谨性,减少逻辑bug的产生。比如将HTML,CSS,JavaScript分开书写,尽量减少页面请求次数,同时对JavaScript和JS文件进行压缩,HTML界面采用gzip,节省带宽,共用图片采用spirite方法保存到同一张图片上,更大程度地减少了请求。通过Web bench 网站压力测试工具,对本系统进行测试,表明系统可在较大负荷下正常运行[7]。

6结束语

基于Web的体育场馆预约系统从解决人工预约率较低的实际问题出发,提供了便捷解决方法,方便了用户与场馆管理员,提升了工作人员工作效率与体育场馆的整体使用率,有一定的推广价值。系统的网站前端界面整洁,数据清晰,操作简单。下一步本系统也会不断维护升级,使系统更人性化,增强用户体验。

参考文献

[1]Nicholas C.JavaScript高级程序设计[M].3版.李松峰,曹力,译.北京:人民邮电出版社,2012.

[2]王冉冉.百度 Web 前端框架通用可定制组件的设计与实现[D].哈尔滨:哈尔滨工业大学,2012.

[3]Alexei White.Java Script程序员参考手册[M].施宏斌,陶小梅,谭继红,译.北京:清华大学出版社,2011.

[4]赵鹤芹.设计动态网站的最佳方案:Apache+PHP+MySQL[J].计算机工程与设计,2007,28(4):933-934,938.

[5]屈建勤,陈耀森.Web 应用浏览器兼容性的自动规范化方案[J].计算机系统应用,2013,22(12):196-198,187.

[6]李绍静,车广杰,董峰.基于ThinkPHP架构的学生考核系统的设计与实现[J].信息技术,2013(5):47-50,53.

[7]李晓峰.Web工程前端性能优化[J].电子科技,2015,28(5):184-186.

A Web-based Stadium Booking System

LIU Meiqi1,LI Wanping2,SUN Fangbin2,FU Guoqiang2

(1.School of Communication Engineering,Hangzhou Dianzi University,Hangzhou 310018,China;2.School of Electronic Engineering,Xidian University,Xi’an 710071,China)

AbstractAn efficient web-based stadium booking system is proposed based on the Horizon framework of the potential universal model to offer information display,user registration,booking information submission,booking status and backend management.The frontend web interface is realized by using HTML,CSS,and JavaScript (JQuery).The server end is developed by adopting ThinkPHP and MySQL.Tests show that the proposed system has friendly interface and easy use.

Keywordsstadium booking;Web;HTML;database;PHP;ThinkPHP framework

中图分类号TP315

文献标识码A

文章编号1007-7820(2016)04-104-04

doi:10.16180/j.cnki.issn1007-7820.2016.04.027

作者简介:刘美琪(1993—),女,本科。研究方向:信息对抗。

收稿日期:2015- 09- 16