<c:if test="${param.menu == 5}">
<jsp:include page="../customer_menu/menu5.jsp"></jsp:include>
</c:if>
customer_mypage.jsp에 menu == 5 를 추가해준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<div>
<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">주소등록</button>
<h3>현재 등록된 주소 목록</h3>
<table class="table">
<thead>
<tr>
<th>번호</th>
<th>우편번호</th>
<th>주소</th>
<th>등록일</th>
<th>버튼</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<form action="insertaddress.do" method="post" id="form5">
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">주소등록</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="text" id="sample6_postcode" placeholder="우편번호">
<input type="button" class="btn btn-sm btn-primary" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample6_address" placeholder="주소"><br>
<input type="text" id="sample6_detailAddress" placeholder="상세주소">
<input type="text" id="sample6_extraAddress" placeholder="참고항목">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-primary"
onclick="insertAddressAction()">등록</button>
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">취소</button>
</div>
</div>
</div>
</div>
</form>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.6.4.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("sample6_extraAddress").value = extraAddr;
} else {
document.getElementById("sample6_extraAddress").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
}
}).open();
}
</script>
menu5.jsp를 생성한다.
주소관리와 주소등록 버튼이 추가되고
우편번호 찾기를 누르면 카카오 주소찾기 창이 나오고 우편번호를 찾을 수 있다.
추가항목을 작성하고 등록할 수 있다.
@Insert({
" INSERT INTO address(postcode, address, memberid) ",
" VALUES (#{obj.postcode}, #{obj.address}, #{obj.memberid}) "
})
public int insertAddressOne(@Param("obj") Address obj);
AddressMapper에 mapper를 하나 추가한다.
<div class="modal-body">
<input type="text" name="postcode" id="sample6_postcode" placeholder="우편번호">
<input type="button" class="btn btn-sm btn-primary" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" name="address" id="sample6_address" placeholder="주소"><br>
<input type="text" name="detailAddress" id="sample6_detailAddress" placeholder="상세주소">
<input type="text" name="extraAddress" id="sample6_extraAddress" placeholder="참고항목">
</div>
...
function insertAddressAction(){
const detail = document.getElementById("sample6_detailAddress");
if(detail.value.length <= 0){
alert('주소를 입력해주세요');
detail.focus();
return;
}
document.getElementById("form5").submit();
}
menu5.jsp에 name을 추가하고 유효성검사를 추가해준다.
@WebServlet(urlPatterns = { "/customer/insertaddress.do" })
public class CustomerInsertAddressController extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String id = (String) request.getSession().getAttribute("id");
String address = request.getParameter("address") + " " + request.getParameter("address1") + " " + request.getParameter("detailAddress");
Address obj = new Address();
obj.setPostcode(request.getParameter("postcode"));
obj.setAddress(address);
obj.setMemberid(id);
int ret = MybatisContext.getSqlSession().getMapper(AddressMapper.class).insertAddressOne(obj);
if (ret == 0) {
response.sendRedirect("mypage.do?menu=");
}
}
}
CustomerInsertAddressController.java를 생성한다.
이렇게 주소를 입력하고 등록을 누르게되면
성공하여 이전 주소로 돌아온 모습
DB에 추가된 것을 확인할 수 있다.
@Select({
" SELECT a.* FROM address a WHERE memberid=#{id} "
})
public List<Address> selectAddressList(@Param("id") String id);
주소를 불러올 수 있는 mapper를 생성한다.
else if(Integer.parseInt(menu) == 5) {
List<Address> list = MybatisContext.getSqlSession().getMapper(AddressMapper.class).selectAddressList(id);
request.setAttribute("list", list);
}
CustomerMypageController.java에 위 코드를 추가하고
<tbody>
<c:forEach var="obj" items="${list}">
<tr>
<td>${obj.no}</td>
<td>${obj.postcode}</td>
<td>${obj.address}</td>
<td>${obj.regdate}</td>
<td><button class="btn btn-sm btn-danger">삭제</button></td>
</tr>
</c:forEach>
</tbody>
menu5.jsp의 tbody에 위 코드를 추가하면
이렇게 해당 계정에 등록된 주소를 볼 수 있다.
<c:forEach var="obj" items="${list}">
<tr>
<td>${obj.no}</td>
<td>${obj.postcode}</td>
<td>${obj.address}</td>
<td>${obj.regdate}</td>
<td><button onclick="deleteAddress('${obj.no}')">삭제</button></td>
</tr>
</c:forEach>
...
function deleteAddress(no){
if(confirm('삭제하시겠습니까?')) {
const form = document.createElement('form');
form.setAttribute('action', 'deleteAddress.do?no=' + no);
form.setAttribute('method', "post");
form.style.display = "none";
document.body.appendChild(form);
form.submit();
}
}
menu5.jsp의 반복문의 삭제라인을 수정하고 function을 추가한다.
@Delete({
" DELETE FROM address WHERE memberid = #{obj.memberid} AND no = #{obj.no} "
})
public int deleteAddressOne(@Param("obj") Address obj);
주소를 삭제하는 Mapper를 생성하고
@WebServlet(urlPatterns = {"/customer/deleteAddress.do"})
public class CustomerDeleteAddressController extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Address obj = new Address();
obj.setNo(Long.parseLong(request.getParameter("no")));
obj.setMemberid((String)request.getSession().getAttribute("id"));
int ret = MybatisContext.getSqlSession().getMapper(AddressMapper.class).deleteAddressOne(obj);
if(ret == 1) {
response.sendRedirect("mypage.do?menu=5");
return;
}
response.sendRedirect("mypage.do?menu=4");
}
}
CustomerDeleteAddressController.java를 생성한다.
등록된 주소 중에 하나를 삭제해보자.
삭제 버튼을 누르지 알림창이 뜨고
등록한 주소 하나가 사라졌다.
DB에서도 하나가 사라진 것을 확인할 수 있다.