项目描述:

随着家长对孩子教育的日渐重视,社区幼儿学校在国内逐渐兴起,对社区幼儿学校的信息化管理成为迫切需求。社区幼儿学校管理系统需要实现以下功能:

1)  教师管理:实现对教师信息的查询、删除、增加(姓名、所教课程)

2)  家长管理:实现对家长信息的查询、删除、增加(姓名、电话、地址)

3)  幼儿管理:实现对幼儿信息的查询、删除、增加(姓名、生日、照片)

4)  上课管理:实现对上课信息的查询、增加(上课时间、内容、效果)

请根据上述项目背景描述进行上机操作,完成Web应用系统的开发任务。

任务一                         

    在数据库管理系统MySql中创建社区幼儿学校管理系统的数据库db_ks,并按照以下数据库设计创建出所有的数据库表。

社区幼儿医院管理系统的数据库设计如表1-1至1-6所示:

表1-1 用户表t_user

列名

类型

是否主键

允许

为空

是否

自增长

描述

id

int

用户id

role

varchar(45)

角色(admin系统管理员、parents家长)

name

varchar(45)

用户名

pwd

varchar(45)

密码

tel

varchar(45)

电话

address

varchar(256)

地址

表1-2 教师表t_teacher

列名

类型

是否主键

 

允许

为空

是否

自增长

描述

id

int

教师id

name

varchar(45)

教师名

表1-3 课程表t_course

列名

类型

是否主键

允许

为空

是否

自增长

描述

id

int

课程id

name

varchar(45)

课程名

desc

varchar(256)

课程描述

表1-4 教师课程关系表t_teacher_course

列名

类型

是否主键

允许

为空

是否

自增长

描述

teacherId

int

教师id

courseId

int

课程id

表1-5 幼儿表t_kid

列名

类型

是否主键

允许

为空

是否

自增长

描述

id

int

幼儿id

name

varchar(45)

幼儿名

birthdate

varchar(45)

生日

photo

varchar(128)

照片

parentsId

int

家长id(t_user表主键)

表1-6 上课表t_teaching

列名

类型

是否主键

允许

为空

是否

自增长

描述

id

int

用户id

kidId

int

幼儿Id

teacherId

int

教师Id

teachDate

varchar(45)

上课时间

content

text

上课内容

effect

text

上课效果

任务一的功能是建立数据库表,只要按照表中的信息来建立就可以了。

任务二

项目结构


实现用户登录功能的开发任务,在页面输入用户名、密码、验证码后,点击【登录】按钮,能自动提交用户登录验证请求,验证成功后自动跳转到教师管理页面

1 使用Eclipse新建一个Dynamic Web Project 项目,项目命名为KidSchool

操作说明:

2在项目源码web目录下的用户登录页面index.jsp,实现用户登录页面的jsp代码在项目源码web目录下添加样式表文件styles.css,web目录下新建一个inc目录,并在inc目录下添加页头文件header.inc和页脚文件footer.inc

操作说明:

1)在右侧项目资源视图中,选择web目录的默认登录页面index.jsp,编写实现该页面的JSP代码

2)在右侧项目资源视图中,选择web目录,选择右键菜单New,选择StyleSheet创建样式表文件styles.css,再选择File创建普通文件header.inc和footer.inc,编写以上新创建文件的代码

