基于RIA技术的高校课程网站系统设计与实现

1、南南 阳阳 理理 工工 学学 院院 本本 科科 毕毕 业业 设设 计（论文）计（论文）基于基于 RIARIA 技术的高校课程网站系统设计与实现技术的高校课程网站系统设计与实现Design and Implementation of University Course Website Based on RIA Technology学 院（系）： 软件学院 专 业： 软件工程 学 生 姓 名： 陈小虎 学 号： 68107173 指 导 教 师（职称）： 于彬（讲师） 评 阅 教 师： 完 成 日 期： 2011 年 4 月 南阳理工学院Nanyang Institute of Technolog

2、y基于 RIA 技术的高校课程网站系统设计与实现软件工程专业陈小虎摘摘要要在互联网迅速发展的今天，高校课程网站正成为高校网络形象的主要展示方式，课程网站在教学信息发布，教学拓展，内部沟通方面起着重要地位。应用Flex、jQuery 和 PHP 于高校课程网站系统建设，建立高效、实用、安全、稳定和易于维护的高校课程网站，不仅具有快速、自由的特点，并且能在任何时间更新，提供互动式的交流功能，还体现出富互联网应用高度互动性、丰富的用户体验等特点。网站内容不仅局限于传统的文本，还结合声音、视频等多媒体形式。后台管理系统只需通过浏览器即可实现对网站进行日常维护，实时更新网站内容、上传文件等功能。并且具有

3、自主的信息发布功能和完善的用户权限管理功能，系统管理员可以根据实际需要随时进行动态增加、删除、修改子栏目。依托高校课程网站，提供了一个学生课下自主学习和教师展示教学成果的平台，这无疑是大大丰富了教学形式，让网络为高校教学提供多一份选择。关键词关键词RIA；Flex；AS3；jQuery；PHPDesign and Implementation of University Course Website Based on RIA TechnologySoftware Engineering MajorChen Xiao-huAbstract: On rapid development of the

4、 Internet today, college courses website is becoming the main university network display manner. Course website plays an important role in information dissemination of teaching informantion, teaching development and internal communication. Using the technology of Flex, jQuery and PHP on the construc

5、t of college course website system. Not only fast, free features, but also can update in any time, and provide interactive communication function, to reflect the features of highly interactive, profuse user experience etc. of rich Internet applications. The content is not limited to traditional text

6、, but also combined with audios, videos and other multimedia. In the backstage of the system can manage and maintain only through a browser of the site, real-time update the content, upload files of website. The administrator can add, delete, modify sub-sections dynamically according to actual needs

7、 at any time, and with the function of independent information publishing and completed user rights management.University of relying on the course website, to build a platform of students under class study independently and teachers to show teaching results, which no doubt greatly enrich the forms o

8、f teaching, the network to provide more choice of teaching.Key words: RIA；Flex；AS3；jQuery；PHP目目录录1 1 引言引言.11.1 项目背景 .11.2 本课题所涉及技术在国内（外）的研究现状综述 .21.3 名词解释 .22 2 需求分析需求分析.32.1 服务端运行环境 .32.2 需求分析设计 .42.2.1 课程介绍模块.42.2.2 教学内容模块.42.2.3 课程录音模块.52.2.4 教学图片资源模块.52.2.5 师生交流栏模块.62.2.6 娱乐游戏模块.62.2.7 其他辅助模块.72

9、.2.8 后台管理模块设计.72.3 设计原则及一般要求 .83 3 系统设计系统设计.83.1 系统逻辑设计 .83.2 模块设计 .93.2.1 主模块，.93.2.2 公共辅助模块.103.2.3 功能模块.103.2.4 详细功能模块设计.103.3 高校课程网站系统关系型数据库的实现 .123.3.1 数据库分析.123.3.2 数据库概念设计以及创建表结构.134 4 系统实现系统实现.154.2 主要前台功能模块 .154.2.1 教学内容模块.154.2.2 搜索模块.164.2.3 师生交流模块.164.2.4 教学图片模块.174.2.5 导航功能模块.194.3 后台管理

10、模块 .194.3.1 后台登录模块.194.3.2 系统配置模块.204.3.3 菜单导航模块.204.3.4 PHP 生成 XML 模块.225 5 系统测试系统测试.225.1 测试基本要求 .225.1.1 浏览器兼容性测试 后台安全性测试.225.1.3 易用性测试.235.1.4 功能检查.235.1.5 程序兼容性测试.235.2 测试用例设计方法举例 .245.2.1 浏览器兼容性测试.245.2.2 后台框架内页面访问检查.245.2.3 平台移植性测试.255.3 测试结论 .25结论及尚存在的问题.26参考文献参考文献.27致谢致谢.281 引言基于

