《毕业设计（论文）《网页脚本编程》 教学网站系统设计javascript编程教学网站.doc》由会员分享，可在线阅读，更多相关《毕业设计（论文）《网页脚本编程》 教学网站系统设计javascript编程教学网站.doc（36页珍藏版）》请在三一办公上搜索。
1、分类号 密级 UDC 编号 广州大学华软软件学院专科毕业论文论文题目：网页脚本编程 教学网站系统设计javascript编程教学网站学 号： 姓 名： 专 业： 互联网信息软件开发 指 导 教 师： 【摘要】网络教学的优点就是能够随时随地都能够学习到专业知识，只要能够上网就可以了，方便快捷，不拘束于地点和时间，能在网站上学到自己需要的只是，有什么问题都能在网站上提问和得到答复，不需要专门找老师和同学。所以能够提高学习的兴趣和效率，在现在教育中尤其重要。而且该网站操作简便，安全可靠，功能完善。本论文主要是阐述javascript编程教学网站系统的设计和开发过程以及技术。该系统分为前台和后台的设计
2、。前台是用来查看信息，后台是对前台信息的管理。本人主要是负责用ASP技术设计后台系统以及数据库Access的建立。后台系统主要是用Dreamweaver工具制作，其中包括主要的网站配置管理，课程管理，下载管理，考试管理，留言管理等。由于时间和能力的问题，网站后台系统可能存在一定的瑕疵，希望老师能够见谅，本人已经尽了最大的能力和精力去制作了。【关键字】课程教学，用户管理，考试系统，asp技术，数据库ABSTRACT The network teaching advantages is anytime anywhere can learn professional knowledge just t
3、o be able to get online is ok, convenient and quick, playful in place and time, can go to school to himself in the website need is, have what problem can in the website to question and get an answer, does not need special find teachers and classmates. So can improve the learning interest and efficie
4、ncy and in the education of now is particularly important. And this site easy operation, safe and reliable, perfect function. This thesis mainly is to explain the javascript programming teaching website system design and development process and technology. This system is divided into front desk and
5、background design. Front desk is used to check information, backstage to front desk is information management. I mainly responsible for using ASP technology to design the background system and the establishment of database Access. Backend system is mainly made in Dreamweaver tools, including main we
6、b site configuration management, course management, download management, the exam management, guestbook management, etc. Because of the time and the problem of a faculty website backstage system, there may exist certain flaws, hope the teacher can excuse me, I have been best ability and effort to ma
7、king. Keywords: Course teaching, user management, the test system, asp technology, database目录第一章 前言5第二章 网站开发背景及相关理论知识介绍71.1动态网站开发背景介绍71.1.1网站开发环境71.1.2网站建设目标的管理可行性81.2 相关理论知识介绍及工具介绍81.2.1 ASP技术81.2.2 Html81.2.3 Access数据库9第三章 网站策划及主要功能93.1 网站总体规划93.1.1网站的定位93.1.2 网站的内容建设103.1.3 网站的设计原则103.2 主要功能10注销退
8、出：退出后台，进入前台。10第四章 网站制作流程图113.3 后台流程图113.3.1后台管理流程图(如下图1)：11图1 后台流程113.3.2 课程管理流程图(如下图2)：112.3.3 资源下载流程图(如下图3)：122.3.4 考试管理流程图 (如下图4)：122.3.5 留言管理流程图(如下图5)：122.3.6 会员管理流程图(如下图6)：132.3.7 公告管理流程图(如下图7)：13第五章 数据库设计145.1 Microsoft Office Access简介145.2 数据库概念结构设计145.3 系统处理流程185.4 数据库创建195.5 数据库结构及实现20第六章 系
9、统功能实现和制作246.1 系统功能模块分析246.2公共管理模块的实现工程246.2.1创建数据库连接246.2.2 CSS样式表文件设计256.3 后台首页设计256.4 后台信息模块266.4.1 登录验证页面设计266.4.2 课程管理页面设计266.4.3 下载管理页面设计326.4.4 管理页面设计346.4.5 会员管理页面设计366.4.6 考试管理页面设计386.4.7 公告管理页面设计416.4.8 投票管理页面设计42第七章 系统安全447.1 系统安全措施447.1.1 登陆验证码功能447.1.2 MD5 加密功能的实现447.1.3 限制对页的访问44第一章 前言就
10、以华软为例，华软每个系都有老师的资源能够进行共享，但是分的比较散，但是如果说想学javascript编程就要在该系的老师FTP中寻找课件等，而且不知道有哪些老师是教这门课程，所以寻找起来就有点麻烦。所以我觉得需要一个专门的网站，能够对课程，资源进行统一的管理和阅读，能够提供给学生对学习专门的知识提供更好的平台，方便和快捷，更能在该平台上下载所需的软件或者文件，减轻老师ftp空间不足的缺点。而且平台能够提供老师对学生的知识进行测试，试卷的内容能随时在后台更新，而且阅卷和评测的成绩能够即时统计并保存在后台，能够减轻老师的工作压力，方便老师掌握每个学生成绩和能力，也让学生能够清楚所学的知识是否牢固，
11、那些方面需要加强。很多时候老师要问老师问题都要到老师办公室去，而且有时候老师还不在办公室，所以说比较麻烦。本平台提供了留言系统，对学生在该平台上的留言，老师能够在空闲时期在后台进行回复解答，能够很好的解决交流的问题。第二章 网站开发背景及相关理论知识介绍1.1动态网站开发背景介绍Internet起源于20世纪60年代的美国，它在近几年迅速风靡全球，其根本原因不仅在于她拥有卓越的国际通信功能，更在于它拥有巨大的信息资源。所谓的Internet是指由分布在全世界成千上万的计算机网络遵循一定的通讯协议，并相互联系在一起而形成的国际互连网络，也就是说，Internet是建立和使用这些网络的人群、群体、
12、公司以及各种网络资源的集合体。随着网络技术的不断发展，单纯的静态页面已经不能满足发展的需要，因为静态页面是用单纯的HTML语言组成的，它没有交互性。因此，为了满足实际的需要，许多网页文件扩展名不再只是“htm”、“html”，出现了以“php”、“asp”、“jsp”、“shtml”等为后缀的动态网页文件。1.1.1网站开发环境1 软件环境 操作系统：Windows xp WEB服务器：IIS 5.1 数据库：Microsoft Office Access 开发软件：Dreamweaver CS3 Photoshop cs4 2 硬件环境 处理器：Intel(R) Pentium(R) Dua
13、l CPU E2180 2.00GHz 内存：金士顿 DDR2 800MHz 2GB 硬盘：希捷 ST3250310AS （250GB） 显卡：Nvidia Geforce 9600 GT （512MB） 显示器：三星 SAM036F SyncMaster （19.1英寸）1.1.2网站建设目标的管理可行性对于用户来说，本系统只要求使用者掌握一定的上网经验，经过仔细设计和测试之后的系统具有操作简单，方便灵活等优点，足可以满足各种用户的不同需求，同时也方便了管理人员的内部管理。管理人员及用户一定会在短时间内掌握并熟练使用。只要动一动鼠标键盘就可以达到想要的效果1.2 相关理论知识介绍及工具介绍1
14、.2.1 ASP技术Active Server Pages：“动态服务器网页”，一般简称为“ASP”，ASP之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的HTML格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE 或Netscape）都可以正确地获得ASP的“执行”结果，并且将这ASP执行的结果直接在浏览器中“浏览”。 ASP的程序比HTML更方便而更富有灵活性.是在Web服务器端运行,运行后再将运行结果以HTML格式传送至客户端的浏览器。因此ASP与一般的脚本语言相比要安全得多。ASP最大的好处就是可以包含HTML标签,也可以直接存取数据库及使用无限扩充
15、的ActiveX控件,用户可以直接使用ActiveX控件,调用对象方法和属性,以简单的方式实现强大的交互功能。但ASP技术也并非完美无缺,由于它基本上是局限于微软的操作系统平台,主要的工作环境是微软的IIS应用程序结构,又因ActiveX对象具有平台特性,所以ASP技术要实现在跨平台Web服务器上工作,不是很容易。在ASP的程序开发中,它所用的脚本语言是JavaScript和VBScript,在默认情况下使用的是VBscript,它是VB程序设计语言的一个子集,语法与VB基本相同。ASP中的ADO对象用来执行与数据库相关的操作,ADO再以OLEDB或ODBC的方式访问数据库。1.2.2 Htm
16、lHTML（Hyper Text Markup Language 超文本标记语言）是一种用来制作超文本文档的简单标记语言。与常见的字处理文件不同,Web页以超文本标识语言编排格式。HTML文件是带有特定HTML插入标记的用以编排文档属性和格式的标准文本文件。它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web上的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有. html或. htm的文件
17、扩展名。生成一个HTML文档主要有以下三种途径：1) 手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它HTML编辑工具）。 2) 通过某些格式转换工具将现有的其它格式文档（如WORD文档）转成HTML文档。3) 由Web服务器（或称HTTP 服务器）一方实时动态地生成。在一个HTML网页文件中，一般必须有一对html标记作为文件的开头和结尾，在标记后是头部标记,其后是实体标记1.2.3 Access数据库完善地管理各种数据库对象，具有强大的数据组织、用户管理、安全检查等功能。强大的数据处理功能，在一个工作组级别的网络环境中，使用Access开发的多用户数据库管理系统具有传统的XBASE
18、(DBASE、FoxBASE的统称)数据库系统所无法实现的客户服务器(Cient/Server)结构和相应的数据库安全机制，Access具备了许多先进的大型数据库管理系统所具备的特征，如事务处理/出错回滚能力等。可以方便地生成各种数据对象，利用存储的数据建立窗体和报表，可视性好。作为Office套件的一部分，可以与Office集成，实现无缝连接。能够利用Web检索和发布数据，实现与Internet的连接。 Access主要适用于中小型应用系统，或作为客户机/服务器系统中的客户端数据库。第三章 网站策划及主要功能3.1 网站总体规划3.1.1网站的定位Javascript教学网站是提供给华软网络
19、技术系的网站，是面向给华软软件学院的师生而设立的，它将为网络系提供一个信息资源集散地，所以它的性质是为华软网络系提供关于javascript编程的课程教学和资源享用，师生交流的服务性平台的网站。3.1.2 网站的内容建设网站最基本主要分为前台的页面制作、后台的编程两个部分，本人主要负责前台的制作，前台主要的版块为课程教学，资源下载，在线测试，留言，会员登录等等。前台的功能方面，课程教学主要是提供关于javascript的内容教学，资源下载主要是提供给用户下载关于javascript学习的平台和应用软件，在线测试主要是提供给用户进行关于javascript编程的测试，了解自己对于该课程的熟悉和掌
20、握程度，留言主要是提供给用户对该网站建议或者对一些疑问所设立的一个交流平台。3.1.3 网站的设计原则实用性：网站前台系统能够展示各个栏目和界面，而且满足javascript教学网站的需求。方便性：前台系统操作简单方便，功能强大，后台界面简洁美观。安全性：前台系统能够防止非法用户的入侵，防止数据丢失，安全可靠。可靠性：前台系统能稳定运行，不会产生乱码或其他错误。智能性：减少维护员对代码的更改，做到不需要更改代码就可以实现全部功能。3.2 主要功能以下是具体的前台主要功能：前台首页：展示各个栏目的标题及界面。课程教学：提供关于javascript的内容教学，方便学生的学习。在线测试：给用户进行关
21、于javascript编程的测试，了解自己对于该课程的熟悉和掌握程度资源下载：给用户下载关于javascript学习和制作的平台和应用软件。投票管理：能够对前台的投票系统内容进行修改，添加，删除等。会员登录：提供给用户进行登录，用于留言或者在线测试。留言：给用户对该网站建议或者对一些疑问所设立的一个交流平台公告：在前台显示的公告内容。第四章 数据库设计4.1 Microsoft Office Access简介Microsoft Office Access（前名 Microsoft Access）是由微软发布的关联式数据库管理系统。它结合了 Microsoft Jet Database Engi
22、ne 和 图形用户界面两项特点，是 Microsoft Office的成员之一。有以下优点：(1)存储方式简单，易于维护管理。(2)面向对象 Access是一个面向对象的开发工具，利用面向对象的方式将数据库系统中的各种功能对象化，将数据库管理的各种功能封装在各类对象中。(3）界面友好、易操作。(4)集成环境、处理多种数据信息。(5)Access支持ODBC（开发数据库互连，Open Data Base Connectivity），利用Access强大的DDE（动态数据交换）和OLE（对象的联接和嵌入）特性，可以在一个数据表中嵌入位图、声音、Excel表格、Word文档，还可以建立动态的数据库报
23、表和窗体等。(6)支持广泛，易于扩展，弹性较大。4.2 数据库概念结构设计建设网站少不了数据库的支持，一个好的数据库能够大大提高网站运行效率和开发效率，所以建设网站前要做好数据库的概念结构设计，数据库概念结构需要建立局部ER图，根据全部的局部ER图创建数据库。(1)网站配置(config) 实体E-R图图3-1 网站配置(config) 实体E-R图 上图是网站配置实体E-R图，E-R图是“实体关系图”，该图意思是：网站配置为实体，其中有编号，网站名称，域名，客服QQ,网站邮箱，网站电话，传真，网站地址，邮编号，手机号，管理员帐号，管理员密码。转换为数据库逻辑模型为：网站配置（编号，网站名称，
24、域名,客服QQ,网站邮箱，网站电话，传真，网站地址，邮编号，手机号，管理员帐号，管理员密码）。(2)课程信息(doc) 实体E-R图图3-2 课程信息(doc) 实体E-R图 上图是网站课程信息 实体E-R图，E-R图是“实体关系图”，该图意思是：课程为实体,其中有编号，标题，内容，发表时间，来源，作者，浏览数，所属分类，关键字。转换为数据库逻辑模型为：课程(编号，标题，内容，发表时间，来源，作者，浏览数，所属分类，关键字)。 (3)资源下载(down) 实体E-R图 图3-3资源下载(down) 实体E-R图上图是资源下载 实体E-R图，E-R图是“实体关系图”，该图意思是：资源下载为实体，
25、其中有编号，资源名称，资源网址，程序版本，资源大小，下载说明，语言，授权方式，评价等级，是否为会员，下载数。转换为数据库逻辑模型为：资源下载（编号，资源名称，资源网址，程序版本，资源大小，下载说明，语言，授权方式，评价等级，是否为会员，下载数）。(4)公告(gonggao) 实体E-R图图3-4公告(gonggao) 实体E-R图上图是公告 实体E-R图，E-R图是“实体关系图”，该图意思是：公告为实体，其中有编号，公告名称，公告内容，添加时间，添加人员。转换为数据库逻辑模型为：公告（编号，公告名称，公告内容，添加时间，添加人员）。 (5)用户留言(ly) 实体E-R图图3-5用户留言(ly)
26、 实体E-R图上图是用户留言 实体E-R图，E-R图是“实体关系图”，该图意思是：用户留言为实体，其中有编号，留言标题，留言内容，留言时间，留言会员，回复内容，回复时间，留言审核。转换为数据库逻辑模型为：用户留言（编号，留言标题，留言内容，留言时间，留言会员，回复内容，回复时间，留言审核）。(6)测试章节(testsubject) 实体E-R图图3-6测试章节(testsubject) 实体E-R图上图是测试章节 实体E-R图，E-R图是“实体关系图”，该图意思是：测试章节为实体，其中有编号，测试章节，章节说明。转换为数据库逻辑模型为：测试章节(编号，测试章节，章节说明)。 (7)题目测试(t
27、esttopic) 实体E-R图图3-7题目测试(testtopic) 实体E-R图上图是测试题目 实体E-R图，E-R图是“实体关系图”，该图意思是：测试题目为实体，其中有编号，所属章节，试题类型，题目描述，选项1，选项2，选项3，选项4，选项5，题目分值，答案。转换为数据库逻辑模型为：测试题目（编号，所属章节，试题类型，题目描述，选项1，选项2，选项3，选项4，选项5，题目分值，答案）。 (8)用户测试信息(testinfo) 实体E-R图图3-8用户测试信息(testinfo) 实体E-R图上图是用户测试信息 实体E-R图，E-R图是“实体关系图”，该图意思是：用户测试信息为实体，其中有
28、编号，用户登陆名，用户密码，题目测试章节，测试得分，测试时间。转换为数据库逻辑模型为：用户测试信息（编号，用户登陆名，用户密码，题目测试章节，测试得分，测试时间）。 (9)投票系统(vote) 实体E-R图图3.9投票系统(vote) 实体E-R图上图是投票 实体E-R图，E-R图是“实体关系图”，该图意思是：投票为实体，其中有编号，投票标题，投票内容1，投票内容2，投票内容3，投票内容1票数，投票内容2票数，投票内容3票数。转换为数据库逻辑模型为：投票（编号，投票标题，投票内容1，投票内容2，投票内容3，投票内容1票数，投票内容2票数，投票内容3票数）。(10)会员(zchy) 实体E-R图
29、图3.10会员(zchy) 实体E-R图上图是会员 实体E-R图，E-R图是“实体关系图”，该图意思是：会员为实体，其中有编号，会员名称，会员密码，联系号码，注册日期，QQ号码，邮箱，是否会员。转换为数据库逻辑模型为：会员（编号，会员名称，会员密码，联系号码，注册日期，QQ号码，邮箱，是否会员）。4.3 系统处理流程通过以上的E-R图，我把它们综合成全局概念结构，可以得出一个系统处理流程图，系统处理流程不仅要支持所有局部ER模式，而且必须合理地表示一个完整、一致的数据库概念结管理员账号管理员登录登录标志信息管理员表态网站动态内容（管理）请求数据库内容底层数据库返回内容图1系统处理流程图构。如图
30、1 4.4 数据库创建本后台的系统使用Microsoft Office Access来储存数据，数据库名称为teach.mdb（如图1）,其中包括11条数据表，其中包括config(网站配置表),doc（课程表）,down（资源下载表），gonggao(公告表)，lm(栏目表)，ly(留言表)，testinfo(用户测试)，testsubject(测试章节)，testtopic(测试题目)，voto(投票表)，zchy(用户表。（如图2）图1图24.5 数据库结构及实现根据系统的基本架构可以设计出数据库的结构类型。创建config表，用来存储网站的基本配置信息，比如管理员用户名及密码等等。如下
31、图图3创建doc表，用来存储网站的课程内容等。如下图图4创建down表，用来存储网站的资源以供下载。如下图图5创建gonggao表，用来存储网站的在前台显示的公告内容等。如下图图6创建lm表，用来存储网站在前台显示的栏目名称等。如下图图7创建ly表，用来存储网站在前台显示的用户ly信息等内容。如下图图8创建testinfo表，用来保存与用户测试相关的信息。如下图图9创建testsubject表，该表存储测试的章节等信息。如下图图10创建testtopic表，该表保存测试题目的详细信息。如下图图11创建vote表，该表保存投票的信息。如下图图12创建zchy表，该表用来存储注册用户信息等。如下图
32、图13第五章 系统功能实现和制作5.1 系统功能模块分析Javascript编程教学网站后台系统主要为前台模块。功能为下。前台模块：前台首页：展示各个栏目的标题及界面。课程教学：提供关于javascript的内容教学，方便学生的学习。在线测试：给用户进行关于javascript编程的测试，了解自己对于该课程的熟悉和掌握程度资源下载：给用户下载关于javascript学习和制作的平台和应用软件。投票管理：能够对前台的投票系统内容进行修改，添加，删除等。会员登录：提供给用户进行登录，用于留言或者在线测试。留言：给用户对该网站建议或者对一些疑问所设立的一个交流平台公告：在前台显示的公告内容。5.2公
33、共管理模块的实现工程在开发动态网站时，可以将常用的程序模块放置在一个文件中，需要使用该功能的网页直接调用该文件即可。这样，既可以提高对代码的重用性又便于对代码进行维护，在编程过程中可以起到事半功倍的效果。5.2.1创建数据库连接创建数据库连接是指通过指定的连接方式与数据库建立连接，以保证对数据库的正常操作。下面是本网站用到的ASP连接SQL Server数据库的代码。在网站中，需要连接数据库的其他网页可以通过#include指令包含此asp文件，即可建立数据库连接，代码如下：5.2.2 CSS样式表文件设计CSS层叠样式表是一种简单、灵活、易学的工具，可使任何浏览器都听从指令、知道该如何显示元
34、素及其内容。掌握CSS样式表不仅能更好、更快地完成网页设计使页面具有动态效果，还有助于统一网站的整体风格。在网页中通过标记可以引用CSS样式表文件，代码如下：前台页面css代码：通过上述设置，就完成了页面和超连接这两个最重要的CSS设置。也就完成了一个简单的CSS文件创建。这个CSS文件将在本程序的大部分网页中进行加载。如在和中使用。5.3 前台首页设计前台首页设计由logo，广告图片，栏目导航，公告设计，会员登录及栏目标题及版权信息等组成的首页模块。如图1所示：以上为图1所示前台首页能够提供栏目导航，如课程教学，资源下载，在线测试，留言等以及显示最新的公告内容，提供给会员登录前台，还有列出比
35、较热门的javascript课程标题提供点击阅读以及软件下载等等。界面比较清晰整洁，使人感到比较清新。5.4 整体页面设计5.4.1 会员登录面板 主要功能是进行会员的注册和登录，通过注册会员，就可以在前台页面进行在线测试及留言，并且可以查看在线测试的成绩以及留言的内容。（1）会员注册：提供给新会员进行注册。注册界面如下：图1会员注册主要是向数据库表zchy(会员管理表)中插入数据，通过成功插入数据完成注册。（2）会员登录：提供给完成注册的用户进行登录，如下 图2 MM_fldUserAuthorization = MM_redirectLoginSuccess = index.sp MM_r
36、edirectLoginFailed = loginerr.html如果登录成功，转到首页，如果登录失败，则转到loginerr.html“登录错误”提示的页面。（3）登录成功页面：在登录页面输入正确的用户名和密码后，将跳转到loginok.asp，成功登录的用户可以修改注册的资料，可以查看自己的留言，查看自己的测试成绩等等。如下图图3主要代码如下： Set loginok_cmd = Server.CreateObject (ADODB.Command)loginok_cmd.ActiveConnection = MM_connjx_STRINGloginok_cmd.CommandText
37、 = SELECT * FROM zchy WHERE hymc = ? loginok_cmd.Prepared = true表示记录集会根据当前登录的用户名称，在数据库的“zchy”表中进行相应记录的提取。5.4.2 课程教学(1) 课程列表点击前台首页的课程教学栏目，就会跳转到课程列表的页面，该页面主要是列出关于javascript课程的所有标题，以供用户进行点击。如下图：图4主要代码如下：% While (downlb_numRows 0) AND (NOT doclb.EOF) % a href=docxx.asp?id=&sslm=( ) 通过建立记录集doclb,从doc
38、表格中筛选出对应相同sslm的各个id所对应的标题，阅览数，建立日期等等。(2) 课程内容点击课程列表的标题，就会跳转到课程内容页面，以供用户进行浏览阅读，从而学到所需的javascript编程的知识。如下图图5主要代码：该页面主要是展示课程的内容，课程来源，作者，浏览数等，主要是通过从doc表中调用，另外也可以浏览上一篇或者下一篇的课程内容，方便用户的需求。5.4.3 资源下载(1) 资源下载列表列出各种下载资源的标题，方便用户进行浏览点击，制作过程和课程列表类似，不过资源下载列表另外增加了资源简介。如下图图6主要代码如下：% While (downlb_numRows 0) AND (NOT downlb.EOF) %a href=downxx.asp?id= 下载数: 主要是从down表调用资源名称，资源简介，资源下载数。（2）下载内容 具体介绍要下载的资源，让用户能够了解要下载的资源的类别，大小，等级，下载地址等等。如下图图7 主要代码： 抱歉!这是VIP资源!请登录后下载! a href=普通下载% ElseIf (dow
