课程网站建设设计毕业设计论文.doc

合肥学院电子信息与电气工程系
毕业设计（论文）
题 目：课程网站建设
系 部：新闻传播系
专 业：数字出版
学 号：
姓 名：
指导教师：
职 称：讲师
二〇一四年五月三日

课程网站建设
内容摘要：
该系统是一个《计算机基础》课程网站建设系统，系统由前台界面、后台界面和数据库三部分构成。普通用户通过前台界面浏览需要的信息，管理员通过后台及数据库来操作管理整个系统。系统要实现的主要功能有：网站首页、课程介绍、教学视频、教学资源、软件下载、交流区、后台管理等模块。系统采用MyEclipse作为开发工具，以MySQL作为后台数据库的开发平台。
论文先对课程网站建设系统进行需求分析和可行性分析，其次设计系统的整体结构，包括数据库的设计和系统各功能的设计，再次是实现系统具体的功能，最后对系统进行测试并总结。

关键词：网站建设 JSP MyEclipse
目录
第1章 绪论 1
1.1 开发背景 1
1.2 开发工具与相关技术的简介 1
第2章 需求分析与可行性分析 2
2.1 需求分析 2
2.2 技术可行性 3
第3章 系统设计 3
3.1 系统结构图 3
3.2 系统功能设计 3
3.3 数据库设计 6
第4章 详细设计与实现 10
4.1 数据库设计与实现 10
4.2 前台后台设计与实现 14
第5章 运行结果与测试分析 16
5.1 运行结果 16
5.2 测试分析 17
第6章 结束语 18
致谢 20
参考文献 21

合肥学院电子信息与电气工程系毕业设计（论文）
第1章 绪论
1.1 开发背景
课程网站建设是高等学校教学改革工程与教学质量的重要组成部分。课程网站具有一流教师队伍、一流教学方法、一流教学内容、一流教材、一流教学管理等特点。国家为了造就一大批专业人才和创新人才，深化教育改革，推进教育创新，现代化信息技术与教学相结合，提高教学质量，共享教学资源，提升我国高等教育的综合实力和国际竞争能力。通过建立各门类、专业的校、省、国家三级课程网站体系来培养满足国家和地方发展需要的高素质人才。
课程网站的建设可以促进老师和学生之间的交流，多角度、全方位地沟通。让老师及时了解当前的教学进度和教学任务，让学生掌握自己的学习进度。课程网站的教学模式更加的人性化，它可以较好地实现因材施教的方针，让学生通过人机交互的方式参与到教学任务当中。学生可以通过教学软件的导航策略学习，可以更加全面了解学习中的不足并予以改正。
1.2 开发工具与相关技术的简介
《计算机基础》课程网站建设系统采用JSP设计[1]，以MyEclipse作为前台设计开发工具，以MySQL作为后台数据库开发平台，以SQLyog作为数据库可视化工具，以Tomcat作为服务器。
JSP是一种动态技术标准[2]。将JSP标签和Java程序片段加入HTML网页中，便构成了JSP网页。程序片段可以重新定向网页和操纵数据库，实现动态网站所需要的功能[3]。JSP页面由HTML代码和嵌入其中的Java代码所组成。服务器在页面被客户端请求以后对这些Java代码进行处理，然后将生成的HTML页面返回给客户端的浏览器[4]。
MyEclipse是一个十分优秀的用于开发Java、J2EE、Eclipse 插件集合，MyEclipse的功能非常强大，支持也十分广泛，尤其是对各种开源产品的支持十分不错。MyEclipse结构上的这种模块化，可以在不影响其他模块的情况下，对任一模块进行升级和扩展[5]。
SQLyog是一个易于使用的、快速而简洁的图形化管理MYSQL数据库的工具，它能够在任何地点有效地管理你的数据库。
MySQL是一个开放源码的小型关联式数据库管理系统，被广泛应用在Internet上的中小型网站中。具有体积小、速度快、总体拥有成本低的优点[6]。
Tomcat服务器是免费的、代码开源的Web 应用服务器，属于轻量级应用服务器，被普遍使用在并发访问用户不是很多的场合以及中小型系统中，是开发和调试JSP程序员的首选。Tomcat部分是Apache服务器的扩展，但它是独立运行的，所以当你运行tomcat 时，它实际上作为一个与Apache独立的进程单独运行的[7]。
在系统搭建过程中，还需要用到一些辅助的技术，如下：
体、布局、背景、颜色等效果实现更加精确的控制，只需简单修改相应代码，同一页面的不同部分就可以改变[9]。
CSS使得网页的设计与维护更加高效，这主要表现在以下三个方面[10]。
（1）集中管理样式信息
（2）设定共享样式
（3）将样式分类使用
JS即javascript，是一种原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言。同时也是一种广泛应用于客户端的脚本开发语言，给HTML网页添加动态功能，比如响应用户的各种操作[11]。