index.jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3.  
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>登录页面</title>
  8. <link href="styles.css" rel="stylesheet"/>
  9. </head>
  10. <body>
  11. <div>
  12. <div id="header">
  13. <h1>社区幼稚园管理系统</h1>
  14. </div>
  15. <div id="main">
  16. <form action="LoginServlet" method="post">
  17. <table>
  18. <tr>
  19. <td>姓名</td>
  20. <td><input name="username" /></td>
  21. </tr>
  22. <tr>
  23. <td>密码</td>
  24. <td><input type="password" name="pwd"/></td>
  25. </tr>
  26. <tr>
  27. <td>验证码</td>
  28. <td><input name="usercode" /></td>
  29. </tr>
  30. <tr>
  31. <td>点击刷新</td>
  32. <!-- 为了避免IE的缓存bug 需要每次请求带上不一样的参数 这个参数可以没有任何意义 关键是要不一样 -->
  33. <td><img src="CheckCode" onclick="this.src='CheckCode?rand='+Math.random()"/></td><!-- /在html和转发Dispatcher里面的含义不同 前者表示服务器根目录 8080:/ 后者表示当前应用根目录 8080/ph/ -->
  34. </tr>
  35. <tr>
  36. <td></td>
  37. <td><input type="submit" value="登录" /> <input type="reset" value="重置"/></td>
  38. </tr>
  39. </table>
  40.  
  41. </form>
  42. <h4 align="center" style="color:red"><%=request.getAttribute("msg")==null?"":request.getAttribute("msg") %>
  43. <%=request.getParameter("para")==null?"":request.getParameter("para") %></h4>
  44. </div>
  45. <div id="footer">
  46. <%@ include file="inc/footer.inc"%>
  47. </div>
  48. </div>
  49. </body>
  50. </html>

style.css

  1. /* CSS Document */
  2. /*
  3. 对于CSS来说 每一个元素默认的margin和padding就是0px。但是不同的浏览器会有一个默认的浏览器样式修改默认的margin padding。所以在使用自定义样式编程前加上 *{ }重新设置margin和padding为0px,覆盖浏览器样式使得各个浏览器下统一。
  4. */
  5. *{
  6. margin:0px;
  7. padding:0px;
  8. font-weight: bold;
  9. }
  10. /*a {*/
  11. /*color:black;*/
  12. /*text-decoration: none;*/
  13. /*}*/
  14.  
  15. a:link,
  16. a:visited {
  17. color:#FF0000;
  18. text-decoration:underline;
  19. }
  20. a:hover,
  21. a:active {
  22. color: #5cffeb;
  23. text-decoration:none;
  24. }
  25. /*
  26. ID选择器 以#开始 用来匹配元素的id值
  27. */
  28. #header{
  29. height:160px;
  30. background-color:#0033FF;
  31. position:relative;
  32. }
  33.  
  34. /*后代选择器 在多个选择器之间加入空格表示后代选择器 用来匹配元素的包含关系
  35. 标签选择器 直接使用标签本身来匹配元素
  36. */
  37.  
  38. #header h1{
  39. color:#FFFF00;
  40. font-size:48px;
  41. padding-top:40px;
  42. width:300px;/* 通过设置margin的左右为auto可以实现居中,前提是被居中元素指定宽度*/
  43. margin:0px auto;
  44. }
  45.  
  46. /* #header a:first-child #header 里面所有是一个子元素的链接
  47. #header > a:first-child #header的直接子元素中的第一个a
  48. */
  49.  
  50. #header > a:first-child{
  51. /*float:right;*/
  52.  
  53. position:absolute;
  54. right:15px;
  55. top:10px;
  56. }
  57. /*
  58. 所有元素默认的postion是static,其特点按照在文档中的先后顺序进行排列
  59. position:absolute 绝对布局,其特点相对于最近一个已定位(absolute/relative )父元素进行定位,如果没有这样的父元素就相对于body。通过top bottom left right控制
  60. position:relative 相对布局 其特点是相对于元素本来的位置进行位移 。通过top bottom left right控制,如果吗,没有位移量,其显示还是在原来的位置,但是性质已经变成定位元素。
  61. */
  62.  
  63. #header .menu{
  64. position:absolute;
  65. bottom:5px;
  66. }
  67.  
  68. #header .menu li{
  69. float: left;
  70. margin-left:15px;
  71. list-style-type:none
  72. }
  73. #main{
  74. min-height:500px;
  75. background-color:pink;
  76. }
  77.  
  78. #main table ,#main h4{
  79. width:360px;
  80. margin:0px auto;
  81. }
  82.  
  83. .minWidth{
  84. min-width:240px;
  85. }
  86.  
  87. #main table{
  88. padding-top:60px;
  89. }
  90. #main table .result{
  91. background-color: white;
  92. text-align: center;
  93. }
  94. #main input,#main img[src='CheckCode']{
  95. width:150px;
  96. height:24px;
  97. }
  98.  
  99. #main textarea{
  100. width: 150px;
  101. height: 96px;
  102. }
  103. /*
  104. 每个id选择器算100 类 伪类算10 标签选择器算1 将所有的值相加就是优先级
  105. */
  106. #main tr:last-child input{
  107. width:auto;
  108. padding:0 10px;
  109. }
  110.  
  111. #footer{
  112. background-color:#0033FF;
  113. height:80px;
  114. }
  115.  
  116. #footer p{
  117. color:red;
  118. font-size:20px;
  119. padding-top:40px;
  120. width:800px;/* 通过设置margin的左右为auto可以实现居中,前提是被居中元素指定宽度*/
  121. margin:0px auto;
  122. }

