楊公義 張亦工

（北京大學(xué) 現(xiàn)代教育技術(shù)中心，北京 100871）

引言

教室是教學(xué)的主要場所，北京大學(xué)教務(wù)長辦公室委托現(xiàn)代教育技術(shù)中心對全校師生進(jìn)行了“北京大學(xué)公共教室使用情況”調(diào)查。調(diào)查結(jié)果發(fā)現(xiàn)：29.03%的本科生不容易找到自習(xí)教室，38.89%的教師不容易找到設(shè)備操作說明書。為此，我們自主研發(fā)了北京大學(xué)教室管理系統(tǒng)。

一 北京大學(xué)教室管理系統(tǒng)的界面與功能設(shè)計(jì)

教室管理系統(tǒng)旨在方便師生網(wǎng)上了解教室的配置和使用情況；提供教室的位置、所配設(shè)備以及各種設(shè)備的使用說明等信息；提供各種方式的查詢服務(wù)。

圖1 首頁

圖2 教學(xué)樓主頁

首頁如圖1所示，首頁中部提供了師生最需要的一些信息：校園地圖、教室種類、管理規(guī)章、教室操作手冊、所有教室的概況、教學(xué)樓的服務(wù)熱線和教室使用須知等。圖1左側(cè)以樹形導(dǎo)航[1]的形式展示了北大所有的公共教學(xué)樓（一教、二教、三教、四教、文史樓、理教、電教）。在圖1左側(cè)單擊某個教學(xué)樓能進(jìn)入該“教學(xué)樓主頁”如圖2所示。每個教學(xué)樓主頁的重要信息包括：總教室數(shù)、總?cè)菁{人數(shù)、設(shè)備總量、每教室每天平均排課時數(shù)、電話、多媒體教室操作說明、教室基本裝備、可借用的設(shè)備、控制臺操作說明、教室燈光控制方法、窗簾操作說明等，并以縮略圖的形式展示該教學(xué)樓的所有教室。圖2左下部提供了基于教學(xué)樓和教室號的快速定位功能，通過它可以快速定位到具體教學(xué)樓的具體教室，單擊“快速定位”進(jìn)入“教室主頁”如圖3。也可以在圖2“教學(xué)樓主頁”中單擊某教室縮略圖，可以進(jìn)入圖3“教室主頁”。在圖3教室主頁中可以了解該教室的裝備情況：教室類型、教室座位數(shù)、擴(kuò)音話筒、投影機(jī)、中控、展臺、錄像機(jī)、計(jì)算機(jī)、影碟機(jī)?？梢钥吹?張教室照片縮略圖：前視圖、側(cè)視圖、中控圖、展臺圖，單擊某一個縮略圖可以查看該圖片的放大圖。該功能有助于師生網(wǎng)上了解教室信息。

為了方便教務(wù)部排課時查詢符合要求的教室，系統(tǒng)提供了教室查詢功能。如果用戶是從計(jì)算中心的統(tǒng)一認(rèn)證門戶跳轉(zhuǎn)過來的，系統(tǒng)判斷用戶如果屬于教務(wù)部教師帳戶，在首頁單擊“教室查詢”后可以進(jìn)行各類查詢?nèi)鐖D4所示。查詢分為普通查詢和高級查詢：普通查詢是基于教學(xué)樓和教室座位數(shù)的查詢。高級查詢可以基于設(shè)備查詢，查詢到含有某種設(shè)備的教室；基于教室座位數(shù)查詢，查詢座位數(shù)大于某數(shù)的教室；組合查詢，查詢座位數(shù)大于某數(shù)并且含有某種設(shè)備的教室。單擊檢索到的某一個教室，可以進(jìn)入該教室的主頁如圖3所示。

為了方便學(xué)生查詢教室使用狀態(tài)，系統(tǒng)提供了教室使用狀態(tài)查詢功能。如果用戶是從計(jì)算中心的統(tǒng)一認(rèn)證門戶跳轉(zhuǎn)過來的，系統(tǒng)判斷用戶屬于北大師生，在首頁單擊“教室查詢”如圖5。該模塊與教務(wù)部的排課系統(tǒng)進(jìn)行了對接，可以根據(jù)日期查詢某個教學(xué)樓的教室使用狀態(tài)。狀態(tài)信息包括：有課、有會、自習(xí)。北大師生可以根據(jù)日歷和輸入的教學(xué)樓，查詢某日該教學(xué)樓所有教室的占用狀態(tài)，這樣北大師生就可以有針對性地申請使用教室，既不會網(wǎng)上暴露北大的課表，又方便學(xué)生查找自習(xí)教室。