第2章 需求分析与可行性分析
2.1 需求分析
随着网络的发展，传统教学方式的弊端开始显露，包括资源的不均衡和教学质量低等弊端。国家也开始进行高校教育教学改革。为了提高教学资源的利用率和提升教学质量，课程网站建设的需求开始显现。《计算机基础》课程网站建设系统可以满足老师和学生之间的多角度、多渠道沟通。
2.1.1前台界面功能
结合课程网站建设的实际情况，再从学生的需求角度出发，得出前台界面需要实现的主要功能有：
1.课程的介绍；
2.教学资源的介绍；
3.教学视频的展示；
4.新用户注册、登录；
5.管理员的登录；
6.交流区发帖回帖；
2.1.2后台界面功能
结合课程网站建设的实际情况，再从管理员的需求角度出发，得出后台界面需要实现的主要功能有：
1.课程介绍内容修改
2.教学资源内容更新；
3.教学视频的上传；
4.交流区的发帖、回帖、删帖；
2.2 技术可行性
系统采用JSP设计，以MyEclipse作为前台设计开发工具[12]，以MySQL作为后台数据库开发平台，以SQLyog作为数据库可视化工具，以Tomcat作为服务器[13]。通过Java语言的面向对象和JSP的简单应用，搭配精简强大的MySQL，可以让系统准确快速和安全地运行。通过tomcat打包并发布到服务器上，用户就可以通过计算机访问到该系统[14]。

第3章 系统设计
3.1 系统结构图
根据需求分析，确定了系统的结构主要由前台界面、后台界面和数据库构成。课程网站建设的系统结构图如图3-1所示。
3.2 系统功能设计
3.2.1前台设计
1.首页
用户进入前台看到的界面即首页。首页有一个导航栏，通过点击不同的功能图标转到相应功能的界面进行操作。首页有一些功能模块的快速链接，让用户更加方便找到自己所需的信息。为了界面美观、内容充实，前台添加一个学院简介和公告。
2.课程介绍
课程介绍界面主要有以下四项内容，分别为：课程描述、教学特色、实践教学、培养目标。管理员可以通过后台对课程介绍中的内容进行添加，修改，删除等。只要重新刷新界面，便可以看到更改过后的内容。学生可以通过需要进行查看，对课程做一些了解。
3.教学视频
管理员通过后台上传教学视频。学生可以在前台点击列表中的视频在线观看，注意选择一些含有播放视频插件的浏览器。

4.教学资源
教学资源包括五个内容，分别为：试验申请书、教学大纲、教学日历、教学资源、实验解析。这部分主要是方便学生通过教学日历更加了解教学的进度，学生可以自行下载一些实验相关资源，从而规划自己的学习进度。
5.软件下载
管理员通过后台上传一些关于计算机方面的软件，可以供学生下载。
6.交流区
交流区，即论坛。它包含网站首页、交流区首页、注册、登录四个模块。要想在交流区查看贴子或者发帖，必须要有会员账号。会员账号可以自行注册。交流区是老师和学生沟通的桥梁，在系统中也很重要。老师可以通过论坛的形式发布问题与学生进行学习的交流，学生也可以提出学习的困惑和对教学方法等的建议。这样更有利于教学进度的加快以及教学质量的提升。
3.2.2后台设计
后台的功能主要与前台的功能所对应，是对前台功能的一些管理，例如：添加、修改、删除等。后台包括课程介绍、教学视频、教学资源、软件下载、简介与公告、会员管理。管理员可以通过后台的操作管理整个系统。
3.3 数据库设计
3.3.1实体分析
由于《计算机基础》课程网站建设系统是一个系统框架，再根据需求分析和可行性分析，可以确定系统包含的实体及其属性如下[15]。
1.文章（article）
属性：序号、标题、内容、作者、更新时间、分类编号；
2.分类（category）
属性：序号、名字、描述、父节点序号、叶子节点、菜单级；
3.页尾（foot）
属性：序号、内容；
4.关于校园（gyxy）
属性：序号、图片、内容；
5.论坛回复（reply）
属性：回复序号、主题序号、回复内容、用户序号、回复时间；
6.软件上传（soft）
属性：序号、软件名、软件描述、更改时间、文件名；
7.实验解析（syjx）
属性：序号、标题、描述、更改时间；
8.论坛主题（topic）
属性：主题序号、主题标题、主题内容、用户序号、主题发表时间、锁定、浏览数；
9.用户（user）
属性：用户序号、用户类型、用户名、密码、邮箱、年龄、性别、日期、头像、分数；
10.视频（video）
属性：序号、视频名称、视频描述、更改时间、文件名；
11.校园公告（xygg）
属性：序号、内容。
3.3.2数据库表结构
数据库中的数据表紧密连接，共有十一张表，分别为：article（文章）、category(分类)、foot（页尾）、gyxy（关于校园）、reply（论坛回复）、soft（软件上传）、syjx（实验解析）、topic（论坛主题）、user（用户）、video（视频）、xygg（校园公告）。它们构成了整个数据库的骨架，表3-1到表3-11是系统中所用到的表，其功能和表格设置如下。
Article（文章）表主要存放各功能模块中文章的序号、标题、内容、作者、更新时间和分类编号。
表3-1 article文章
字段名称
数据类型及大小
说明
id
int(11)
序号（主键）
name
varchar(255)
名字（允许空）
descr
varchar(255)
描述（允许空）
pid
int(11)
父节点序号（允许空）
isleaf
int(11)
叶子节点（允许空）
grade
int(11)
菜单级（允许空）

