北京大学教室管理系统的设计与实现*

2015-06-04 06:37杨公义张亦工
现代教育技术 2015年4期
关键词:大图原图教学楼

杨公义 张亦工

(北京大学 现代教育技术中心,北京 100871)

引言

教室是教学的主要场所,北京大学教务长办公室委托现代教育技术中心对全校师生进行了“北京大学公共教室使用情况”调查。调查结果发现:29.03%的本科生不容易找到自习教室,38.89%的教师不容易找到设备操作说明书。为此,我们自主研发了北京大学教室管理系统。

一 北京大学教室管理系统的界面与功能设计

教室管理系统旨在方便师生网上了解教室的配置和使用情况;提供教室的位置、所配设备以及各种设备的使用说明等信息;提供各种方式的查询服务。

图1 首页

图2 教学楼主页

首页如图1所示,首页中部提供了师生最需要的一些信息:校园地图、教室种类、管理规章、教室操作手册、所有教室的概况、教学楼的服务热线和教室使用须知等。图1左侧以树形导航[1]的形式展示了北大所有的公共教学楼(一教、二教、三教、四教、文史楼、理教、电教)。在图1左侧单击某个教学楼能进入该“教学楼主页”如图2所示。每个教学楼主页的重要信息包括:总教室数、总容纳人数、设备总量、每教室每天平均排课时数、电话、多媒体教室操作说明、教室基本装备、可借用的设备、控制台操作说明、教室灯光控制方法、窗帘操作说明等,并以缩略图的形式展示该教学楼的所有教室。图2左下部提供了基于教学楼和教室号的快速定位功能,通过它可以快速定位到具体教学楼的具体教室,单击“快速定位”进入“教室主页”如图3。也可以在图2“教学楼主页”中单击某教室缩略图,可以进入图3“教室主页”。在图3教室主页中可以了解该教室的装备情况:教室类型、教室座位数、扩音话筒、投影机、中控、展台、录像机、计算机、影碟机。可以看到4张教室照片缩略图:前视图、侧视图、中控图、展台图,单击某一个缩略图可以查看该图片的放大图。该功能有助于师生网上了解教室信息。

为了方便教务部排课时查询符合要求的教室,系统提供了教室查询功能。如果用户是从计算中心的统一认证门户跳转过来的,系统判断用户如果属于教务部教师帐户,在首页单击“教室查询”后可以进行各类查询如图4所示。查询分为普通查询和高级查询:普通查询是基于教学楼和教室座位数的查询。高级查询可以基于设备查询,查询到含有某种设备的教室;基于教室座位数查询,查询座位数大于某数的教室;组合查询,查询座位数大于某数并且含有某种设备的教室。单击检索到的某一个教室,可以进入该教室的主页如图3所示。

为了方便学生查询教室使用状态,系统提供了教室使用状态查询功能。如果用户是从计算中心的统一认证门户跳转过来的,系统判断用户属于北大师生,在首页单击“教室查询”如图5。该模块与教务部的排课系统进行了对接,可以根据日期查询某个教学楼的教室使用状态。状态信息包括:有课、有会、自习。北大师生可以根据日历和输入的教学楼,查询某日该教学楼所有教室的占用状态,这样北大师生就可以有针对性地申请使用教室,既不会网上暴露北大的课表,又方便学生查找自习教室。

在首页单击“通知公告”如图6所示。用户可以根据通知标题或发布时间排序。超级管理员可以在后台增、删、改通知内容。在图6中单击通知标题,进入通知内容页如图7。在图7中显示通知标题、内容、发布时间和阅读次数。

图3 教室主页

图4 教室检索

图5 教室使用状态查询

图6 通知公告

咨询求助模块旨在为给北大师生提供网上求助一站式服务。在首页中单击“咨询求助”如图8所示。在图8的左侧可以选择主题类型、教学楼、输入教室号单击“咨询求助”,在图8的右侧可以输入咨询的标题和内容等进行咨询。用户可以决定该问题只能由管理员回复,还是可以匿名回复,对于可以匿名回复的问题在主题发布一周内,任何人都可以回复,一周之后只能由管理员回复。发表求助和回复求助都可以带附件。在图8中单击“查看主题列表”,进入图9。在图9中主题分页显示,授权用户可以在这里发表新主题。

在图9中单击某一个主题,进入主题浏览模式如图10。在图10中如果登录用户的角色是管理员就有“回复”和“删除”的功能链接。如果用户角色是普通用户,并且该求助在发表时不允许匿名回复,就没有“回复”的链接。如果是普通用户,并且该求助在发表时允许匿名回复,就有“回复”的功能链接。内容的显示支持楼层的概念,从标题的名称中能够看出楼层数和所回复问题的标题。咨询求助也可以在浏览某个教室时发表和查看。方法是在图1首页中单击“教室浏览”导航条,再单击左侧的“快速定位”进入某个教室,再单击“咨询求助”,再单击“发表新主题”,这样发表的咨询求助就针对某个教室。