在首頁單擊“通知公告”如圖6所示。用戶可以根據(jù)通知標(biāo)題或發(fā)布時間排序。超級管理員可以在后臺增、刪、改通知內(nèi)容。在圖6中單擊通知標(biāo)題，進(jìn)入通知內(nèi)容頁如圖7。在圖7中顯示通知標(biāo)題、內(nèi)容、發(fā)布時間和閱讀次數(shù)。

圖3 教室主頁

圖4 教室檢索

圖5 教室使用狀態(tài)查詢

圖6 通知公告

咨詢求助模塊旨在為給北大師生提供網(wǎng)上求助一站式服務(wù)。在首頁中單擊“咨詢求助”如圖8所示。在圖8的左側(cè)可以選擇主題類型、教學(xué)樓、輸入教室號單擊“咨詢求助”，在圖8的右側(cè)可以輸入咨詢的標(biāo)題和內(nèi)容等進(jìn)行咨詢。用戶可以決定該問題只能由管理員回復(fù)，還是可以匿名回復(fù)，對于可以匿名回復(fù)的問題在主題發(fā)布一周內(nèi)，任何人都可以回復(fù)，一周之后只能由管理員回復(fù)。發(fā)表求助和回復(fù)求助都可以帶附件。在圖8中單擊“查看主題列表”，進(jìn)入圖9。在圖9中主題分頁顯示，授權(quán)用戶可以在這里發(fā)表新主題。

在圖9中單擊某一個主題，進(jìn)入主題瀏覽模式如圖10。在圖10中如果登錄用戶的角色是管理員就有“回復(fù)”和“刪除”的功能鏈接。如果用戶角色是普通用戶，并且該求助在發(fā)表時不允許匿名回復(fù)，就沒有“回復(fù)”的鏈接。如果是普通用戶，并且該求助在發(fā)表時允許匿名回復(fù)，就有“回復(fù)”的功能鏈接。內(nèi)容的顯示支持樓層的概念，從標(biāo)題的名稱中能夠看出樓層數(shù)和所回復(fù)問題的標(biāo)題。咨詢求助也可以在瀏覽某個教室時發(fā)表和查看。方法是在圖1首頁中單擊“教室瀏覽”導(dǎo)航條，再單擊左側(cè)的“快速定位”進(jìn)入某個教室，再單擊“咨詢求助”，再單擊“發(fā)表新主題”，這樣發(fā)表的咨詢求助就針對某個教室。

咨詢求助模塊從程序上解決上面兩種情況發(fā)表咨詢求助的問題：（1）發(fā)表和教學(xué)樓無關(guān)的咨詢求助。方法為在圖8的左側(cè)教學(xué)樓的下拉框中選擇“不考慮”。就自動隱藏了教室號的輸入框如圖11所示；（2）發(fā)表與某個教學(xué)樓關(guān)聯(lián)但不與某個教室關(guān)聯(lián)的咨詢求助。方法為在圖8的左側(cè)，“教學(xué)樓”下拉選擇某個教學(xué)樓，“教室號”點(diǎn)擊“不考慮”如圖 12所示。如果用戶在咨詢求助時填寫了真實(shí)的郵箱，回復(fù)一個咨詢求助的同時，在后臺系統(tǒng)自動給求助者發(fā)送一封Email。

圖7 通知內(nèi)容

圖8 咨詢求助

圖9 查看主題列表

圖10 主題瀏覽模式

圖11 發(fā)表和教學(xué)樓無關(guān)的咨詢求助

圖12 發(fā)表與教學(xué)樓相關(guān)但不與教室號相關(guān)的咨詢求助

二 北京大學(xué)教室管理系統(tǒng)的實(shí)體定義

在SSH架構(gòu)下每個實(shí)體對應(yīng)一個數(shù)據(jù)表和一組java類及配置文件[2]。每個模塊包括PO、VO、DAO、Action、FormBean、.hbm、.xml等。每個DAO類中均包括增、刪、改、查操作。每個實(shí)體中均包括一個ID屬性作主鍵和一個標(biāo)題或名稱的屬性，對于和類型有關(guān)的實(shí)體還有一個類型編號屬性，這些共同的屬性下文不再贅述。