Category（分类）表主要存放各功能模块下的小模块，包括序号、名字、描述、父节点序号、叶子节点和菜单级。
表3-2 category分类
字段名称
数据类型及大小
说明
id
int(11)
序号（主键）
image
varchar(255)
图片（允许空）
cont
text
内容（允许空）

Gyxy（关于校园）表存放学校简介，包括序号、图片和内容。
表3-3 gyxy关于校园
字段名称
数据类型及大小
说明
replyId
int(11)
回复序号（主键）
topicId
int(20)
主题序号（不为空）
replyContent
text
回复内容（不为空）
userId
int(11)
用户序号（不为空）
replyTime
timestamp
回复时间（不为空）

Reply（回复）表存放交流区的回帖信息，包括回复序号、主题序号、回复内容、用户序号和回复时间。
表3-4 reply回复
字段名称
数据类型及大小
说明
replyId
int(11)
回复序号（主键）
topicId
int(20)
主题序号（不为空）
replyContent
text
回复内容（不为空）
userId
int(11)
用户序号（不为空）
replyTime
timestamp
回复时间（不为空）

Soft（软件）表存放管理员上传的软件信息，包括序号、软件名、软件描述、更改时间和文件名
表3-5 soft软件
字段名称
数据类型及大小
说明
id
int(11)
序号（主键）
softname
varchar(40)
软件名（允许空）
softdescr
text
软件描述（允许空）
rdate
datetime
更改时间（允许空）
filename
varchar(200)
文件名（允许空）

Syjx（实验解析）表存放管理员上传的一些实验的介绍，包括序号、标题、描述和更改时间。
表3-6 syjx实验解析
字段名称
数据类型及大小
说明
id
int(11)
序号（主键）
title
varchar(40)

标题（允许空）
descr
text
描述（允许空）
rdate
datetime
更改时间（允许空）

Topic（主题）表存放交流区贴子的主题，包括主题序号、主题标题、主题内容、用户序号、主题发表时间、锁定和浏览数。
表3-7 topic主题
字段名称
数据类型及大小
说明
topicId
int(11)
主题序号（主键）
topicTitle
varchar(100)
主题标题（不为空）
topicContent
text
主题内容（不为空）
userId
int(11)
用户序号（不为空）
topicTime
timestamp
主题发表时间（不为空）
locked
bit(1)
锁定（不为空）
view
int(100)
浏览数（不为空）

Xygg（校园公告）表存放学校的公告信息，包括序号和内容。
表3-8 xygg校园公告
字段名称
数据类型及大小
说明
id
int(11)
序号（主键）
cont
text
内容（允许空）

Video（视频）表存放管理员上传的视频信息，包括序号、视频名称、视频描述、更改时间和文件名。
表3-9 viedo视频
字段名称
数据类型及大小
说明
id
int(11)
序号（主键）
videoname
varchar(40)
视频名称（允许空）
videodescr
text
视频描述（允许空）
radte
datatime
更改时间（允许空）
filename
Varchar(200)
文件名（允许空）

User（用户）表存放普通用户和管理员的信息，包括用户序号、用户类型、用户名、密码、邮箱、年龄、性别、日期、头像和分数。
表3-10 user用户
字段名称
数据类型及大小
说明
userId
int(11)
用户序号（主键）
userType
char(1)
用户类型（不为空）
username
varchar(40)
用户名（允许空）
password

