基于HTML5的數(shù)字迎新統(tǒng)計網(wǎng)站設計與實現(xiàn)
2015-10-27 11:49:49李春曉
電腦知識與技術(shù) 2015年21期
李春曉
摘要：網(wǎng)絡帶寬的不斷增加，智能手機的普及，移動互聯(lián)網(wǎng)的飛速發(fā)展，為我們的生活帶來了諸多便利，也對高校的數(shù)字化建設產(chǎn)生了深遠影響。信息的傳遞比以往更加迅速，用戶更加關心對信息的實時獲取。迎新統(tǒng)計也不例外，傳統(tǒng)迎新統(tǒng)計網(wǎng)站采用普通HTML技術(shù)，不能自適應不同的屏幕，存在一定的局限性，而HTML5可以輕松實現(xiàn)優(yōu)美的布局并能適配不同的屏幕，故該研究采用HTML5技術(shù)，對迎新統(tǒng)計數(shù)據(jù)進行展示，滿足了該校老師可以通過PC端和移動終端實時查看新生報到統(tǒng)計的需求。
關鍵詞：響應式網(wǎng)站；HTML5；迎新統(tǒng)計
中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2015）21-0028-02
1 背景
一年一度的迎新是我校每年的重點工作，早前的迎新統(tǒng)計工作，通過人工匯報來完成統(tǒng)計，每個院系在新生名單上記錄新生的報到狀態(tài)，每隔一段時間會有工作人員去各個院系報到點匯總。人工統(tǒng)計費時費力，出錯率高，并且不能及時更新實時查看。2007年我校引入了數(shù)字迎新系統(tǒng)，替代人工統(tǒng)計方法，新生在報到時，只需刷一下校園卡，系統(tǒng)就自動的記錄學生的報到狀態(tài)，然后工作人員通過編寫SQL語句查詢數(shù)據(jù)庫來統(tǒng)計新生報到數(shù)據(jù)。但是此方法存在一定的局限性，首先要求工作人員具備基礎的數(shù)據(jù)庫知識，其次每次查詢均需要不斷的訪問數(shù)據(jù)庫，給數(shù)據(jù)庫增加負擔，并且普適性能差，不熟悉迎新系統(tǒng)操作的老師將無法查看新生報到情況。基于以上問題，本研究提出采用HTML5技術(shù)，將統(tǒng)計結(jié)果界面化圖形化，同時采用響應式布局技術(shù)，使圖形界面同時適配PC端和移動終端，讓我校更多老師方便地實時查看新生報到情況。
2 高校迎新網(wǎng)站建設現(xiàn)狀
Marcotte1在 2010 年提出響應式網(wǎng)頁設計的概念，Mashable （世界上訪問量最多的互聯(lián)網(wǎng)新聞博客之一，創(chuàng)辦于 2005年）認為 2013年是響應式網(wǎng)頁的設計年2。查看世界 500 強企業(yè)的移動門戶網(wǎng)站， 可以發(fā)現(xiàn)有很多企業(yè)采用了響應式設計， 如微軟中國官網(wǎng)（http：//windows.microsoft.com/zh-cn/windows/home）、星巴克（http：//www.starbucks.cn/）等。許多國外知名大學和圖書館的移動門戶網(wǎng)站也都采用了響應式設計， 如哈佛大學（http：//www.harvard.edu/）、耶魯大學（http：//www.yale.edu/）、普林斯頓大學 （http：//www.princeton.edu/main/）等。
在國內(nèi)， 響應式網(wǎng)頁設計還處于起步階段， 據(jù)筆者調(diào)查， 當前有少數(shù)高校移動門戶網(wǎng)站開始嘗試響應式設計， 如清華大學、復旦大學、華東師范大學等正處于研發(fā)階段3。
3 Html5應用現(xiàn)狀
經(jīng)過八年的發(fā)展，W3C的HTML工作在2014年10月28日正式發(fā)布了HTML5的正式標準。即使在正式標準發(fā)布之前，HTML5已經(jīng)被各大瀏覽器廣泛支持，并得到了廣大用戶的喜愛。與傳統(tǒng)的HTML相比，HTML5增加了websocket通信協(xié)議，可以實現(xiàn)實時通信，增加canvas繪圖功能，可以實現(xiàn)各種復雜的畫面展示，增加了響應式布局，可以針對不同尺寸的屏幕自適應，此外HTML5還增加了許多新特性，而且HTML5對系統(tǒng)資源的占用很少，HTML5的這些特性可以很好的替代FLASH。越來越多的網(wǎng)站為了適應資源比較緊缺的移動端放棄了FLASH，轉(zhuǎn)而使用HTML5。
4 響應式網(wǎng)頁設計簡介
響應式布局是EthanMarcotte在2010年提出的，簡而言之就是一個網(wǎng)站能夠兼容多個終端 而不是為每個終端做一個特定的版本。因此，響應式布局面對不同終端設備靈活性強，能夠快速解決不同終端的顯示適應問題。常見的框架有bootstrap，UIkit，Base等，其中bootstrap是有Twitter的兩名工程師編寫的，是一款知名度高，上手容易的框架。
5 系統(tǒng)的設計與實現(xiàn)
5.1 前期調(diào)研
學校已有迎新系統(tǒng)與學生數(shù)據(jù)庫，但是沒有做圖形化的統(tǒng)計功能，所有的統(tǒng)計結(jié)果都是通過查詢數(shù)據(jù)庫獲取的。
5.2 網(wǎng)站架構(gòu)
本文所述統(tǒng)計網(wǎng)站是基于現(xiàn)有學生數(shù)據(jù)庫建立的，采用MVC三層架構(gòu)的方式構(gòu)建，如圖1所示，圖中虛線框中的部分為本文所述網(wǎng)站。
5.3 HTML5的應用
服務器端采用PHP語言編寫，由于學校已經(jīng)建立了離校系統(tǒng)，學生數(shù)據(jù)庫，所以本網(wǎng)站后臺不涉及數(shù)據(jù)庫的建立，只需要讀取數(shù)據(jù)庫視圖，然后傳遞給前端，前端獲取到數(shù)據(jù)之后通過HTML5的方式展現(xiàn)出來。
服務端首先連接數(shù)據(jù)庫，并讀取相應的數(shù)據(jù)視圖，以讀取全體新入學研究生為例，代碼如下：
[$db = "（DESCRIPTION=（ADDRESS_LIST = （ADDRESS = （PROTOCOL = TCP）（HOST = 10.12.13.183）（PORT = 1521）））（CONNECT_DATA=（SID=yx）））"；
$conn = OCILogon（'username'， 'password'， $db， 'utf8'）；
if （！$conn） {
print_r（oci_error（））；
echo "erro1"；
$e = oci_error（）；
print htmlentities（$e['message']）；
exit；
}
$sql = "select * from HY_REGISTER_XJ_YJS_TJ"；
$stmt = OCIParse（$conn， $sql）；
OCIExecute（$stmt）；]將代碼傳遞到瀏覽器端HTML5頁面中，本網(wǎng)站使用的是將數(shù)據(jù)存放到隱藏的表格中。代碼如下
[echo ""；
while （$row = oci_fetch_array （$stmt ， OCI_BOTH）） {
echo ""；
}
echo "
| ".$row[0]." | ".$row[1]." | " .$row[3]." | ".$row[2]." | ".$row[4]." |
1） 報到人數(shù)統(tǒng)計
展示已完成報到的人數(shù)和尚未報到的人數(shù)，采用餅圖的方式展示，分為全體研究生人數(shù)統(tǒng)計圖、學術(shù)碩士人數(shù)統(tǒng)計圖、專業(yè)碩士人數(shù)統(tǒng)計圖、博士人數(shù)統(tǒng)計圖4個子圖，如圖2所示：
2） 應報到男女比例統(tǒng)計，采用餅圖的方式展示，分為全體研究生男女比例統(tǒng)計圖、學術(shù)碩士男女比例統(tǒng)計圖、專業(yè)碩士男女比例統(tǒng)計圖、博士男女比例統(tǒng)計圖4個子圖。
3） 注冊完成男女比例統(tǒng)計，采用餅圖的方式展示，分為全體研究生注冊完成男女比例統(tǒng)計圖、學術(shù)碩士注冊完成男女比例統(tǒng)計圖、專業(yè)碩士注冊完成男女比例統(tǒng)計圖、博士注冊完成男女比例統(tǒng)計圖4個子圖。
4） 交費情況統(tǒng)計，采用餅圖的方式展示，分為全體研究生交費情況統(tǒng)計圖、學術(shù)碩士交費情況統(tǒng)計圖、專業(yè)碩士交費情況統(tǒng)計圖、博士交費情況統(tǒng)計圖4個子圖。
5） 各院系報到統(tǒng)計，如圖3所示。
HTML5頁面先引入框架與圖表控件所需要的外部文件，并啟用響應式支持，代碼如下：
[
]
在body標簽中寫好網(wǎng)頁的結(jié)構(gòu)，為統(tǒng)計圖寫好占位符，占位符代碼如下：
通過javascript獲取后臺傳過來的數(shù)據(jù)，并在占位符出繪圖，代碼如下：
[$（"#quanti tr"）.each（function（i）{
if（i < 2）{
$this = $（this）；
$name = $this.children（）.eq（0）.text（）；
$val_quanti = $this.children（）.eq（1）.text（）；
$quanti.push（{name： $name + $val_quanti + '人'， value ： $val_quanti， color：colors[i % 6]}）；
$xueshu.push（{name： $name + $val_xueshu + '人'， value ： $val_xueshu， color：colors[i % 6]}）；
$zhuanye.push（{name： $name+ $val_zhuanye+ '人'， value ： $val_zhuanye， color：colors[i % 6]}）；
$boshi.push（{name： $name+ $val_boshi+ '人'， value ： $val_boshi， color：colors[i % 6]}）；
}
}）；
progress（'全體研究生'，'canvas_quanti'，0，$quanti）.draw（）；]
6總結(jié)
本文從北京師范大學迎新統(tǒng)計實際需求出發(fā)，講述了運用HMTL5技術(shù)開發(fā)能同時適PC與移動端的響應式網(wǎng)頁，統(tǒng)計結(jié)果通過圖表的形式展現(xiàn)，很好的滿足了全校師生查看新生實時報到數(shù)據(jù)的要求。
參考文獻：
[1] Marcotte E. Responsive Web Design [EB/OL].（2010-05-25）.[2014-07-21]. http：//alistapart.com/article/responsive-web- design/.
[2] Why 2013 is the Year of Responsive Web Design [EB/OL].（2012-12-11）. [2014-07-22]. http：//mashable.com/2012/12/11/responsive-web-design/.
[3] 劉歡，盧蓓蓉. 使用響應式設計構(gòu)建高校新型門戶網(wǎng)站[J].中國教育信息化： 高教職教， 2013 （5）： 71-74.
