实验教学网站的设计与实现论文.doc

1、本科生毕业论文题 目：实验教学网站的设计与实现 论文题目：实验教学网站的设计与实现 摘要：随着网络的迅速发展，网络应用于教学，利用教学网站进行学习已成为一种流行趋势。但是目前，教学网站存在资源匮乏、检索困难等种种问题。因此，有必要设计与开发一个内容丰富、功能齐全的实验教学网站，为学生营造一个自由的、互动的、体现专业特色的网上学习环境，以激发学生的学习兴趣，增强教学效果，提高课堂的教学质量，营造一个全新的网络教学环境。本文利用Dreamweaver开发软件设计与实现一个实验教学的动态网站。网站在MYSQL数据库的支撑下，包括利用PHP语言设计的“用户登录界面”；主要内容是PHP、C语言、Drea

2、mweaver三部分的实验教学内容（内容不断扩充中）。该网站在不断修改与完善后，并投入使用，大大的改变C语言、PHP、Dreamweaver实验的教学面貌，吸引众多的学生与教师广泛使用。 关键词：Dreamweaver；MySQL；PHP；实验教学网站；网站设计 Design and implementation of experiment teaching websiteChi YangAbstract： With the rapid development of the network, the network application in teaching, learning has b

3、ecome a popular trend to use teaching website.But at present, teaching website has a lot of problems that lack of resources and retrieval difficult.Therefore, it is necessary to design and develop a content rich, fully functional experiment teaching website, for students to create a free, interactiv

4、e, reflect the major characteristics of online learning environment, to stimulate students interest in learning, enhance the effectiveness of teaching, improve teaching quality of classroom, create a new network teaching environment. In this paper, use the software of Dreamweaver to design a dynamic

5、 teaching experiment website. With the support of MYSQL database , the site including a user login interface which use the PHP language designed ; the main three part of content is PHP, C language and Dreamweaver of the experimental teaching content (in the ever expanding). The site in the continuou

6、s modification and improvement, and put into use, must greatly change the C language, PHP, Dreamweaver experimental teaching appearance, and attract the students and teachers to widely used.Keywords: Dreamweaver；MySQL；PHP；Experiment teaching website；website design目 录1.绪论11.1 实验教学网站的研究背景与意义11.2教学网站的技

7、术实现21.2.1 软件选取21.2.2 WAMP与Dreamweaver版本的选择22.开发环境及工具介绍32.1 DREAMWEAVER简介32.2 PHP简介32.3 MySql数据库介绍43.网站概要设计53.1 实验教学网站的设计思路53.2 实验教学网站设计流程图64.网站的详细设计与实现74.1 网站首页的设计74.2 利用PHP设计与实现用户的登录或注册84.2.1功能实现84.2.2登录模块104.2.3注册模块124.3 网站基本内容的设计154.3.1 C语言教学部分154.3.2 PHP教学部分154.3.3 DREAMWEAVER教学部分164.4 最新公告板的设计与

8、实现164.5 用户留言板的设计与实现164.5.1 功能实现174.5.2 添加留言界面184.5.3 显示留言界面194.6管理员登录的设计与实现214.6.1 功能实现214.6.2 管理员登录页面224.6.3 管理首页面234.6.4 回复留言页面244.6.5 删除留言页面255.测试275.1功能测试275.1.1登录功能测试275.1.2注册功能测试285.1.3留言板功能测试295.2 性能测试305.3测试结论30总结31致谢32参考文献33word文档 可自由复制编辑实验教学网站的设计与实现1. 绪论1.1 实验教学网站的研究背景与意义 随着Internet的发展，网络被

9、越来越多的应用在教学过程中，国内外大量学校建立起实验教学网站，虽然其规模不一，大小不同，但都实现了“把课程内容带回家”，提高教师和学生的工作和学习效率。应用网络教学，已经成为当代教育教学的一个主要趋势。在当前的学校教育中，网络给教师和学生带来了很大的方便。但是，网络也有很多负面影响，一方面，网络诱惑较大。暴力、色情等不良信息充斥着网络，广大教师和学生家长也经常是谈网色变，而且不少学生以要在网上学习为借口整天沉迷于网络的虚拟世界，无心学习。另一方面，网络上学术性的资料太少，实验教学网站中的资源匮乏，而且很分散，较难搜索，也缺乏资源建设的统一标准。 教学网站是指基于网络、依据某种教学思想和教学目的

