华德福学园的详细设计与实现毕业论文.doc

徐州工业职业技术学院2015届毕业生毕业论文

期末报告

徐州
系统的设计与分析

班级 软件142
学生姓名 秦泗奇 学号 14323042059

详细设计及实现
一、总体方案
本系统采用的是Microsoft Visual Studio 2010结构开发的，采用Microsoft SQL Server数据库，采用的模型为B/S结构，系统是通过华德福学园的实际要求模拟开发，能够完成一个教育机构网站应有的所有功能，为了提高系统的创建速度，我们在编排时候没有采用现在比较流行的三层架构，而是采用了较为传统的双层结构，节约网站的时间，使组员更容易了解代码的意思。徐州悦心之家华德福实践学园基本功能包括：在线报名、在线留言、上传下载资料、上传图片、考勤管理、健康管理等功能模块，整个系统的布局是一个前台，两个后台的形式，管理员后台拥有最高的权限，教师的后台只能管理学生信息，而前台的数据大多为管理员后台里添加的数据。而我做的功能有三大项，主页图片管理，资料信息管理和互动信息管理。
（1）在线报名功能模块，只有在线报名后才可以进行一些操作，在线报名时主要填写信息为基本资料、用户名、密码即可，基本资料里的很多字段都有检测格式是否正确的功能（如：邮箱）。
（2）报名后的用户可以对自己报名的信息进行修改，也可以对报名时的明码进行修改。
（3）教师用户有如下的功能：查看公告信息，查看本班学生信息，查看、下载资料、添加考勤健康信息等，发布公告与上传资料是管理员的权限，只有管理员可以有此功能，教师可以对自己的基本信息进行修改，如姓名电话，用户密
（4）管理员是对用户的数据进行管理的，如教师信息管理，互动信息管理等，管理是拥有最高权限的，并且可以拥有教师的所有权限，可以管理删除教师信息，为整个系统的前台和后台提供数据支持。
二、前台界面设计
本系统采用DIV+CSS网页的布局方法，它有别于传统的HTML网页设计语言中的表格定位方式，可实现 网页页面内容与表现分离，它系统中还使用了现在较流行的HTML5语言，它实际就是包括HTML、CSS和JavaScript在内的一套技术组合，通过JavaScript中的Jquery实现动画的效果，它是轻量级的js库，它兼容CSS3还兼容各种浏览器，例如IE6.0+,IE8,IE9，等，jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可，通过以上的技术使页面更绚丽，美观。
用户的界面在设计上是模拟华德福教育理念而设计的，主要以大自然的绿色为主色调，所以在使用上就能让人们感受到华德福教育理念的特点，主界面使用Iframe嵌套，它的采用的是异步加载技术，现在大多数网站会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为它可以和主页面并行加载，不会阻塞主页面。
2.1 模板页展示与实现
我负责系统的前台主要功能有三部分：主页图片的展示，资料信息的查看与下载，开放日的预约。还有一个整个前台模板页的布局与排版。
前台模板页采用人性化布局设计，集成了系统前台初始的布局模样。前期我们通过对系统要求的分析，将模板页菜单分为网站首页，公告通知，资料下载，开放日，父母成长中心，在线报名，华德福微博，个人记录八大功能模块。每个功能模块在模板页里就已经链接到相对应的页面，所以在设计其他网页的时候减轻了工作强度和缩短了工作时间。在网站前台的下方，我们也留了两个端口来进入教师和管理员的后台。网站的左侧是一个注册用户的登陆，注册过的用户可以通过登陆的方式修改个人资料，也可以查看个人记录，个人记录只有登陆后才能查看。如图所示。

图5.1 模板页的设计
2.2 网站首页的布局与实现
网站首页主要由徐州悦心之家华德福实践学园的理念与介绍和校园风采的展示两部分组成。因为学园理念与介绍在一般情况下是一成不变的，所以在设计的时候，我才用了直接填写的方式，而没有和后台相联系。校园风采是学校各种活动图片的展示中心，主要是由标题和图片组成，在设计上采用了读取数据库前八张图片的特点，由数据库数据传播到前台DataList控件里，在布局上将DataList布局为四列，图片在上，标题在下的形式使得校园展示看起来更美观整洁。如图所示。

图5.2 网站首页的设计
2.3 资料下载的布局与实现
经过实际的分析与考察，一个学校网站至关重要的一项便是资料与信息的下载，资料的下载意味着资源的共享与传播，开源！公益！资源的利用价值得到了大大提升，而他获得的途径也变的简易，一般人们想要学校或者学习资料都必须上网找好长时间，甚至最后还是无功而返，而这一功能恰恰是你可以从学校网下载专用的资料，并且不用担心病毒，和丢失等一系列风险。
本网站资料下载采用以标题显示，点击标题获得详细信息和下载权限的布局方式，为了避免资料过多，使得页面美化受到影响。所以采用分页的方式实现资料的排版。如图所示。

