基于B/S的《C程序設計》網絡教學系統①

葉冬芬,楊明霞,方智敏(衢州學院 電氣與信息工程學院,衢州 324000)

?

基于B/S的《C程序設計》網絡教學系統①

葉冬芬,楊明霞,方智敏
(衢州學院 電氣與信息工程學院,衢州 324000)

摘 要:為促進《C程序設計》課程的課堂教學效果,更好地實現異地、同時、實時、互動教學和學習,開發了基于B/S的《C程序設計》網絡教學系統.在分析了該系統的需求、特點及結構的基礎上,闡述了該系統開發所需的相關技術及其前、后臺功能,給出了系統開發建設過程中素材處理、頁面外觀設置、數據庫數據存取、系統權限設置、數據導出、智能題庫實現、網站測試及發布等功能的實現方法.該系統采用Visual Studio 2005為開發環境,SQL Server為后臺數據庫,具有基礎架構完善、后期維護方便、可擴展性強等特點,同樣適用于其他網絡課程的開發.

關鍵詞:ASP.NET; 教學系統; B/S模式; C程序設計

網絡教學是借助于網絡平臺開展的一種教學活動,而網絡教學的重要輔助形式之一是教學網站系統,它能實現與課堂教學的互補,為學生創造開放式的自學環境,滿足不同層次學生的學習需要,而且創造了師生間、同學間相互交流的環境和平臺.《C程序設計》是高校本科教學中的一門重要公共基礎課,在高校各專業的本科教學計劃中占有重要地位和作用,所以任課教師以及學生都對現有的教學方法以及管理方式提出了更高的要求[1],除了常規的課堂教學外,還希望能有其它輔助手段,如開設網絡公開課、引進優質的網絡數字化教學資源、實現智能化測試、作業自動化管理等.

為此,本文設計并實現了一個基于B/S模式的《C程序設計》網絡教學系統,該系統已正式上線,面向校內學生以及因特網用戶開放應用.

1　系統功能需求分析

《C程序設計》課程網絡教學系統的開發與實施,主要為了實現以下幾個方面的目標:

① 系統需要實現《C程序設計》課程常規資源的發布、修改、刪除、審核等操作.

② 通過靈活的權限設置,來實現不同級別的人員擁有不同的數據查閱、編輯權限.

③ 系統用戶分為四類: 游客、學生、教師以及系統管理員.游客只能瀏覽Web頁面上未進行權限設置的信息.學生賬戶登錄后,除了瀏覽頁面前臺所有的信息外,還擁有進行上傳作業、發表留言、等權限.教師則還擁有發布作業,下載學生作業、給學生作業評價等權限.系統管理員擁有最高權限,如發布和修改系統信息、審核用戶等.

④ 系統后臺能夠記錄用戶賬號登陸的時間、次數、IP地址、訪問來路、所使用的瀏覽器等等信息.

⑤ 對學生賬號賦予網頁中部分欄目的上傳資料權限,經教師賬號審核后,這些資料可以被發布在網站上.

2　系統設計

2.1系統架構設計

本文采用目前使用頻率較高的B/S體系結構,該模式下,客戶端只需要安裝瀏覽器即可.B/S體系結構系統開發的投入與用戶的數量無關,部署代價較小,尤其適合開發客戶較多,使用頻繁的信息系統[2].系統的開發環境是Visual Studio2005,它是目前流行的Windows平臺應用程序的集成化開發環境,使用它可以創建ASP.NET Web應用程序.數據庫采用SQL Server 2005 ,素材處理采用Flash和Photoshop ,其網站架構采用了在軟件體系架構設計中最常見的一種結構----分層式結構,如圖1所示,這三層架構是完成系統前后臺功能的基礎.

2.2系統開發技術

① ASP.NET

