Learning/JSP
주소록 생성하기2
cozy coding
2020. 7. 16. 16:23
-
insert.jsp: 테이블 형식으로 폼 만들기. 우편번호 검색 버튼을 누르면 새 창이 뜨고 우편번호 검색할 수 있는 환경 제공
-
전체보기=list.jsp로 링크
-
우편번호 텍스트필드 옆 검색버튼=zipCheck.jsp를 새 창으로 열기(window.open)
-
등록버튼=insertPro.jsp로 폼 액션 보내기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("#zipBtn").click(function(){
window.open("zipCheck.jsp","","width=800 height=500");
}) //zipBtn
});//document
</script>
</head>
<body>
<a href="list.jsp">전체보기</a>
<form action="insertPro.jsp" method="post" name="frm">
<table>
<tr>
<td colspan="2">주소록 등록하기</td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>우편번호</td>
<td><input type="text" name="zipcode" id="zipcode" size=7>
<input type="button" value="검색" id="zipBtn">
</td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="addr" id="addr" size=50></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="text" name="tel"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="등록">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>
-
zipCheck.jsp: 우편번호 검색 창. 제이슨 형식으로 zipCheckPro.jsp의 값들을 가져옴
-
제이슨 형식으로 가져온다?
$.getJSON(가져올 파일,
{키:값},
function(data){
$.each(data, function(key, val){
})
<%@ 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>
<script src="../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#send").on("click",function(){
$.getJSON("zipCheckPro.jsp",
{"dong" : $("#dong").val()},
function(data){ //콜백함수
var htmlStr="<table>";
$.each(data, function(key,val){
htmlStr+="<tr>";
htmlStr+="<td>"+val.zipcode+"</td>";
htmlStr+="<td>"+val.sido+"</td>";
htmlStr+="<td>"+val.gugun+"</td>";
htmlStr+="<td>"+val.dong+"</td>";
htmlStr+="<td>"+val.bunji+"</td>";
htmlStr+="</tr>";
})
htmlStr+="</table>";
$("#area").html(htmlStr);
}
);
}) //send
$("#getsend").click(function(){
$.get("zipCheckPro.jsp", {"dong": $("#dong").val()},
function(data){
var htmlStr="<table>";
d = $.parseJSON(data); //파싱
for(var i=0 ; i<d.length; i++){
htmlStr+="<tr>";
htmlStr+="<td>"+d[i].zipcode+"</td>";
htmlStr+="<td>"+d[i].sido+"</td>";
htmlStr+="<td>"+d[i].gugun+"</td>";
htmlStr+="<td>"+d[i].dong+"</td>";
htmlStr+="<td>"+d[i].bunji+"</td>";
}
htmlStr+="</table>";
$("#area").html(htmlStr);
}
);//get
});//getsend
$("#area").on("click","tr", function(){
var address = $("td:eq(1)",this).text()+" " +
$("td:eq(2)",this).text()+" " +
$("td:eq(3)",this).text()+" " +
$("td:eq(4)",this).text();
$(opener.document).find("#zipcode").val($("td:eq(0)",this).text());
$(opener.document).find("#addr").val(address);
self.close();
});
})// document
</script>
</head>
<body>
<table>
<tr>
<td>동이름 입력 <input type="text" name="dong" id="dong">
<input type="button" id="send" value="검색">
<input type="button" id="getsend" value="get검색">
</td>
</tr>
</table>
<div id="area"></div>
</body>
</html>
-
zipCheckPro.jsp: zipCheck의 동이름검색에서 넘어온 창. zipCheck.jsp의 창은 그대로 있고, 이 파일은 결과 데이터를 가져가서 그 창에 뿌린다. (address 폴더에서 작업했을때는 zipCheck창이 전체 새로고침됐었음) ZipCodeBean ArrayList를 JSON 형태로 변환해야한다. 그러기 위해선 라이브러리가 필요하다.
<%@page import="com.jqueryAddress.ZipCodeBean"%>
<%@page import="com.jqueryAddress.JAddressDAO"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="jdk.nashorn.api.scripting.JSObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String dong = request.getParameter("dong");
// String dong ="서면";
JAddressDAO dao = JAddressDAO.getInstance();
ArrayList<ZipCodeBean> arr = dao.zipcodeRead(dong);
JSONArray jarr = new JSONArray();
for(ZipCodeBean z : arr){
JSONObject obj = new JSONObject();
obj.put("zipcode" , z.getZipcode());
obj.put("sido" , z.getSido());
obj.put("gugun" , z.getGugun());
obj.put("dong" , z.getDong());
obj.put("bunji" , z.getBunji());
jarr.add(obj);
}
out.println(jarr.toString());
%>
context.xml에서
<Resource auth="Container"
driverClassName="oracle.jdbc.driver.OracleDriver"
maxIdle="20" maxActive="20"
username="scott"
name="jdbc/jsp"
password="1234"
type="javax.sql.DataSource"
url="jdbc:oracle:thin:@localhost:1521:xe"/>
-
list.jsp: 전체보기
<%@page import="com.jqueryAddress.Address"%>
<%@page import="com.jqueryAddress.JAddressDAO"%>
<%@page import="java.util.ArrayList"%>
<%@ 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>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
div.divCss{
text-align: right;
background-color: darkgray;
padding-right: 20px;
}
a:hover { text-decoration: none; }
a:link {text-decoration: none; }
a:visited {text-decoration: none; }
</style>
</head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
//searchBtn 이 클릭하면
$(document).ready(function(){
$("#searchBtn").click(function(){
$.getJSON("searchPro.jsp",
{"field" : $("#field").val(), "word" : $("#word").val() },
function(data){//콜백함수
var htmlStr="";
$.each(data, function(key, val){
htmlStr+="<tr>";
htmlStr+="<td>"+val.num+"</td>";
htmlStr+="<td>"+val.name+"</td>";
htmlStr+="<td>"+val.tel+"</td>";
htmlStr+="<td>"+val.addr+"</td>";
htmlStr+="<td onclick=delFunc("+val.num+")> 삭제</td>";
htmlStr+="</tr>";
})//each
$("table tbody").html(htmlStr);
}//콜백함수
); //getJSON
});//searchBtn
});//document
function delFunc(no){
if(confirm("정말삭제할까요?")){
location.href="deletePro.jsp?num="+no;
}
}
</script>
<%
request.setCharacterEncoding("utf-8");
JAddressDAO dao = JAddressDAO.getInstance();
ArrayList<Address> arr = dao.addrList();
int count = dao.getCount();
%>
<body>
<div class="divCss">
주소록 갯수 : <%=count %> <br>
<a href="insert.jsp">추가하기</a> /
<a href="list.jsp">전체보기</a>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">이름</th>
<th scope="col">전화번호</th>
<th scope="col">주소</th>
<th scope="col">삭제</th>
</tr>
</thead>
<tbody>
<%
for(int i=0; i<arr.size();i++){
%>
<tr>
<th scope="row"><%=arr.get(i).getNum() %></th>
<td><a href="detail.jsp?num=<%=arr.get(i).getNum() %>"><%=arr.get(i).getName() %></a></td>
<td><%=arr.get(i).getTel() %></td>
<td><%=arr.get(i).getAddr() %></td>
<td onclick="delFunc(<%=arr.get(i).getNum() %>)">삭제</td>
</tr>
<%
}
%>
</tbody>
</table>
<form action="list.jsp" name="searchFrm" id="searchFrm">
<select name="field" id="field">
<option value="name">이름</option>
<option value="tel">전화번호</option>
</select>
<input type="text" name="word" id="word">
<input type="button" class="btn btn-primary" value="검색" id="searchBtn">
</form>
</body>
</html>
-
insertPro.jsp: DB와 연결하여 주소록 등록 실행, 전체보기 목록 다시 불러오기
<%@page import="com.jqueryAddress.JAddressDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
%>
<jsp:useBean id="ad" class="com.jqueryAddress.Address"/>
<jsp:setProperty property="*" name="ad"/>
<%
JAddressDAO dao = JAddressDAO.getInstance();
dao.addrInsert(ad);
response.sendRedirect("list.jsp");
%>
-
detail.jsp: 주소록 수정하기 창. list.jsp에서 이름을 누르면 바뀌는 화면
<%@page import="com.jqueryAddress.Address"%>
<%@page import="com.jqueryAddress.JAddressDAO"%>
<%@ 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>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<%
request.setCharacterEncoding("utf-8");
int num =Integer.parseInt(request.getParameter("num"));
JAddressDAO dao= JAddressDAO.getInstance();
Address address=dao.addrDetail(num);
%>
<script>
// query 이용
$(document).ready(function(){
$("#deleteBtn").click(function(){
if(confirm("정말 삭제할까요?")){
// location.href="deletePro.jsp?num=<%=num%>";
$(location).attr("href","deletePro.jsp?num=<%=num%>");
}
});
});
function del(){
if(confirm("정말 삭제할까요?")){
location.href="deletePro.jsp?num=<%=num%>";
}
}
// 매개변수 있는 함수
function dels(no){
if(confirm("정말삭제할까요?")){
location.href="deletePro.jsp?num="+no;
}
}
function zipfinder(){
window.open("zipCheck.jsp","","width=700 height=400");
}
</script>
</head>
<body>
<form action="updatePro.jsp" method="post" name="frm">
<input type="hidden" name="num" value=<%=num %>>
<table>
<tr>
<td colspan="2">주소록 수정하기</td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name"
value=<%=address.getName() %>></td>
</tr>
<tr>
<td>우편번호</td>
<td><input type="text" name="zipcode" size=7
value="<%=address.getZipcode()%>">
<input type="button" value="검색" onclick="zipfinder()">
</td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="addr" size=50
value="<%=address.getAddr() %>"></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="text" name="tel"
value="<%=address.getTel() %>"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="수정">
<input type="button" value="삭제" onclick="del()">
<input type="button" value="매개변수삭제" onclick="dels(<%=num%>)">
<input type="button" value=" jquery삭제" id="deleteBtn">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>
-
deletePro.jsp: 주소록 삭제 실행
<%@page import="com.jqueryAddress.JAddressDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
int num = Integer.parseInt(request.getParameter("num"));
JAddressDAO dao = JAddressDAO.getInstance();
dao.addrDelete(num);
response.sendRedirect("list.jsp");
%>
-
updatePro.jsp: 주소록 수정 실행
<%@page import="com.jqueryAddress.JAddressDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
%>
<jsp:useBean id="ad" class="com.jqueryAddress.Address"/>
<jsp:setProperty property="*" name="ad"/>
<%
JAddressDAO dao = JAddressDAO.getInstance();
dao.addrUpdate(ad);
response.sendRedirect("list.jsp");
%>
-
searchPro.jsp
<%@page import="com.jqueryAddress.Address"%>
<%@page import="com.jqueryAddress.JAddressDAO"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String field =request.getParameter("field");
String word = request.getParameter("word");
JAddressDAO dao = JAddressDAO.getInstance();
ArrayList<Address> arr = dao.addrList(field, word);
JSONArray jarr = new JSONArray();
for(Address ad : arr){
JSONObject obj = new JSONObject();
obj.put("num", ad.getNum());
obj.put("name", ad.getName());
obj.put("tel" , ad.getTel());
obj.put("zipcode" , ad.getZipcode());
obj.put("addr", ad.getAddr());
jarr.add(obj);
}
out.println(jarr.toString());
%>