1、期末报告1期末报告徐州 系统的设计与分析班级 软件 142 学生姓名 秦泗奇 学号 14323042059 详细设计及实现一、总体方案本系统采用的是 Microsoft Visual Studio 2010 结构开发的，采用Microsoft SQL Server 数据库，采用的模型为 B/S 结构，系统是通过华德福学园的实际要求模拟开发，能够完成一个教育机构网站应有的所有功能，为了提高系统的创建速度，我们在编排时候没有采用现在比较流行的三层架构，而是采用了较为传统的双层结构，节约网站的时间，使组员更容易了解代码的意思。徐州悦心之家华德福实践学园基本功能包括：在线报名、在线留言、上传下载资料、
2、上传图片、考勤管理、健康管理等功能模块，整个系统的布局是一个前台，两个后台的形式，管理员后台拥有最高的权限，教师的后台只能管理学生信息，而前台的数据大多为管理员后台里添加的数据。而我做的功能有三大项，主页图片管理，资料信息管理和互动信息管理。（1）在线报名功能模块，只有在线报名后才可以进行一些操作，在线报名时主要填写信息为基本资料、用户名、密码即可，基本资料里的很多字段都有检测格式是否正确的功能（如：邮箱）。（2）报名后的用户可以对自己报名的信息进行修改，也可以对报名时的明码进行修改。（3）教师用户有如下的功能：查看公告信息，查看本班学生信息，查看、下载资料、添加考勤健康信息等，发布公告与上传
3、资料是管理员的权限，只有管理员可以有此功能，教师可以对自己的基本信息进行修改，如姓名电话，用户密（4）管理员是对用户的数据进行管理的，如教师信息管理，互动信息管理等，管理是拥有最高权限的，并且可以拥有教师的所有权限，可以管理删除教师信息，为整个系统的前台和后台提供数据支持。二、前台界面设计本系统采用 DIV+CSS 网页的布局方法，它有别于传统的 HTML 网页设计语言中的表格定位方式，可实现 网页页面内容与表现分离，它系统中还使用了现在较流行的 HTML5 语言，它实际就是包括 HTML、CSS 和 JavaScript 在内的一套技术组合，通过 JavaScript 中的 Jquery 实
4、现动画的效果，它是轻量级的 js 库，它兼容 CSS3 还兼容各种浏览器，例如 IE6.0+,IE8,IE9，等，jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js 来调用命令了，只需定义 id 即可，通过以上的技术使页面更绚丽，美观。用户的界面在设计上是模拟华德福教育理念而设计的，主要以大自然的绿色为主色调，所以在使用上就能让人们感受到华德福教育理念的特点，主界面使用Iframe 嵌套，它的采用的是异步加载技术，现在大多数网站会经常使用 iframes来加载第三方的内容、广告或者插件。使用 iframe 是因为它可以和主页面
5、并行加载，不会阻塞主页面。2.1 模板页展示与实现 我负责系统的前台主要功能有三部分：主页图片的展示，资料信息的查看与下载，开放日的预约。还有一个整个前台模板页的布局与排版。前台模板页采用人性化布局设计，集成了系统前台初始的布局模样。前期我们通过对系统要求的分析，将模板页菜单分为网站首页，公告通知，资料下载，开放日，父母成长中心，在线报名，华德福微博，个人记录八大功能模块。每个功能模块在模板页里就已经链接到相对应的页面，所以在设计其他网页的时候减轻了工作强度和缩短了工作时间。在网站前台的下方，我们也留了两个端口来进入教师和管理员的后台。网站的左侧是一个注册用户的登陆，注册过的用户可以通过登陆的
6、方式修改个人资料，也可以查看个人记录，个人记录只有登陆后才能查看。如图所示。图 5.1 模板页的设计2.2 网站首页的布局与实现网站首页主要由徐州悦心之家华德福实践学园的理念与介绍和校园风采的展示两部分组成。因为学园理念与介绍在一般情况下是一成不变的，所以在设计的时候，我才用了直接填写的方式，而没有和后台相联系。校园风采是学校各种活动图片的展示中心，主要是由标题和图片组成，在设计上采用了读取数据库前八张图片的特点，由数据库数据传播到前台 DataList 控件里，在布局上将DataList 布局为四列，图片在上，标题在下的形式使得校园展示看起来更美观整洁。如图所示。图 5.2 网站首页的设计2
7、.3 资料下载的布局与实现经过实际的分析与考察，一个学校网站至关重要的一项便是资料与信息的下载，资料的下载意味着资源的共享与传播，开源！公益！资源的利用价值得到了大大提升，而他获得的途径也变的简易，一般人们想要学校或者学习资料都必须上网找好长时间，甚至最后还是无功而返，而这一功能恰恰是你可以从学校网下载专用的资料，并且不用担心病毒，和丢失等一系列风险。本网站资料下载采用以标题显示，点击标题获得详细信息和下载权限的布局方式，为了避免资料过多，使得页面美化受到影响。所以采用分页的方式实现资料的排版。如图所示。图 5.3 资料的设计资料的下载需要点击标题进入详细界面下载，在详细界面里，用户可以查看资
8、料的名称，资料添加的时间，以及资料的详细介绍。点击下载后跳出下载任务，可以选择下载的路径。如图所示。图 5.4 资料下载的设计2.4 开放日预约的布局与实现开放日是学校对外开放的日子，每年都会对校外人事开放几次，作为校外人员学习成长的平台，这就需要对校外人员做一个统计。针对开放日。除了基本的资料外，我们还对他们的预约时间和预约部门做了明确的分类，电子邮箱格式也做了验证。如图所示。图 5.5 开放日预约的设计2.5 公告通知的实现 公告通知用于显示现阶段内园内信息的展示，方便大龄儿童了解自己的具体情况，并且加强对学园的了解；另一方面，家长也可以通过这些内容帮助孩子更好的适应学校里的生活。首先创建
9、数据源，可以使用 SqlDataSource 控件，之后在 DataList 控件的智能按钮功能中选择数据源即可；也可以在后台自定义数据源，并将 DataList 对象的 DataSource 指定为自定义的数据源，然后要为 DataList 控件绑定数据，另外我们还进行了分页设计，可以使页面更为整洁。如图所示。图 5.6 公告通知页面2.6 父母成长中心此功能主要就是介绍华德福的特色，家长可以在此学习，并参加学校举行的手工坊、读书会、公益性等课程，并且此模块当中嵌入了留言系统，可以给家长们一些参考，本模块的设计主要用了 Textbox 控件，是属于我们常用的控件，我们还进行了非空验证、验证，
10、信息填写完成后各个字段就会插入到后台数据库 Running 表当中，从而实现了申请。留言的展示还是利用了 DataList ，可方便的读取留言。如图所示。图 5.7 父母成长中心预约申请图 5.8 父母成长中心预约申请成功2.7 用户登录的实现 登录系统控制的基础上，不同的人物角色对应不同的密码登录。由于访问控制基于角色的管理用户的逻辑隔离和访问，此策略的权限管理极大地方便了实现。研究表明，人的变化不是用户相对慢得多，并分配用户角色的变化之间的关系并不需要很多的技术，可以由管理人员来完成，并配置权限角色工作是复杂的，需要一定的技术，可以通过承担专业技术人员，而不是给他们的用户的权限，这种情况与
11、实际相符。除了方便的权限管理，基于用户的访问控制方法也可以很好的描述角色层次之间的关系，实现最小权限和职责分离的原则的原则。采用人性化设计，布局系统登录窗口，综合完整性检查系统初始化。如图所示。图 5.9 登录窗口管理用户信息如图所示。图 5.10 修改用户信息窗口2.8 在线报名在线注册登录后，家长可以进行报名操作。整个报名模块由网上报名、报名信息查询功能组成。其中网上报名要确定报名的时间、幼儿、班级等信息。快速方便。更体现了软件的信息化。快速化。如图所示。图 5.11 在线报名界面三、管理员管理功能展示与实现 一般管理员在管理数据都要经过四个步骤来实现，先要添加，然后修改，删除，如果可以下
12、载就下载。如图所示。管 理 员添 加 数 据数 据 资 料能 否 下 载下 载 数 据修 改 数 据 删 除 数 据YN图 5.12 管理员管理流程图3.1 主页图片的管理 在前台网站首页下面的校园展示功能是由管理员添加管理的，我用了两个页面来完成图片的管理。第一个界面主要是用于图片的添加，在图片的格式上我们做了很多要求，可以上传“.xls“, “.doc“, “.mpp“, “.rar“, “.zip“, “.vsd“, “.txt“, “.jpg“, “.gif“, “.bmp“, “.png“, “.swf“, “.avi“, “.mp3“, “.rm“, “.wma“, “.wmv“这些格式的图片。而查看图片页面，我们只允许它删除和查看，并没有修改的选项，因为我们考虑到主页图片设计上只允许存在八张图片来展示，因为图片不算多，管理起来方便，所以只给你后台删除功能。具体的方式如图所示。
