基于Web的體育場館預(yù)約系統(tǒng)

劉美琪,李婉萍,孫方斌,付國強

(1.杭州電子科技大學(xué) 通信工程學(xué)院,浙江 杭州　310018;2.西安電子科技大學(xué) 電子工程學(xué)院,陜西 西安　710071)

?

基于Web的體育場館預(yù)約系統(tǒng)

劉美琪1,李婉萍2,孫方斌2,付國強2

(1.杭州電子科技大學(xué) 通信工程學(xué)院,浙江 杭州310018;2.西安電子科技大學(xué) 電子工程學(xué)院,陜西 西安710071)

摘要為提高體育場館預(yù)約效率,文中開發(fā)了一種基于Web的體育場館預(yù)約系統(tǒng),為用戶提供了一個方便快捷的網(wǎng)絡(luò)預(yù)約方式。預(yù)約系統(tǒng)包含場館信息展示、用戶注冊登錄、提交預(yù)定信息、預(yù)定狀態(tài)圖與后臺管理等功能。該系統(tǒng)采用HTML、CSS、JavaScript (JQuery)等技術(shù)實現(xiàn)Web前端界面交互,服務(wù)器端使用了PHP語言以及ThinkPHP框架和MySQL數(shù)據(jù)庫來開發(fā)。測試結(jié)果表明,系統(tǒng)使用方便、界面友好,實用價值較高。

關(guān)鍵詞體育場館預(yù)約;Web;HTML;數(shù)據(jù)庫;PHP;ThinkPHP框架

為了改變體育場館傳統(tǒng)的人工預(yù)約方式,文中開發(fā)了一種基于Web的體育場館預(yù)約系統(tǒng),從而實現(xiàn)一種更加高效快捷的預(yù)約方式。

1系統(tǒng)設(shè)計

體育館預(yù)約系統(tǒng)包含了場館信息展示,用戶注冊登錄,提交預(yù)定信息,預(yù)定狀態(tài)圖和后臺管理等功能。其中系統(tǒng)用戶有著不同的權(quán)限等級,大體上分為3類:普通用戶,審批老師和系統(tǒng)管理員。普通用戶只有查看、添加自身預(yù)定情況和個人信息的權(quán)限,審批老師增加了審批和添加場地信息等功能,管理員增加了用戶管理和審批老師添加等權(quán)限。結(jié)構(gòu)如圖1所示。

2關(guān)鍵技術(shù)

2.1前端技術(shù)

本系統(tǒng)界面效果為實現(xiàn)美觀大方、簡潔明了的前端設(shè)計,使用了包括HTML、CSS和JavaScript[1]在內(nèi)的前端設(shè)計技術(shù),JavaScript中使用了JQuery函數(shù)庫,減小了原生代碼書寫量,提高整個系統(tǒng)的編寫效率和兼容性。

HTML語言是具有簡易性的特點,主要以各種標(biāo)簽的形式存在,本系統(tǒng)在HTML的使用上不但采用嚴(yán)格的W3C標(biāo)準(zhǔn)來制作網(wǎng)頁,而且注重了很多細(xì)節(jié)。比如HTML的語義化,在各個功能上使用不同的標(biāo)簽,在菜單欄使用

標(biāo)簽,段落地方采用標(biāo)簽,使得搜索引擎較好的收錄網(wǎng)站。

CSS級聯(lián)樣式表是對HTML等超文本標(biāo)記語言修飾的,本系統(tǒng)采用HTML和CSS分開,然后通過link標(biāo)簽進行引用[2]。例如若在之前要給表格加邊框需要,有了CSS,只需在CSS上添加table{border:1px}.讓網(wǎng)站程序和對網(wǎng)站美化效果分離,使搜索引擎容易采集到網(wǎng)站信息,維護修改網(wǎng)站也比較方便。