11、RIA 技术的高校课程网站系统是运用目前流行的富互联网应用技术来实现实现高校网站的建设，不同于传统高校课程类网站页面呆板、形式乏味及缺乏吸引力的形式，将一种内容丰富、形式多样并且界面华丽的新形式网站呈现给用户。相比传统的网页技术，基于 RIA 技术的高校课程网站更加健壮、交互能力更强，访问者可以轻松便捷的浏览和搜索到需要的文字、视频、音频及图片内容，几乎所有的操作都是在一个框架内进行，而没有传统网页技术的跳转、刷新的等待；网站管理者可以动态的修改网站的整体设置，对所有栏目及内容实现增加、修改、删除操作。网站各个功能被分成单独模块，提高了易用性及可复用性，且所有前端模块被封装成一个整体，数据的交

12、互在模块内部或模块与模块之间执行，因此提高了整个系统的安全性与稳定性。基于 RIA 技术的高校课程网站界面友好，在设置后可以用作常见的高校课程网站或个人博客等，提供内容发布，图像、音频、视频共享与下载服务等，成为师生交流或个人展示的平台。因为使用了 B/S 构架，所以部署和使用也十分方便，服务端可以放到支持其运行的 Windows 或 Linux 服务器上；客户端电脑只需联网，用带有支持Flash 插件的网络浏览器即可访问，可以广泛的应用于高校网络建设中。1.1 项目背景迎接 RIA 时代的来临。因特网已经成为应用程序开发默认平台，但随着互联网的发展，用户对程序复杂性的要求也与日俱增，尤其是某

13、些领域的应用程序（如实时交互、深刻的用户体验、复杂的数据处理）传统网页技术已经不能胜任更为高级的应用环境。而目前传统的互联网网页技术是基于 HTTP 协议，服务器端需要等待客户端发出进一步的请求才能进行下一步的处理；客户端需要服务器端作出跟进的响应后才能进行下一步的操作。而复杂的应用系统往往需要客户端频泛地提交、存取网页来与服务器端协同工作，以完成一项事务的处理，这就导致 Web 应用程序的运行速度非常缓慢，从而使用户难以接受。RIA（Rich Internet Application 即富互联网应用）结合了桌面应用程序的反应快、交互性强的优点与 Web 应用程序的传播范围广及容易传播的特性，

14、并且简化并改进了 Web 应用程序的用户交互。这样，用户开发的应用程序可以提供更丰富、更具有交互性和响应性的用户体验1。可以说互联网应用经历着以下的转变过程：基于主机模式C/S 模式B/S 模式RIA 模式RIA 大致包括了 Flex、Ajax、WPF、OpenLaszlo 和 Google Web Toolkit 等一些列产品，而 jQuery 和 Flex 是同类产品中最领先和成熟的产品。jQuery 是一个轻量级的JavaScript 框架,它兼容各种浏览器,使用户能更方便地处理 HTML 文件、事件响应、实现动画效果，并且方便地为网站提供 AJAX 交互；Flex 是 Adobe Fl

15、ash 平台的一个组成部分，也是 Flash Player 的一项核心技术，目前绝大部分的桌面系统都支持 Flash，可以说是目前 Web 上最广泛部署的前端技术。对于小型网络应用来说，RIA 技术并不需要替换掉现有的体系结构模型，如PHP，.NET 构架等，RIA 技术可以和现有的小型网络应用体系结构很好的进行整合。将原有的系统构建成更为易用、直观、迅速的“网页应用程序” 。在不影响原有应用体系的前提下，RIA 技术对表现层进行了大幅度的提高，进一步提升界面的友好程度，并且减少了用户与系统的远程交互频率，减少了带宽需求。1.2 本课题所涉及技术在国内（外）的研究现状综述富互联网应用程序是下一

16、代的将桌面应用程序的交互式用户体验与传统的 WEB 应用的部署灵活性和成本分析结合起来的网络应用程序，是互联网未来发展的一大趋势，目前技术已经相当成熟，Adobe RIA 技术内容从 Flash, HTML/CSS/JS，到 PDF，几乎涵盖了时下最流行的 Web 内容载体。此外， “可离线”应用模式能让用户更加安全、舒适地进行工作和娱乐。用户们不必再抱怨因网络故障而造成的信息损失，而且也可以借助本地资源更好地节省网络资源。因此，Adobe RIA 技术可以让用户将 WEB 2.0 应用带回桌面，创造的商业应用价值和用户体验价值将超过以往任何技术。Flex 技术本为 Adobe 公司为企业应用