varchar(16)
密码（允许空）
email
varchar(40)
邮箱（允许空）
age
int(11)
年龄（不为空）
sex
tinyint(3)
性别（不为空）
regdate
datetime
日期（不为空）
picture
varchar(50)
头像（允许空）
score
int(11)
分数（不为空）

Foot（页尾）表存放一些学校信息，包括序号和内容。
表3-11 foot页尾
字段名称
数据类型及大小
说明
id
int(11)
序号（主键）
txt
varchar(400)
内容（允许空）

第4章 详细设计与实现
4.1 数据库设计与实现
1.建立article表的SQL语句如下：
CREATE TABLE `article` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) DEFAULT NULL,
`cont` text,
`writer` varchar(255) DEFAULT NULL,
`adate` datetime DEFAULT NULL,
`categoryid` int(11) DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `article` (`categoryid`)
) ENGINE=MyISAM AUTO_INCREMENT=25 DEFAULT CHARSET=gbk

2.建立category表的SQL语句如下：
CREATE TABLE `category` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`descr` varchar(255) DEFAULT NULL,
`pid` int(11) DEFAULT NULL,
`isleaf` int(11) DEFAULT NULL,
`grade` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=75 DEFAULT CHARSET=gbk

3.建立foot表的SQL语句如下：
CREATE TABLE `foot` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`txt` varchar(400) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTOINCREMENT=2 DEFAULT CHARSET=gbk

4.建立gyxy表的SQL语句如下：
CREATE TABLE `gyxy` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`image` varchar(255) DEFAULT NULL,
`cont` text,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=gbk

5.建立reply表的SQL语句如下：
CREATE TABLE `reply` (
`replyId` int(11) NOT NULL AUTO_INCREMENT,
`topicId` int(20) NOT NULL DEFAULT '0',
`replyContent` text NOT NULL,
`userId` int(11) NOT NULL DEFAULT '0',
`replyTime` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
PRIMARY KEY (`replyId`)
) ENGINE=MyISAM AUTO_INCREMENT=22 DEFAULT CHARSET=utf8

6.建立soft表的SQL语句如下：
CREATE TABLE `soft` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`softname` varchar(40) DEFAULT NULL,
`softdescr` text,
`rdate` datetime DEFAULT NULL,
`filename` varchar(200) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=38 DEFAULT CHARSET=gbk

7.建立syjx表的SQL语句如下：
CREATE TABLE `syjx` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(40) DEFAULT NULL,
`descr` text,
`rdate` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=gbk

8.建立topic表的SQL语句如下：
CREATE TABLE `topic` (
`topicId` int(11) NOT NULL AUTO_INCREMENT,
`topicTitle` varchar(100) NOT NULL DEFAULT '',
`TopicContent` text NOT NULL,
`userId` int(11) NOT NULL DEFAULT '0',
`topicTime` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
`locked` bit(1) NOT NULL DEFAULT b'1',
`view` int(100) NOT NULL DEFAULT '0',
PRIMARY KEY (`topicId`)
) ENGINE=MyISAM AUTO_INCREMENT=11 DEFAULT CHARSET=utf8

9.建立xygg表的SQL语句如下：
CREATE TABLE `xygg` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`cont` text,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=gbk