系統(tǒng)主要包含12個實(shí)體。（1）教學(xué)樓（Building）實(shí)體，屬性包括：教學(xué)樓的圖片地址，教學(xué)樓地圖、總教室數(shù)、容納人數(shù)、設(shè)備總量、教室平均排課數(shù)、服務(wù)電話等。（2）教室類型(RoomType)實(shí)體，數(shù)據(jù)字典包括：多媒體教室、實(shí)驗(yàn)室、語音室、普通教室。（3）教室（Room）實(shí)體，屬性包括：所屬的教學(xué)樓（外鍵關(guān)聯(lián)Building實(shí)體）、教室類型（外鍵關(guān)聯(lián)RoomType實(shí)體）、教室內(nèi)的四張照片地址、教室座位數(shù)、教室設(shè)備清單、教室操作說明（用html編輯器實(shí)現(xiàn)圖文并茂[3]）。（4）留言類型（MessageType）實(shí)體，數(shù)據(jù)字典包括：自由主題、投影機(jī)問題、音響問題、空調(diào)問題、燈光問題、多媒體教室、衛(wèi)生問題等。（5）咨詢留言（Message）實(shí)體，用戶可以發(fā)表咨詢求助，查看留言及回復(fù)信息。教室管理員可以刪除留言、回復(fù)留言。咨詢留言實(shí)體的屬性包括：主題、內(nèi)容、留言類型（外鍵關(guān)聯(lián)MessageType實(shí)體）、留言針對的教室（外鍵關(guān)聯(lián)Room實(shí)體）、回復(fù)所針對的主貼（外鍵關(guān)聯(lián)自身實(shí)體 Message）。（6）設(shè)備型號（EquipmentType）實(shí)體，教室中有投影儀、控制臺、電腦等多種設(shè)備，并且每種設(shè)備有多種型號。利用設(shè)備型號實(shí)體將不同型號的設(shè)備進(jìn)行統(tǒng)一編碼。屬性包括：設(shè)備品牌，設(shè)備型號，設(shè)備操作說明等。（7）教室設(shè)備（RoomEquipment）實(shí)體，屬性包括：所屬的教室（外鍵關(guān)聯(lián)Room實(shí)體）、設(shè)備型號（外鍵關(guān)聯(lián)EquipmentType實(shí)體），設(shè)備的縮略圖及源圖的地址等。（8）用戶類別[4]（UserType）實(shí)體，數(shù)據(jù)字典有三類：a.系統(tǒng)管理員：權(quán)限為創(chuàng)建和管理教室管理員，創(chuàng)建和管理教學(xué)樓，管理教學(xué)樓的留言。b.教室管理員：權(quán)限為創(chuàng)建和管理教室，管理教室的留言，上傳和管理教室的若干圖片。c.普通用戶：權(quán)限為信息瀏覽和發(fā)表咨詢求助。（9）用戶（User）實(shí)體，屬性包括：用戶密碼、用戶類別（外鍵關(guān)聯(lián)UserType實(shí)體）。（10）照片類型（PhotoType）實(shí)體，數(shù)據(jù)字典包括：教室前視圖、教室側(cè)視圖、教室中控圖、教室展示臺圖。（11）照片（Photo）實(shí)體，每個教室都有 4張照片，每張照片都有源圖地址、小圖地址、大圖地址。屬性包括：所屬教室（外鍵關(guān)聯(lián) Room實(shí)體）、照片類型（外鍵關(guān)聯(lián)PhotoType實(shí)體）。（12）課程表（Timetable）實(shí)體，屬性包括：課程名稱、教室（外鍵關(guān)聯(lián)Room實(shí)體）、日期、第幾節(jié)課。

三 系統(tǒng)開發(fā)中用到的關(guān)鍵技術(shù)

超級管理員的用例為：管理教室管理員、教學(xué)樓、教學(xué)樓的留言。教室管理員的用例為：管理教室、教室的留言、教室的若干照片。教室管理員剛剛新建了一個教室的效果如圖14。因?yàn)槭莿倓倓?chuàng)建的教室所以顯示為“暫無圖片”。在圖14中單擊“暫無圖片”可以進(jìn)入該教室，在該教室的頁面中單擊“上傳照片”，進(jìn)入一個頁面進(jìn)行照片上傳。成功上傳兩張照片之后如圖15，系統(tǒng)根據(jù)上傳的原圖，自動生成修改后的小的縮略圖，并分頁顯示出來。在圖 15中單擊任意縮略圖會打開一個頁面，顯示根據(jù)上傳的原圖自動生成的合適尺寸的大圖。

系統(tǒng)開發(fā)中用到的關(guān)鍵技術(shù)[5]：為每個教室上傳的圖片，系統(tǒng)會自動生成3個圖片：原圖、小圖和大圖。在上傳照片的AddPhotoAction中先通過struts框架得到FormFile類型的file，然后通過下面方法得到文件名fileName和文件擴(kuò)展名suffix。String fileName =file.getFileName();String suffix= fileName.substring(fileName.indexOf("."));然后調(diào)用上傳工具類UploadUtil進(jìn)行后續(xù)處理。