17、量身定做，但学习 Flex 技术，对开发者要求较高，既要求有一定水平的美工，又要求精通 AS（ActionScript） ，有的需要加载后台程序，编程语言与数据库也有所要求。国外有少数企业小型网站及个人网站采用此种技术，国内大型成功 Flex 的案例相对来讲极少，而高校中采用 Flex 技术来实现课程网站的则更是寥寥无几2。Zend Framework (ZF)是由 Zend 公司支持开发的完全基于 PHP5 的开源企业级开发框架，采用 MVC 构架模式来分离引用程序中不同的部分方便程序的开发和维护。同时，Zend Framework 中加入了对 Flex 的 Action Message F

18、ormat (AMF)的支持。AMF 是Flex 与后端通讯的协议，通过它，Flex 与 Flash 应用程序就能与服务器交换数据。国外应用 Zend 开发的项目多为企业级应用，因对开发者有较高的要求，且目前国内中文文档及相关资料较少，目前国内学习者较少。1.3 名词解释设计书中用到的专门术语的定义或外文首字母组词的原词组：Flex:是一个高效、免费的开放源框架，可用于构建具有表现力的 Web 应用程序，这些应用程序利用 Adobe Flash Player 和 Adobe AIR 运行时跨浏览器、桌面和操作系统实现一致的部署。AS：即 ActionScript，Adobe Flash Pla

19、yer 运行时环境的编程语言。它在 Flash 内容和应用程序中实现交互性、数据处理以及其他功能。是一种与 JavaScript 脚本类似的一种 Flash 编程语言，新出的 AS3.0 使用 OOP（面对对象编程） ，增加更强的报错能力，指定类型也更明确。ZF3：即 Zend Framework，是由 Zend 公司支持开发的完全基于 PHP5 的开源企业级开发框架，采用 MVC 构架模式来分离引用程序中不同的部分方便程序的开发和维护。2 需求分析系统功能如图 2-1 所示。高校课程网站系统访问者管理员登录验证是否有效图片资源浏览内容评论在线留言课题内容搜索课题新闻浏览在线收听录音下载相关录

20、音观看在线视频按分类、关键字按分类、栏目网站信息配置课程内容管理相册管理评论管理、回复留言管理、回复在线音频管理在线视频管理栏目分类管理否是图 2-1 功能模块图2.1 服务端运行环境操作系统：Windows 2003/XP/7 或 Linux（内核为 2.60 以上）数据库：MySQL 5.5.8Web 服务器：Apache 2.2.17PHP:5.3.3开发工具：Adobe Flash Builder 4、ZendStudio 6.12.2 需求分析设计总模块功能架构它包括前台功能模块，后台管理模块，两者用不同的构架，相互独立。后台模块修改数据呈现给前台，前台模块动作可在后台得到显示。如图

21、 2-2 所示。图 2-2 总体模块架构设计图按功能和实际项目需求初步分为前台功能七个模块和后台功能九个个模块，详细的需求分析如下几节。2.2.1 课程介绍模块为一个独立的页面，用于介绍整个课程网站的研究简介、意义或其他相关内容，内容可以是 HTML 格式的文字，也可以包含图片、音频、视频等多媒体资源。当此网站作为其他类网站或个人网站时，也可以作为项目介绍或个人简介等。介绍内容可以在后台由管理员自由编辑。课程介绍模块设计如图 2-3 所示：图 2-3 课程介绍模块设计2.2.2 教学内容模块默认状态显示最新发布的前十条内容，内容包括整个网站内的各种分类，模块内除显示内容分类、标题、发布时间以及

22、评论、点击量外，标题前还有此分类的图标（图标根据内容分类自动显示） ，以及内容分页（显示总页数、当前页及页面跳转超链接） 。点击内容标题，在弹出新窗口中显示该条信息的内容，内容中可包含文字、图片、音频、视频等，用户可以对内容评论。教学模块中还包括搜索功能，用户可以按照内容分类搜索或自定义关键字搜索。管理员在后台可以自由添加、修改和删除每条内容的所属分类、标题、详细内容、缩略图等信息。教学内容模块设计如图 2-4 所示。图 2-4 教学内容结构分布图2.2.3 课程录音模块课程录音模块具有教学录音在线收听、下载功能。模块中显示该录音内容的分类、录音标题、提供者等信息，并具有分页功能。用户可自定义

23、播放、暂停收听和下载所提供的录音内容；管理员在后台可添加、修改、删除录音内容及描述信息，录音可以通过本地上传或直接添加网络上的音频。若将此系统改作其他类网站，可将此模块作为在线音乐欣赏及下载模块。课程录音模块功能分布如图 2-5 所示。图 2-5 课程录音模块功能分布2.2.4 教学图片资源模块教学图片资源模块可以将教学及试验中所需要的图片分类展示给用户。图片资源库中包含多个分类，每个分类中包含若干张图片。各个分类包含不同的封面、分类标题、描述、创建时间，用户可按照不同分类分别浏览图片内容，分类中的各个图片均有标题、简介。管理员可以添加、修改、删除各个分类、分类封面及分类信息，并可对每张图片的