JavaScript,簡稱JS,是1995年網(wǎng)景公司推出的一種前端腳本語言,經(jīng)過多年的發(fā)展,其能讓瀏覽器展現(xiàn)出各種動態(tài)交互樣式,并產(chǎn)生了各種通用、開放的JavaScript函庫數(shù)組件,提高了編程效率和質(zhì)量[3]。本系統(tǒng)采用開源的JavaScript函數(shù)庫JQuery來實現(xiàn)和數(shù)據(jù)庫的交互。

圖1　預(yù)約系統(tǒng)結(jié)構(gòu)圖

2.2后端語言

本系統(tǒng)采用PHP+MySQL,PHP連接MySQL數(shù)據(jù)庫是使用方便,mysql_connect在執(zhí)行MySQL代碼時候,一個query(),就能解析MySQL語言[4]。

PHP又稱為超文本預(yù)處理器,其語法簡單,且是標(biāo)準(zhǔn)面向?qū)ο蟮恼Z言,有著嚴(yán)格的權(quán)限,語法吸收了C語言、Java和Perl的特點,使用廣泛,框架也較多。本系統(tǒng)采用開源的ThinkPHP框架,其是一種PHP框架,可簡化網(wǎng)站開發(fā),可移植性較好。ThinkPHP有著強大的過濾功能,能有效地阻止SQL注入,XSS等基本的網(wǎng)絡(luò)攻擊。ThinkPHP強大的功能還表現(xiàn)在其路由上,能自定義網(wǎng)站的URL地址,生成.html結(jié)尾的路徑,實現(xiàn)了網(wǎng)站頁面的靜態(tài)化,降低了服務(wù)器的負(fù)荷,而不用在服務(wù)器端的偽靜態(tài)中實現(xiàn)。

系統(tǒng)采用的數(shù)據(jù)庫是MySQL。因其開源、免費、性能優(yōu)秀、小型的數(shù)據(jù)庫系統(tǒng),適合本系統(tǒng)的開發(fā)。通過編寫SQL語句,來實現(xiàn)對MySQL數(shù)據(jù)庫的訪問,系統(tǒng)在查詢數(shù)據(jù)庫時候進行了優(yōu)化,比如同時查詢多個表的時候,進行多表的聯(lián)合查詢,提高了查詢效率,增加了數(shù)據(jù)庫的可維護性。

2.3服務(wù)器程序

系統(tǒng)使用的Web服務(wù)器是現(xiàn)在比較出眾的ngnix開源服務(wù)器,資源消耗低,性能高,首先其所需的內(nèi)存較小,例如在512 MB內(nèi)存的機子上運行;其次安全性能也較高,故采用其來編寫服務(wù)器程序。

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

系統(tǒng)數(shù)據(jù)庫采用MySQL數(shù)據(jù)庫,網(wǎng)站第三方用戶系統(tǒng)基于UCenter開發(fā),所以數(shù)據(jù)庫基于UCenter開發(fā),在UCenter的MySQL數(shù)據(jù)庫中添加字段,數(shù)據(jù)庫名稱為zyk_ding,下面介紹本系統(tǒng)最重要的數(shù)據(jù)表結(jié)構(gòu)設(shè)計。

3.1表zyk_members

zyk_members表是包含了所有用戶數(shù)據(jù)信息的用戶數(shù)據(jù)表。包括uid(索引ID,自增長)、username(用戶昵稱)、password(雙層md5加密的密碼)、email(用戶郵箱)、regip(注冊IP地址)、regdate(注冊時間),lastloginip(最后登錄IP)、lastlogintime(最后登錄時間),level(用戶級別),主鍵為uid,自增長、唯一,用來關(guān)聯(lián)其他表索引使用。這個表存儲了用戶基本信息和安全驗證信息,可用于用戶行為分析。

3.2表zyk_backg

zyk_backg表示場地信息,包含id(索引ID,主鍵,唯一,自增長)、backgname(場地名稱),兩個字段,當(dāng)管理員或?qū)徟藛T添加一些場地信息,會在此添加相應(yīng)的字段。同時,用戶在提交場地信息時,表格也會在可選擇選項里顯示對應(yīng)的信息。

