基于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