24、信息进行编辑。教学图片资源模块设计如图 2-6 所示：图 2-6 教学图片模块设计2.2.5 师生交流栏模块具有留言功能的师生互动交流平台，访问者可将自己的意见、建议提交到网站上。留言内容可被老师看到和回复，经管理员审核或修改后可显示。留言内容包括留言者昵称、留言内容、留言时间及老师的回复内容。师生交流模块设计如图 2-7 所示：图 2-7 教学图片模块设计2.2.6 娱乐游戏模块提供在线小游戏或在线测试，教师将与课题相关的内容做成小游戏或者在线小测试的形式，增加学生的兴趣，寓教于乐。提供的内容可以由自己制作上传或调用网络资源，相关内容及信息由管理员后台管理。娱乐游戏模块设计如图 2-8 所示

25、：图 2-8 教学图片模块设计2.2.7 其他辅助模块其他模块包括在线时钟、网站访问统计、天气预报、背景音乐。使整个网站看起来内容更加充实和美观。具体模块图如图 2-9 所示。图 2-9 公共辅助模块结构图2.2.8 后台管理模块设计后台管理模块应包含安全的管理员身份验证功能及所有前台功能模块管理的功能，用户角色权限分配明确。后台管理模块设计如表 2-1 所示：表 2-1 功能模块设计模块名称子模块功能管理员身份验证1.验证管理员帐号密码是否正确2.动态生成图片验证码网站整体配置1.修改网站标题2.修改课程介绍3.修改各个栏目显示信息内容管理1.添加、修改、删除分类2.添加、修改、删除每条内容

26、及修改所属分类、标题、内容、发布时间相册管理1.添加、修改、删除相册2.修改相册分类、标题、描述、发布时间、封面图片管理1.往指定相册中添加、修改、删除图片2.分别修改每张图片所属分类、标题、描述信息教学录音管理添加、修改、删除在线录音（可本地上传）留言管理1.审核用户留言内容2.修改、回复、删除留言内容评论管理1.审核用户回复内容2.修改、删除回复内容后台管理娱乐游戏管理1.添加、修改、删除在线游戏/测试2.修改在线游戏/测试分类、标题、描述、发布时间、封面2.3 设计原则及一般要求参照各模块的功能并结合 RIA 程序友好的用户界面的特点，我们设计的整个高校课程网站系统应达到以下目的：（1）

27、稳定性。整个系统在部署好的服务器上能够稳定运行，服务器在软硬件方面配置上的修改不会影响程序的正常运行。（2）兼容性。客户端在安装 Flash Player 9.0 以上版本的不同内核（Trident、Gecko、Presto、Webkit）及不同版本的浏览器（IE6 及以上版本，FireFox2.0 及以上版本，Opera10.0 及以上版本）均能正常显示。（3）平台可移植性。服务端程序不仅能够在 WAMP（Windows+Apache+MySQL+PHP）环境中上运行，还能够在 LAMP（Linux+Apache+MySQL+PHP）环境中正常运行。（4）安全性。后台管理用户分为管理员与教师

28、，管理员身份用户有最高权限，教师身份用户具有发布、修改、删除、审核的权限，但不能对整个网站系统的系统配置和栏目进行管理。所有用户密码经过 MD5 加密，并有密码找回功能；后台登录时除需输入帐号密码外，还需输入随机验证码，防止暴力破解。（5）可扩展性。系统编程采用 OOP 思想，将程序模块化，并留有一定的接口，如果需增加新的业务品种，再次开发不需更改原有系统的源代码，只需对相应的功能模块扩充即可。（6）灵活性。如有需要对网站内容进行改变（如增加新栏目、修改网站配置信息）不需要重新编写源代码，管理员在后台即可完成相应的修改。此高校课程系统还可用作一般小型内容发布系统（CMS）网站及个人博客类网站。

29、（7）整体性。虽然整个网站系统的各个功能模块尽量做到相对独立，减少与其它模块之间的耦合性，但整个系统再正式运行之前，须将各个模块编译成一个整体。数据在单独的模块中或在模块与模块之间交互，整个系统就是一个整体，这样更能防止黑客扫描文件结构，寻找漏洞，再另一方面加强了系统的安全性。（8）易使用性。高校课程网站采用互联网应用技术，有很好的用户界面与简易的人机交互性，与主机间使用 B/S(浏览器/服务器)结构。（9）先进性。在保证稳定的前提下，尽量使用国际上流行的技术与概念（Ajax、RIA、jQuery 等） ，使系统在国内处于先进水平。3 系统设计3.1 系统逻辑设计系统采用三层 B/S 结构，由