inc目录下的header.inc和footer.inc

header.inc

  1. <%@ page pageEncoding="UTF-8"%>
  2. <a href="QuitServlet">退出</a>
  3. <a href="">修改密码</a>
  4. <h1>社区幼稚园</h1>
  5. <ul class="menu">
  6. <li><a href="teacherSearch.jsp">教师管理</a></li>
  7. <li><a href="">家长管理</a></li>
  8. <li><a href="">幼儿管理</a></li>
  9. <li><a href="courseAdd">课程管理</a></li>
  10. </ul>

footer.inc

  1. <%@ page pageEncoding="UTF-8"%>
  2. <p>作者:Black_YeJing 单位:XXXXXXX 邮箱:2147807609@qq.com</p>

.......

项目描述:

随着家长对孩子教育的日渐重视,社区幼儿学校在国内逐渐兴起,对社区幼儿学校的信息化管理成为迫切需求。社区幼儿学校管理系统需要实现以下功能:

1)  教师管理:实现对教师信息的查询、删除、增加(姓名、所教课程)

2)  家长管理:实现对家长信息的查询、删除、增加(姓名、电话、地址)

3)  幼儿管理:实现对幼儿信息的查询、删除、增加(姓名、生日、照片)

4)  上课管理:实现对上课信息的查询、增加(上课时间、内容、效果)

请根据上述项目背景描述进行上机操作,完成Web应用系统的开发任务。

任务一                         

    在数据库管理系统MySql中创建社区幼儿学校管理系统的数据库db_ks,并按照以下数据库设计创建出所有的数据库表。

社区幼儿医院管理系统的数据库设计如表1-1至1-6所示:

表1-1 用户表t_user

列名

类型

是否主键

允许

为空

是否

自增长

描述

id

int

用户id

role

varchar(45)

角色(admin系统管理员、parents家长)

name

varchar(45)

用户名

pwd

varchar(45)

密码

tel

varchar(45)

电话

address

varchar(256)

地址

表1-2 教师表t_teacher

列名

类型

是否主键

 

允许

为空

是否

自增长

描述

id

int

教师id

name

varchar(45)

教师名

表1-3 课程表t_course

列名

类型

是否主键

允许

为空

是否

自增长

描述

id

int

课程id

name

varchar(45)

课程名

desc

varchar(256)

课程描述

表1-4 教师课程关系表t_teacher_course

列名

类型

是否主键

允许

为空

是否

自增长

描述

teacherId

int

教师id

courseId

int

课程id

表1-5 幼儿表t_kid

列名

类型

是否主键

允许

为空

是否

自增长

描述

id

int

幼儿id

name

varchar(45)

幼儿名

birthdate

varchar(45)

生日

photo

varchar(128)

照片

parentsId

int

家长id(t_user表主键)

表1-6 上课表t_teaching

列名

类型

是否主键

允许

为空

是否

自增长

描述

id

int

用户id

kidId

int

幼儿Id

teacherId

int

教师Id

teachDate

varchar(45)

上课时间

content

text

上课内容

effect

text

上课效果

任务一的功能是建立数据库表,只要按照表中的信息来建立就可以了。