3.3表zyk_add

zyk_add表是用戶提交審批場地信息的核心的表,保存了用戶提交的所有信息。包括id(int類型,索引ID,主鍵,唯一,自增長);backg_id(場地信息id,這個字段與zyk_backg表中的id對應(yīng),在聯(lián)表查詢時,可方便地查出zyk_backg中的backgname字段,從而查出對應(yīng)的場地名稱);tel(varchar類型,電話),about(varchar類型,備注信息);t_time(varchar類型,提交審批信息時間);user_uid(varchar類型,其用來提交預(yù)定信息的用戶id,這一字段與zyk_members表中的uid對應(yīng),在聯(lián)表查詢時,可方便地查出zyk_members中的username,email等字段,從而查出用戶郵箱,昵稱等信息);college(varchar類型,用戶所在單位);ip(varchar類型,用戶填寫信息時候的IP地址);user_time_1(varchar類型,用戶使用場地日期);user_time_2(varchar類型,用戶使用場地時間,具體到上午,下午,晚上);status(varchar類型,當(dāng)前狀態(tài),包含待審批,審批通過,審批不通過);go_id(varchar類型,審批人id,對應(yīng)zyk_members中的uid,可方便查出哪位老師負(fù)責(zé)的這項審批),detail(varchar類型,一些細(xì)節(jié)問題保存在此處)。

4系統(tǒng)功能

展示最新預(yù)定信息與已受理信息,其中最新預(yù)定信息包含預(yù)定人、預(yù)定單位、預(yù)定場地、預(yù)定時間、預(yù)定單位和當(dāng)前審批狀態(tài)等;最新受理信息包含預(yù)定人、預(yù)定單位、預(yù)定場地、預(yù)定時間和受理人等信息。整體前端效果如圖2所示。

圖2　系統(tǒng)前端效果

點擊“我要預(yù)定”按鈕,用戶需要在此填寫場地信息,預(yù)定單位,預(yù)定時間,場地名稱,聯(lián)系電話,備注信息等。用戶提交后便可在最新預(yù)定信息中查看狀態(tài),如圖3所示。

圖3　預(yù)定頁效果

模塊主要是以圖表形式顯示最近一周內(nèi)的預(yù)定狀態(tài),包含正在預(yù)定信息和已經(jīng)通過審批的預(yù)定信息,這樣用戶便能方便的看出有哪些場地空余,在預(yù)定頁面提交預(yù)定信息的時候也提高了查找的效率,如圖4所示。

圖4　預(yù)定狀態(tài)圖

這里列出了所有詳細(xì)信息,包括預(yù)定人、預(yù)定單位、預(yù)定場地、預(yù)定時間、預(yù)定單位和當(dāng)前審批狀態(tài)等,與首頁基本相同,只是比首頁多了分頁功能。

5系統(tǒng)測試

5.1瀏覽器兼容測試

由于存在多種不同核心的瀏覽器和不同版本瀏覽器,使系統(tǒng)能在不同瀏覽器下面均能正確顯示,必須保持系統(tǒng)對瀏覽器的兼容性[5]。通過IE Tester這工具,可測試各種版本IE瀏覽器瀏覽同一個預(yù)約系統(tǒng)的效果,同時安裝Chrome、Firefox、Safari等瀏覽器對預(yù)約系統(tǒng)進行測試。最終,本系統(tǒng)在IE6、IE7、IE8、IE9、IE10、IE11、Chrome、Firefox、Safari上測試通過。

5.2安全測試