30、浏览器、Web 服务器、数据库服务器组成，这是当今计算机网络分布式应用程序设计的总体趋势。三层结构的应用程序设计遵循开发的标准，保留了两层结构优点的同时，简化了程序设计的复杂度。中间层应用服务器，通过提供资源池和缓冲区等机制，能更有效的管理系统各种资源；通过标准的 API 接口实现对后台访问，并向客户端程序屏蔽了所有资源访问的细节。客户端程序更容易被开发和维护，因为他们不易受到后台程序变动的影响。系统的三层逻辑结构如图 3-1 所示：图 3-1 系统三层逻辑结构根据用户的需求，系统功能并不复杂，只有十数个模块的功能，业务逻辑并不复杂，为快速开发系统，采用了如下的技术架构。数据逻辑的功能是在 M

31、ySQL 数据库中设计出数据库表，用于存放数据。应用程序直接在页面中实现，使用了PHP、JaveScript、XML、MXML、ActionScript 等编程技术。前台页面，HTML 将Flex 封装好的 SWF 文件包含进来，Flex 程序中的 ActionScript 通过 ZendFramework 中的 ZendAMF 与 PHP 通讯，PHP 读取和调用数据库中的内容；后台管理，PHP 与JavaScript 类库（jQuery）实现异步刷新（Ajax 技术） ，并通过调用 HTML 后台模板将数据及操作呈现出来。前台页面后缀名为 html，所有操作均在封装在内部的 SWF 文件进

32、行；后台页面后缀名为 php，数据通过替换 html 模板中的数据标签，将各种操作呈现给管理员。3.2 模块设计3.2.1 主模块， 主模块中主要包括前台显示模块与后台管理模块两大部分。主模块设计用例图如图 3-2 所示：图 3-2 主模块设计用例图3.2.2 公共辅助模块包括 4 个子模块，每个模块均各自独立，实现功能无相关性。公共模块设如图 3-3 所示：图 3-3 公共辅助设计用例图3.2.3 功能模块模块包括所有前台的各个功能，各个功能模块主要供普通用户访问使用，各个模块间功能相互独立，有的子模块还调用到其他公共模块如分页、搜索等。功能模块设计如图 3-4 所示：图 3-4 功能模块设

33、计用例图3.2.4 详细功能模块设计1.图片资源模块用户进入栏目，显示相册分类，点击相册进入该分类，可浏览分类内容，关闭相册，返回图片资源栏目。流程图如图 3-5 所示。2.师生交流栏访问用户可在该栏目留言（昵称、留言内容必填） ，查看已审核留言及回复内容。流程图如图 3-6 所示。3.其他辅助模块访问统计：显示当前访问者的 IP、网站的日均访问量、总访问量、网站创建时间及网站经历时间。天气预报：显示当前访问者所在地最近三天的天气情况。时钟：显示系统时间（以翻书页的形式每秒翻一页） 。图 3-5 图片资源访问流程图图 3-6 师生交流流程图4.程序后台管理包括网站信息配置、栏目管理、内容管理、

34、评论审核。流程图如图 3-7 所示。登录后台是否为管理员网站配置栏目管理内容管理评论/留言审核否是图 3-7 后台管理流程图3.3 高校课程网站系统关系型数据库的实现MySQL 是一个小型关系型数据库管理系统，目前 MySQL 被广泛地应用在 Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了 MySQL 作为网站数据库。与其他的大型数据库例如 Oracle、DB2、SQL Server 等相比，MySQL 自有它的不足之处，如规模小、功能有限（MySQL Cluster 的功能和效率都相对比较差）等，

35、但是这丝毫也没有减少它受欢迎的程度。对于一般的个人使用者和中小型企业来说，MySQL 提供的功能已经绰绰有余，而且由于 MySQL 是开放源码软件，因此可以大大降低总体拥有成本。MySQL 既能够作为一个单独的应用程序应用在客户端服务器网络环境中，也能够作为一个库而嵌入到其他的软件中提供多语言支持，常见的编码如中文的 GB2312、BIG5，日文的 Shift_JIS 等都可以用作数据表名和数据列名。这些优点及特性，一方面完全能够满足高校课程网站系统的需求，另一方面也在一定程度上降低高校网站的建设成本。目前 Internet 上流行的网站构架方式是 LAMP（Linux+Apache+MySQ

