쇼핑몰

고객

주소 등록

<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에서도 하나가 사라진 것을 확인할 수 있다.