毕业设计（论文）-开智中学动态网页制作.docx

开智中学动态网页制作 计算机与信息科学学院 计算机科学与技术（师范）专业 2010级 指导教师 摘 要：本系统采用PHP动态网络技术，以MySQL为数据库开发平台，结合HTML、CSS、JavaScript和jQuery等脚本语言，以及配合多种网页开发工具，实现了开智中学动态网页系统，具备动态交互式功能。系统前台主要包括开中简介、新闻资讯、党团建设、教务管理、师资力量和雁过留声等模块，后台实现的基本功能主要有：数据的添加、修改、删除、查询。关键词：PHP；MySQL；动态网页Abstract：Based on MySQL data base development platform, this system uses PHP dynamic web technology, combined with scripting languages such as HTML, CSS, JavaScript and jQuery. With the help of several Webpage development tools, it realizes the dynamic web design for Kai Zhi High School, which has a dynamic interactive function. The front office of this system are mainly including Introduction, News Information, constructionof the PartyandtheLeague, Teaching Administration, Faculty, and Online Message modules. The back office module helps add data, modify data, delete data and query data.Key words：PHP；MySQL；Dynamic webpage 1 绪论 1.1 国内校园网站发展现状 行走在当今高度数字化和信息化的时代里，没有人能置身其外，在这样一种趋势下，越来越多的学校纷纷建立起了属于自己的校园网站，到目前为止仅在我国中小学就有近17000余所学校建设了独立域名的校园网站1，通过网络对外宣传学校的形象，展示校园风采。但是，随着教育信息化的不断加深和完善，很多学校网站面临着空置或死网的问题。大部分学校网站都设立了“学校概况”、“师生园地”、“招生信息”等栏目，但由于学校领导对网站重视不够、网站管理专项资金投入不足、缺乏专业的网站推广和维护人员，网站很少去及时更新，使得建设校园网站的初衷没有得到良好的保证和使用价值，最后导致网站变成死站，不利于学校未来的发展。面对校园网站建设现状和未来网络高速化的发展趋势，学校更要应该抓紧进行网站建设。校园网站在未来有很大的发展前景，既可以提高学校的形象，扩大招生率，又能协调学校各个部门的工作和提高教师教学效率，促进老师与学生、家长与学校的互动。相信在不远的将来，校园网站会更加倍受青睐，对学校的长远发展有着重大的意义。1.2 系统研究的背景和意义信息技术正在日新月异的改变着人类社会，Internet也已进入现代人的日常生活和学习，成为人们不可缺少的辅助工具。学生上网学习、教师在网上查找资料，互联网为学校教育开辟了更广阔的天地，在这五彩缤纷的网络世界里，谁都想有一个展示自己风采的机会和平台，建设一个学校网站，将学校的资源对外开放，使学校的信息奔驰在信息高速公路上，从而更好的展示学校的风采。校园网站是基于学校单位建立的校园官方网络平台，承载着信息化教育时代的网络教学、对外宣传、教育管理的基本任务，是远程教育发展的必然趋势和必需平台，是为教育服务的计算机网络web系统2。学校网站是学校的“名片”和“商标”，是宣传学校工作的窗口、展示校园文化的舞台、沟通学校、教师、学生、家长、社会的平台，是校园文化建设的重要组成部分。学校网站的建设将对学校的信息化建设和教育教学工作质量和效率的提高起到强大的推动作用，同时提供简单、有效、便捷的理想办公、教学环境。学校的网站建设应该为教育教学管理服务，为学生的学习服务，为教师教学服务，成为学校与学生、家长、社会联系的桥梁，成为学校对外宣传的闪亮窗口。凭借学校网站，学校就可成为教育百花园中一朵鲜艳的花朵。而开智中学在这样一个信息化的时代里，至今仍未拥有属于自己的学校网页，鉴于此，为了更好的办学，提高学校知名度，特构建开智中学动态网页。2 开发环境简介 构建动态网站，可以选择多种动态网站开发技术，如：JSP、PHP、ASP、ASP.NET等，而在本设计中，主要采用PHP开发为主，JavaScript、jQuery为辅实现某些特定功能，并结合HTML+CSS进行网页布局设计。因此，根据本设计所选择的开发语言，为了提高系统开发效率，决定使用Dreamweaver CS6作为开发工具进行开发，数据的交互实现采用MySQL数据库，并配合使用Navicat for MySQL数据库管理工具和XAMPP服务器，来完成系统全程开发设计的环境搭建。2.1 开发工具 Dreamweaver CS6Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。该软件支持代码、拆分、设计、实时视图等多种网页编辑模式，可以使网页设计初级人员无需编写任何代码就能快速创建web页面3。其优点如下：（1）Dreamweaver CS6使用了自适应网格版面创建页面，在发布前使用多屏幕预览审阅设计,可大大提高工作效率；（2）Dreamweaver CS6改善了FTP性能，更快速高效地传输大型网站文件，缩短制作时间；（3）Dreamweaver CS6新增的“实时视图”和“多屏幕预览”面板可呈现 html5 代码，更能够检查自己的工作，在发布前测试页面。2.2 数据库 MySQLMySQL关系数据库管理系统是一个很流行的多用户、多线程SQL关系型数据库管理系统4，由瑞典MySQL AB公司开发，目前属于Oracle公司。MySQL通过对SQL的支持以足够灵活和高效的方式存储数据、文件和图像等。另外，MySQL还是安全的、跨平台的和高效的。由于MySQL具有体积小、速度快、总体拥有成本低，尤其是开放源代码等特点，使得MySQL数据库的成本非常低，因此MySQL被广泛应用在Internet的中小型网站中，而PHP与MySQL的结合使用也就变得很常见。2.3 开发语言 PHPPHP全称为PHP Hypertext Preprocessor，即超文本预处理器。PHP作为一种嵌入式HTML脚本语言，与HTML语言结合，实现与用户的交互以及对数据库的访问，它可以比CGI或Perl更快速地执行动态网页5。在众多的动态网站技术中，PHP是一种易于学习和使用的后台开发技术，开发这种语言的目的是让Web开发人员能够快速高效地写出动态生成的页面代码。PHP的优点如下：（1）简单性：PHP借用了C、Perl、Shell及JavaScript等一些好的语法框架，学习起来容易入手。（2）速度快：PHP比传统的解释执行方式的语言速度快快几倍。（3）跨平台性：PHP可以在Windows、Linux、Unix系统下运行。（4）PHP的开放源代码：不单是开放PHP应用程序的源代码，而且还有PHP本身的源代码。（5）执行的效率高：PHP语言不但占用的系统资源小，且运行速度快。3 系统分析3.1 可行性分析3.1.1 技术可行性分析 技术可行性分析主要包括目前现有的技术条件能否完全支持新系统的开发工作,主要指硬件需求和软件需求。（1）硬件需求开发本设计过程中所需要的计算机设备及其有关的外部设备如下：机型：Acer-PC机；CPU：Inter（R）Core（TM）i3-2330M 2.20GHz；安装内存：2.0GB；硬盘：500G；操作系统：Windows7 旗舰版。由此可见，在硬件方面只需一台配置稍好的PC机即可。（2）软件需求在开发本设计时所涉及到的软件需求如表3.1所示：表3.1 软件环境需求软件名称软件版本功能及用途DreamweaverCS6制作网页XAMPPwin32-1.8.0-VC9服务器，提供MySQL数据库Navicat for MySQLv9.0.15数据库管理工具FlashCS3网页中的动画制作PhotoshopCS5处理、美化图片Internet Explorer9.0测试、浏览网页3.1.2 管理可行性分析管理可行性主要保证网站投入运行中所需要的人力资源，并能在网站维护方面建立一套管理制度。而开智中学动态网站开发过程中所使用的设计软件都比较流行化和大众化，包括后台的数据录入、更新等工作也比较容易，工作量虽大，但管理简单、方便，一般的信息技术教师都可以胜任网站管理工作。3.1.3 经济可行性分析本设计的开发几乎是零成本，在投入使用时，学校仅需购买网站的域名和空间即可，如果有需要还可再购买一台服务器。3.2 网站需求分析校园网站就是学校的网上形象，每个学校都应该有自己的特色。一般来讲，校园网站应比普通的互联网信息平台更具有针对性、更具校园特色，能够满足学校与外界沟通交流的需求6。校园网站的面向对象主要是在校师生和即将升学的家庭，因此，一个优秀的校园网站，需要实现基本功能完备，网页风格富有创意、简约时尚，页面布局合理舒适，色彩清新，同时能体现其新闻性和观赏性，让人眼前一亮。根据到开智中学的实际调研和访问得知，该中学对其拟建的门户网站提出的主要要求有以下几个方面：（1）宣传学校办学理念，展示办学设施、教师队伍、学校荣誉、校园环境，不断加深社会大众对学校的了解，提高学校的社会知名度。（2）适时发布学校管理、教学、公告通知等相关信息，保证学校进行的各项工作起到公平公开公正的效果。（3）实时校园新闻发布，提供校园最新时事，为学生以及家长开辟一条获取学校最新动态的渠道。此部分应作校园信息化的核心部分。（4）为高三师生和家长提供专用通道，及时发布区内外最新高考动态和政策，方便高三师生和家长们做好迎战准备。（5）提供一个留言平台，为方便对本校有兴趣的游客进行留言咨询和了解，或者获取社会各界对学校教育教学情况的评价和意见、建议。4 网站总体设计4.1 网站前台功能描述 根据学校的需求，网站设计前台界面主要包括首页、开中简介、新闻资讯、党团建设、教务管理、师资力量、德育之窗、魅力校园、高考传真、雁过留声以及管理登录，共十一个基本功能模块，本系统的主要功能图如图4-1所示。图4-1 开智中学网站前台功能结构图上图各模块的具体功能描述如下：（1）首页模块：主要展示学校重要新闻、学校领导班子、校园快讯、专题报道、通知公告、校园一角等内容。（2）开中简介：从认识开中、学校历史、校长致词、学校荣誉、领导班子这五个方面来介绍开智中学，使浏览者对学校有个大概的了解。（3）新闻资讯：该栏目具体放置了校园快讯、专题报道、新闻教育、南宁教育、通知公告等内容，使浏览者在本网站中既可以浏览到校内新闻，又可以了解到校外各类教育新闻。（4）党团建设：包括党建动态、党建指南、专题学习、党员风采四个方面，主要展示学校的党团活动、党章知识以及优秀党员等。（5）教务管理：该栏目具体介绍学校的教研动态、教研论文、教研成果、教学案例等内容，使浏览者能具体浏览到学校关于教学方面的信息。（6）师资力量：主要展示学校各个教研组、名师风采、教师文集、教师荣誉等内容，方便浏览者了解到本校的师资质量，加深学校在浏览者心中的印象。（7）德育之窗：该栏目主要呈现的学校德育教学工作，其中的教育宝典和心理导航两个子栏目能为在校师生和家长提供良好的德育经验。（8）魅力校园：分别从学校主教学楼和校内浮光掠影来向浏览者展示开智中学美丽迷人的校园风光，从而对学校的环境有个大致了解。（9）高考传真：该栏目提供了最新的高考新闻动态，包括广西区内外高考新闻、高考政策、高校动态、艺考招生等具体信息，以便高三师生及家长能在第一时间掌握高考最新消息，为升学做好准备。（10）雁过留声：该栏目可以加强学校与浏览者间的沟通联系，通过该栏目，浏览者可以把平时学校的焦点、热点问题或者疑惑反映给学校，这样可以使学校形成一种人人关心学校、爱护学校、注重学校形象的良好氛围。（11）管理登录：主要是管理人员进入后台管理网站的登录窗口，为保证后台管理的安全性，在用户输入用户名以及密码后，调用数据库数据查看是否匹配，若匹配，则可进入后台主界面，对网站进行批量更新和维护；若不匹配则弹出提示信息并返回登录界面。其具体流程图如图4-2所示，详细代码见附录。管理员登录界面输入用户名和密码验证用户名和密码验证失败验证成功后台管理退出图4-2 管理员登录模块流程图4.2 网站后台 在网站后台设计中，设置了个人信息登录认证，只有本系统的合法管理员才具有登录权力，才可对后台的新闻资讯、党团建设、教务管理、师资力量、德育之窗、高考传真、雁过留声以及管理员帐号管理这八个独立的管理模块进行信息的添加、编辑、查看以及删除等操作，实现网站批量维护效果，网站后台的功能功能图如图4-3所示。网站后台新闻资讯管理员帐号管理密码修改账号管理雁过留声编辑添加删除查看查询查询查看删除回复添加删除党团建设教务管理师资力量德育之窗高考传真图4-3 开智中学网站后台功能结构图5 系统详细设计5.1 数据库设计通过对系统的分析，为了方便读取和查阅，本网站共使用了8张数据表7来存储数据信息，其中，新闻资讯数据表xinwentongzhi、教务管理数据表jiaowuguanli、高考传真数据表gaokaochuanzhen、德育之窗数据表deyuzhichuang以及师资力量数据表shizililiang这5张表的结构设计相同，在这里仅以新闻资讯数据表作为代表展示。数据库kzzx中各个表的具体字段信息如下所示：（1）新闻资讯数据表表5.1 新闻资讯表 xinwentongzhi字段类型描述字符集主键空默认idint(11)表ID是否无biaotivarchar(500)新闻标题gbk否是NULLleibievarchar(50)新闻类别gbk否是NULLneirongtext新闻内容gbk否是NULLtianjiarenvarchar(50)作者gbk否是NULLaddtimetimestamp添加时间否是NULL（2）党团建设数据表表5.2 党团建设表 dangutanjianshe字段类型描述字符集主键空默认idint(11)表ID是否无biaotivarchar(500)新闻标题gbk否是NULLleibievarchar(50)新闻类别gbk否是NULLneirongtext新闻内容gbk否是NULLtianjiarenvarchar(50)作者gbk否是NULLaddtimetimestamp添加时间否是NULLpicturevarchar(50)图片gbk否是NULL（3）雁过留声数据表表5.3 雁过留声表 lyb字段类型描述字符集主键空默认idint(11)表ID是否无namevarchar(50)留言者姓名gbk否是NULLsexvarchar(50)留言者性别gbk否是NULLqqvarchar(12)留言者qqgbk否是NULLaddtimetimestamp留言时间否是NULLneirongtext留言内容gbk否是NULLtitlevarchar(50)留言主题gbk否是NULLreplaymanvarchar(50)恢复人gbk否是NULLaddtime1timestamp回复时间否是NULLreplaytext回复内容gbk否是NULLtouvarchar(255)留言者头像gbk否是NULL（3）管理员帐号数据表表5.4 管理员帐号表 user字段类型描述字符集主键空默认idint(11)表ID是否无usernamevarchar(50)用户名gbk否是NULLpwdvarchar(50)登录密码gbk否是NULLqxvarchar(50)权限gbk否是NULLaddtimetimestamp添加时间否是NULL5.2 功能实现设计5.2.1 实时信息发布功能鉴于新闻资讯、党团建设、教务管理、师资力量、德育之窗以及高考传真这6个模块的功能实现是相同的，在这里就以新闻资讯为例来叙述。校园新闻发布是校园网站最为主要的核心功能之一。当需要对新闻进行修改时，需登录至后台新闻资讯管理模块，选择要进行的操作，包括增、删、改、查阅四种基本操作。对新闻进行相应操作，经发布后，系统将数据存入数据库中，用户可以在前台页面中可看到最新更新的新闻动态，如图5-1所示，详细代码见附录。图5-1 新闻发布管理流程图5.2.2 前台页面显示求用户发送请求$id=$_GETid获取参数连接数据库MySQL数据库数执行SQL命令查找表xinwentongzhi返回查询结果页面数据显示不存在，请求失败NY重新请求同样以新闻资讯为例，当浏览者点击新闻资讯模块下的子模块时，页面右边将会显示相应子模块的内容信息。访问的具体流程图如图5-2所示，详细代码见附录。图5-2 前台页面访问流程图开始留言管理模块Y删除？回复？N编辑回复内容发布？NY数据库前台页面显示N5.2.3 雁过留声管理图5-3 雁过留声管理流程图5.2.4 管理员帐号管理开始超级管理员？身份验证无此权限NN数据库添加？Y帐号管理模块发布？删除？YN编辑信息选择权限NY后台管理员分有两种权限：超级管理员和普通管理员。普通管理员和超级管理员均可以对后台的8个模块进行操作管理，唯一不同的是，超级管理员比普通管理员多一项权限：帐号管理。一般来说，网站后台管理可以拥有多个普通管理员，但是超级管理员仅需一个就够了，而超级管理员主要是专门负责管理员帐号的添加和删除，其具体流程图如图5-4所示,详细代码见附录。图5-4 管理员帐号管理流程图6 系统测试6.1 软硬件环境测试软硬件环境的测试分为功能需求测试、数据需求测试、行为需求测试、接口需求测试四个部分7。本系统主要从硬件环境和软件支撑环境两方面测试部署是否正常，经测试，软硬件环境部署无误，系统运行稳定且正常。其中硬件系统环境为Windows7 旗舰版，软件系统环境为Internet Explorer9.0。6.2 性能测试6.2.1 响应时间经多次测试，平均情况下校园网站对一般浏览操作的响应时间不超过3 秒,但因没有将网站上传至网站空间9，目前还没有办法测试在访问数据量超过正常水平时网站的运行响应时间。6.2.2 可操作性本校园网站主要用于展示学校基本信息、发布校园时事新闻以及师生与家长间的沟通，由于内容需要经常进行实时更新，工作量较大，而后台的管理模块则提供了方便的渠道，可对前台内容进行添加、删除或者修改等操作。6.2.3 易用性本网站的界面设计简洁大方，设置有人性化的导航栏，不仅使浏览者能快速锁定自己所需要的信息，亦能保证非专业、无基础的管理用户通过简单的介绍或培训便可以快速掌握本网站的操作方法10。6.3 功能测试主要以浏览者、普通管理员、超级管理员这三种身份进行系统实施功能测试。（1）浏览者测试内容：使用不同的浏览器进行浏览，查看学校网站各个模块下的子模块的具体信息，在“雁过留声”模块下进行留言。在功能测试完毕后，对本校园网站进行了单元测试和集成测试11，网站运行稳定，各模块及模块间的调用情况较好，无异常情况。（2）普通管理员登录界面测试：打开管理登录页面，在相应处输入正确的用户名和密码，点击“登录”按钮，若输入正确，则会跳出“登陆成功”提示框，紧接着进入系统管理主界面；若输入错误，则会跳出“用户名或密码错误”提示框并返回登录界面，此时尝试“重置”按钮是否生效。普通管理员登录系统后，可以对学校基本信息和时事要闻进行维护，包括编辑已经存在的信息，增添新的信息，删除信息三大功能以及密码修改，还可以对文章按标题进行搜索。经测试，这部分功能全部实现，实现细节见界面截图。（3）超级管理员此部分只需测试一个模块即可：帐号管理模块。因为超级管理员只比普通管理员多这项权限，选择该模块新增或者删除网站的用户，管理网站用户的权限12和密码，超级管理员还可以修改自己的登录密码。经测试，这部分功能全部实现，实现细节见界面截图。6.4 功能测试界面呈现6.4.1 前台主界面任何用户都可以通过网址访问该校园网站。网站首页分为活动图片展示、领导班子、校园快讯、专题报道、通知公告以及校园一角这几个模块,导航栏上方的学校logo是插入的flash动画，网站的前台主界面如图6-1所示。6.4.2 新闻资讯模块界面此模块下分有五个子模块，分别是：校园快讯、专题报道、新闻教育、南宁教育、通知公告。访问本站的用户均可以快速浏览到本校的最新新闻资讯以及其它关于教育方面的信息，如图6-2所示。图6-1 网站前台主界面图6-2 新闻资讯界面6.4.3 雁过留声模块界面此模块是为浏览者开辟的一条留言通道，可对学校有疑问或有兴趣的地方进行咨询留言，管理员可对其留言做出回复。（1）（2）图6-3 雁过留声界面6.4.4 管理登录界面图6-4 登录管理界面6.4.5 网站后台管理主界面登录成功后的管理员，可在此进行各个模块进行管理操作，包括增、删、改、查。图6-5 网站后台管理主界面图6-6 党团建设模块管理界面6.4.6 管理员帐号管理模块只有超级管理员才有进入此模块的权力，当普通管理员试图进入时，系统会弹出警告提示框，如图6-7（1）所示。超级管理员可在此模块对网站的管理员帐号信息进行添加或删除操作，如图6