36、L+PHP） ，即使用 Linux 作为操作系统，Apache 作为 Web 服务器，MySQL 作为数据库，PHP 作为服务器端脚本解释器。由于这四个软件都是免费或开放源码软件（FLOSS)，因此使用这种方式不用花一分钱（除开人工成本）就可以建立起一个稳定、免费的网站系统。而本网站系统同样也支持 LAMP 构架。3.3.1 数据库分析针对一般高校课程网站系统和个人网站的需求通过对网站内容和数据流程分析，设计如下面所示的数据项和数据结构。1.用户信息：包括的数据项有：用户编号、用户所属组、用户名、用户密码、用户真实姓名。2.相册信息：包括的数据项有：相册编号、相册类型、相册标题、相册描述、相册

37、创建日期、相册封面图片地址。3.评论信息：包括的数据项有：评论自动编号、评论分类、评论用户名、评论内容、评论提交日期、评论缩略图。4.留言信息：包括的数据项有：留言自动编号、留言回复内容、留言者昵称、留言内容、留言日期、留言者头像。5.内容信息：包括的数据项有：内容自动编号、内容分类、内容标题、内容、发布日期、内容缩略图。6.在线录音信息：包括的数据项有：自动编号、音频类型、音频提供者、音频标题、超链接地址。7.图片信息：包括的数据项有：自动编号、图片分类、图片标题、图片描述、发布日期、图片地址。8.网站配置：包括的数据项有：配置编号、配置类型、配置内容。有了上面的数据结构、数据项和数据流程，

38、我们就能进行下节的数据库设计。3.3.2 数据库概念设计以及创建表结构根据上节的数据项和数据结构，可以设计出能够满足用户需求的各种实体以及它们之间的关系，为后面的逻辑结构设计打下基础。这些实体包含各种具体信息，通过相互之间的作用形成数据的流动。根据上面的设计规划出的实体有：用户信息实体、相册信息实体、评论信息实体、留言信息实体、内容信息实体、在线录音信息实体、图片信息实体和网站配置实体。根据实体信息创建如下表结构和存储过程。1.用户信息表 tb_admin，如表 3-4 所示。表 3-4 用户信息表字段名数据类型字段说明备注idint（10）用户 ID主键（自动增1）usertypefloat

39、用户类型不允许为空useridchar（30）用户登录名不允许为空pwdchar（30）登录密码不允许为空tnamechar（20）用户真实姓名允许为空2.相册信息表 tb_album，如表 3-5 所示。表 3-5 相册信息表字段名数据类型字段说明备注album_idint（10）相册 ID主键(自动增1)album_typevarchar（20）相册类型不允许为空album_titlevarchar（30）相册标题不允许为空album_contenttext相册描述不允许为空album_datevarchar（20）创建日期不允许为空album_imgvarchar（30）封面图片允许为空

40、3.评论表 tb_comment，如表 3-6 所示。表 3-6 评论表字段名数据类型字段说明备注com_idint（10）评论 ID主键（自动增1）com_typevarchar（20）评论分类不允许为空com_uservarchar（30）评论用户名不允许为空com_contenttext评论内容不允许为空com_datevarchar（20）评论日期不允许为空com_imgvarchar（30）用户头像允许为空4.留言信息表 tb_leavewords，如表 3-7 所示。表 3-7 留言信息表字段名数据类型字段说明备注lea_idint（10）员工编号主键（自动增1）lea_reply

41、varchar（50）员工姓名不允许为空lea_uservarchar(30)留言者昵称不允许为空lea_contenttext留言内容不允许为空lea_datevarchar(20)留言日期不允许为空lae_imgvarchar(30)留言者头像允许为空5.教学内容表 tb_log，如表 3-8 所示。表 3-8 教学内容表字段数据类型字段说明备注log_idInt(10)内容 ID主键（自动增 1）log_typevarchar(20)类型不允许为空log_titlevarchar(50)标题不允许为空log_contenttext内容不允许为空log_datevarchar(20)文档修

42、改时间不允许为空log_imgvarchar(30)缩略图地址允许为空6.在线录音 tb_muisc，如表 3-9 所示。 表 3-9 在线录音表字段名数据类型字段说明备注music_idint(10)录音 ID主键（自动增1）music_typevarchar(20)音频分类不允许为空music_namevarchar(30)音频标题不允许为空music_playervarchar（30）音频提供者允许为空music_urlvarchar(100)音频链接地址不允许为空music_datevarchar（20）音频发布日期不允许为空music_imgvarchar(30)音频缩略图允许为空7

43、.教学图片 tb_photo，如表 3-10 所示。表 3-10 教学图片表字段名数据类型字段说明备注photo_idint(10)图片 ID主键（自动增1）photo_typevarchar(20)图片分类不允许为空photo_titlevarchar(30)图片标题允许为空photo_contenttext图片描述允许为空photo_datevarchar(20)图片发布日期不允许为空photo_imgvarchar(30)图片超链接地址不允许为空8.网站配置 tb_statistical，如表 3-11 所示。表 3-11 网站配置表字段名数据类型字段说明备注sta_idint(10)配