10.建立user表的SQL语句如下：
CREATE TABLE `user` (
`userId` int(11) NOT NULL AUTO_INCREMENT,
`userType` char(1) NOT NULL DEFAULT '0',
`username` varchar(40) DEFAULT NULL,
`password` varchar(16) DEFAULT NULL,
`email` varchar(40) DEFAULT NULL,
`age` int(11) NOT NULL DEFAULT '0',
`sex` tinyint(3) NOT NULL DEFAULT '0',
`regdate` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
`picture` varchar(50) DEFAULT NULL,
`score` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`userId`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=gbk

11.建立video表的SQL语句如下：
CREATE TABLE `video` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`videoname` varchar(40) DEFAULT NULL,
`videodescr` text,
`rdate` datetime DEFAULT NULL,
`filename` varchar(200) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=38 DEFAULT CHARSET=gbk
4.2 前台后台设计与实现
4.2.1 前台界面
前台界面框架采用了DIV、CSS、JS技术，前台界面框架如下：
1．index.jsp：前台主界面；
2．header.jsp：主界面顶部的校徽框架，功能就是最上面的合肥师范学院校徽，具体代码为：源下的index.jsp文件，在新窗口中打开这个链接。表示：图片来源于style目录下的fgs2011_08.jpg。"0" class="left-table03">
"left-font03" onClick="list('7');" >课程介绍"action" value=" login"/>
pe="submit" value="登录" img src="images/dl.gif" width="81" height="22" border="0" usemap="#Map">验申请书、教学大纲、教学日历、教学资源、实验解析）、合肥师范简介和公告管理（合肥师范简介更新、公告管理）、会员管理、软件管理。后台主界面如下图所示。

5.2 测试分析
5.2.1 功能测试分析
本系统的界面主要是由前台界面、后台界面以及一个简易数据库构成，实现首页、课程介绍、上传文章和视频、师生交流学习、后台管理整个系统等功能。界面主要由JSP语言编写，数据库使用了MySQL作为后台数据库开发平台。以下是设计和实现过程遇到的问题及解决方法。
问题描述：在做功能测试时发现部分JSP页面显示乱码。
解决方法：查找是否是语法错误或者是逻辑错误，排除这种可能性后，便去书本中查找乱码问题，发现将编码设为“UTF-8”，页面便可以正常显示。
问题描述：不能上传文章或者视频。
解决方法：在网上查找了一些视频教程，了解了一些文件上传组件。之后通过书本上推荐的smartupload解决了上传问题。
问题描述：开始搭建界面时，发现界面中的小框架及一些组件不能安置在合适的位置。总是会显得很杂乱。
解决方法：在图书馆查找了网络页面的排版书籍，了解DIV+CSS布局入门的相关知识，之后将所学知识应用到JSP页面中，最终使整个页面显得整齐美观。
5.2.2 集成测试分析
经过功能测试后，再进行集成测试。测试系统的交互能力、反应时间、页面转换时间和数据处理能力。
经过测试，发现该系统的交互能力完全满足教师网上教学的要求。良好的界面设计，可以引导用户自己完成相应的操作，起到向导的作用。界面看上去很规范，类似windows界面。布局合理，有效地利用了页面控件。各个功能板块设计合理，可以使用户轻松操作。
系统反应时间迅速，从一个页面跳转到另一个页面毫无滞留感。数据处理能力很强，上传一个多G的视频只需要几秒钟。
综合看来，系统较好地完成了设计要求，不过也有一丝不足，数据库中的信息冗余。

第6章 结束语
本论文阐述了开发课程网站建设的主要步骤。首先介绍开发背景，然后对课程网站建设系统进行需求分析和可行性分析，通过分析实际需求确定系统开发的必要性。其次设计系统的整体结构，包括数据库的设计和系统各功能的设计。再次是实现系统具体的功能。最后对系统进行测试并总结。
《计算机基础》课程网站建设系统旨在老师和学生之间能多角度、多渠道地沟通。老师及时了解教学当前的状态，有序并高效地完成教学任务。学生可以选择自己感兴趣的方式和内容板块进行学习，掌握自己的学习进度。同时还可以根据自己的理解在交流区与教师交流，提出问题和建议。最终大大改善了教学效果，达到了一定的教学目的。
结合课程网站建设的实际情况，系统主要实现功能有：课程介绍管理（包括课程描述、课程教学特色、实践教学、培养目标的增加、修改与删除）、教学视频管理（视频的上传与下载）、教学资源管理（包括实验申请书、教学大纲、教学日历、教学资源的增加、修改与删除）、简介与公告管理（简介与公告的增加、修改与删除）、会员管理（包括会员添加、删除）、软件管理（包括软件添加、删除）、交流区（包括返回首页、交流区首页、会员注册、登录）等。
本系统设计了一个交流区，方便学生与老师、学生与学生之间的学习交流。老师可以通过交流区将一些问题甚至课后习题以帖子的形式发布，学生可以回帖回答问题；学生也可以发布自己在学习过程中遇到的问题，让其他同学来解答回复。该网站系统可以作为任何课程网站建设的模板，只需要将不同的知识填充到该系统中去即可发挥该系统的各项功能。

21

致谢
在毕业论文的最后，我要向毕业设计中给予我帮助和支持的老师与同学表示最衷心的感谢。
本文是在指导老师张林的精心指导下完成的，从论文的开题报告到最后的论文撰写都得到了王凡老师的帮助。期间，老师提出了许多具有建设性的建议。例如，利用假期熟读JSP相关书籍，掌握好基本的语法。在网上找到相似的网站系统，研究它的布局及编写。从而让我有计划地完成毕业设计。同时还要感谢大学期间我所有的带课老师，没有他们在课堂上认真的讲解，课下细致的辅导，我也不可能完成这次的毕业设计，在此特向他们表示最诚挚的谢意！
在论文的写作过程和系统的实现过程中，我也得到了许多同学的帮助。在此表示谢意。设计期间参考了大量的文献资料和网络信息，尤其是W3School，