10、，利用现代的网络技术，按照教学特点建立起来的，具有教学资源上传、师生网上交流、学生自学、课后测试等教学功能的 Web 化的网络教学环境，具有学校、教师和学科鲜明教育教学特色和教学功能的网站系统。教学网站的目的在于培养学生利用信息技术的意识和能力，促进信息技术与学科课程的整合，逐步实现教学内容的呈现方式、教师的教学方式、学生的学习方式等几个方面的改革。 教学网站能够不受时间与空间的限制，让教师可以根据教育、教学的需要，将教学内容生动形象的呈现给学生，而学生也可以根据自己的实际情况，有选择地进行学习，以满足不同阶段的学习需要。1 网络上能够用于教学和学生开拓视野的资源太少，尤其对于一些专业性较强的

11、学科没有系统的网站，因此，设计与开发一个具有特色性、交互性、开放性、共享性等多种功能于一体的实验教学网站是十分必要的。 利用Dreamweaver开发软件制作一个在MYSQL数据库支撑，主要包含“C语言、PHP、Dreamweaver”的实验教学网站，本网站主要为学生在网上进行本课程的学习和网上互1张鑫. 基于Dreamweaver的教学网站设计J. 软件导刊（教育技术）,2009 (9):63-64动提供平台，用户可以在客户端方便的浏览教学网站上有关的信息（如教学课件、公告信息、资源信息等），通过实验大纲让学生知道实验教学的主要内容，通过网络资源方便找到该课程的相关资料，通过最新公告让学生清

12、楚知道接下来要完成的事，通过留言板学生可以提出自己的问题，管理员（教师）可以在后台对同学的问题做出回答，形成一种互动，提高师生之间的沟通和了解。网站可使知识的系统性、清晰性，且方便学生的自主学习。实现上述功能的实验教学网站是本论文的研究重点。1.2教学网站的技术实现1.2.1 软件选取 网站制作采用Dreamweaver软件，它具有可视化布局功能，支持HTLM、Flash等多种技术，且简单易学。后台数据库采用MYSQL开发工具。1.2.2 WAMP与Dreamweaver版本的选择利用数据库软件Wamp5中的phpMyAdmin直接创建网站所需数据库记录，具有简洁方便、一目了然的优点。Drea

13、mweaver选择Dreamweaver8版本，其版本最为稳定，功能也较为全面。Wamp5与Dreamweaver8能很好的结合使用，使开发动态网站更为方便。2. 开发环境及工具介绍2.1 DREAMWEAVER简介 Adobe Dreamweaver，简称“DW”，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。而且Dreamweaver软件简单易学，适合于制作网站的初学人员，也可在大学课堂中进行教授。 2.2 PHP简介 PHP 是

14、Hypertext Pre-Processor（超文本预处理器）的缩写，它是一种服务器端的HTML 脚本/编程语言。PHP 是一种简单的，面向对象的，解释型的，健壮的，安全的，性能非常之高的，独立于架构的，可移植的，动态的脚本语言。 PHP 作为一种工具，可以创建动态的 Web 页面，而且是完全免费的。应用 PHP 的网页与常规的 HTML 页面并无二致，可以用同样的方式来创建、编辑它们。PHP允许直接在 HTML 文件里写入简单的脚本，这一点与 Javas cript 非常相似。而不同的是，PHP 不依赖于浏览器，是服务器端的语言，而 Javas cript 却是一种客户端的嵌在 HTML

15、中的语言。PHP 不仅可以用来创建 Web 应用程序，也可以用来开发普通的单机应用程序。 PHP 的强劲之处在于： 开放源码； 广泛的数据库连接； 大量的扩展库； 应用广泛，在 Web， Internet， E-commerce 以及 B2B 等诸多项目上应用； 跨平台性，可以运行在任何地方，如Linux，Windows，95/98/NT/2000/XP ，Solaris，HPUX 以及各种 UNIX； PHP 具有面向对象特性，它吸收了 C/C+/Java/PERL 的精华。PHP 可以替代 PERL，Python， Java， C， C+， awk， Unix shell 脚本，Visua