1 檢查圖片大小和類型是否合法：調(diào)用UploadUtil.checkImage（String suffix）檢查圖片后綴是否合法。調(diào)用UploadUtil.checkImageSize（FormFile file, int size）檢查圖片的大小是否超過指定的值size。返回值為false表示不合法，為true表示合法。如果不合法就在AddPhotoAction中調(diào)用return mapping.findForward（"wrongType"）進(jìn)行錯誤處理。

2 將文件上傳到服務(wù)器，并返回上傳后的可訪問相對地址:例如要將本地文件aa.jpg上傳后得到/upload/1337150156880.jpg就要調(diào)用String relativeAddress_originFile=releativeUploadUtil.upl oadFormFile（HttpSession session,FormFile accessoryFile,String rootRelativeDir）。參數(shù) rootRelative Dir為形如/upload/的相對路徑，參數(shù) accessoryFile為采用 struts框架得到的類型為 FormFile的aa.jpg。uploadFormFile方法返回上傳后的可訪問相對地址存放在relativeAddress_origin File中。

3 根據(jù)上傳的原圖的相對地址得到將要生成的小圖和大圖的相對地址:在AddPhotoAction中首先調(diào)用String relativeAddress_bigFile=UploadUtil.makeNewUrl（relativeAddress_originFile,"_big"）,根據(jù)原圖的相對地址得到大圖的相對地址 relativeAddress_bigFile。再調(diào)用 String relativeAddress_smallFile=UploadUtil. makeNewUrl（relativeAddress_originFile,"_small"），根據(jù)原圖的相對地址得到小圖的相對地址relativeAddress_smallFile。

4 根據(jù)上傳的原圖的絕對地址得到將要生成的小圖和大圖的絕對地址:在AddPhotoAction中首先根據(jù)原圖的相對地址 relativeAddress_originFile得到原圖的絕對地址：String absoluteAddress_originFile=session.getServletContext().getRealPath(relativeAddress_originFile)。再根據(jù)原圖的絕對地址得到大圖的相對地址 absoluteAddress_bigFile：String absoluteAddress_bigFile=UploadUtil.makeNewUrl(absoluteAddress_originFile,"_big")。同理，根據(jù)原圖的絕對地址得到小圖的絕對地址：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中調(diào)用的主要處理類為java.awt.Graphics、java.awt.Image、java.awt.image.Buffered Image。

6 調(diào)用業(yè)務(wù)邏輯保存數(shù)據(jù):將原圖相對地址、大圖相對地址、小圖相對地址存到教室實(shí)體的相應(yīng)的三個屬性 accessory_origin、accessory_big、accessory_small中。為了程序開發(fā)的方便將這三個地址以“｜”分隔冗余地存入accessoryAll屬性中。

圖14 教室管理員剛剛新建了一個教室圖

15 為教室成功上傳了兩張照片

四 結(jié)語

基于Spring+Struts+Hibernate的輕量級J2EE架構(gòu)能充分體現(xiàn)Struts的MVC設(shè)計(jì)模式，Spring的依賴注入和面向方面編程的思想，Hibernate數(shù)據(jù)持久化的中間件思想。系統(tǒng)中所有信息均引自數(shù)據(jù)庫，系統(tǒng)易于擴(kuò)充和易于實(shí)現(xiàn)數(shù)據(jù)的各種檢索?；谠摷夹g(shù)開發(fā)的教室管理系統(tǒng)，在北京大學(xué)校內(nèi)運(yùn)行良好，在北京大學(xué)的教務(wù)部排課、教師使用教室、教室管理員管理教室和學(xué)生找到自習(xí)教室等方面起到很好的輔助作用。

[1]楊公義.SSH架構(gòu)下基于數(shù)據(jù)庫的樹狀菜單的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識與技術(shù),2009,(25):7308-7311.

[2]楊公義.基于SSH的播客資源平臺的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代遠(yuǎn)程教育研究,2009,(1):66-68.

[3]楊公義,陳虎,陳飛.一個多功能可擴(kuò)展的html在線編輯器的技術(shù)架構(gòu)[J].地理與地理信息科學(xué),2009,(25):4-6

[4]楊公義,張亦工.基于Red5的網(wǎng)絡(luò)教育電視臺的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代教育技術(shù),2012,(8):109-112.

[5]陳飛,楊公義,李志剛,等.基于 Blackboard系統(tǒng)的“北大教學(xué)網(wǎng)”擴(kuò)展開發(fā)研究[J].北京大學(xué)教育評論,2013,(12):201-211.