期中測試人口普查jsp介面
阿新 • • 發佈：2020-12-15
1.登陸介面
index.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>首頁</title> <style> .a{ font-size: 26px; margin-top: 20px; }</style> </head> <body> <div align="center"> <h1 style="color:blue;">資訊管理</h1> <div class="a"> <a href="add.jsp">人口登記</a> </div> <div class="a"> <a href="BillServlet?method=modifylist">修改人口資訊</a> </div> <div class="a"> <a href="BillServlet?method=dellist">刪除人口資訊</a> </div> <div class="a"> <a href="search.jsp">查詢人口資訊</a> </div> <div class="a"> <a href="BillServlet?method=looklist">人口資訊瀏覽</a> </div> </div> </body> </html>
2.人口登記
add.jap
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>人口登記</title> <style> .a{ margin-top: 20px; } .b{ font-size: 20px; width: 160px; color: white; background-color: greenyellow; } </style> </head> <body> <% Object message = request.getAttribute("message"); if(message!=null && !"".equals(message)){ %> <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script> <%} %> <div align="center" id="div1"> <h1 style="color: red;">人口登記</h1> <form action="BillServlet?method=add" name="information" method="post" onsubmit="return check()"> <div class="a"> <label>戶別：</label> <input type="radio" name="gender" value="家庭戶" checked="checked"/>家庭戶 <input type="radio" name="gender" value="集體戶"/>集體戶 </div> <div class="a"> <label>住房型別：</label> <input type="radio" name="house" value="家庭住宅" checked="checked"/>家庭住宅 <input type="radio" name="house" value="集體住所"/>集體住所 <input type="radio" name="house" value="工作地住所"/>工作地住所 <input type="radio" name="house" value="其他住宅"/>其他住宅 <input type="radio" name="house" value="無住宅"/>無住宅 </div> <div class="a"> 本戶現住房面積:<input type="text" id="sqare" name="sqare"runat="server" maxlength="100" size="10" onblur="if(/[^0-9]/.test(this.value)){alert('Error');}" />平方米 </div> <div class="a"> 本戶現住房間數:<input type="text" id="jian" name="jian" runat="server" maxlength="100" size="10" onblur="if(/[^0-9]/.test(this.value)){alert('Error');}" />間 </div> <div class="a"> 房主姓名:<input type="text" id="owname" name="owname"/> </div> <div class="a"> 身份證號碼:<input type="text" id="idcard" name="idcard" maxlength="13" onKeyUp="value=value.replace(/[\W]/g,'')"/> </div> <div class="a"> <label>性別：</label> <input type="radio" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女"/>女 </div> <div class="a"> 民族<input type="text" id="zu" name="zu"/> </div> <div class="form-group"> <label for="address">受教育程度：</label> <select name="address" class="form-control" id="address"> <option value="研究生">研究生</option> <option value="大學本科">大學本科</option> <option value="大學專科">大學專科</option> <option value="高中">高中</option> <option value="初中">初中</option> <option value="小學">小學</option> <option value="未上過學">未上過學</option> </select> </div> <div class="a"> <button type="submit" class="b">儲存</button> </div> <div class="a"> <a href="index.jsp" >返回</a> </div> </form> </div> <script Language="javaScript"> function check() { if (document.information.sqare.value == "") { alert("住房面積不能為空."); document.information.sqare.focus(); return false; } if (document.information.jian.value == "") { alert("房間數不能為空."); document.information.jian.focus(); return false; } if (document.information.owname.value == "") { alert("房主姓名不能為空."); document.information.owname.focus(); return false; } if (document.information.idcard.value == "") { alert("身份證號不能為空."); document.information.idcard.focus(); return false; } if (document.information.zu.value == "") { alert("民族不能為空."); document.information.zu.focus(); return false; } var a=document.information.idcard.value.length; if(a!=13) { alert("身份證位數應為13位."); document.information.idcard.focus(); return false; } var reg = /^[0-9]+.?[0-9]*$/; /*for(var i=0;i<a;i++) { if (reg.test(document.information.idcard.value.charCodeAt(i))) {} else if(document.information.idcard.value.charCodeAt(i)==X&&i==12){} else if(document.information.idcard.value.charCodeAt(i)==x&&i==12){} else{ alert("身份證輸入非法字元"); document.information.idcard.focus(); return false; } }*/ return true; } </script> </body> </html>
3.修改人口資訊
modifylist.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .a{ margin-top: 20px; } .b{ font-size: 20px; width: 160px; color: white; background-color: greenyellow; } .tb, td { border: 1px solid black; font-size: 22px; } </style> </head> <body> <% Object message = request.getAttribute("message"); if(message!=null && !"".equals(message)){ %> <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script> <%} %> <div align="center"> <h1 style="color: red;">修改資訊</h1> <a href="index.jsp">返回主頁</a> <table class="tb"> <tr> <td>戶別</td> <td>住房型別</td> <td>本戶現住房面積</td> <td>本戶現住房間數</td> <td>戶主姓名</td> <td>身份證號</td> <td>性別</td> <td>民族</td> <td>受教育程度</td> <td align="center" colspan="2">操作</td> </tr> <c:forEach items="${bills}" var="item"> <tr> <td>${item.gender}</td> <td>${item.house}</td> <td>${item.sqare}</td> <td>${item.jian}</td> <td>${item.owname}</td> <td>${item.idcard}</td> <td>${item.sex}</td> <td>${item.zu}</td> <td>${item.address}</td> <td><a href="BillServlet?method=getbillbyidcard2&idcard=${item.idcard}">修改</a></td> </tr> </c:forEach> </table> </div> </body> </html>
modify.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .a{ margin-top: 20px; } .b{ font-size: 20px; width: 160px; color: white; background-color: greenyellow; } </style> </head> <body> <% Object message = request.getAttribute("message"); if(message!=null && !"".equals(message)){ %> <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script> <%} %> <div align="center"> <h1 style="color: cyan;">修改</h1> <form action="BillServlet?method=modify&oldidcard=${bill.idcard}" method="post" onsubmit="return check()"> <div class="a"> <label>戶別：</label> <c:if test="${bill.gender=='家庭戶'}"> <input type="radio" name="gender" value="家庭戶" checked/>家庭戶 <input type="radio" name="gender" value="集體戶" />集體戶 </c:if> <c:if test="${bill.gender=='集體戶'}"> <input type="radio" name="gender" value="家庭戶" />家庭戶 <input type="radio" name="gender" value="集體戶" checked/>集體戶 </c:if> </div> <div class="a"> <label>住房型別：</label> <c:if test="${bill.house=='家庭住宅'}"> <input type="radio" name="house" value="家庭住宅" checked="checked"/>家庭住宅 <input type="radio" name="house" value="集體住所"/>集體住所 <input type="radio" name="house" value="工作地住所"/>工作地住所 <input type="radio" name="house" value="其他住宅"/>其他住宅 <input type="radio" name="house" value="無住宅"/>無住宅 </c:if> <c:if test="${bill.house=='集體住所'}"> <input type="radio" name="house" value="家庭住宅" />家庭住宅 <input type="radio" name="house" value="集體住所" checked="checked"/>集體住所 <input type="radio" name="house" value="工作地住所"/>工作地住所 <input type="radio" name="house" value="其他住宅"/>其他住宅 <input type="radio" name="house" value="無住宅"/>無住宅 </c:if> <c:if test="${bill.house=='工作地住所'}"> <input type="radio" name="house" value="家庭住宅" />家庭住宅 <input type="radio" name="house" value="集體住所" />集體住所 <input type="radio" name="house" value="工作地住所" checked="checked"/>工作地住所 <input type="radio" name="house" value="其他住宅"/>其他住宅 <input type="radio" name="house" value="無住宅"/>無住宅 </c:if> <c:if test="${bill.house=='其他住宅'}"> <input type="radio" name="house" value="家庭住宅" />家庭住宅 <input type="radio" name="house" value="集體住所" />集體住所 <input type="radio" name="house" value="工作地住所" />工作地住所 <input type="radio" name="house" value="其他住宅" checked="checked"/>其他住宅 <input type="radio" name="house" value="無住宅"/>無住宅 </c:if> <c:if test="${bill.house=='無住宅'}"> <input type="radio" name="house" value="家庭住宅" />家庭住宅 <input type="radio" name="house" value="集體住所" />集體住所 <input type="radio" name="house" value="工作地住所" />工作地住所 <input type="radio" name="house" value="其他住宅" />其他住宅 <input type="radio" name="house" value="無住宅" checked="checked"/>無住宅 </c:if> </div> <div class="a"> 本戶現住房面積:<input type="text" id="sqare" name="sqare" value="${bill.sqare}"/>平方米 </div> <div class="a"> 本戶現住房間數:<input type="text" id="jian" name="jian" value="${bill.jian}" onblur="if(/[^0-9]/.test(this.value)){alert('Error');}"/>間 </div> <div class="a"> 房主姓名:<input type="text" id="owname" name="owname" value="${bill.owname}" onblur="if(/[^0-9]/.test(this.value)){alert('Error');}"/> </div> <div class="a"> 身份證號碼:<input type="text" id="idcard" name="idcard" value="${bill.idcard}" onKeyUp="value=value.replace(/[\W]/g,'')"/> </div> <div class="a"> <label>性別：</label> <c:if test="${bill.sex=='男'}"> <input type="radio" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女"/>女 </c:if> <c:if test="${bill.sex=='女'}"> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女" checked="checked"/>女 </c:if> </div> <div class="a"> 民族<input type="text" id="zu" name="zu" value="${bill.zu}"/> </div> <div class="form-group"> <label for="address">受教育程度：</label> <select name="address" class="form-control" id="address"> <c:if test="${bill.address=='研究生'}"> <option value="研究生" selected>研究生</option> <option value="大學本科">大學本科</option> <option value="大學專科">大學專科</option> <option value="高中">高中</option> <option value="初中">初中</option> <option value="小學">小學</option> <option value="未上過學">未上過學</option> </c:if> <c:if test="${bill.address=='大學本科'}"> <option value="研究生" >研究生</option> <option value="大學本科" selected>大學本科</option> <option value="大學專科">大學專科</option> <option value="高中">高中</option> <option value="初中">初中</option> <option value="小學">小學</option> <option value="未上過學">未上過學</option> </c:if> <c:if test="${bill.address=='大學專科'}"> <option value="研究生" >研究生</option> <option value="大學本科">大學本科</option> <option value="大學專科" selected>大學專科</option> <option value="高中">高中</option> <option value="初中">初中</option> <option value="小學">小學</option> <option value="未上過學">未上過學</option> </c:if> <c:if test="${bill.address=='高中'}"> <option value="研究生" >研究生</option> <option value="大學本科">大學本科</option> <option value="大學專科">大學專科</option> <option value="高中" selected>高中</option> <option value="初中">初中</option> <option value="小學">小學</option> <option value="未上過學">未上過學</option> </c:if> <c:if test="${bill.address=='初中'}"> <option value="研究生" >研究生</option> <option value="大學本科">大學本科</option> <option value="大學專科">大學專科</option> <option value="高中">高中</option> <option value="初中" selected>初中</option> <option value="小學">小學</option> <option value="未上過學">未上過學</option> </c:if> <c:if test="${bill.address=='小學'}"> <option value="研究生" >研究生</option> <option value="大學本科">大學本科</option> <option value="大學專科">大學專科</option> <option value="高中">高中</option> <option value="初中">初中</option> <option value="小學" selected>小學</option> <option value="未上過學">未上過學</option> </c:if> <c:if test="${bill.address=='未上過學'}"> <option value="研究生" >研究生</option> <option value="大學本科">大學本科</option> <option value="大學專科">大學專科</option> <option value="高中">高中</option> <option value="初中">初中</option> <option value="小學">小學</option> <option value="未上過學" selected>未上過學</option> </c:if> </select> </div> <div class="a"> <button type="submit" class="b">儲存</button> </div> <div class="a"> <a href="index.jsp" >返回</a> </div> </form> </div> <script Language="javaScript"> function check() { if (document.information.sqare.value == "") { alert("住房面積不能為空."); document.information.sqare.focus(); return false; } if (document.information.jian.value == "") { alert("房間數不能為空."); document.information.jian.focus(); return false; } if (document.information.owname.value == "") { alert("房主姓名不能為空."); document.information.owname.focus(); return false; } if (document.information.idcard.value == "") { alert("身份證號不能為空."); document.information.idcard.focus(); return false; } if (document.information.zu.value == "") { alert("民族不能為空."); document.information.zu.focus(); return false; } var a=document.information.idcard.value.length; if(a!=13) { alert("身份證位數應為13位."); document.information.idcard.focus(); return false; } /*var reg = /^[0-9]+.?[0-9]*$/; for(var i=0;i<a;i++) { if (reg.test(document.information.idcard.value.charCodeAt(i))) {} else if(document.information.idcard.value.charCodeAt(i)==X&&i==12){} else if(document.information.idcard.value.charCodeAt(i)==x&&i==12){} else{ alert("身份證輸入非法字元"); document.information.idcard.focus(); return false; } }*/ return true; } </script> </body> </html>
4.刪除人口資訊
dellist.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .a{ margin-top: 20px; } .b{ font-size: 20px; width: 160px; color: white; background-color: greenyellow; } .tb, td { border: 1px solid black; font-size: 22px; } </style> </head> <body> <% Object message = request.getAttribute("message"); if(message!=null && !"".equals(message)){ %> <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script> <%} %> <div align="center"> <h1 style="color: red;">刪除資訊</h1> <a href="index.jsp">返回主頁</a> <table class="tb"> <tr> <td>戶別</td> <td>住房型別</td> <td>本戶現住房面積</td> <td>本戶現住房間數</td> <td>戶主姓名</td> <td>身份證號</td> <td>性別</td> <td>民族</td> <td>受教育程度</td> <td align="center" colspan="2">操作</td> </tr> <c:forEach items="${bills}" var="xm"> <tr> <td>${xm.gender}</td> <td>${xm.house}</td> <td>${xm.sqare}</td> <td>${xm.jian}</td> <td>${xm.owname}</td> <td>${xm.idcard}</td> <td>${xm.sex}</td> <td>${xm.zu}</td> <td>${xm.address}</td> <td><a href="BillServlet?method=getbillbyidcard&idcard=${xm.idcard}">刪除</a></td> </tr> </c:forEach> </table> </div> </body> </html>
delete.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .a{ margin-top: 20px; } .b{ font-size: 20px; width: 160px; color: white; background-color: greenyellow; } .tb, td { border: 1px solid black; font-size: 22px; } </style> </head> <body> <% Object message = request.getAttribute("message"); if(message!=null && !"".equals(message)){ %> <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script> <%} %> <div align="center"> <h1 style="color: red;">資訊刪除</h1> <a href="index.jsp">返回主頁</a> <table class="tb"> <tr> <td>戶別</td> <td>${bill.gender}</td> </tr> <tr> <td>住房型別</td> <td>${bill.house}</td> </tr> <tr> <td>住房面積</td> <td>${bill.sqare}</td> </tr> <tr> <td>房間數</td> <td>${bill.jian}</td> </tr> <tr> <td>戶主姓名</td> <td>${bill.owname}</td> </tr> <tr> <td>身份證號</td> <td>${bill.idcard}</td> </tr> <tr> <td>性別</td> <td>${bill.sex}</td> </tr> <tr> <td>民族</td> <td>${bill.zu}</td> </tr> <tr> <td>受教育程度</td> <td>${bill.address}</td> </tr> </table> <div class="a"> <a onclick="return check()" href="BillServlet?method=delete&idcard=${bill.idcard}">刪除</a> </div> </div> <script type="text/javascript"> function check() { if (confirm("真的要刪除嗎？")){ return true; }else{ return false; } } </script> </body> </html>
5.查詢人口資訊
search,jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .a{ margin-top: 20px; } .b{ font-size: 20px; width: 160px; color: white; background-color: greenyellow; } </style> </head> <body> <div align="center"> <h1 style="color: cyan;">資訊查詢</h1> <form action="BillServlet?method=search" method="post" onsubmit="return check()"> <div class="a"> 房主姓名:<input type="text" id="owname" name="owname"/> </div> <div class="a"> <label>性別：</label> <input type="radio" name="sex" value="" checked="checked"/>無限制 <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </div> <div class="a"> 民族<input type="text" id="zu" name="zu"/> </div> <div class="form-group"> <label for="address">受教育程度：</label> <select name="address" class="form-control" id="address"> <option value="">無限制</option> <option value="研究生">研究生</option> <option value="大學本科">大學本科</option> <option value="大學專科">大學專科</option> <option value="高中">高中</option> <option value="初中">初中</option> <option value="小學">小學</option> <option value="未上過學">未上過學</option> </select> </div> <div class="a"> <button type="submit" class="b">查 詢</button> </div> <div class="a"> <a href="index.jsp" >返回</a> </div> </form> </div> </body> </html>
searchlist.jap
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .a{ margin-top: 20px; } .b{ font-size: 20px; width: 160px; color: white; background-color: greenyellow; } .tb, td { border: 1px solid black; font-size: 22px; } </style> </head> <body> <div align="center"> <h1 style="color: red;">賬單資訊列表</h1> <a href="index.jsp">返回主頁</a> <a href="search.jsp">繼續查詢</a> <table class="tb"> <tr> <td>戶主姓名</td> <td>性別</td> <td>民族</td> <td>受教育程度</td> </tr> <!-- forEach遍歷出adminBeans --> <c:forEach items="${bills}" var="item" varStatus="status"> <tr> <td><a href="BillServlet?method=getbillbyidcard3&idcard=${item.idcard}">${item.owname}</a></td> <td>${item.sex}</td> <td>${item.zu}</td> <td>${item.address}</td> </tr> </c:forEach> </table> </div> </body> </html>
searesult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .a{ margin-top: 20px; } .b{ font-size: 20px; width: 160px; color: white; background-color: greenyellow; } .tb, td { border: 1px solid black; font-size: 22px; } </style> </head> <body> <% Object message = request.getAttribute("message"); if(message!=null && !"".equals(message)){ %> <script type="text/javascript"> alert("<%=request.getAttribute("message")%>"); </script> <%} %> <div align="center"> <h1 style="color: red;">詳細資訊</h1> <a href="index.jsp">返回主頁</a> <table class="tb"> <tr> <td>戶別</td> <td>${bill.gender}</td> </tr> <tr> <td>住房型別</td> <td>${bill.house}</td> </tr> <tr> <td>住房面積</td> <td>${bill.sqare}</td> </tr> <tr> <td>房間數</td> <td>${bill.jian}</td> </tr> <tr> <td>戶主姓名</td> <td>${bill.owname}</td> </tr> <tr> <td>身份證號</td> <td>${bill.idcard}</td> </tr> <tr> <td>性別</td> <td>${bill.sex}</td> </tr> <tr> <td>民族</td> <td>${bill.zu}</td> </tr> <tr> <td>受教育程度</td> <td>${bill.address}</td> </tr> </table> </div> </body> </html>