ASP.NET是一種建立動態Web應用程序的技術,它是.NET框架的一部分,ASP.NET通過其服務端控件,內建可重用的組件和自定義組件來快速建立Web窗體,使代碼簡單化.ASP.NET應用程序采用頁面脫離代碼技術,前臺頁面保存成.aspx文件,后臺代碼保存到.cs文件(編程語言采用C#),當網站發布后,編譯程序將代碼編譯為dll文件.所以當ASP.NET 在服務器上運行時,可以直接運行編譯好的dll文件,并且它采用緩存機制,從而提高了運行性能.相對于其它一些編程語言,ASP.NET具有靈活性、性能優、生產效率高、安全性高、完整性強以及面向對象等特性,是目前主流的網絡編程技術之一.

②SQL Server 2005[3]

SQL Server 2005 集成了.NET Framework框架,它包含了許多組件: 數據庫引擎、集成服務、分析服務、報表服務,每個組件提供特定的服務.數據庫引擎引入了新的可編程增強功能、新XML功能和新數據類型.集成服務引入了新的可擴展體系結構和新設計器.分析服務引入了新管理工具、集成化開發環境及.NET Framework的集成,一些新功能擴展了分析服務的數據挖掘和分析功能.報表服務支持報表創作、分發、管理和最終用戶訪問,它是基于服務器的新型報表平臺.

③ CMS內容管理

CMS是Content Management System的縮寫,意為“內容管理系統”.CMS具有許多基于模板的優秀設計,可以加快網站開發的速度和減少開發的成本.內容管理系統比較適合零技術基礎人群用一種比較簡單的方式快速建立屬于自己的網站.當然,對于廣大前端設計師、技術人員則可以在此基礎上進行二次開發.本文設計完成的《C程序設計》網絡教學系統也可以看成是一個內容管理系統,用戶稍加修改,同樣適用于其他課程的網絡教學系統,而不僅僅局限于C程序設計課程.

④ JavaScript

JavaScript是一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言,同時也是一種廣泛用于客戶端Web開發的腳本語言,常用來給HTML網頁添加動態功能,比如響應用戶的各種操作.

圖1　三層架構

Jquery[4]是繼prototype之后的又一個優秀的Javascript框架.它是輕量級的js庫 ,兼容CSS3,還兼容各種瀏覽器 (I Opera 9.0+、E 6.0+、FF 1.5+、 Safari2.0+).jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果,并且方便地為網站提供AJAX交互.jQuery的一個比較大的優勢是其文檔說明較全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇.jQuery能使用戶的html頁保持代碼和html內容分離,不用再在html里面插入js來調用命令了,只需定義id即可.在本次系統設計中,在頁面呈現部分,較多地使用了這個庫.

⑤ DIV+CSS布局[5]

DIV+CSS 是網頁布局方法之一,這種網頁布局方法有別于傳統的HTML網頁設計語言中的表格定位方式,真正地達到了W3C內容與表現相分離.用該方式布局,將大部分頁面代碼寫在了CSS當中,使得頁面體積容量變得更小,從而使頁面載入更快、 降低流量費用、修改設計時更有效率、更好地被搜索引擎收錄、對瀏覽者和瀏覽器更具親和力等優勢.當然,也存在一些問題,如對于CSS網站設計的瀏覽器兼容性問題比較突出.所以需要后期的測試操作.

⑥ Flash和Photoshop

Flash是一款非常流行的平面動畫制作軟件,當用戶制作完成一個.fla源文件之后,通常把源文件導出或發布為.swf格式文件,在導出的同時會壓縮、優化動畫元素,減小存儲容量,其具有“流”媒體的特點,可邊下載邊觀看.另外,Flash動畫主要由矢量圖形組成,縮放不會失真,所以Flash動畫被廣泛應用于網頁設計領域中,用動畫的方式形象地展示網站主題.

Photoshop是網頁制作過程中一個重要的圖像處理軟件,利用它可以方便地處理網站中圖片素材,如對于網站中新聞圖片大小和分辨率的設置、網頁背景圖片的設計、圖片的校色調色等等處理.在本次系統設計開發中,首先在Photoshop中設計出部分頁面的布局及美工效果圖供開發小組成員討論決定.

2.3系統功能模塊劃分

從B/S架構的角度出發,將系統的頁面分為前臺信息顯示采集和后臺數據處理兩大部分.前臺功能如圖2所示.

① 網站首頁: 提供了一些最常用的功能: 學生登陸、本站簡介、通知公告、學習頻道、學生獲獎、專題文章、軟件下載,另外還設置了一些輔助功能: 來訪用戶統計、在線幫助、天氣預報、友情鏈接、分享到各大網站.

② 課程導學: 包括課程簡介、教學大綱、授課計劃、教學方法、學習激勵榜樣.學習激勵榜樣中提供了IT屆的一些成功人士的事跡介紹,可以起到激勵學生積極向上的作用.

圖2　系統前臺功能圖

③ 在線課堂: 包括視頻教程、文字教程、入門示例程序、授課PPT、智能題庫、習題庫、通知公告.視頻教程為教師課堂實錄視頻,經過后期剪輯處理,一個視頻控制在10-15分鐘之內,為一個完整的知識點講解.上述教程中均提供了清晰地章節導航,方便學生根據自己的需求進行自主選擇學習,學生可以直接在Web頁面上對所學課程知識點進行自我測驗、練習.

④ 實驗室: 包括在線編譯、學生作品、實驗指導書、函數參考手冊、上機調試程序、常用軟件下載.在線編譯中提供了一個“C語言在線編譯器”,方便學生在學習時可以直接調試.上機調試程序中提供了一些經典的C程序源碼,并附帶注釋語句,它們可以直接被拷貝至編譯器中進行調試運行.

⑤ 網絡資源: 包括電子書 、PPT 、試題、視頻網絡資源.這些資源均是教師在大量的網絡資源中篩選出來的優質資源,它們或者是出自名校名師之手,或者是在網絡上點擊量較高的.當然,在使用的時候,均在顯要位置聲明了資料來源或者原作者名字.

⑥ 學科競賽: 包括競賽通知 、競賽輔導 、競賽獲獎.競賽輔導這個欄目設置了權限,只有報名參加競賽的學生賬戶才可以登錄查看里面的數據內容.

⑦ 等級考試: 包括上機模擬軟件 、試題測試 、考試大綱.該欄目中,提供了計算機等級考試二級C考試歷年的相關資料.

⑧ 互動教學: 包括常見問題 、有問必答、專題文章.根據教師的多年教學經驗,將學生學習過程中經常會出現的一些問題做了詳細的梳理,形成了常見問題欄目.另外,還開辟了有問必答欄目,如果是注冊的學生,則可以進入他自己的賬號查看教師留言回答,如果是游客的提問,那么教師的回答將是公開的,一般的用戶都可以查看到.

⑨ 學生中心: 包括注冊登錄、我的文章 、我的留言、個人信息修改.學生注冊賬號后,教師進行審核.在學生中心,學生可以看到自己的提交的作業以及教師的評語和評分,學生還可以查看自己上傳的網站資源是否已經通過教師的審核,被發布到網站中.根據學生的作業評分、上傳的網站資源數量、登錄的次數等信息,學生可以得到一個用戶星級評分,該分直接按比例會計入該學生的課程期末總評分數.

⑩ 網站地圖: 當用戶訪問網站時,通過網站地圖,他們可以輕松找到所需要的內容.當搜索引擎蜘蛛爬行網站時,也可以快速訪問整個站點.

系統后臺功能如圖3所示.

圖3　系統后臺功能圖

① 信息設置: 包括欄目管理、短信接口、流量統計、數據庫操作、基本信息設置.欄目管理中用戶可以進行二次開發,設置網站導航欄各個模塊的顯示內容以及先后順序,還可以設置每個欄目的權限.流量統計中按照月份進行統計,每月還可以按照日來顯示日訪問量,其訪問明細中包括IP地址、訪問來路、時間、瀏覽器、系統等字段.數據庫操作提供了數據庫一鍵備份功能.基本信息設置中管理員可以選擇網站外觀風格樣式、網站關鍵字設置、網站圖片上傳設置等功能.

② 會員中心: 會員類型包括學生、教師、管理員.會員信息包含會員名、姓名、聯系電話、會員類型、注冊時間、最后登錄等字段.管理員可以在規定的時間段內開放或者關閉會員注冊功能.也可以設置會員具有的權限,如限定學生會員擁有文章發布權限、編輯器上傳權限.學生會員可以再按班級進行分類.管理員設定教師查看某班的權限,這樣教師賬戶進入后,直接看到自己所帶班級學生上傳的作業、留言信息.

③ 管理中心: 包括留言管理、作業管理、文章管理、學生管理.管理員賬號或者教師賬號進入后,可以對留言、作業、文章、學生等信息進行查看、顯示或者刪除操作.

3　《C程序設計》網絡教學系統的實現

3.1開發環境

系統的開發環境是Visual Studio2005,它是目前流行的Windows平臺應用程序的集成開發環境,使用它可以創建ASP.NET Web應用程序,編程語言采用C#.系統首頁如圖4所示.

圖4　系統首頁

3.2素材處理

系統中有大量的課程圖片、視頻、電子書、PPT、工具軟件等資源.合理地處理素材文件大小、文件格式、文件顯示方式對于系統的運行速度、合理使用主機空間、提高用戶的體驗度都有重要的意義.

系統中的圖片文件先采用Photoshop軟件處理成適合在Web上發布的格式以及文件大小,電子書、工具軟件等文件較大的資源則保存在百度網盤等存儲空間,然后在系統中提供超鏈接操作即可.

課程教學大綱、習題庫、實驗指導書等素材在網頁中以pdf或者swf格式顯示,方便用戶的在線瀏覽以及下載.課程PPT則采用PowerPoint to Flash將PPT文件轉為Flash格式文件,轉換的Flash用鼠標點擊就可以播放,并且可以通過選項設定在Flash上添加后退或前進的按鈕.

教學視頻使學生能夠在課后自主地進行二次學習課堂知識.所以教學視頻的網絡發布是一個很重要的環節.所以本系統中將教學視頻上傳到優酷網中,然后使用了優酷的“分享給好友”功能即可得到視頻的Flash地址,然后在系統中嵌入該Flash即可實現在系統中播放該教學視頻的功能.代碼如下:

系統中對于頁面的處理采用靜態頁面、動態更新的技術,配合緩存技術和負載平衡技術支持超大量的并行訪問.

3.3頁面外觀設置

為了方便網站后期的維護和更新,同時大大減少頁面設計工作量,本系統利用.net中提供的主題Theme定義某一類具有一致外觀和樣式的網頁,利用皮膚Skin精細地裝飾頁面中的各個控件,在CSS樣式定義文件中定義了頁面各個部分的背景、字體、鏈接設置等..如下面的CSS代碼設置了鼠標滑過頁面導航欄的效果.

3.4數據庫數據的存取

在Visual Studio中,封裝了一些數據源控件和數據訪問控件.這些數據源控件允許使用不同類型的數據源,如數據庫、XML文件或中間層業務對象.通過數據源控件可以連接到數據源,從而使得數據訪問控件可以綁定到數據源控件,進而綁定到數據源,通過使用這些功能強大的控件,就不再需要編寫ADO.NET數據訪問代碼,配上適當的sql語句,就可以實現數據庫中的數據在頁面前臺的顯示以及后臺的編輯、添加、刪除等操作.

3.5系統權限的設置

本系統中,要求某些頁面只允許特定注冊人群才能瀏覽和使用,當普通游客瀏覽這些頁面時,系統彈出一個警告框,提示用戶沒有登陸或者沒有權限 .如圖5所示.用戶在注冊時就被要求選擇注冊類型.

圖5　用戶注冊

管理員可以設置頁面上每一個欄目和章節的用戶權限,如圖6所示,設置了“競賽輔導”這個欄目的訪問權限是管理員組、學科競賽組、教師組成員.在ASP.NET中,使用ASP.NET 成員資格和角色管理器API即 Membership API 來編碼實現自定義的成員和角色管理.

3.6數據導出的實現

本系統中,教師可以直接在Web頁面中查看學生的作業是否提交.另外,還設置了將作業情況直接導出為Excel文件,方便教師的打印和瀏覽.該編程過程中,首先需要使用.net中的數據控件 GridView控件來顯示根據條件查詢到的數據,如沒有上交作業的學生名單.然后利用該數據控件與Office軟件的接口實現導出功能.核心代碼如下所示:

圖6　欄目權限設置圖

3.7智能題庫實現

智能題庫的設計思路如圖7所示,當鼠標點擊"顯示答案"字樣時,會顯示出對應的答案.顯示答案的方法引用了jquery庫,該庫可以由自己本地引用,另一種方法是引用google服務器上的的jquery庫文件.其引用代碼如下:

.引用的是jquery庫1.4.4版本

圖7　智能題庫

3.8網站測試及發布

測試[6]是軟件開發生命周期中的一個重要部分.測試的目的是盡可能發現并改正被測試系統的錯誤,提高系統的可靠性.Web測試可以采用手工方式,Visual Studio中提供了Web測試工具,通過它可以記錄站點中的導航路徑、訪問請求,將這些訪問請求綁定到數據庫的相關數據上,在相關頁面設置提取規則和請求驗證規則,使得Web測試可以自動化地進行.另外,利用Visual Studio中提供的負載測試模擬多個用戶訪問網站時,網站的各種運行性能.

網站發布可以利用互聯網上虛擬主機服務商所提供的免費空間,本系統從速度、穩定、安全、備案等方面綜合考慮,選用了某服務商提供的支持.net的云虛擬主機,然后進行備案以及域名和空間地址的解析綁定后,利用FTP傳輸軟件,如FlashFXP 將系統源碼上傳到該主機空間即可,如圖8所示,圖中的地址、用戶名、密碼均由服務商提供.最后用戶就可以通過域名正常訪問.

圖8　源碼上傳

4　結束語

《C程序設計》網絡教學系統已經正式上線一年多時間,除了自己學校學生訪問外,從后臺訪問明細中的IP參數以及訪問來路參數來看,其它用戶訪問量也與日俱增,有些是通過百度搜索查到該網站的,而有些用戶則是直接輸入網站登陸的.系統資源豐富,美工效果良好,交互性較強,用戶體驗度好.系統與一般教學系統的其中一個重要區別在于它是一個應用程序與業務流程的集成套件,可以輕松地進行二次開發,應用到其它課程中,其它課程制作者可以根據課程的實際情況,在后臺管理中設置各個欄目內容、選擇網站樣式模板,即可快速便捷地完成整個系統的建設.

參考文獻

1向艷.“C 程序設計”課程教學體系和模式探討.計算機教育,2010,(3):112–114.

2李媛媛,李榮梅,姚長永.遠程教學管理系統的研究與實現.計算機系統應用,2013,22(3):199–204.

3李丹,趙占坤,丁宏偉,等.SQL Server2005數據庫管理與開發實用教程.北京:機械工業出版社,2013.

4http://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/ 3137905.html.

5http://v.dxsbb.com/ruanjian/dreamweaver/67/#Introduce.

6陳義輝,沙繼東.企業級網站開發項目教程(ASP.NET)北京:中國人民大學出版社,2010.

Network Teaching System of “C Program Design” Based on B/S

YE Dong-Fen,YANG Ming-Xia,FANG Zhi-Min
(College of Electrical and Information Engineering,Quzhou University,Quzhou 324000,China)

Abstract:To promote the classroom teaching result of “C Program Design” and better realize the remote,simultaneous,real-time and interactive teaching and study,we have developed the “C Program Design” network teaching system based on B/S.On the basis of analyzing the demand,characteristics and structure of the system,firstly we analyze the needed technology and system models.Then to realize the system,we study the methods of material processing,user interface and database designing,system authorization setting and so on.Finally,realization of intelligent question bank,website testing and release are also presented.This system adopts Visual Studio 2005 as the development environment and SQL Server as the back stage database.The system is characterized by sound basic architecture,convenient later maintenance and strong expandability.The system is also applicable to the development of other network courses.

Key words:ASP.NET; teaching system; B/S; C program design

基金項目:①2013年高等學校訪問學者專業發展項目(FX2013196);2015年度浙江省教育技術研究規劃課題(JB048);衢州學院師資隊伍建設基金(XNZQN201310);2013年度浙江省高等教育教學改革項目(jg2013160)

收稿時間:2015-08-16;收到修改稿時間:2015-09-21