JavaWeb應用系統開發實訓任務(一)
項目描述：css
隨着家長對孩子教育的日漸重視，社區幼兒學校在國內逐漸興起，對社區幼兒學校的信息化管理成爲迫切需求。社區幼兒學校管理系統須要實現如下功能：html
1） 教師管理：實現對教師信息的查詢、刪除、增長（姓名、所教課程）java
2） 家長管理：實現對家長信息的查詢、刪除、增長（姓名、電話、地址）web
3） 幼兒管理：實現對幼兒信息的查詢、刪除、增長（姓名、生日、照片）數據庫
4） 上課管理：實現對上課信息的查詢、增長（上課時間、內容、效果）編程
請根據上述項目背景描述進行上機操做,完成Web應用系統的開發任務。瀏覽器
任務一 緩存
在數據庫管理系統MySql中建立社區幼兒學校管理系統的數據庫db_ks，並按照如下數據庫設計建立出全部的數據庫表。服務器
社區幼兒醫院管理系統的數據庫設計如表1-1至1-6所示：dom
表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>
.......
- 1. JavaWeb應用系統開發實訓任務(一)
- 2. 一、JavaWeb系統開發環境配置
- 3. cocos2dx遊戲任務系統開發
- 4. 遊戲開發之任務系統
- 5. 實訓任務1
- 6. JavaWeb應用開發框架實例
- 7. javaweb實驗---Struts2框架開發應用
- 8. 開發整理-Javaweb應用的系統升級功能
- 9. Unity3d 任務系統實現
- 10. iOS開發——高級技術&系統應用於系統服務
- 更多相關文章...
- • Eclipse 任務管理 - Eclipse 教程
- • 互聯網系統應用架構基礎分析 - 紅包項目實戰
- • PHP開發工具
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。