毕业设计（论文）-基于PHP的重庆求精中学教育网页设计与制作.doc

基于PHP的重庆求精中学教育网页设计与制作计算机与信息科学学院 计算机科学与技术（师范）专业 指导教师 摘 要：本论文详细描述了一个基于PHP技术和Mysql数据库系统的中学教育网页的设计与实现过程。网页的设计与制作主要围绕信息发布、网上交流、资源共享三大功能进行。网页前台一共包含十七大版块，学校概况、新闻集萃、教学评价、留言板、视频点播、辅助教学等。后台则主要针对留言、资源、评分以及各类信息资讯进行系统化管理。关键词：PHP；JavaScript；教育网页；Dreamweaver；Mysql数据库Abstract：This paper describes the design and implementation process of a secondary education Webpage based on PHP technology and Mysql database system. Design and manufacture of webpage revolves mainly three main functions that are information release, online communication, resource sharing. Webpage front consists of seventeen sections, such as school profiles, news, teaching evaluation, message board, video on demand, aided teaching and so on. The background is mainly the system management of the message, resources, scale and all kinds of information. Key words：PHP; JavaScript; education website; Dreamweaver; Mysql database 1 引言学校网站是学校对外宣传的窗口，校园网站是基于学校建立的校园官方网络平台1。2001年，为了实施信息化教育，教育部正式启动了中小学“校校通”工程。从此，校园网建设如雨后春笋般地出现，并从省、市级逐渐向县、乡级拓展。但是现在的中小学网站使用情况却并不容乐观2。纵览目前中小学校园网站，会发现它存在着许多建设和应用上的误区和问题：学校网页多数是静态网页3，只能用于学校的介绍和简单宣传；网页缺乏教学互动平台；教师和学生在校园网里没有交流空间。以重庆求精中学网站为例，其在学校信息发布这块做得比较好，但却没有辅助教学，视频点播，留言板，教学评价等功能模块。这是一个值得研究的课题。2 WAMP 2.1 简介WAMP 的名字源于每个程序的第一个字母。W 是 windows 操作系统；A 是Apache；M是 MySQL 数据库；P 是 PHP4编程语言。 Apache 是最通用的网络服务器；MySQL 是带有基于网络管理附加工具的关系数据库；PHP 是流行的对象脚本语言，它包含了多数其它语言的优秀特征来使得它的网络开发更加有效。2.2 选择 WAMP 的原因Windows 操作系统易用、界面友好、软件丰富、操作起来非常方便。搭建服务器环境对网站管理员的要求比较低。之所以选择 Apache、MySQL、PHP，一是因为都是开源软件，二是网站的开发运行维护的费用比较低，三是目前有很多成熟的 WAMP 集成软件，可以让我们一次安装并设置好。这使得不熟悉 WAMP 的用户来说，也可以轻松的搭建 WAMP环境2。3 设计目的 本次设计旨在提升设计者的动手能力，加强对理论知识的理解和实际应用。本次设计的主要目的如下：（1）加强对网站的理解，能对网站功能进行分析，并设计出合理的框架结构。（2）学习PHP和mySQL，实现网页与MySQL数据库、Apache服务器之间的数据交换；学习JavaScript5实现网页动态交互，从而全面学习制作动态网页6。（3）学习并能熟练运用制作网页的各种工具和语言，如、XHTML7、等。（4）为重庆求精中学网站添加部分模块，使得学校网站更加完善，学校教育活动得以更好地开展，达到学校、老师、学生、家长交流畅通以及资源共享等目标。4 系统规划根据需求，为了改变传统的中小学网页只作为校园展示的窗口，以及增加家校互动便是设计本系统的初衷。系统实现的主要功能如下：（1）管理员登录模块管理员登录8成功后才能进入后台管理界面。（2）留言用户登录、注册模块用户注册后才能登录，而用户登录后才能发表留言。（3）信息浏览模块用户可查看各类信息内容，如最新通知、教育科研、领导关怀等。（4）信息管理模块学校管理员可以发布、修改和删除相关信息。 （5）教学评价模块学生以姓名和学号登录后可对其任课教师进行教学评分，同时也可查看学校教师们的照片。（6）视频点播模块可观看内容丰富又极具特色的视频短片，如学校校庆纪念短片，科学纪录片等。（7）留言版使用模块用户在未登录的情况下可查看留言9，针对留言主题、留言内容或者留言帐号对留言进行模糊查找；登录后可发表留言。（8）留言管理模块管理员可对留言进行回复、修改和删除操作。（9）辅助教学模块家长园地告诉广大家长怎样与孩子进行互动沟通，友好交流，建立和谐的亲子关系。假期乐园则主要是在寒暑假期间对学生的学习起督促和辅导作用。下载中心提供丰富多样的资源供大家下载、分享。（10）资源管理模块管理员可对“下载中心”里的资源进行上传和删除操作。（11）评分管理模块管理员可根据教师姓名查询学生的教学评分。5 系统设计整个系统功能设计如图5-1 所示:图5-1 系统功能图以上的“信息浏览”模块在网页上又可具体划分为以下板块，如图5-2所示：图5-2 信息浏览模块细化图5.1 系统的顺序图顺序图是将交互关系表示为一个二维图。纵向是时间轴，时间沿竖线向下延伸。横向轴代表了在协作中各独立对象的类元角色。类元角色用生命线表示。当对象存在时，角色用一条虚线表示，当对象的过程处于激活状态时，生命线是一个双道线10。5.1.1 用户前台浏览顺序图普通用户打开系统之后，可浏览各类信息，下载资源，查看、查找留言。登录后可发表留言、进行教学评分。如图5-3所示:图5-3 用户前台浏览顺序图5.1.2 管理员后台管理顺序图本系统的内容发布、修改、删除由管理员来完成，内容操作完后直接反馈到站点页面。如图5-4 所示: 图5-4 管理员后台管理顺序图5.2 系统流程图5.2.1 留言用户注册流程图（代码详见附录1）用户为了能发表留言，必须成为系统的注册用户。整个注册流程如图5-5所示，用户可以通过留言主页提供的注册链接进入注册界面，也可通过登录界面上的注册按钮进入。当用户填入自己的信息并提交后，系统将对用户的注册账号进行检查，如果发现注册账号已被注册，页面将自动提示“该帐号已经存在”。为了防止用户输入密码时可能出现的错误，系统将检查用户二次输入密码的信息，如果信息不符，也将给出相应提示。同时，对于一些必要信息，如果用户不填写，系统会提醒用户填写。当所有信息完整的填写完毕之后，经系统检查正确，即将用户的信息添加到数据库中，用户注册也就成功了，用户就可以进行登录了。留言用户注册流程如图5-5所示：开始注册 注册成功 账户检查加入数据库否是否可以注册是否是是否填写完整密码检查必要信息检查否是否符合标准是图5-5 留言用户注册流程图5.2.2 用户前台操作流程图图5-6 用户前台操作流程图5.2.3 管理员后台操作流程图图5-7 管理员后台操作流程图5.3 数据库分析求精中学教学网页能实现的关键就在于数据库能成功存取数据，因此数据库的设计是该系统设计的重要环节。5.3.1 数据库概要说明本系统采用的是MySQL数据库，用来存储各类资讯信息、评分信息、学生信息、教师信息、用户信息和留言板信息等，用Navicat for MySQL来可视化操作数据库。在本设计中，我将数据库命名为db_qiujingschool（连接数据库的代码详见附录2），其中包含的数据表如图5-8所示：图5-8 数据库结构图5.3.2 数据库概念设计数据库概念结构设计是数据库应用程序开发中的一个至关重要的步骤，它具有一定的独立性。程序员通常采用E-R 图的方法对数据库进行设计，它可以清晰的将用户的数据表达出来2。根据本系统所使用的数据库以及系统的功能结构画出各实体的E-R图如下所示： 图5-9 信息与信息类型实体E-R图图5-10 管理员、留言用户与留言实体E-R图辅助资源 上传日期ID号说明内容标题类别名图5-11 辅助资源实体E-R图图5-12 师生与班级实体E-R图5.3.3 数据库逻辑设计重庆求精中学教育网页系统创建的数据库名为“db_qiujingschool”，MySQL数据库服务器的用户名是“root”，密码为空。在创建的数据库中包括11张数据表，其中各数据表实现的功能如表5.1所示： 表5.1 数据表功能说明表数据表名功能说明tb_admin管理员信息表，存储管理员的个人信息tb_class班级信息表，存储班级信息tb_fuzhu辅助资源信息表，存储资源信息tb_message留言信息表，存储留言信息tb_news求精中学信息表，存储各类资讯、新闻、通知等tb_newstype信息分类表，存储求精中学信息的分类情况tb_score评分信息表，存储学生对科任教师的评分信息tb_student学生信息表，存储学生的个人信息tb_teachclass教师任课情况表，存储教师任课班级信息tb_teacher教师信息表，存储教师的个人信息tb_user留言用户信息表，存储留言用户的个人信息同时根据以上系统E-R图的分析，可以得到本系统数据库中的表和其字段信息。（1）管理员信息表tb_admin图5-13 管理员信息表截图（2）班级信息表tb_class图5-14 班级信息表截图（3）辅助资源信息表tb_fuzhu图5-15 辅助资源信息表截图（4）信息分类表tb_newstype图5-16 信息分类表截图（5）留言信息表tb_message图5-17 留言信息表截图（6）求精中学信息表tb_news图5-18 求精中学信息表截图（7）评分信息表tb_score图5-19 评分信息表截图（8）学生信息表tb_student图5-20 学生信息表截图（9）教师任课情况表tb_teachclass图5-21 教师任课情况表截图（10）教师信息表tb_teacher图5-22 教师信息表截图（11）留言用户信息表tb_user图5-23 留言用户信息表截图6 系统实现 6.1 前台设计 接下来将对本系统部分模块进行介绍。6.1.1 首页模块(1) 功能介绍作为中学网页，页面应该大方、清新，能突出重点，使用户在第一时间了解想访问的模块。首页除了文字新闻、资讯等信息显示外，还包括学校概况、信息搜索框、教学评价、留言板、视频点播、图片宣传栏、联系方式、收藏本页面、友情链接等相关功能。(2) 界面实现（首页界面代码详见附录3）如图6-1 所示。图6-1 首页截图6.1.2 学校概况模块(1) 功能介绍学校概况页面包括学校简介、办学理念、校园风光三个板块。(2) 界面实现如图6-2 所示。图6-2 学校概况页面截图6.1.3 留言板模块(1) 功能介绍留言板页面包括查看留言、发表留言、查找留言、刷新页面、用户登录注册五个板块。用户需登录后才能发表留言。(2) 主界面实现（留言板主界面代码详见附录4）如图6-3 所示。如图5-3 所示。图6-3 留言板主页面截图6.1.4 教学评价模块(1) 功能介绍教学评价模块需要学生以姓名和学号登录后才能进入，页面包括教师风采展示和教学评分两个板块。双击页面上具有上升效果的教师姓名即可出现对应的教师照片。系统根据登录学生所在的班级，筛选出该班级的任课教师，学生即可对自己的任课教师一一进行评分。(2) 界面实现如图6-4 所示。图6-4 教学评价页面截图6.2 后台设计6.2.1 首页模块(1) 功能介绍系统后台首页主要包括通知管理、信息管理、留言管理三个功能(2) 界面实现如图6-5 所示。图6-5 后台首页截图6.2.2 修改信息模块(1) 功能介绍修改信息页面主要对信息的标题、信息副标题、信息发布时间、作者、信息内容、相关图片进行修改。 (2) 界面实现 如图6-6 所示。图6-6 修改信息页面截图7 结束语改进中学网页是件比较麻烦的事情。添加网页模块和做成动态网页，还涉及到后台数据处理，这对于之前对网页制作一窍不通的我来说异常艰难。但有幸的是最后都基本实现了初期对系统的构想，这和指导老师的指导、网络上各类资源以及图书馆大量资料带给我的帮助是分不开的。本次设计是在WAMP集成环境XAMPP下开发的，采用PHP语言实现网页与Mysql数据库、Apache服务器之间的数据交换，使用JavaScript实现网页动态交互，还运用了制作网页的各种工具和语言，如、XHTML、等。另外，图片宣传栏、视频点播和学校风光模块的实现主要依靠的是XML+FLASH技术。信息类子列表的动态生成和访问则是运用了Ajax与PHP的交互技术。在系统的设计过程中遇到了很多的问题，如网页放大缩小后文字的排版出现差异，动态生成的列表如何访问数据库中对应的内容，不同浏览器的兼容等。有时与同学一起探讨，有时通过网络查询，也有时向指导老师寻求帮助。大大小小的问题一个一个得到了解决，这才逐步实现了整个系统。让人感到遗憾的是有的问题至今仍还未解决，不过这也成为了我以后继续努力学习的内在动力。通过这次系统设计，一方面，我又一次深刻体会到了团队协作的重要性，虽然此次系统设计是以个人的名义完成的，但其中也融合了来自同学、老师以及网络上、书籍上许许多多陌生人的心血。另一方面，我的耐心和韧性也得到了很好的磨砺，我清楚的认识到知识是在不停更新的，若跟不上时代的脚步，等意识到需要学习的时候就会需要花费更多的精力去学习、去研究。最后，虽然这次设计仍有很多地方不够完美，但却让我从中获得了受益终