任务二

项目结构


实现用户登录功能的开发任务,在页面输入用户名、密码、验证码后,点击【登录】按钮,能自动提交用户登录验证请求,验证成功后自动跳转到教师管理页面

1 使用Eclipse新建一个Dynamic Web Project 项目,项目命名为KidSchool

操作说明:

2在项目源码web目录下的用户登录页面index.jsp,实现用户登录页面的jsp代码在项目源码web目录下添加样式表文件styles.css,web目录下新建一个inc目录,并在inc目录下添加页头文件header.inc和页脚文件footer.inc

操作说明:

1)在右侧项目资源视图中,选择web目录的默认登录页面index.jsp,编写实现该页面的JSP代码

2)在右侧项目资源视图中,选择web目录,选择右键菜单New,选择StyleSheet创建样式表文件styles.css,再选择File创建普通文件header.inc和footer.inc,编写以上新创建文件的代码

index.jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3.  
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>登录页面</title>
  8. <link href="styles.css" rel="stylesheet"/>
  9. </head>
  10. <body>
  11. <div>
  12. <div id="header">
  13. <h1>社区幼稚园管理系统</h1>
  14. </div>
  15. <div id="main">
  16. <form action="LoginServlet" method="post">
  17. <table>
  18. <tr>
  19. <td>姓名</td>
  20. <td><input name="username" /></td>
  21. </tr>
  22. <tr>
  23. <td>密码</td>
  24. <td><input type="password" name="pwd"/></td>
  25. </tr>
  26. <tr>
  27. <td>验证码</td>
  28. <td><input name="usercode" /></td>
  29. </tr>
  30. <tr>
  31. <td>点击刷新</td>
  32. <!-- 为了避免IE的缓存bug 需要每次请求带上不一样的参数 这个参数可以没有任何意义 关键是要不一样 -->
  33. <td><img src="CheckCode" onclick="this.src='CheckCode?rand='+Math.random()"/></td><!-- /在html和转发Dispatcher里面的含义不同 前者表示服务器根目录 8080:/ 后者表示当前应用根目录 8080/ph/ -->
  34. </tr>
  35. <tr>
  36. <td></td>
  37. <td><input type="submit" value="登录" /> <input type="reset" value="重置"/></td>
  38. </tr>
  39. </table>
  40.  
  41. </form>
  42. <h4 align="center" style="color:red"><%=request.getAttribute("msg")==null?"":request.getAttribute("msg") %>
  43. <%=request.getParameter("para")==null?"":request.getParameter("para") %></h4>
  44. </div>
  45. <div id="footer">
  46. <%@ include file="inc/footer.inc"%>
  47. </div>
  48. </div>
  49. </body>
  50. </html>