咨询求助模块从程序上解决上面两种情况发表咨询求助的问题:(1)发表和教学楼无关的咨询求助。方法为在图8的左侧教学楼的下拉框中选择“不考虑”。就自动隐藏了教室号的输入框如图11所示;(2)发表与某个教学楼关联但不与某个教室关联的咨询求助。方法为在图8的左侧,“教学楼”下拉选择某个教学楼,“教室号”点击“不考虑”如图 12所示。如果用户在咨询求助时填写了真实的邮箱,回复一个咨询求助的同时,在后台系统自动给求助者发送一封Email。

图7 通知内容

图8 咨询求助

图9 查看主题列表

图10 主题浏览模式

图11 发表和教学楼无关的咨询求助

图12 发表与教学楼相关但不与教室号相关的咨询求助

二 北京大学教室管理系统的实体定义

在SSH架构下每个实体对应一个数据表和一组java类及配置文件[2]。每个模块包括PO、VO、DAO、Action、FormBean、.hbm、.xml等。每个DAO类中均包括增、删、改、查操作。每个实体中均包括一个ID属性作主键和一个标题或名称的属性,对于和类型有关的实体还有一个类型编号属性,这些共同的属性下文不再赘述。

系统主要包含12个实体。(1)教学楼(Building)实体,属性包括:教学楼的图片地址,教学楼地图、总教室数、容纳人数、设备总量、教室平均排课数、服务电话等。(2)教室类型(RoomType)实体,数据字典包括:多媒体教室、实验室、语音室、普通教室。(3)教室(Room)实体,属性包括:所属的教学楼(外键关联Building实体)、教室类型(外键关联RoomType实体)、教室内的四张照片地址、教室座位数、教室设备清单、教室操作说明(用html编辑器实现图文并茂[3])。(4)留言类型(MessageType)实体,数据字典包括:自由主题、投影机问题、音响问题、空调问题、灯光问题、多媒体教室、卫生问题等。(5)咨询留言(Message)实体,用户可以发表咨询求助,查看留言及回复信息。教室管理员可以删除留言、回复留言。咨询留言实体的属性包括:主题、内容、留言类型(外键关联MessageType实体)、留言针对的教室(外键关联Room实体)、回复所针对的主贴(外键关联自身实体 Message)。(6)设备型号(EquipmentType)实体,教室中有投影仪、控制台、电脑等多种设备,并且每种设备有多种型号。利用设备型号实体将不同型号的设备进行统一编码。属性包括:设备品牌,设备型号,设备操作说明等。(7)教室设备(RoomEquipment)实体,属性包括:所属的教室(外键关联Room实体)、设备型号(外键关联EquipmentType实体),设备的缩略图及源图的地址等。(8)用户类别[4](UserType)实体,数据字典有三类:a.系统管理员:权限为创建和管理教室管理员,创建和管理教学楼,管理教学楼的留言。b.教室管理员:权限为创建和管理教室,管理教室的留言,上传和管理教室的若干图片。c.普通用户:权限为信息浏览和发表咨询求助。(9)用户(User)实体,属性包括:用户密码、用户类别(外键关联UserType实体)。(10)照片类型(PhotoType)实体,数据字典包括:教室前视图、教室侧视图、教室中控图、教室展示台图。(11)照片(Photo)实体,每个教室都有 4张照片,每张照片都有源图地址、小图地址、大图地址。属性包括:所属教室(外键关联 Room实体)、照片类型(外键关联PhotoType实体)。(12)课程表(Timetable)实体,属性包括:课程名称、教室(外键关联Room实体)、日期、第几节课。

三 系统开发中用到的关键技术

超级管理员的用例为:管理教室管理员、教学楼、教学楼的留言。教室管理员的用例为:管理教室、教室的留言、教室的若干照片。教室管理员刚刚新建了一个教室的效果如图14。因为是刚刚创建的教室所以显示为“暂无图片”。在图14中单击“暂无图片”可以进入该教室,在该教室的页面中单击“上传照片”,进入一个页面进行照片上传。成功上传两张照片之后如图15,系统根据上传的原图,自动生成修改后的小的缩略图,并分页显示出来。在图 15中单击任意缩略图会打开一个页面,显示根据上传的原图自动生成的合适尺寸的大图。

