网络精品课程网站毕业论文.doc

摘摘 要要 现代信息技术的发展,使得基于 web 技术的网络教育平台成为现代教育技术改革 与发展的方向。 从精品课程网站的实用性出发,经过对网络上其他精品课程网的一番考察和分析,在 对信息需求的分析基础上,确立了网络精品课程网的具体实现功能。本系统基于 dreamweaver +myeclipse+ jsp+ javascript+ mysql,以 tomcat 为服务平台,实现信 息系统的构建。前台主要是信息的浏览阅读,信息资源下载功能等。管理员可在后台 对信息、文件和用户等进行管理，实现添加、删除、修改功能。 关键词： dreamweaver jsp mysql myeclipse 目 录 1 引言1 1.1 选题意义1 1.2 设计思想1 2 运行环境2 2.1 开发工具的选用及介绍2 2.2 数据库环境5 3 系统需求6 3.1 系统分析6 3.2 准备工作6 4 整体设计11 4.1 网站前台设计11 4.2 网站后台设计12 第五章 系统的实现16 5.1 首页实现16 5.2 在线测试实现18 5.3 内容显示页面实现19 5.4 后台登录页面实现20 5.5 后台管理实现.21 总 结26 致 谢27 参 考 文 献28 windows 安装与配置教学平台设计与开发 1 1 引言 1.1 选题意义 伴随着网络的出现,网页逐渐融入人们的生活。快速及时的信息浏览,五彩缤纷 的网上信息,使网络与人们的生活息息相关,于是世界上又出现了第三媒体 internet。互联网成为人们快速获取、发布和传递信息的重要渠道。它打破了地域 限制,真正使信息得以共享,改变了人们的工作和生活方式。制作网页是企业和个人 的宣传自己的重要手段,同时也是学习者获取学习信息的重要手段。尤其是在信息领 域,各种信息的发布分秒变换,人们对信息的需求有了更新,更高的要求,而网页由于 本身所具有的信息量大,传递快速,没有时空限制等特点恰好满足这种要求。所以网 页也逐渐成为一种新兴的信息发布资源。也正是由于网络实现网站的数据信息能够 进行实时交互,保证网站数据的实时性。 1.2 设计思想 随着 internet 的进一步发展,静态 web 站点的开发与维护变得越来越困难,一方 面信息的不断增加和变化,使站点维护人员不得不经常修改他们的网页,特别是基于 数据库驱动的 web 站点更是如此,随着 internet 上信息量的增多和交互性的加强使 html 显得越来越难以胜任。另一方面静态网页由于不能与浏览者进行有效交互,使 人们感到越来越乏味,而不愿意再一次地进入同一站点。所以开发动态网页或动态内 容成了越来越多的站点所追求目标。所谓动态内容是由每一个用户按照自己的需求 发出请求而特殊制作的 web 网页。它是目前应用最为广泛的网页制作技术，它实现 了客户端和服务器的交互。动态交互式网页提供了最新信息的需求和发布迫切的需 要及时性的功能,本系统就是一个能够在网上实现信息的网上多用户发布,多栏目管 理,实时的进行行为统计和记录的网上交互系统。 windows 安装与配置教学平台设计与开发 2 2 运行环境 2.1 开发工具的选用及介绍 2.1.1 jsp 简介 jsp 技术使用 java 编程语言编写类 xml 的 tags 和 scriptlets，来封装产 生动态网页的处理逻辑。网页还能通过tags 和 scriptlets 访问存在于服务端 的资源的应用逻辑。 jsp 将网页逻辑与网页 设计和显示分离，支持可重用的基于 组件的设计，使基于 web 的应用程序的开发变得迅速和容易。 web 服务器在遇到访问 jsp 网页的请求时，首先执行其中的程序段，然后将 执行结果连同 jsp 文件中的 html 代码一起返回给客户。插入的 java 程序段可 以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能。 jsp 与 java servlet 一样，是在服务器端执行的，通常返回该客户端的就 是一个 html 文本，因此客户端只要有浏览器就能浏览。 jsp 页面由 html 代码和嵌入其中的 java 代码所组成。服务器在页面被客户 端请求以后对这些 java 代码进行处理，然后将生成的 html 页面返回给客户端 的浏览器。java servlet 是 jsp 的技术基础，而且大型的 web 应用程序的开 发需要 java servlet 和 jsp 配合才能完成。 jsp 具备了 java 技术的简单易用 ，完全的面向对象，具有平台无关性且安全可靠，主要面向因特网的所有特点。 jsp 可用一种简单易懂的等式表示为：html+java=jsp。 2.1.2 tomcat60+jdk1.6 的安装 作为 web 应用程序，jsp 程序必须运行在服务器上，目前有多种服务器支持 jsp，经推荐系统使用 tomcat 作为服务器，该服务器开源且操作简单。安装过程如 下： 1.安装 jdk 这是进行 jsp 开发的重要一步，也是安装 jsp 引擎（tomcat、resin、weblogic 等）的前提，一般的 jsp 引擎是由 java 语言编写的。 本人使用的 jdk 版本是 1.6.0，平台是 windows，安装文件可到 sun 公司的网站 上下载 windows 安装与配置教学平台设计与开发 3 （/ecom/ecomactionservlet/downloadpage:com.su n.sunit.sdlc.content. downloadpageinfo;jsessionid=033be12afe722b242f5aade12a5114eb;jsession id=033be12afe722b242f5aade12a5114eb） 。 在 windows 平台上安装 jdk 比较简便，运行安装文件 jdk-6-nb-5_5-win.exe， 一直单击【next】按钮就完成了。 安装完成后，需要在系统的环境变量加入安装 jdk 的路径，例如：jdk 安装到 c:“ jdk1.6.0,那么在环境变量加入 java_home 变量，变量值为 c:“ jdk1.6.0。这 样 jdk 的安装就完成了。 2.安装 tomcat 这里使用的 tomcat 是 6.0 版本，平台为 windows，安装之前必须完成上述的 jdk 的安装。安装文件可以到 tomcat 网站上下载 （/download-60.cgi#6.0.16）注意下载版本为： windows service installer。下载后直接运行 apache-tomcat-6.0.16.exe，一直 单击“next“按钮就完成了。安装时，它会自动找到你的 jdk 安装路径。 运行 tomcat，打开“开始”“运行” ，输入 cmd 并回车，进入 tomcat 的 bin 目录，启动命令为 startup，关闭命令为 shutdown。启动后，打开浏览器，在 地址栏输入 http:/localhost:8080/，测试 tomcat 是否安装正常，如果正常运行， 如图 2-1 所示： windows 安装与配置教学平台设计与开发 4 图 2-1tomcat 安装正常 3.安装 eclipse eclipse 是个开源的 ide，首先下载 eclipse 的安装文件，这里用的是 eclipse3.3.2 版本（ .tw/downloads/drops/r-3.3.2- 200802211800/winplatform.php#eclipsesdk） ，下载后直接运行 eclipse.exe,第一 次运行会自动寻找 jdk 并完成相应的配置，选择 workspace 的路径，然后进入 eclipse 的主界面。可以下载中文的语言包插件。 4.安装 myeclipse 从 下载 myeclipse，运行 myeclipse_6.0.1ga_e3.3.1_installer.exe，先点“next”,再接受协议，再点 “next” ，选择好 eclipse 的目录之后，再点“next”,选择 myeclipse 的安装目录 之后，继续“next”,再“next”-“install“-“next”-“done“。到此完成 myeclipse 的安装了。 5.配置 myeclipse 1）设置 server 菜单栏中选择“窗口(window)”“首选项.(preference)” “myeclipse”“ servers”“tomcat”tomcat6.x 将 tomcat server 设置为“enable” ，并将“tomcat home directory”设置为 tomcat6.0 的安装目录， 其他目录选项将会自动生成。接着选择 tomcat6.x jdk，在 tomcat jdk name 那选择之前添加的 jdk。 2)配置默认编码 仍然是菜单栏中的“窗口(window)”“首选项.(preference)”“常 规(general)”“内容类型(content types)”“文本(text)” 。 然后在“缺省编码(default encoding)”中输入“utf-8” ，点击“更新(update)” 将“java 类文件(java properties file)”及其他字符编码均“更新(update)”为 windows 安装与配置教学平台设计与开发 5 “utf-8” 。 到此结束。jdk1.6.0+tomcat6.0 的安装配置就完成了。 2.1.3 页面设计工具 macromedia dreamweaver 8 是建立 web 站点和应用程序的专业工具。它将可 视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，如支持 最新的 web 技术，包含 html 检查、html 格式控制、html 格式化选项、 homesite/bbedit 捆绑、可视化网页设计、图像编辑、全局查找替换、全 ftp 功能、 处理 flash 和 shockwave 等富媒体格式和动态 html、基于团队的 web 创作。使得各 个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用 程序。从对基于 css 的设计的领先支持到手工编码功能，dreamweaver 8 提供了专 业人员在一个集成、高效的环境中所需的工具。开发人员可以使用 dreamweaver 8 及所选择的服务器技术来创建功能强大的 internet 应用程序，从而使用户能连接 到数据库、web 服务和旧式系统。 2.2 数据库环境 mysql 最初的开发者的意图是用 msql 和他们自己的快速低级例程(isam)去连接 表格。不管怎样，在经过一些测试后，开发者得出结论：msql 并没有他们需要的那 么快和灵活。这导致了一个使用几乎和 msql 一样的 api 接口的用于他们的数据库的 新的 sql 接口的产生，这样，这个 api 被设计成允许为用于 msql 而写的第三方代码 更容易移植到 mysql。 mysql 这个名字是怎么来的已经不清楚了。基本指南和大量的库和工具带有前 缀“my”已经有 10 年以上，而且不管怎样，mysql ab 创始人之一的 monty widenius 的女儿也叫 my。这两个到底是哪一个给出了 mysql 这个名字至今依然是个 迷，包括开发者在内也不知道。 mysql 的海豚标志的名字叫“sakila” ，它是由 mysql ab 的创始人从用户在 “海豚命名”的竞赛中建议的大量的名字表中选出的。获胜的名字是由来自非洲斯 威士兰的开源软件开发者 ambrose twebaze 提供。根据 ambrose 所说，sakila 来自 一种叫 siswati 的斯威士兰方言，也是在 ambrose 的家乡乌干达附近的坦桑尼亚的 arusha 的一个小镇的名字。 windows 安装与配置教学平台设计与开发 6 3 系统需求 3.1 系统分析 组建windows 安装与配置教学网站，可以把学校此课程的信息与教育方式 推广到网上，以获取各界人士的关注。可以利用 internet 最省钱、最有效地向外界 提供学校的相关信息，通过 internet,及时提供网站的最新消息。它能够更好的展 示该课程的教学风采。强烈意识到“信息就是资源” 、 “信息就是财富” 、 “信息就是 力量” 。 通过 web 服务器把数据库器和客户机连接起来，系统在校园网上开发，普 通用户可以上校园终端上查询各种信息，管理人员可以直接在浏览器中对数据进行 维护。 一个完整统一、技术先进、高效稳定、安全可靠的基于 internet 的信息管理系 统，是一个管理工作自动化和信息化为一体的先进的电脑网络系统。在为组织部门 提供优质、高效的业务管理的和事务处理的同时，采用安全可靠的现代化处理和控 制技术，及时、准确、可靠地采集和传输信息，通过校园网为组织部网站访问者提 供全面及时的信息和数据。 3.2 准备工作 根据系统分析，我们将网站设计为前后台结合的形式，前台直接可查看最新信 息，源下载等。后台是管理系统，前后台紧密结合，发挥网站的最大功能。因为本 系统基于 dreamweaver + jsp + javascript + mysql,所以在做之前对这几项做出 充分的了解与实践。对开发环境和开发语言及数据库的连接都要完全撑握。创建站 点，使用表格制作流行布局，使用 css 样式，如何制作图像页面，表单的使用等等。 3.2.1 数据库设计 一个设计合理的数据库，可以使程序的执行效率得到提高，并影响到页面的最 终显示效果。 对于本系统来说，它有两个最基本的组成元素，即信息标题和信息内容，信息 的内容一般要求存储的数据类型的字段长度要足够大。因此，在设计数据库的时候 必须考虑到数据表中字段的大小，以合理安排存储结构。 windows 安装与配置教学平台设计与开发 7 mysql数据库主要包含如下几个表文件： 表 3-1 会员信息表（user） 字段名数据类型说明 id 自动编号id 编号 name 字符串会员名 password 字符串密码 email 字符串注册邮箱 leixing 字符串会员类型 说明：保存会员员帐号信息。name表示用户账号；password表示用户密码； email表示用户注册邮箱，通过邮箱可以找回密码；leixing表示用户类型，分为 a、b、c，分别表示超级管理员，教师，普通会员。 表 3-2 公告信息表（gonggao） 字段名数据类型说明 id 自动编号id 编号 name 字符串公告名称 neirong 文本公告内容 tupian 字符串图片地址 fabiaoren 字符串发表会员名 time 字符串发表时间 说明：保存公告信息。name 表示公告名称；neirong 表示公告内容；tupian 表 示公告图片地址；fabiaoren 表示发表此公告的人；time 表示发表的时间。 表 3-3 新闻信息表（xinwen） 字段名数据类型说明 id 自动编号id 编号 name 字符串公告名称 neirong 文本公告内容 tupian 字符串图片地址 fabiaoren 字符串发表会员名 time 字符串发表时间 说明：保存新闻信息。name 表示公告名称；neirong 表示公告内容；tupian 表 示新闻图片地址；fabiaoren 表示发表此新闻的人；time 表示发表的时间。 表 3-4 教师信息表（jiaoshi） 字段名数据类型说明 id 自动编号id 编号 name 字符串教师姓名 neirong 文本教师介绍内容 tupian 字符串教师图片 fabiaoren 字符串编写人 windows 安装与配置教学平台设计与开发 8 time 字符串发表时间 说明：保存教师信息。name 表示公告名称；neirong 表示公告内容；tupian 表 示教师图片地址；fabiaoren 表示发表此教师信息的人；time 表示发表的时间。 表 3-5 习题表（xiti） 字段名数据类型说明 id 自动编号id 编号 name 字符串习题名称 src 字符串习题地址 说明：保存习题信息。name 表示习题名称；src 表示习题文件的地址。 表 3-6 视频表（shipin） 字段名数据类型说明 id 自动编号id 编号 name 字符串视频名称 src 字符串视频地址 说明：保存视频信息。name 表示视频名称；src 表示视频文件的地址。 表 3-7 课件表（kejian） 字段名数据类型说明 id 自动编号id 编号 name 字符串课件名称 src 字符串课件地址 说明：保存课件信息。name 表示课件名称；src 表示课件文件的地址。 表 3-8 练习表（lianxi） 字段名数据类型说明 id 自动编号id 编号 question 字符串练习题目 a 字符串选项 a b 字符串选项 b c 字符串选项 c d 字符串选项 d answer 字符串正确答案 leixing 字符串选择题类型（单，双） 说明：保存练习信息。question 表示练习的问题；a、b、c、d 分别表示此问题 的答案；answer 表示此问题的正确答案；leixing 表示此问题的类型，分为单选题 可多选题。 表 3-9 留言信息表（bbs） 字段名数据类型说明 id 自动编号id 编号 biaoti 字符串留言标题 neirong 文本留言内容 time 字符串留言时间 name 字符串留言人 windows 安装与配置教学平台设计与开发 9 说明：保存留言信息。biaoti 表示留言的标题；neirong 表示留言的内容； time 表示留言时间；name 表示留言人的账号。 表 3-10 留言回复表（bbs2） 字段名数据类型说明 id 自动编号id 编号 huifu 字符串回复内容 name 文本回复人 time 字符串回复时间 myid 字符串留言 id 说明：保存回复信息。huifu 表示回复内容；name 表示回复人账号；time 表示 回复信息；myid 表示回复的留言的 id 值。 3.2.2 创建站点 在建立页面之前,首先需要在 dreamweaver 8 中创建一个站点，并设置测试服 务器，这样就能在设计动态网页的过程当中，随时查看该网页的运行效果，而不必 每次都在浏览器中打开一连串的网页，却最终中介为了验证一个网页，从而大大提 高工作效率。 本系统测试服务器设置在本地，并且本地已经安装了 iis 服务，执行下列步骤 就可以建立一个名为 part 的站点。 (1) 打开 dreamweaver 8 ,选择【站点】|【新建站点】命令，打开【站点定义】 对话框； (2) 在【您打算为您的站点起什么名字？】文本框中输入 sufei； (3) 单击【下一步】按钮，打开【站点定义】对话框； (4) 选中【是，我想使用服务器技术。 】单选按钮，将显示【哪种服务器技术？ 】下拉列表框； (5) 在【哪种服务器技术？】下拉列表框中选择【jsp】选项； (6) 单击两次【下一步】按钮，选择 work 目录下 sufei 文件夹作为站点目录。 （dreamweaver 和 myeclipse 共同管理） (7) 单击【测试 url】按钮，进行站点 url 有效性测试。这里进行的测试是测 试该站点的 url，即 http:/localhost/sufei/能否访问。 windows 安装与配置教学平台设计与开发 10 图 3-1 测试服务器 (8) 如果测试成功，则单击【下一步】按钮，打开【站点定义】对话框，如果 是团队开发，另有一台服务器或者是要发布的服务器在远程，则选中【是的，我要 使用远程服务器】单选按钮进行设置。这里我们选则【否】！ (9) 单击两次【完成】按钮，完成站点定义。 3.2.3 数据库连接 本系统是利用 dreamweaver 8,并基于 mysql 数据库技术来开发 jsp 应用程序的。 如果想要在 jsp 应用程序中访问服务器上的数据库，就至少需要创建一个数据库的 连接，它就好像一条纽带，将 jsp 应用程序和数据库联系起来，从而实现客户端和 服务器端的通信。 因为在很多地方都用到数据库连接操作，为了方便我编写了一个 bean 封装数 据库连接。在要使用数据库操作的地方，只需实例化就可以使用。减轻工作负担。 代码如下： public conn() /构造方法，初始化时自动获得 statement 对象 tryinit();stmt=conn.createstatement();catch(exception e)e.printstacktrace(); public void executequery(string s)/构造方法，处理查询等数据库操作 tryif (stmt!=null)rst=stmt.executequery(s);catch(exception e) e.printstacktrace(); public int executeupdate(string s) /构造方法，处理数据库更新操作 int status=1;tryif (stmt!=null)status=stmt.executeupdate(s); catch(exception e)e.printstacktrace();return status; windows 安装与配置教学平台设计与开发 11 4 整体设计 一个清晰的设计思路可以大大降低计者的难度，对于动态网站来说，数据库是 必要的，所以首先应设计好数据库！其次才是对页面的设计，大部分网络应用系统 除了具备基本的用户浏览界面外，其后台的管理程序也是不可缺少的。一方面，管 理员在后台中实现了对数据的更新，编辑和删除等操作；另一方面，具体功能的划 分有利于程序的模块化设计，加快系统开发速度。 基于这样的设计思想，本系统采用了模块化程序设计思想，将需要重复使用的 部分进行独立设计，然后将其嵌入到需要调用页面的网页中。 4.1 网站前台设计 4.1.1 前台总体框架 根据系统的功能分析，设计出前台系统总体框架，如图 4-1 所示： 主界面 shouye.jsp 最新动态 教师风采 课程介绍 教学视频 前台信息浏览 在线测试 管理平台 教学课件 在线留言 windows 安装与配置教学平台设计与开发 12 图 4-1 前台系统总体框架 4.1.2 前台设计描述 在前台信息浏览模块中，这里实现了对信息的分类、信息单击次数的统计、详 细内容的浏览等。 系统主界面（index.asp）以分类的形式将最主要的信息标题罗列出来，当点击 分类信息中的更多超级链接后，便会进入到属于该类型的信息标题显示页面如： kechengxinxi.jsp。 主界面菜单栏中显示的是工作动态中的若干小类，以方便用户的浏览。点击可 进入菜单栏标题条数页面。同理，每个信息标题都对应着与其相关的信息内容，用 户只要单击页面上的标题文字超级链接，页面就会自动跳转到相对应的信息详细内 容页面。这种对应关系是借助于“id（主键，具有唯一性） ”字段来实现的。 4.2 网站后台设计 4.2.1 后台总体框架 后台管理框架，如图 4-2 所示： 首页 登录 后台管理模块设计 后台导航 guanli.jsp 提示无权限 判断用户名，密 码 判断是否管理员 否 是 图 4-2 后台管理模块设计 说明：用户打开首页后，在首页中包含登录窗口。用户输入用户名和密码或， 提交各服务器判断用户名和密码是否正确，正确后显示用户登录信息。点击管理连 接，首先会判断用户类型，用户类型为老师或者管理员则可以进入管理页面，否则 提示您没有此权限。 windows 安装与配置教学平台设计与开发 13 后台导航如图 4-3 所示： 后台导航 用户管理 全部用户 删除修改 添加 资料管理 习题 课件 视频 发布管理 全部 发布 bbs 管理 全部 练习管理 全部练习 添加 图 4-3 后台管理模块设计 说明：进入后台页面后，左边菜单显示用户管理、资料管理、发布管理、bbs 管理和联系管理。点击相应的管理后出现子菜单，如用户管理下面的全部用户，删 除修改，添加。 4.2.2 后台设计描述 （1）用户管理 用户的添加、修改、删除。管理员进入后台管理后可以点击说有用户，显示 所有又要信息，单击删除、修改、添加按钮实现用户的管理。如图 4-4 所示： 用户管理 数据库 不显示 前台显示 管理员审核 添加/修改/删除 读取 读取 图 4-4 后台用户模块设计图 （2）资料管理 资料的管理，因为只是文件的上传，所以我设计功能为添加、删除。如图 4- 5 所示： windows 安装与配置教学平台设计与开发 14 资料管理 数据库 不显示 前台显示 管理员审核 添加/删除 读取 读取 图 4-5 后台用户模块设计图 （3）发布管理 发布管理，包括信息的添加、修改、删除（包括教师信息，公告和新闻）如 图 4-6 所示： 发布管理 数据库 不显示 前台显示 管理员审核 添加/删除/修改 读取 读取 图 4-6 后台用户模块设计图 （4）bbs 管理 bbs 管理，只包含了删除功能（包括留言和回复），如要添加可在前台留言功 能处添加（包括留言和恢复）如图 4-7 所示： bbs 管理 数据库 不显示 前台显示 管理员审核 删除 读取 读取 图 4-7 后台用户模块设计图 （5）练习管理 练习管理就是在线测试的单选题和多选题管理。包括题目的添加、删除两个 功能，如图 4-8 所示： windows 安装与配置教学平台设计与开发 15 练习管理 数据库 不显示 前台显示 管理员审核 添加/删除 读取 读取 图 4-8 后台用户模块设计图 windows 安装与配置教学平台设计与开发 16 5 系统的实现 5.1 首页实现 下面就跟据图示作具体介绍，所有工作都是在可编辑区域实现的。 (1)使用 div 块分别制作出首页主体布局,如图 5-1 所示： 图 5-1 shouye.jsp 首页 (2) 在导航栏使用网络上流行的 javascript+css 代码实现，如图 5-2 所示： 图 5-2 导航效果 （3）在登录模块中，添加代码，如下 “);/为空则显示 denglu.jsp else out.println(“); %/不为空则显示登录成功后的页面（denglu2.jsp） 。 说明：判断 session，如果 session 中 user 为空这显示 denglu.jsp（登录界面） ，反则显示 denglu2.jsp(已登录界面) （4）在公告模块处使用标签设置向上循环的显示效果。数据来自数 库。 （5）日历模块处，使用的是一个 javascript 脚本代码。 windows 安装与配置教学平台设计与开发 17 （6）新闻模块处使用图片形式展示目前的新闻。循环模式来自互联网上的一个 循环代码。在需要显示数据的地方插入来自数据库的数据。 （7）课程介绍、教学大纲、课程规划部分采用的是读取 txt 表格的形式展示 （说明：数据库操作也可以实现，但是为了学习了解更多的技术，此处我编写了用 于读取 txt 文档的自定义 tag 来实现） 首先在 web-inf 文件下新建 mytag.tld 文件，然后配置 tag，配置文件如图 5- 3 所示： 图 5-3 自定义 tag 的配置信息 另外编写 tag，代码如下（说明：使用 tag 时提供读取文件的名称 name 和需要 读取文件的大小 num） 在 shouye.jsp 中引用 tag /tag 引用代码 在需要显示文件的地方，例如：显示课程介绍 num=“300“ /“ （7）教师界面模块部分采用读取数据的方式显示教师的内容和 img 图像 （8）整体设计效果如图 5-4 所示： windows 安装与配置教学平台设计与开发 18 图 5-4 首页效果 5.2 在线测试实现 在线测试时学习型网站不可缺少的一个部分。此测试部分我采用单选和多选混 可的方式进行在线测试。首先点击测试的连接进入测试菜单列表，如图 5-5 所示： 图 5-5 测试菜单页面 实现步骤： (1)使用标题绘制区域，添加背景图片使用查询数据的方式显示试卷数量。分别 计算单选题和多选的数量，如果数量分别大于 10 就显示试卷 1，分别大于 20 再显 示试卷 2。 (2)点击试卷时会对 cookie 进行查看，判断是否已经登录，登录后可以点击连 接进入测试，没登录不可以。 (3)登录后点击相应的试卷，进入测试页面，效果如图 5-6 所示： windows 安装与配置教学平台设计与开发 19 图 5-6 测试页面 实现方法：当点击试卷时提交一个参数 info 给测试页面，测试页面根据 info 分别进行数据库查询操作显示相对于的试卷的单选可多选。 (4)当用户做完题目后，提交给出了页面。根据 info 提交的参数进行答案核对。 最终显示效果如图 5-7 所示： 图 5-7 成绩显示 5.3 内容显示页面实现 详细内容页面作为信息列表页面的下级页面，其只显示一条记录，所以信息列 表页面要简单的多，只需要取得信息列表页面传递过来的 url 参数，就能唯一确定 一条记录，然后将这条记录的信息显示在页面中。详细信息显示包括教师信息，新 闻信息，最新公告和下载。 下面以教师详细内容页面（jiaoshijianjie.jsp）页面为例，如图 5-8 所示： windows 安装与配置教学平台设计与开发 20 图 5-8 详细内容页面 左边是教师列表栏，右边是教师详细信息。右边是用 iframe 框架实现，src= jiaoshixinxi.jsp。详细信息（通过提供 id，去搜索相应的教师信息）。 最终效果如图 5-9 所示： 图 5-9 教师信息效果 5.4 后台登录页面实现 动态网站都是通过后台进行管理的，而登录页面（denglu.jsp）就相当于管理 员进入后台管理系统的一道门。只有输入正确的用户名和密码才能根据返回的用户 类型判断是否有权限进入后台管理首页（guanli.jsp）。 利用表格设计网页布局，最终完成的网页布局，如图 5-10 所示： windows 安装与配置教学平台设计与开发 21 图 5-10 登录页面 后台登录页面的制作比较简单，主要由表单，两个文本域，一个提交按钮构成， 表单的名称为“form1”,管理员在文本域中输入用户名和密码后点击提交进行验证, 表单提交的方法为“post”。登录成功后转到登录成功页面，同时服务器端放回两 个 cookie，userid 和 leixing。登录不成功返回到登录页面。 登录成功后，如果返回的 cookie leixing 的值为 c（管理员），就可以点击最 上角的管理链接进入管理页面。 5.5 后台管理实现 进入后台，将会看到一个总体框架如图 5-11 所示：左边是一导航栏。 图 5-11 后台总页面设计 5.5.1 信息添加页面实现 信息添加页面包括用户信息，资料信息，新闻信息等。这是我以信息添加信息 页面为例。都是使用 mysql 语句的添加实现。关键是添加页面的不同。信息添加页 面效果如图 5-12 所示： windows 安装与配置教学平台设计与开发 22 图 5-12 信息添加页面 其中包括一个文件域，和选择栏和一个 fckeditor 可编辑区，一个提交按钮， 一个预览按钮。 实现过程： (1)添加 form，制定相应组件 (2)以 javascript 形式添加 fckeditor 组件 window.onload = function () var ofckeditor = new fckeditor(“mytextarea“) ; /制定区域 ofckeditor.basepath = “/fckeditor/“; /根目录 ofckeditor.width = “700“; /长度 ofckeditor.height = “350“; /宽度 ofckeditor.replacetextarea(); (3)同时在提交按钮的时候，我把图片信息也通过 javascript 代码提取出来 function ch() var oeditor = fckeditorapi.getinstance(“mytextarea“); /获取 mytextarea 对象 var s=oeditor.getxhtml(true); if(.value=“)/如果没有输入标题，提示请输入 alert(“请输入标题或教师名称“); .focus(); else if(s=“) alert(“请不要提交空内容“);/如果没有输入内容，提示请输入 oeditor.sethtml(“); windows 安装与配置教学平台设计与开发 23 else var re=new regexp(“src=.+?.(jpg|gif|png|bmp|jpeg).“,“img“);/正则表达式获取内容中的第 一个图片地址 var arr=s.match(re);/判断正则表达式 if(arr!=null)/如果正确 document.form1.tupian.value=arr0;/把图片信息通过 dom 传递给 tupian 域 var date=new date(); document.form1.neirong.value=s; document.form1.time.value=date.tolocalestring();/把 time 传递给表单中的 time 域 document.form1.submit(); 5.5.2 信息删除页面实现 信息的添加删除修改显然是管理的重点，删除也不例外，这里我以用户的删除 为例： 其中用户信息界面显示如图 5-13 所示: 图 5-13 用户信息 点击删除按钮后，通过 javascript 代码获取相应的用户信息，根据提供用户信 息提交表单给 servlet 去实现删除功能。删除后返回，通过 javascript 代码删除表 格的相应一行。 javascript 代码如下： function sc(row) /动态删除表格的一行 table=document.getelementbyid(“mytable“);/获取 table 对象 index=row; /table.deleterow(index); .value=table.rowsindex.cells0.innertext;/把 table 的 第 index 行的第一列内容赋值给 name 对象 document.form1.submit();/提交表单 function xg(row) /动态获取表格某一行信息 table=document.getelementbyid(“mytable“); windows 安装与配置教学平台设计与开发 24 index=row; /table.deleterow(index);