基于HTML5的数字迎新统计网站设计与实现
2015-10-27 11:49李春晓
电脑知识与技术 2015年21期
李春晓
摘要：网络带宽的不断增加，智能手机的普及，移动互联网的飞速发展，为我们的生活带来了诸多便利，也对高校的数字化建设产生了深远影响。信息的传递比以往更加迅速，用户更加关心对信息的实时获取。迎新统计也不例外，传统迎新统计网站采用普通HTML技术，不能自适应不同的屏幕，存在一定的局限性，而HTML5可以轻松实现优美的布局并能适配不同的屏幕，故该研究采用HTML5技术，对迎新统计数据进行展示，满足了该校老师可以通过PC端和移动终端实时查看新生报到统计的需求。
关键词：响应式网站；HTML5；迎新统计
中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2015）21-0028-02
1 背景
一年一度的迎新是我校每年的重点工作，早前的迎新统计工作，通过人工汇报来完成统计，每个院系在新生名单上记录新生的报到状态，每隔一段时间会有工作人员去各个院系报到点汇总。人工统计费时费力，出错率高，并且不能及时更新实时查看。2007年我校引入了数字迎新系统，替代人工统计方法，新生在报到时，只需刷一下校园卡，系统就自动的记录学生的报到状态，然后工作人员通过编写SQL语句查询数据库来统计新生报到数据。但是此方法存在一定的局限性，首先要求工作人员具备基础的数据库知识，其次每次查询均需要不断的访问数据库，给数据库增加负担，并且普适性能差，不熟悉迎新系统操作的老师将无法查看新生报到情况。基于以上问题，本研究提出采用HTML5技术，将统计结果界面化图形化，同时采用响应式布局技术，使图形界面同时适配PC端和移动终端，让我校更多老师方便地实时查看新生报到情况。
2 高校迎新网站建设现状
Marcotte1在 2010 年提出响应式网页设计的概念，Mashable （世界上访问量最多的互联网新闻博客之一，创办于 2005年）认为 2013年是响应式网页的设计年2。查看世界 500 强企业的移动门户网站， 可以发现有很多企业采用了响应式设计， 如微软中国官网（http：//windows.microsoft.com/zh-cn/windows/home）、星巴克（http：//www.starbucks.cn/）等。许多国外知名大学和图书馆的移动门户网站也都采用了响应式设计， 如哈佛大学（http：//www.harvard.edu/）、耶鲁大学（http：//www.yale.edu/）、普林斯顿大学 （http：//www.princeton.edu/main/）等。
在国内， 响应式网页设计还处于起步阶段， 据笔者调查， 当前有少数高校移动门户网站开始尝试响应式设计， 如清华大学、复旦大学、华东师范大学等正处于研发阶段3。
3 Html5应用现状
经过八年的发展，W3C的HTML工作在2014年10月28日正式发布了HTML5的正式标准。即使在正式标准发布之前，HTML5已经被各大浏览器广泛支持，并得到了广大用户的喜爱。与传统的HTML相比，HTML5增加了websocket通信协议，可以实现实时通信，增加canvas绘图功能，可以实现各种复杂的画面展示，增加了响应式布局，可以针对不同尺寸的屏幕自适应，此外HTML5还增加了许多新特性，而且HTML5对系统资源的占用很少，HTML5的这些特性可以很好的替代FLASH。越来越多的网站为了适应资源比较紧缺的移动端放弃了FLASH，转而使用HTML5。
4 响应式网页设计简介
响应式布局是EthanMarcotte在2010年提出的，简而言之就是一个网站能够兼容多个终端 而不是为每个终端做一个特定的版本。因此，响应式布局面对不同终端设备灵活性强，能够快速解决不同终端的显示适应问题。常见的框架有bootstrap，UIkit，Base等，其中bootstrap是有Twitter的两名工程师编写的，是一款知名度高，上手容易的框架。
5 系统的设计与实现
5.1 前期调研
学校已有迎新系统与学生数据库，但是没有做图形化的统计功能，所有的统计结果都是通过查询数据库获取的。
5.2 网站架构
本文所述统计网站是基于现有学生数据库建立的，采用MVC三层架构的方式构建，如图1所示，图中虚线框中的部分为本文所述网站。
5.3 HTML5的应用
服务器端采用PHP语言编写，由于学校已经建立了离校系统，学生数据库，所以本网站后台不涉及数据库的建立，只需要读取数据库视图，然后传递给前端，前端获取到数据之后通过HTML5的方式展现出来。
服务端首先连接数据库，并读取相应的数据视图，以读取全体新入学研究生为例，代码如下：
[$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页面中，本网站使用的是将数据存放到隐藏的表格中。代码如下
[echo ""；
while （$row = oci_fetch_array （$stmt ， OCI_BOTH）） {
echo ""；
}
echo "
| ".$row[0]." | ".$row[1]." | " .$row[3]." | ".$row[2]." | ".$row[4]." |
1） 报到人数统计
展示已完成报到的人数和尚未报到的人数，采用饼图的方式展示，分为全体研究生人数统计图、学术硕士人数统计图、专业硕士人数统计图、博士人数统计图4个子图，如图2所示：
2） 应报到男女比例统计，采用饼图的方式展示，分为全体研究生男女比例统计图、学术硕士男女比例统计图、专业硕士男女比例统计图、博士男女比例统计图4个子图。
3） 注册完成男女比例统计，采用饼图的方式展示，分为全体研究生注册完成男女比例统计图、学术硕士注册完成男女比例统计图、专业硕士注册完成男女比例统计图、博士注册完成男女比例统计图4个子图。
4） 交费情况统计，采用饼图的方式展示，分为全体研究生交费情况统计图、学术硕士交费情况统计图、专业硕士交费情况统计图、博士交费情况统计图4个子图。
5） 各院系报到统计，如图3所示。
HTML5页面先引入框架与图表控件所需要的外部文件，并启用响应式支持，代码如下：
[
]
在body标签中写好网页的结构，为统计图写好占位符，占位符代码如下：
通过javascript获取后台传过来的数据，并在占位符出绘图，代码如下：
[$（"#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总结
本文从北京师范大学迎新统计实际需求出发，讲述了运用HMTL5技术开发能同时适PC与移动端的响应式网页，统计结果通过图表的形式展现，很好的满足了全校师生查看新生实时报到数据的要求。
参考文献：
[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] 刘欢，卢蓓蓉. 使用响应式设计构建高校新型门户网站[J].中国教育信息化： 高教职教， 2013 （5）： 71-74.