系统开发中用到的关键技术[5]:为每个教室上传的图片,系统会自动生成3个图片:原图、小图和大图。在上传照片的AddPhotoAction中先通过struts框架得到FormFile类型的file,然后通过下面方法得到文件名fileName和文件扩展名suffix。String fileName =file.getFileName();String suffix= fileName.substring(fileName.indexOf("."));然后调用上传工具类UploadUtil进行后续处理。

1 检查图片大小和类型是否合法:调用UploadUtil.checkImage(String suffix)检查图片后缀是否合法。调用UploadUtil.checkImageSize(FormFile file, int size)检查图片的大小是否超过指定的值size。返回值为false表示不合法,为true表示合法。如果不合法就在AddPhotoAction中调用return mapping.findForward("wrongType")进行错误处理。

2 将文件上传到服务器,并返回上传后的可访问相对地址:例如要将本地文件aa.jpg上传后得到/upload/1337150156880.jpg就要调用String relativeAddress_originFile=releativeUploadUtil.upl oadFormFile(HttpSession session,FormFile accessoryFile,String rootRelativeDir)。参数 rootRelative Dir为形如/upload/的相对路径,参数 accessoryFile为采用 struts框架得到的类型为 FormFile的aa.jpg。uploadFormFile方法返回上传后的可访问相对地址存放在relativeAddress_origin File中。

3 根据上传的原图的相对地址得到将要生成的小图和大图的相对地址:在AddPhotoAction中首先调用String relativeAddress_bigFile=UploadUtil.makeNewUrl(relativeAddress_originFile,"_big"),根据原图的相对地址得到大图的相对地址 relativeAddress_bigFile。再调用 String relativeAddress_smallFile=UploadUtil. makeNewUrl(relativeAddress_originFile,"_small"),根据原图的相对地址得到小图的相对地址relativeAddress_smallFile。

4 根据上传的原图的绝对地址得到将要生成的小图和大图的绝对地址:在AddPhotoAction中首先根据原图的相对地址 relativeAddress_originFile得到原图的绝对地址:String absoluteAddress_originFile=session.getServletContext().getRealPath(relativeAddress_originFile)。再根据原图的绝对地址得到大图的相对地址 absoluteAddress_bigFile:String absoluteAddress_bigFile=UploadUtil.makeNewUrl(absoluteAddress_originFile,"_big")。同理,根据原图的绝对地址得到小图的绝对地址:String absoluteAddress_smallFile=UploadUtil.makeNewUrl(absoluteAddress_originFile, _small")。

5 由原图生成小图和大图:由原图生成小图:UploadUtil.makeImage(absoluteAddress_origin File,140,-20,absoluteAddress_smallFile,suffix.substring(1))。由原图生成大图:UploadUtil.makeI mage(absoluteAddress_originFile,600,-20,absoluteAddress_bigFile,suffix.substring(1))。UploadUtil.makeImage中调用的主要处理类为java.awt.Graphics、java.awt.Image、java.awt.image.Buffered Image。

6 调用业务逻辑保存数据:将原图相对地址、大图相对地址、小图相对地址存到教室实体的相应的三个属性 accessory_origin、accessory_big、accessory_small中。为了程序开发的方便将这三个地址以“|”分隔冗余地存入accessoryAll属性中。

图14 教室管理员刚刚新建了一个教室图

15 为教室成功上传了两张照片

四 结语

基于Spring+Struts+Hibernate的轻量级J2EE架构能充分体现Struts的MVC设计模式,Spring的依赖注入和面向方面编程的思想,Hibernate数据持久化的中间件思想。系统中所有信息均引自数据库,系统易于扩充和易于实现数据的各种检索。基于该技术开发的教室管理系统,在北京大学校内运行良好,在北京大学的教务部排课、教师使用教室、教室管理员管理教室和学生找到自习教室等方面起到很好的辅助作用。

[1]杨公义.SSH架构下基于数据库的树状菜单的设计与实现[J].电脑知识与技术,2009,(25):7308-7311.

[2]杨公义.基于SSH的播客资源平台的设计与实现[J].现代远程教育研究,2009,(1):66-68.

[3]杨公义,陈虎,陈飞.一个多功能可扩展的html在线编辑器的技术架构[J].地理与地理信息科学,2009,(25):4-6

[4]杨公义,张亦工.基于Red5的网络教育电视台的设计与实现[J].现代教育技术,2012,(8):109-112.

[5]陈飞,杨公义,李志刚,等.基于 Blackboard系统的“北大教学网”扩展开发研究[J].北京大学教育评论,2013,(12):201-211.

猜你喜欢
大图原图教学楼
大图
教学楼重建工程项目中的施工技术分析
教学楼重建工程项目中的施工技术分析
完形:打乱的拼图
教学楼,作文本里的方格 组诗
拼图
动脑筋,仔细看
找拼图
找一找
大家来找茬