安全測試主要從XSS,MySQL等代碼層次進行測試,類似CC攻擊等服務(wù)器端強制攻擊在此不做涉及。在網(wǎng)站系統(tǒng)設(shè)計上,添加了一定的過濾和檢驗,例如在提交表單的時候會進行token令牌檢測‘TOKEN_ON’?true,//是否開啟令牌驗證 ‘TOKEN_NAME’?‘__hash__’,//令牌驗證的表單隱藏字段名稱 ‘TOKEN_TYPE’?‘md5’,//令牌哈希驗證規(guī)則 默認(rèn)為MD5,有效防止用戶重復(fù)提交,或模擬POST事件對網(wǎng)站后臺進行請求。同時設(shè)置了‘VAR_FILTERS’?‘htmlspecialchars,stripslashes,strip_tags’,這樣的過濾函數(shù),保證一些JavaScript或者MySQL的字符惡意執(zhí)行,產(chǎn)生安全隱患。同時,在配置服務(wù)器的操作系統(tǒng)時候,需要啟動操作系統(tǒng)的防火墻,禁止對80以外端口訪問,限制對系統(tǒng)后臺訪問的IP地址范圍。最后,當(dāng)關(guān)閉ThinkPHP的入口文件的調(diào)試開關(guān)define(‘APP_DEBUG’,FALSE)時,保證不會輸出錯誤信息,按照404錯誤來處理,防止黑客利用。通過360公司提供的Webscan網(wǎng)站漏洞掃描系統(tǒng),對本系統(tǒng)進行掃描,未檢測出安全漏洞[6]。

5.3性能測試

運行本系統(tǒng)所用ngnix服務(wù)器的對內(nèi)存需求低,通過對服務(wù)器的參數(shù)文件.conf進行配置,對性能優(yōu)化可起到明顯提高。同時注重PHP語法邏輯的嚴(yán)謹(jǐn)性,減少邏輯bug的產(chǎn)生。比如將HTML,CSS,JavaScript分開書寫,盡量減少頁面請求次數(shù),同時對JavaScript和JS文件進行壓縮,HTML界面采用gzip,節(jié)省帶寬,共用圖片采用spirite方法保存到同一張圖片上,更大程度地減少了請求。通過Web bench 網(wǎng)站壓力測試工具,對本系統(tǒng)進行測試,表明系統(tǒng)可在較大負(fù)荷下正常運行[7]。

6結(jié)束語

基于Web的體育場館預(yù)約系統(tǒng)從解決人工預(yù)約率較低的實際問題出發(fā),提供了便捷解決方法,方便了用戶與場館管理員,提升了工作人員工作效率與體育場館的整體使用率,有一定的推廣價值。系統(tǒng)的網(wǎng)站前端界面整潔,數(shù)據(jù)清晰,操作簡單。下一步本系統(tǒng)也會不斷維護升級,使系統(tǒng)更人性化,增強用戶體驗。

參考文獻

[1]Nicholas C.JavaScript高級程序設(shè)計[M].3版.李松峰,曹力,譯.北京:人民郵電出版社,2012.

[2]王冉冉.百度 Web 前端框架通用可定制組件的設(shè)計與實現(xiàn)[D].哈爾濱:哈爾濱工業(yè)大學(xué),2012.

[3]Alexei White.Java Script程序員參考手冊[M].施宏斌,陶小梅,譚繼紅,譯.北京:清華大學(xué)出版社,2011.

[4]趙鶴芹.設(shè)計動態(tài)網(wǎng)站的最佳方案:Apache+PHP+MySQL[J].計算機工程與設(shè)計,2007,28(4):933-934,938.

[5]屈建勤,陳耀森.Web 應(yīng)用瀏覽器兼容性的自動規(guī)范化方案[J].計算機系統(tǒng)應(yīng)用,2013,22(12):196-198,187.

[6]李紹靜,車廣杰,董峰.基于ThinkPHP架構(gòu)的學(xué)生考核系統(tǒng)的設(shè)計與實現(xiàn)[J].信息技術(shù),2013(5):47-50,53.

[7]李曉峰.Web工程前端性能優(yōu)化[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

文獻標(biāo)識碼A

文章編號1007-7820(2016)04-104-04

doi:10.16180/j.cnki.issn1007-7820.2016.04.027

作者簡介:劉美琪(1993—),女,本科。研究方向:信息對抗。

收稿日期:2015- 09- 16