項目描述：
隨着家長對孩子教育的日漸重視，社區幼兒學校在國內逐漸興起，對社區幼兒學校的信息化管理成為迫切需求。社區幼兒學校管理系統需要實現以下功能：
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
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登錄頁面</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div>
<div id="header">
<h1>社區幼稚園管理系統</h1>
</div>
<div id="main">
<form action="LoginServlet" method="post">
<table>
<tr>
<td>姓名</td>
<td><input name="username" /></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>驗證碼</td>
<td><input name="usercode" /></td>
</tr>
<tr>
<td>點擊刷新</td>
<!-- 為了避免IE的緩存bug 需要每次請求帶上不一樣的參數 這個參數可以沒有任何意義 關鍵是要不一樣 -->
<td><img src="CheckCode" onclick="this.src='CheckCode?rand='+Math.random()"/></td><!-- /在html和轉發Dispatcher里面的含義不同 前者表示服務器根目錄 8080:/ 后者表示當前應用根目錄 8080/ph/ -->
</tr>
<tr>
<td></td>
<td><input type="submit" value="登錄" /> <input type="reset" value="重置"/></td>
</tr>
</table>
</form>
<h4 align="center" style="color:red"><%=request.getAttribute("msg")==null?"":request.getAttribute("msg") %>
<%=request.getParameter("para")==null?"":request.getParameter("para") %></h4>
</div>
<div id="footer">
<%@ include file="inc/footer.inc"%>
</div>
</div>
</body>
</html>
style.css
/* CSS Document */
/*
對於CSS來說 每一個元素默認的margin和padding就是0px。但是不同的瀏覽器會有一個默認的瀏覽器樣式修改默認的margin padding。所以在使用自定義樣式編程前加上 *{ }重新設置margin和padding為0px，覆蓋瀏覽器樣式使得各個瀏覽器下統一。
*/
*{
margin:0px;
padding:0px;
font-weight: bold;
}
/*a {*/
/*color:black;*/
/*text-decoration: none;*/
/*}*/
a:link,
a:visited {
color:#FF0000;
text-decoration:underline;
}
a:hover,
a:active {
color: #5cffeb;
text-decoration:none;
}
/*
ID選擇器 以#開始 用來匹配元素的id值
*/
#header{
height:160px;
background-color:#0033FF;
position:relative;
}
/*后代選擇器 在多個選擇器之間加入空格表示后代選擇器 用來匹配元素的包含關系
標簽選擇器 直接使用標簽本身來匹配元素
*/
#header h1{
color:#FFFF00;
font-size:48px;
padding-top:40px;
width:300px;/* 通過設置margin的左右為auto可以實現居中，前提是被居中元素指定寬度*/
margin:0px auto;
}
/* #header a:first-child #header 里面所有是一個子元素的鏈接
#header > a:first-child #header的直接子元素中的第一個a
*/
#header > a:first-child{
/*float:right;*/
position:absolute;
right:15px;
top:10px;
}
/*
所有元素默認的postion是static，其特點按照在文檔中的先后順序進行排列
position:absolute 絕對布局，其特點相對於最近一個已定位(absolute/relative )父元素進行定位,如果沒有這樣的父元素就相對於body。通過top bottom left right控制
position:relative 相對布局 其特點是相對於元素本來的位置進行位移 。通過top bottom left right控制，如果嗎，沒有位移量，其顯示還是在原來的位置，但是性質已經變成定位元素。
*/
#header .menu{
position:absolute;
bottom:5px;
}
#header .menu li{
float: left;
margin-left:15px;
list-style-type:none
}
#main{
min-height:500px;
background-color:pink;
}
#main table ,#main h4{
width:360px;
margin:0px auto;
}
.minWidth{
min-width:240px;
}
#main table{
padding-top:60px;
}
#main table .result{
background-color: white;
text-align: center;
}
#main input,#main img[src='CheckCode']{
width:150px;
height:24px;
}
#main textarea{
width: 150px;
height: 96px;
}
/*
每個id選擇器算100 類 偽類算10 標簽選擇器算1 將所有的值相加就是優先級
*/
#main tr:last-child input{
width:auto;
padding:0 10px;
}
#footer{
background-color:#0033FF;
height:80px;
}
#footer p{
color:red;
font-size:20px;
padding-top:40px;
width:800px;/* 通過設置margin的左右為auto可以實現居中，前提是被居中元素指定寬度*/
margin:0px auto;
}
inc目錄下的header.inc和footer.inc
header.inc
<%@ page pageEncoding="UTF-8"%>
<a href="QuitServlet">退出</a>
<a href="">修改密碼</a>
<h1>社區幼稚園</h1>
<ul class="menu">
<li><a href="teacherSearch.jsp">教師管理</a></li>
<li><a href="">家長管理</a></li>
<li><a href="">幼兒管理</a></li>
<li><a href="courseAdd">課程管理</a></li>
</ul>
footer.inc
<%@ page pageEncoding="UTF-8"%> <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
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登錄頁面</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div>
<div id="header">
<h1>社區幼稚園管理系統</h1>
</div>
<div id="main">
<form action="LoginServlet" method="post">
<table>
<tr>
<td>姓名</td>
<td><input name="username" /></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>驗證碼</td>
<td><input name="usercode" /></td>
</tr>
<tr>
<td>點擊刷新</td>
<!-- 為了避免IE的緩存bug 需要每次請求帶上不一樣的參數 這個參數可以沒有任何意義 關鍵是要不一樣 -->
<td><img src="CheckCode" onclick="this.src='CheckCode?rand='+Math.random()"/></td><!-- /在html和轉發Dispatcher里面的含義不同 前者表示服務器根目錄 8080:/ 后者表示當前應用根目錄 8080/ph/ -->
</tr>
<tr>
<td></td>
<td><input type="submit" value="登錄" /> <input type="reset" value="重置"/></td>
</tr>
</table>
</form>
<h4 align="center" style="color:red"><%=request.getAttribute("msg")==null?"":request.getAttribute("msg") %>
<%=request.getParameter("para")==null?"":request.getParameter("para") %></h4>
</div>
<div id="footer">
<%@ include file="inc/footer.inc"%>
</div>
</div>
</body>
</html>
style.css
/* CSS Document */
/*
對於CSS來說 每一個元素默認的margin和padding就是0px。但是不同的瀏覽器會有一個默認的瀏覽器樣式修改默認的margin padding。所以在使用自定義樣式編程前加上 *{ }重新設置margin和padding為0px，覆蓋瀏覽器樣式使得各個瀏覽器下統一。
*/
*{
margin:0px;
padding:0px;
font-weight: bold;
}
/*a {*/
/*color:black;*/
/*text-decoration: none;*/
/*}*/
a:link,
a:visited {
color:#FF0000;
text-decoration:underline;
}
a:hover,
a:active {
color: #5cffeb;
text-decoration:none;
}
/*
ID選擇器 以#開始 用來匹配元素的id值
*/
#header{
height:160px;
background-color:#0033FF;
position:relative;
}
/*后代選擇器 在多個選擇器之間加入空格表示后代選擇器 用來匹配元素的包含關系
標簽選擇器 直接使用標簽本身來匹配元素
*/
#header h1{
color:#FFFF00;
font-size:48px;
padding-top:40px;
width:300px;/* 通過設置margin的左右為auto可以實現居中，前提是被居中元素指定寬度*/
margin:0px auto;
}
/* #header a:first-child #header 里面所有是一個子元素的鏈接
#header > a:first-child #header的直接子元素中的第一個a
*/
#header > a:first-child{
/*float:right;*/
position:absolute;
right:15px;
top:10px;
}
/*
所有元素默認的postion是static，其特點按照在文檔中的先后順序進行排列
position:absolute 絕對布局，其特點相對於最近一個已定位(absolute/relative )父元素進行定位,如果沒有這樣的父元素就相對於body。通過top bottom left right控制
position:relative 相對布局 其特點是相對於元素本來的位置進行位移 。通過top bottom left right控制，如果嗎，沒有位移量，其顯示還是在原來的位置，但是性質已經變成定位元素。
*/
#header .menu{
position:absolute;
bottom:5px;
}
#header .menu li{
float: left;
margin-left:15px;
list-style-type:none
}
#main{
min-height:500px;
background-color:pink;
}
#main table ,#main h4{
width:360px;
margin:0px auto;
}
.minWidth{
min-width:240px;
}
#main table{
padding-top:60px;
}
#main table .result{
background-color: white;
text-align: center;
}
#main input,#main img[src='CheckCode']{
width:150px;
height:24px;
}
#main textarea{
width: 150px;
height: 96px;
}
/*
每個id選擇器算100 類 偽類算10 標簽選擇器算1 將所有的值相加就是優先級
*/
#main tr:last-child input{
width:auto;
padding:0 10px;
}
#footer{
background-color:#0033FF;
height:80px;
}
#footer p{
color:red;
font-size:20px;
padding-top:40px;
width:800px;/* 通過設置margin的左右為auto可以實現居中，前提是被居中元素指定寬度*/
margin:0px auto;
}
inc目錄下的header.inc和footer.inc
header.inc
<%@ page pageEncoding="UTF-8"%>
<a href="QuitServlet">退出</a>
<a href="">修改密碼</a>
<h1>社區幼稚園</h1>
<ul class="menu">
<li><a href="teacherSearch.jsp">教師管理</a></li>
<li><a href="">家長管理</a></li>
<li><a href="">幼兒管理</a></li>
<li><a href="courseAdd">課程管理</a></li>
</ul>
footer.inc
<%@ page pageEncoding="UTF-8"%> <p>作者:Black_YeJing 單位：XXXXXXX 郵箱：2147807609@qq.com</p>
.......