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容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。