style.css

  1. /* CSS Document */
  2. /*
  3. 对于CSS来说 每一个元素默认的margin和padding就是0px。但是不同的浏览器会有一个默认的浏览器样式修改默认的margin padding。所以在使用自定义样式编程前加上 *{ }重新设置margin和padding为0px,覆盖浏览器样式使得各个浏览器下统一。
  4. */
  5. *{
  6. margin:0px;
  7. padding:0px;
  8. font-weight: bold;
  9. }
  10. /*a {*/
  11. /*color:black;*/
  12. /*text-decoration: none;*/
  13. /*}*/
  14.  
  15. a:link,
  16. a:visited {
  17. color:#FF0000;
  18. text-decoration:underline;
  19. }
  20. a:hover,
  21. a:active {
  22. color: #5cffeb;
  23. text-decoration:none;
  24. }
  25. /*
  26. ID选择器 以#开始 用来匹配元素的id值
  27. */
  28. #header{
  29. height:160px;
  30. background-color:#0033FF;
  31. position:relative;
  32. }
  33.  
  34. /*后代选择器 在多个选择器之间加入空格表示后代选择器 用来匹配元素的包含关系
  35. 标签选择器 直接使用标签本身来匹配元素
  36. */
  37.  
  38. #header h1{
  39. color:#FFFF00;
  40. font-size:48px;
  41. padding-top:40px;
  42. width:300px;/* 通过设置margin的左右为auto可以实现居中,前提是被居中元素指定宽度*/
  43. margin:0px auto;
  44. }
  45.  
  46. /* #header a:first-child #header 里面所有是一个子元素的链接
  47. #header > a:first-child #header的直接子元素中的第一个a
  48. */
  49.  
  50. #header > a:first-child{
  51. /*float:right;*/
  52.  
  53. position:absolute;
  54. right:15px;
  55. top:10px;
  56. }
  57. /*
  58. 所有元素默认的postion是static,其特点按照在文档中的先后顺序进行排列
  59. position:absolute 绝对布局,其特点相对于最近一个已定位(absolute/relative )父元素进行定位,如果没有这样的父元素就相对于body。通过top bottom left right控制
  60. position:relative 相对布局 其特点是相对于元素本来的位置进行位移 。通过top bottom left right控制,如果吗,没有位移量,其显示还是在原来的位置,但是性质已经变成定位元素。
  61. */
  62.  
  63. #header .menu{
  64. position:absolute;
  65. bottom:5px;
  66. }
  67.  
  68. #header .menu li{
  69. float: left;
  70. margin-left:15px;
  71. list-style-type:none
  72. }
  73. #main{
  74. min-height:500px;
  75. background-color:pink;
  76. }
  77.  
  78. #main table ,#main h4{
  79. width:360px;
  80. margin:0px auto;
  81. }
  82.  
  83. .minWidth{
  84. min-width:240px;
  85. }
  86.  
  87. #main table{
  88. padding-top:60px;
  89. }
  90. #main table .result{
  91. background-color: white;
  92. text-align: center;
  93. }
  94. #main input,#main img[src='CheckCode']{
  95. width:150px;
  96. height:24px;
  97. }
  98.  
  99. #main textarea{
  100. width: 150px;
  101. height: 96px;
  102. }
  103. /*
  104. 每个id选择器算100 类 伪类算10 标签选择器算1 将所有的值相加就是优先级
  105. */
  106. #main tr:last-child input{
  107. width:auto;
  108. padding:0 10px;
  109. }
  110.  
  111. #footer{
  112. background-color:#0033FF;
  113. height:80px;
  114. }
  115.  
  116. #footer p{
  117. color:red;
  118. font-size:20px;
  119. padding-top:40px;
  120. width:800px;/* 通过设置margin的左右为auto可以实现居中,前提是被居中元素指定宽度*/
  121. margin:0px auto;
  122. }

inc目录下的header.inc和footer.inc

header.inc

  1. <%@ page pageEncoding="UTF-8"%>
  2. <a href="QuitServlet">退出</a>
  3. <a href="">修改密码</a>
  4. <h1>社区幼稚园</h1>
  5. <ul class="menu">
  6. <li><a href="teacherSearch.jsp">教师管理</a></li>
  7. <li><a href="">家长管理</a></li>
  8. <li><a href="">幼儿管理</a></li>
  9. <li><a href="courseAdd">课程管理</a></li>
  10. </ul>

footer.inc

  1. <%@ page pageEncoding="UTF-8"%>
  2. <p>作者:Black_YeJing 单位:XXXXXXX 邮箱:2147807609@qq.com</p>

.......