16、l Basic和其它语言； PHP 比较容易使用，你可以用它在非常短的时间里，非常迅速的开发出非常复杂的 web，e-commerce 和一般的单机应用程序； 运行的速度快，可以使用 Zend Optimizer 对 PHP 进行编译和优化，从而使它运行的更快。PHP 比 Java 快 5 到 20 倍。2.3 MySql数据库介绍MySQL是一个小型关系型数据库管理系统，开发者为瑞典MySQL AB公司。在2008年1月16号被Sun公司收购。目前MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站

17、总体拥有成本而选择了MySQL作为网站数据库。Mysql和其它数据库的通用性：1） 数据库管理系统。我们知道，所谓的数据库就是一些结构化的数据的联合体，要提供对这些数据的存取、增加、修改、删除或更加复杂的数据抽取等操作，需要有一个支撑系统，这就是数据库管理系统（DBMS），MySQL完全具有这方面的功能。2） 关系型数据库管理系统。在数据库的发展历程中，曾出现过多种不同形式的数据库系统，但关系型数据库管理系统（RDBMS）以其优越性而被广为采用，象现在几种广泛使用的数据库全为关系型数据库。同样，MySQL也是关系型的数据库系统，支持标准的结构化查询语言（Structured Query Lan

18、guage）。3） 开放源码数据库。同商业性的数据库相比，这是MySQL最大的特点。MySQL的源码是公开的，这就意味着任何人，只要遵守GPL的规则都可以对MySQL的源码使用、修改以符合自己特殊的需求。 4） 技术特点。MySQL是C/S架构的服务器，服务器端是多线程的，为客户端提供了不同的程序接口和链接库，如C、C+、Java、Perl、PHP、Tcl等，也提供了简单的管理工具，如mysqladmin，mysql等。3.网站概要设计3.1 实验教学网站的设计思路 作为一个实验教学网站，首先呈现的是一个简洁、友好的主页，学习者输入用户名和密码即可进入系统学习，或者进行注册开始新的学习，并进行

19、一系列与学习相关的内容；教师可以进入系统进行留言的回复、删除等工作，能更好的与学习者进行互动。其次网站主要包括的内容是PHP、C语言、Dreamweaver，所以应详细的介绍着三部分的实验目的、实验注意事项、实验内容。最后，网站可以进行学生与教师的交互作用，有学生留言板和系统公告板等内容。利用PHP语言制作网站主页的登录、注册功能；利用Dreamweaver和数据库之间的连接，实现留言板的留言、回复与删除等工作。网站首页注册与登录课程学习学生端课后反馈留言板公告栏管理留言后台服务部分（教师端）3.2 实验教学网站设计流程图实验教学网站设计流程图MYSQL数据库作为支撑主要制作区主要工作是进行后

20、台管理并对学生留言进行处理主要内容是学习实验内容，查看最新系统公告、并对自己存在的问题留言反馈等。注册或登录教师端学生端新注册的用户信息存入MYSQL数据库中，登录用户的信息与数据库之中的信息相匹配，匹配成功的能成功登录。网站首页 4. 网站的详细设计与实现4.1 网站首页的设计 首页是一个网站成功与否的关键，设计一个好的网站首页，能吸引学生的注意力，让学生继续点击网站并进行学习。一个网站的首页应该简单、清晰明了、布局合理，这样才能有好的效果。网站首页设计图4.2 利用PHP设计与实现用户的登录或注册 登录与注册这两个模块包括的文件，如下表：中文名文件名说明登录页面Login.php用户登录页

21、面（主要包括两个文本框和一个按钮）登录成功页面Main.php用户登录成功页面登录失败页面failLogin.php用户登录失败页面注册界面Register.php用户注册界面（主要包括单个文本框和两个按钮）注册成功界面Regsuccess.php用户注册成功页面注册失败界面Regfail.php用户注册失败界面4.2.1功能实现 Dreamweaver8首先需要与数据库进行连接，并进行有效性验证，才可以对注册与登录的用户合法性进行检验。1、 数据库设计 创建数据库，数据库名称为“user”，然后创建一个名为“User”的数据库表，用户注册和登录使用的是同一个数据库。该表的具体信息如下：字段类