图5.3 资料的设计
资料的下载需要点击标题进入详细界面下载，在详细界面里，用户可以查看资料的名称，资料添加的时间，以及资料的详细介绍。点击下载后跳出下载任务，可以选择下载的路径。如图所示。

图5.4资料下载的设计

2.4 开放日预约的布局与实现
开放日是学校对外开放的日子，每年都会对校外人事开放几次，作为校外人员学习成长的平台，这就需要对校外人员做一个统计。针对开放日。除了基本的资料外，我们还对他们的预约时间和预约部门做了明确的分类，电子邮箱格式也做了验证。如图所示。

图5.5开放日预约的设计
2.5 公告通知的实现
公告通知用于显示现阶段内园内信息的展示，方便大龄儿童了解自己的具体情况，并且加强对学园的了解；另一方面，家长也可以通过这些内容帮助孩子更好的适应学校里的生活。
首先创建数据源，可以使用 SqlDataSource 控件，之后在 DataList 控件的智能按钮功能中选择数据源即可；也可以在后台自定义数据源，并将 DataList 对象的 DataSource 指定为自定义的数据源，然后要为 DataList 控件绑定数据，另外我们还进行了分页设计，可以使页面更为整洁。
如图所示。

图5.6 公告通知页面
2.6 父母成长中心
此功能主要就是介绍华德福的特色，家长可以在此学习，并参加学校举行的手工坊、读书会、公益性等课程，并且此模块当中嵌入了留言系统，可以给家长们一些参考，本模块的设计主要用了Textbox控件，是属于我们常用的控件，我们还进行了非空验证、验证，信息填写完成后各个字段就会插入到后台数据库Running表当中，从而实现了申请。留言的展示还是利用了 DataList ，可方便的读取留言。如图所示。
图5.7父母成长中心预约申请
图5.8父母成长中心预约申请成功
2.7 用户登录的实现
登录系统控制的基础上，不同的人物角色对应不同的密码登录。由于访问控制基于角色的管理用户的逻辑隔离和访问，此策略的权限管理极大地方便了实现。研究表明，人的变化不是用户相对慢得多，并分配用户角色的变化之间的关系并不需要很多的技术，可以由管理人员来完成，并配置权限角色工作是复杂的，需要一定的技术，可以通过承担专业技术人员，而不是给他们的用户的权限，这种情况与实际相符。除了方便的权限管理，基于用户的访问控制方法也可以很好的描述角色层次之间的关系，实现最小权限和职责分离的原则的原则。采用人性化设计，布局系统登录窗口，综合完整性检查系统初始化。如图所示。

图5.9 登录窗口
管理用户信息如图所示。

图5.10 修改用户信息窗口
2.8 在线报名
在线注册登录后，家长可以进行报名操作。整个报名模块由网上报名、报名信息查询功能组成。其中网上报名要确定报名的时间、幼儿、班级等信息。快速方便。更体现了软件的信息化。快速化。如图所示。

图5.11 在线报名界面

三、管理员管理功能展示与实现
一般管理员在管理数据都要经过四个步骤来实现，先要添加，然后修改，删除，如果可以下载就下载。如图所示。

图5.12 管理员管理流程图

3.1 主页图片的管理
在前台网站首页下面的校园展示功能是由管理员添加管理的，我用了两个页面来完成图片的管理。第一个界面主要是用于图片的添加，在图片的格式上我们做了很多要求，可以上传".xls", ".doc", ".mpp", ".rar", ".zip", ".vsd", ".txt", ".jpg", ".gif", ".bmp", ".png", ".swf", ".avi", ".mp3", ".rm", ".wma", ".wmv"这些格式的图片。而查看图片页面，我们只允许它删除和查看，并没有修改的选项，因为我们考虑到主页图片设计上只允许存在八张图片来展示，因为图片不算多，管理起来方便，所以只给你后台删除功能。具体的方式如图所示。

图5.13 图片管理后台设计
3.2 资料信息的管理
资料信息是本网站的重要组成部分，也是管理员界面难度最大的项目之一，它不仅需要传统信息的添加，还需要资料信息的上传。本功能采用优先上传资料的方法，先行把资料上传到指定文件夹内后，再整体上传数据库。虽然过程复杂了一些，但这样上传可以保证数据与文件的安全性和下载稳定性。
资料信息管理功能用了三个界面来实现，分别是添加资料界面，查看、下载、删除资料界面，修改资料界面。
查看、下载、删除资料界面用GridVieW来存储数据，方便管理员的查看，下载和删除，从页面上就可以直观的看到各类资料的信息，也为修改资料提供了方便。
修改资料页面是由GridVieW里设置的修改页面跳转得到的，修改页面先让TextBox控件读取相应的信息，并显示在TextBox控件中，再由管理员根据需要修改的项进行修改，这样做的目的是为了让管理员能清楚自己改动的地方，而不会改错地方。具体的方式如图所示。

