北京大學教室管理系統(tǒng)的設計與實現(xiàn)*

楊公義 張亦工

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

引言

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

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

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

圖1 首頁

圖2 教學樓主頁

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

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

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

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

圖3 教室主頁

圖4 教室檢索

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

圖6 通知公告

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

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

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

圖7 通知內容

圖8 咨詢求助

圖9 查看主題列表

圖10 主題瀏覽模式

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

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

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

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

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

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

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

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

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）。參數(shù) rootRelative Dir為形如/upload/的相對路徑，參數(shù) accessoryFile為采用 struts框架得到的類型為 FormFile的aa.jpg。uploadFormFile方法返回上傳后的可訪問相對地址存放在relativeAddress_origin File中。

3 根據(jù)上傳的原圖的相對地址得到將要生成的小圖和大圖的相對地址:在AddPhotoAction中首先調用String relativeAddress_bigFile=UploadUtil.makeNewUrl（relativeAddress_originFile,"_big"）,根據(jù)原圖的相對地址得到大圖的相對地址 relativeAddress_bigFile。再調用 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中調用的主要處理類為java.awt.Graphics、java.awt.Image、java.awt.image.Buffered Image。

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

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

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

四 結語

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

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

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

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

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

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