22、型长度必填字段允许空值备注UserVarchar18YN用户名，主键PasswordVarchar12YN密码 该表的SQL语句如下： CREATE TABLLE User( User varchar (18) NOT NULL, Password varchar (12) NOT NULL, PRIMARY KEY(User); 2、 新建Dreamweaver8站点 与其他站点不同的是：1）服务器模型：PHP MYSQL； 2）访问方式：本地注意：测试服务器文件夹与本地根文件夹需设置成一样，并且URL前缀写成http:/localhost/www/ （其中www是本地根文件夹）3、 创建数

23、据库链接创建MYSQL数据库链接具体操作步骤如下： （1）打开“应用程序”面板，选择“数据库”选项卡，单击面板上的按钮，在弹出菜单中单击“MySQL连接”菜单项。 （2）打开“MySQL连接”对话框，如图进行设置： （密码不需要填写） （3）然后单击选取按钮，选择建立好的数据库“user”，单击“确定”按钮，则完成“MySQL连接”设置工作。 （4）单击“测试”按钮，如出现下图，则说明数据库连接成功。此时，会自动生成数据库连接文件，单击“确定”按钮，关闭对话框。4.2.2登录模块1、登录界面学生登录后可以对实验教学资源进行学习，可以实现课堂随时检测，可以给教师留言。用户登录页面login.ph

24、p如下图所示： 在此页面中的表单元素定义如表：名称类型对象名称备注用户名文本框User最多字符为18密码密码框Password最对字符为12登录按钮Submit动作为“提交表单”重置按钮reset动作为“重设表单”表单表单Form1接下来进行功能制作，步骤如下：（1）单击“服务器行为”面板上的按钮，选择“用户身份验证”-“登录用户”命令。 （2）打开“登录用户”对话框，如下图所示进行设置 （3）设置完成后，单击“确定”按钮，会在“服务器行为”面板中出现“用户登录”命令。 （4）在User表中，用户名和密码是不能为空的，所以需要在用户单击“登录”按钮之前检查一下用户所输入的数据是否为空，如果为空

25、或者其中一个为空，则登录失败。单击“行为”面板上的按钮，选择“Yaromat”-“Check Form”命令。 （5）打开“Check Form”对话框，进行如下设置： （6）登录界面就设置完成了。2、 登录成功界面 在登录界面，如果用户登录成功，则转到登录成功界面“main.php”，如下图所示： 将“进入网站”设置链接到“主页/主页简介.html”。3、 登录失败界面 在登录界面，如果用户登录失败，则转到登录失败界面“failLogin.php”，如下图所示： 将“登录”设置链接到“Login.php”，将“注册”设置链接到“Register.php”。4.2.3注册模块1、注册界面 新用

26、户可以按照要求进行注册，然后进行学习。用户注册界面register.php如下图所示： 在此页面中的表单元素定义如表：名称类型对象名称备注用户名文本框User（100与999之间的数字）密码密码框Password最多字符为12确认密码密码框Password2最多字符为12注册按钮register动作为“提交表单”重置按钮reset动作为“重设表单”表单表单Form1 接下来进行功能制作，步骤如下：（1）单击“服务器行为”面板上的 按钮，在弹出的菜单中选择“插入记录”命令。（2）打开“插入记录”对话框，如下图所示进行设置： （3）设置完成后，会在“服务器行为”面板中出现“插入记录”命令。 （4）

27、在User表中，用户名和密码是不能为空的，所以需要在用户单击“注册”按钮之前检查一下用户所输入的数据是否为空，如果为空或者其中一个为空，则注册失败。单击“行为”面板上的按钮，选择“Yaromat”-“Check Form”命令。设置与登录界面的设置一样，就不详细讲了。 （5）还需要考虑的是，如果用户注册的用户名是数据库中已经存在的数据，那么应该显示注册失败，所以进行如下设置：单击“服务器行为”面板上的按钮，选择“用户身份验证”-“检查新用户名”命令。如图所示进行设置：单击“确定”按钮，注册页面就设置完成了。2、 注册成功界面 在注册界面，如果用户注册成功，则转到注册成功界面“Regsucces

28、s.php”，如下图所示：将“登录”设置链接到“Login.php”。3、 注册失败界面在注册界面，如果用户注册所使用的用户名已经存在在数据库当中，则注册失败，转到注册失败界面“Regfail.php”，如图所示： 将“返回”设置链接到“Register.php”。 这样，用户登录与注册功能就全部做好了。 4.3 网站基本内容的设计网站包括三部分的实验内容：C语言、PHP、Dreamweaver实验。下面是各实验的实验目录：4.3.1 C语言教学部分实验名称实验内容实验一C语言的运行环境和运行过程实验二C语言环境实验实验三C语言的基础知识实验四顺序结构程序实验五选择结构程序设计实验六循环语句的

29、使用4.3.2 PHP教学部分实验名称实验内容实验一Html基础实验二架设Windows下的PHP开发测试服务器 简单PHP语法实验三变量与表达式实验四流程控制实验五PHP数组实验实验六函数实验实验七表单实验实验八MYSQL基础实验实验九PHP和数据库实验十类与对象实验十一留言板（一）实验十二简易留言板实验（二）实验十三文件上传和图形计数器实验4.3.3 DREAMWEAVER教学部分实验名称实验内容实验一网站设计流程实验二设置meta内容和页面属性实验三多媒体的使用 实验四网页的链接实验五表格实验六CSS层叠样式表实验七框架4.4 最新公告板的设计与实现 公告板实际上就是一些文字，以滚动的形

30、式出现，在Dreamweaver中设置文字的的属性即可。下面是本实验教学网站公告板的代码：公告板文字说明： 1）scrollamount=3 指的是文字滚动的快慢，3的单位为秒； 2）direction=up指的是文字向哪一个方向滚动，除up外，还可以有down、left、right； 3）onmousemove=this.stop() onmouseout=this.start() 指的是鼠标移动到滚动的文字上，文字停止滚动；鼠标移开时，文字继续滚动。4.5 用户留言板的设计与实现用户留言板包括的文件，如下表：中文名文件名说明添加留言Addbook.php用户留言页面显示留言Showbook

31、.php显示用户留言4.5.1 功能实现1、数据库设计创建数据库，数据库名称为“book”，然后创建一个名为“guestbook”的数据库表，此表是用来保存所有留言信息的数据，以id为主键，其中id是自动编号，这样可以在留言时为每一条留言自动加上一个单独的编号且不重复。该表的具体信息如下：字段类型长度必填字段允许空值备注idsmallint5YN留言编号，主键，自动编号nameVarchar20YN留言者姓名ContentTextYN留言内容TelVarchar30NY留言者电话TimeTimestampYN留言时间，有系统自动获得ReplycontentTextNY回复留言该表的SQL语句如

32、下：CREATETABLEbook.guestbook ( id SMALLINT( 5) NOT NULL AUTO_INCREMENT PRIMARYKEY COMMENT留言编号，主键，自动编号, name VARCHAR( 20) NOT NULL COMMENT留言者姓名, content TEXT NOT NULL COMMENT留言内容, tel VARCHAR( 30) NULL COMMENT留言者电话, time TIMESTAMP NOT NULL COMMENT留言时间，由系统自动获得, replycontent TEXT NULL COMMENT回复留言) 2、 创建

33、数据库链接 按照上面dreamweaver8与数据库链接的方法，创建dreamweaver8与数据库book的链接，链接名称为“bookconn”。4.5.2 添加留言界面添加留言界面addbook.php的界面如下图所示：在此页面中的表单元素定义如表：名称类型对象名称备注姓名文本框name留言者姓名联系方式文本框tel留言者电话内容文本框content字符宽度为70，行数为5留言日期文本框time值为留言按钮submit动作为“提交表单”重置按钮submit2动作为“重置表单”表单表单form1 接下来进行功能制作，添加留言就是向数据库中插入数据（insert into语句），主要代码如下：

34、需要注意的是：在留言时留言者姓名与留言信息不能为空，需要根据上面所讲的方法选择“行为”面板里的“Yaromat”-“Check Form”命令进行设置。4.5.3 显示留言界面用户添加留言后，留的言显示在显示留言showbook.php中，showbook.php界面如图所示： 接下来进行功能制作，步骤如下：（1）单击“绑定”面板上的按钮，选择“记录集”命令。 （2）打开“记录集”对话框，如下图所示进行设置： （3）单击“确定”按钮，并将记录集中的数据绑定到页面的相应位置上，例如： （4）选中记录集所在的行，单击“服务器行为”面板上的按钮，选择“重复区域”命令并打开，选择记录集为“showbo

35、ok”，并设置显示每页为3条记录，这样做就可以设置在显示留言界面每页显示的留言条数。 （5）选中记录集中有数据时要显示的区域，单击“服务器行为”面板上的按钮，选择“显示区域”-“如果记录集不为空则显示”命令并打开，在对话框“记录集”下拉列表框中选择记录集（showbook）。 （6）选中记录集中没有数据时要显示的区域，单击“服务器行为”面板上的按钮，选择“显示区域”-“如果记录集为空则显示”命令并打开，在对话框“记录集”下拉列表框中选择记录集（showbook）。 （7） 插入导航条： 打开“插入”栏“应用程序”类别中的“记录集分页”，记录集选择“showbook”，显示方式选择“文本”。 打

36、开“插入”栏“应用程序”类别中的“记录集导航条”，记录集选择“showbook”，这样显示界面的导航条就做好了。 做好的界面如下图所示：这样，用户留言板的设计与制作就全部完成了。4.6管理员登录的设计与实现管理员登录界面包括的文件，如下表：中文名文件名说明管理员登录页面adminlogin.php管理员只有以用户名admin，密码admin才可以登录管理员页面admin.php管理员可以这页管理用户的留言回复留言页面replybook.php管理员回复留言页面4.6.1 功能实现数据库设计在已经创建好的数据库“book”中，创建一个名为“admin”的数据库表，此表是供管理员登录的。该表的具体

37、信息如下：字段类型长度必填字段允许空值备注UsernameVarchar20YN用户名，主键PasswordVarchar20YN密码该表的SQL语句如下：CREATE TABLLE admin Username varchar (20) NOT NULL, Password varchar (20) NOT NULL, PRIMARY KEY(username); 预先设置管理员的账号和密码为admin，admin，插入语句如下：Insert into admin value （“admin”，“admin”）；4.6.2 管理员登录页面管理员登录页面只允许事先设定的admin账号进入，其他

38、的账号不得进入，管理员登录界面adminlogin.php的界面如下图所示：在此页面中的表单元素定义如表：名称类型对象名称备注管理员账号文本框Username最多字符为20管理员密码密码框Password最多字符为20登录按钮submit动作为“提交表单”重置按钮submit2动作为“重置表单”表单表单form1 接下来进行功能制作，步骤如下： （1）单击“服务器”面板上的按钮，选择“用户身份验证”-“登录用户”命令。（2）打开“登录用户”命令，如下图所示进行设置： （3）还应考虑的是，管理员账号和密码不能为空，需要根据上面所讲的方法选择“行为”面板里的“Yaromat”-“Check For

39、m”命令进行设置。4.6.3 管理首页面管理首页面admin.php与显示留言页面基本相似，设计界面如下图所示： 其他的功能设置与显示留言界面的设置是一样的，下面来讲述“回复”与“删除”文字的制作： （1）选中文字“回复”，单击“服务器行为”面板上的按钮，选择“GO TO DETAIL PAGE”命令，并按照下图所示进行设置： （2）选中文字“删除”，单击“服务器行为”面板上的按钮，选择 “GO TO DETAIL PAGE”命令，并按照下图所示进行设置：4.6.4 回复留言页面 回复留言界面replybook.php的界面如下图所示：在此页面中的表单元素定义如表：名称类型对象名称备注回复内容文本域replycontent回复内容，字符宽度