图5.14 资料信息管理后台设计

3.3 开放日信息的管理
开放日是学校对外开放的日子，每年都会对校外人事开放几次，作为校外人员学习成长的平台，这就需要对校外人员做一个统计。
后台主要是对前台报名的数据进行统计查看和删除，相对比较简单具体的方式如图所示。

图5.15开放日信息管理后台设计
3.4系统管理
后台主页面的设计创新采用了生成静态页面的设计，方便快捷，简单的拖拖拉拉就可以使用，而且排版不容易乱，一共有8个功能模块，如图5.6所示。

图5.16后台管理员主页面
1、账号管理
主要是用于显示后台管理员的信息，用于修改和删除。此功能的实现主要是利用GridView控件，使用该控件应首先绑定行的数据，触发RowDataBound事件，实现绑定；当点击修改时，触发PageIndexChanging事件，实现修改功能；当点击删除时，触发RowDeleting事件，执行delete from Admin where id='" + ID + "'"语句，实现删除功能，如图所示。

图5.17后台管理员账号管理
2、 添加管理员账号
此处添加账号设计页面的时候，密码对应的TextBox的TextMode属性设置为Password，这样在运行的时候，密码隐藏显示，加大了用户账号的安全性，在执行添加时，创建数据库连接，写出SQL语句“insert into Admin (Apwd,Aname)values(@Apwd,@Aname”如图所示。

图5.18 添加新账号成功
3、管理教师
这一模块主要是用于显示园内教师的姓名、账号、密码、联系电话、管理的班级等信息，管理员还可以对其信息进行修改、删除。实现功能时同样是利用了GridView控件，首先进行行的数据的绑定，触发RowDataBound事件，在此同时还设置了鼠标移动前后所变的颜色；当点击“修改”时触发PageIndexChanging事件，并且可以把姓名传值到修改页面，可以更改教师姓名和联系电话等基本信息；当点击“删除”时，触发RowDeleting事件，创建数据库连接，写出删除的SQL语句
"delete from ClassAdmin where id='" + ID + "'"。如图。

图5.19管理教师页面
4、 添加教师
此处为管理员添加教师模块，利用DropDownList从ClassTable中绑定管理班级的信息，创建数据库的连接，打开数据库，写出SQL添加语句"insert into ClassAdmin(Tel,Aname,ClassName,LName,Lpwd)values(@Tel,@Aname,@ClassName,@LName,@Lpwd)"，添加成功后跳转到管理教师信息页面。如图所示。

图5.20添加教师成功页面

3.5互动信息管理
1、父母成长中心后台管理
本模块做的主要是对应前台父母开放中心的留言回复预约信息的删除。利用GridView控件绑定显示前台父母的预约信息及相关的留言、问题。点击“删除”时，触发RowDeleting时间，编写SQL删除语句“delete from Running where id='" + ID + "'”数据库表为Running表；点击“回复”时，跳转到HuiFu页面，留言人的姓名和内容是用Label控件直接读取出来，管理员只需直接输入回复的内容即可。随后页面会跳转到EditRuning页面上，显示回复内容，update Running表中HuiFu字段的内容，如图所示。

图5.21回复留言页面
考勤信息管理分为：1.添加幼儿的考勤信息，2.管理幼儿的考勤信息 3.幼儿的出勤率 4.班级的考勤率①添加幼儿的出勤率有添加幼儿的类型，如：幼儿是上学，还是放学 还是 请假。幼儿属于哪个班级如：徐州悦心之家 还是小学。学生的姓名必须要填写。以及当天所属的日期 调用日历表。填写时间。②管理幼儿的考勤信息主要是对幼儿的信息进行添加以及修改 删除。③幼儿的出勤率，看某个幼儿的出勤率首先要选择这个幼儿属于哪个班级 幼儿的大名叫啥，可以查看这个幼儿几月份的出勤率，主要是看这个幼儿请假几天 旷假几天来算出勤率。④班级出勤率主要是看班级的出勤率。以班级为集体。如图所示。

图5.22 班级出勤率

图5.23幼儿出勤率
3.6健康信息管理
健康信息管理主要分为两大块1.添加幼儿的健康信息 2.管理幼儿的健康信息。添加幼儿的健康信息 写个健康的标题 幼儿所属的班级以及幼儿的姓名。然后在内容处详细描述。管理健康信息 主要是对幼儿健康信息进行修改 删除。如图所示

图5.24管理幼儿健康信息
四、 教师管理功能展示与实现
4.1 登录的实现
随着信息化时代的到来，计算机应用技术已经在各行各业中发挥着无法取代的地步。现在越来越多的软件已经认识到了对于软件用户管理的重要性，计算机技术已经广泛的应用于日常的生活工作中。科学的实用计算机技术对管理工作不但可以让管理工作更加规范化系统化和自动化而且还能节省大量的劳动力、物力。它能够让每一个企业走上良好运转轨道，为其快速发展奠定着坚定基础。在使用同一款软件的时候我们会牵扯到用户管理和权限的问题，怎样合理的使用的软件，权限管理是相当重要的。因为有职位于功能的不同，所以在功能的划分上也要有所不同，这样才有合理有效快捷的使用一款软件。
权限管理系统就是根据不同的权限分配不同的权利，主要分为管理员和普通用户，而本系统有三级用户即为最高权限的高级管理员、教师管理权限和普通用户。普通用户通过登录界面可以进入前台界面，管理员通过后台进行添加。在登录界面输入用户名和密码，通过控制层进行判断用户的种类，根据用户的种类进入到不同的界面，在相应的界面行驶不同的功能。
下图为教师管理员登陆的页面：

图5.25教师管理登录窗口
4.2 主界面的布局
系统主界面基于角色设计，不同用户登录后基于其归属角色显示和激活不同的操作，三级管理其中以教师管理员登录所显示的页面又不同于管理员管理的页面，教师管理员所登陆管理主页左侧是下拉框式是菜单栏，根据下拉菜单选项的不同，所显示的信息也不同。如图所示。

图5.26 系统主界面
系统的主界面左侧是菜单栏，下拉式菜单栏的实际情况是基于实际情况所选择的的最佳选项。下拉式菜单栏的设计，可以使主页面界面显得更加人性化。设计的重要性有这么几个原因：首先，用户界面越直观，就越易用，越易用就越便宜。本系统界面的优越性主要体现界面元素一致、字体字号一致、重要功能突出、符合流行操作系统如windows的主体界面元素等方面。
整个操作界面整洁美观，使用起来非常的舒服，功能强大容易上手。
4.3修改个人信息
作为模块主要功能，主功能有各个小功能组合而成，缺一不可。教师登陆的后台，左侧第一栏为个人信息的修改和密码的修改，此项为系统管理最基础的功能，修改教师登陆的个人信息。教师信息的修改，极大地体现了系统的灵活性，如教师连自身信息都无法修改，会让整个系统显得略有掣肘，会让管理员的任务加剧，所以，必要的基础信息修改也尤为重要，如图所示：

图5.27 教师登陆管理个人信息图

4.4资料信息添加
1、信息的及时性可以让家长随时了解学校发布的各种信息，让家长放心的把孩子交给幼儿园。
资料信息添加中，文件上传可令家长资料下载。家长及时掌握学园发布信息，及时，快捷，方便，有效的提高效率个家长的重视性。抛开传统纸张，电子模式的信息更新，可以让家长不需要为长旅途奔波而显得麻烦，节约了时间，让家长有更多的时间来了解自己孩子的一举一动。文档的上传与下载是资料添加页面的一大亮点，家长可通过文档对信息进一步了解，实现功能如下图所示：
图5.28 资料信息的添加
2、当教师把资料信息上传至数据库的时候，如若上传错误还可以对上传错误的资料进行修改。这是作为教师管理权限之一。单一的上传不能保证数据上传的准确性，所以上传之后，对上传资料的查看是为必须。教师管理上传资料，针对上传的文档修改，实现功能如下图所示：

图5.29资料信息管理窗口
4.5学生信息管理
做为班级负责人，教师是有权对每个学生的信息进行管理。例如：当一个学生出现转校等，教师可对学生信息进行删除与修改，极大地提高了管理的灵活性。无需重复管理员登陆操作，既方便管理员管理，又可以让老师更加了解学生的各种去向，充分了解每个学生的个人信息。实现功能如图所示：

图5.32学生信息管理窗口
4.6考勤信息管理
在人工管理的模式上，也存有考勤信息，不过区别在于一个是记录在纸张上，一个是记录于后台数据。在每一所学校，都存在考勤表，老师点名，学生应答。而本系统除却正常记录之外，还有着针对着记录数据的统计，计算出每一个学员当月的出勤率。学员的出勤率，可更利于教师对该学生平时成绩的评判，具体功能实现如图所示。

图5.33 考勤信息管理窗口
4.7健康信息
健康是家长和老师非常关注的问题。孩子健康、安全，家长才能放心的把孩子交给老师。所以考虑到这种情况，做一个健康管理是非常有必要的。健康的管理系统实际运行效果如图所示：

图5.34 健康信息管理窗口

23