44、置 ID主键（自动增1）sta_typevarchar(20)配置类型不允许为空sta_contentvarchar(200)配置内容不允许为空4 系统实现4.2 主要前台功能模块4.2.1 教学内容模块访问者进入页面后，选择教学内容栏目，就会进入该栏目栏目中显示所有内容的前十条，如图 4-2 所示。图 4-2 教学内容访问者可以选择“首页” 、 “末页” 、 “上一页” ， “下一页”访问。显示及翻页效果实现代码如下7：private function init():void allcount=this.parentApplication.doc.xmlinit.data.init.log_

45、count as int;maxNum=allcount/10;/页数pageNum=0;pagesize=10;/每页显示的条目数type=log;/默认显示教学内容中的内容private function pageBtnClick(i:int):void /翻页操作的各种情况switch(i)case 0:pageNum=0;this.parentApplication.doc.doRequest(type,pageNum.toString(),pagesize.toString();break;case 1:if(pageNum!=0) pageNum-;this.parentAppli

46、cation.doc.doRequest(type,(pageNum*pagesize).toString(),pagesize.toString();break;case 2:if(pageNum!=maxNum) pageNum+;this.parentApplication.doc.doRequest(type,(pageNum*pagesize).toString(),pagesize.toString();break;case 3:pageNum=maxNum;this.parentApplication.doc.doRequest(type,(pageNum*pagesize).t

47、oString(),pagesize.toString();break;4.2.2 搜索模块搜索功能可实现按分类搜索、按关键词搜索。在下拉框中出现下拉框（ComBox）中可下拉显示所有分类，点击“搜索”按钮可分页显示该栏目内所有内容；在文本框（TextArea）中输入关键词，点击“搜索”按钮可分页与该关键词相匹配的所有内容。如图 4-3 4-4所示：图 4-3 按分类搜索图 4-4 按关键词搜索4.2.3 师生交流模块师生交流模块可分页显示所有留言内容及管理人员的回复内容，留言内容经过管理员审核后才能显示。点击“发表留言”按钮，可弹出窗口，访问者按要求（昵称不能为空，留言内容不能为空）填写留言

48、内容即可发表留言5。如图 4-5 4-6 所示：图 4-5 查看留言及回复内容图 4-6 留言操作4.2.4 教学图片模块进入教学图片分类后，显示现有图片分类数目、共有图片数、分类名称及描述，用户选择分类图片内容，进入该分类后，以电子相册的形式显示该分类下的所有图片，用户可通过左右按钮浏览上一张及下一张图片，查看当前图片时，会显示该图片的标题及描述内容。如图 4-7 4-8 所示：图 4-7 教学图片分类显示图 4-8 查看分类图片信息电子相册方式显示显示图片效果主要代码如下4：if (frameThickness 0) /形成相框var g:Graphics = graphics;g.cle

49、ar();g.lineStyle(frameThickness, frameColor, 1);/左上角g.moveTo(0, frameSize);g.lineTo(0, 0);g.lineTo(frameSize, 0);/左下角g.moveTo(0, unscaledHeight - frameSize);g.lineTo(0, unscaledHeight);g.lineTo(frameSize, unscaledHeight);/右上角g.moveTo(unscaledWidth - frameSize, 0);g.lineTo(unscaledWidth, 0);g.lineTo(

50、unscaledWidth, frameSize);/右下角g.moveTo(unscaledWidth, unscaledHeight - frameSize);g.lineTo(unscaledWidth, unscaledHeight);g.lineTo(unscaledWidth - frameSize, unscaledHeight);4.2.5 导航功能模块导航菜单用于显示网站的各个栏目，显示方式为动态调用系统设置，管理员可在后台修改各个栏目的名称及显示方式，鼠标放到栏目图标上后会有发光效果。效果如图 4-9 所示：图 4-9 导航菜单界面主要实现代码如下5：private fun

51、ction loading(event:ModuleEvent):void trace(已加载+Math.round(event.bytesLoaded * 100 / event.bytesTotal) + % );this.myBar.setProgress(event.bytesLoaded, event.bytesTotal);myBar.label=已加载+Math.round(event.bytesLoaded * 100 / event.bytesTotal) + %;private function removePop(event:Event):void/清除PopUpMana

52、ger.removePopUp(myBar);private function popWin(event:Event):void /弹出myBar=new ProgressBar();myBar= PopUpManager.createPopUp(myViewStack, ProgressBar, false) as ProgressBar; PopUpManager.centerPopUp(myBar);4.3 后台管理模块4.3.1 后台登录模块管理员进入登录页面，除输入账号密码外还需输入验证码，验证码采用图片随机生成，有效的预防黑客程序使用暴力破解账号密码。当有信息出错时，系统提示用户名

53、或密码或验证码错误。效果如图 4-10 所示：图 4-10 后台管理登录界面生成验证码原理9：首先用 PHP 获取到当前时间戳，并产生一个随机数字的种子，将二者结合变成新的随机数，通过十六进制转换的方式将随机数转换成大写英文字母，作为验证码。然后将验证码保存到 session 中，PHP 调用 GD 库加上干扰噪点将验证码生成图像。如果用户输入的验证码跟 session 相同，则验证通过；若点击“看不清楚” ，则重新生成随机数，重新生成验证码。主要代码如下10：$ = jQuery;/调用 jQuery 声明function changeAuthCode() /根据时间生成随机验证码var n

54、um = new Date().getTime();var rand = Math.round(Math.random() * 10000);num = num + rand;$(#ver_code).css(visibility,visible);if ($(#vdimgck)0) /如果点击“看不清楚” ，再次生成验证码$(#vdimgck)0.src = ./include/vdimgck.php?tag= + num;return false; 4.3.2 系统配置模块系统管理员进入后台页面后，默认进入系统配置页面，默认页面显示各项管理菜单、当前用户级别等信息，系统配置页面中可设置网站

55、栏目分类、网站名、课程介绍、查看系统环境等。界面效果如图 4-11 所示：4.3.3 菜单导航模块导航菜单使用 jQuery 框架调用各个栏目，左侧菜单跟顶部菜单关联。选择顶部菜单项后，左侧自动与之关联，并跳转到管理页面8。界面效果如图 4-12 所示：图 4-11 后台管理默认界面图 4-12 后台管理默认界面菜单关联主要代码如下：function closemenu()var obj = document.getElementById(menu);obj.style.display = none;var obj2 = document.getElementById(menubg);obj2

56、.style.display = none;removeEvent(document,mousedown,doc_mousedown);top.main.showselect();function toguide(id,t)closemenu();initguide(id,t);return false;function doc_mousedown(e)var e = is_ie ? event: e;obj= document.getElementById(menu);_x= is_ie ? e.x : e.pageX;_y= is_ie ? e.y + ietruebody().scrol

57、lTop : e.pageY;_x1 = obj.offsetLeft;_x2 = obj.offsetLeft + obj.offsetWidth;_y1 = obj.offsetTop - 20;_y2 = obj.offsetTop + obj.offsetHeight;if(_x_x2 | _y_y2) closemenu();4.3.4 PHP 生成 XML 模块前台 Flex 调用数据，主要是通过 PHP 与 ZendAMF 通讯生成 XML 格式数据或数组传值，PHP 程序连接数据库的不同表，按照不同的版块生成相应格式的数据传值到前台页面中。PHP 生成 XML 格式数据主要代码

58、如下7：header(Content-Type: text/xml);/声明数据类型为 XML$xml=;require_once(dirname(_FILE_)./common.inc.php); /引用配置页面$query = SELECT * FROM tb_comment ORDER BY com_id DESC LIMIT $num1,$num2;$dsql-Execute(a, $query);/执行 SQL 语句while($row = $dsql-GetArray(a)/将获取的数组转换为 XML 格式$xml .= n;$xml .= .$rowcom_user.n;$xml

59、 .= .$rowcom_content.n;$xml .= n;5 系统测试5.1 测试基本要求5.1.1 浏览器兼容性测试111. 在不同浏览器中检查前台及后台页面的布局，检查是否完整；2. 检查有无被覆盖的文字、图片或其他显示对象；3. 检查有无超出边界范围的控件；4. 通读页面上所有文字，检查有无错字、漏字、拼写错误；5. 在数据库中插入大量数据，检查不同浏览器中翻页效果是否正常；6. 使用不同版本 Flash 插件，检查是否都能够兼容；7. 尝试在非 Windows 操作系统中访问程序。5.1.2 后台安全性测试1. 后台登录页面输入非正常用户名密码、验证码；2. 尝试暴力破解工具，

60、看是否能够接受；3. 直接访问后台管理页面，查看是否能够跳过验证直接访问；4. 访问前台页面或后台程序被框架页面包含的页面，看是否有跳转；5. 检查后台页面上的所有链接，检查连接是否可正常跳转，连接到的页面正确性。5.1.3 易用性测试1. 导航是否方便、简明；2. 操作是否简单、方便；3. 页面中涉及到的文字，语言是否明白易懂；4. 各项提示、信息是否有他意；5. 用户是否总是可以知道自己所处的位置；6. 用户是否总是可以知道系统当前的状态；7. 当输入错误时是否清楚地表示出错误的信息等一切认为可以不方便使用而可进一步改进的地方；8. 在必填区域中输出非匹配选项，是否有相应提示；9. 只要可