JavaWeb应用系统开发实训任务(一)的更多相关文章

  1. Android系统开发实务实训

    实训项目 :               Android系统开发实务实训                           项目成品名称:         绝地坦克                 ...

  2. 最老程序猿创业开发实训1---Android应用架构之MVC

    我们都知道Android中基本组件是Activity,每一个界面都是一个Activity,自从2.3版本号開始.又添加了Fragment组件,提供了适应于各种屏幕方法.可是因为Android系统仅仅是 ...

  3. 网络project1101班2014-2015学年《网络软件开发实训》期末考试

    注意事项: *考试时间:2014年11月20日 第5.6节. *在计算机D盘,新建目录.并命名"学号+姓名".如:(称为考生目录.下同).考试中全部文件必须保存在此目录下. *启动 ...

  4. 小型APP系统开发与应用项目实训

    实训项目 :             小型APP系统开发与应用项目实训                           项目成品名称:          果乐多商城               项 ...

  5. 软件工程实训项目案例--Android移动应用开发

    实训过程 角色分工 1.项目经理:负责项目的组织实施,制定项目计划,并进行跟踪管理 2.开发人员:对项目经理及项目负责 3.需求分析员:负责系统的需求获取和分析,并协助设计人员进行系统设计 4.系统设 ...

  6. c++课程实训 银行储蓄系统

    基本要求:定义了用户类(User)和银行类(Bank),用成员函数实现各种功能,多文件组织程序.能用文本文件存取数据(如演示样例中给出的技术): 拓展方向: 序号 加分项目 细       则 1 改 ...

  7. Android实训案例(九)——答题系统的思绪,自己设计一个题库的体验,一个思路清晰的答题软件制作过程

    Android实训案例(九)--答题系统的思绪,自己设计一个题库的体验,一个思路清晰的答题软件制作过程 项目也是偷师的,决心研究一下数据库.所以写的还是很详细的,各位看官,耐着性子看完,实现结果不重要 ...

  8. jeecms系统使用介绍——通过二次开发实现对word、pdf、txt等上传附件的全文检索

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/76912307 本文出自[我是干勾鱼的博客] 之前在文章<基于Java的门户 ...

  9. Java企业实训 - 01 - Java前奏

    前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...

随机推荐

  1. SpringSecurity学习总结

    第一.SpringSecurity-简介 1.1简介 SpringSecurity融合Spring技术栈,提供JavaEE应 用的整体安全解决方案: Spring Security为基于Java EE ...

  2. cloud toolkit同时部署多个服务器

    首先安装cloud toolkit安装完成之后重启idea 添加host主机信息: 部署到远程服务器 具体信息: 配置本地查看服务器日志信息 启动脚本信息 start.sh #! /bin/sh so ...

  3. 记录一个微信网页授权中不小心踩到的坑(Curl请求返回false)

    原文章地址在这里 这个问题是file_get_contents不能获取https的内容引起的.这样的情况下,我们一般会采用curl拓展来模拟请求. 代码demo(当然这是错误的示范): functio ...

  4. matlab将字符串转化为变量的方法

    1.将字符串转化为变量的方法,执行 eval(x) 2.将变量转化为字符串的方法,执行 char(a) 讲解 aa = 98 x = 'aa' 目标:通过x得到98,即x->aa->98, ...

  5. python中requests.session的妙用

    在进行接口测试的时候,我们会调用多个接口发出多个请求,在这些请求中有时候需要保持一些共用的数据,例如cookies信息. 1.requests库的session对象能够帮我们跨请求保持某些参数,也会在 ...

  6. spring cloud之Eureka

    Region 表示aws的地理位置,一个region有多个awailability zone,各region间完全隔离.这种方式实现最大的容错和稳定性. spring cloud 默认使用的regio ...

  7. JVM调优小结

    JVM调优浅谈 https://www.cnblogs.com/andy-zhou/p/5327288.html   1.数据类型 java虚拟机中,数据类型可以分为两类:基本类型和引用类型. 基本类 ...

  8. SQL Server 时间戳与时间格式互相转换

    时间戳(Unix timestamp) 是一种时间表示方式,定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数. Unix时间戳不仅被使用在Unix系统.类Unix系统中,也 ...

  9. HBase管理与监控——内存调优

    HMaster 没有处理过重的负载,并且实际的数据服务不经过 HMaster,它的主要任务有2个:一.管理Hbase Table的 DDL操作, 二.region的分配工作,任务不是很艰巨. 但是如果 ...

  10. SpringBoot: 2.SpringBoot整合servlet(转)

    整合方式1:通过注解扫描完成 Servlet 组件的注册 1.编写servlet package com.bjsxt.servlet; import javax.servlet.ServletExce ...