우편번호 api사용하기
mypage와 가입창의 jsp를 수정한다
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
<h1 align="center">회원가입</h1>
<div class="">
<form action="/member/register.kh" method="post">
<table>
<tr>
<td>* 아이디</td>
<td><input type="text" id="memberId" name="memberId">
</td>
</tr>
<tr>
<td>* 비밀번호</td>
<td><input type="password" name="memberPw"></td>
</tr>
<tr>
<td>* 이름</td>
<td><input type="text" name="memberName"></td>
</tr>
<tr>
<td>* 이메일</td>
<td><input type="text" name="memberEmail"></td>
</tr>
<tr>
<td>* 전화번호</td>
<td><input type="text" name="memberPhone"></td>
</tr>
<tr>
<td>* 우편번호</td>
<td><input type="text" name="post" class="postcodify_postcode5"></td>
<!-- 배열로 값을 받았다면 ${addreess[0]}으로 표기하여 출력할수 있다-->
<td><button type="button" id="postcodify_search_button">검색</button></td>
</tr>
<tr>
<td>도로명주소</td>
<td><input type="text" name="address1" class="postcodify_address"></td>
</tr>
<tr>
<td>상세주소</td>
<td><input type="text" name="address2" class="postcodify_details"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="전송">
</td>
</tr>
</table>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>
<script>
$(function() { $("#postcodify_search_button").postcodifyPopUp(); }); </script>
</body>
</html>- 어차피 두개가 같으니까 가입창만 표시한다.
- https://www.poesis.org/postcodify/guide/example api는 여기를 이용하였다.
- 예시에 있는대로 우편번호, 검색버튼, 도로명주소, 상세주소에 class와 id를 입력해주고 스크립트와 함수를 넣어주었다.
- 이전보다 주소창이 하나 더 많아졌기때문에 controller에서 수정이 필요하다, name값은 address1, address2로 지정하였다,
- api를 사용했기때문에 검색버튼을 누르면 주소가 검색되고 검색된 주소가 바로 폼에 적용된다.
Controller
@RequestMapping(value = "/member/register.kh", method = RequestMethod.POST)
public ModelAndView memberJoin(@ModelAttribute Member member, @RequestParam("post") String post,
@RequestParam("address1") String memberAddress1,
@RequestParam("address2") String memberAddress2,
ModelAndView mv) {
member.setMemberAddress(post + "," + memberAddress1+ ","+memberAddress2);
try {
int result = mService.registerMember(member);
if (result > 0) {
mv.setViewName("redirect:/home.kh");
} else {
mv.addObject("msg", "회원가입 실패");
mv.setViewName("common/errorPage");
}
} catch (Exception e) {
mv.addObject("msg", e.getMessage());
mv.setViewName("common/errorPage");
}
return mv;
}- 달라진건 “,”를 기준으로 address1과 address2를 받은것것이다.
- 이렇게 ,로 더한 값을 다 memberAddress에 넣어두었다.
마이페이지 controller에서 다시 사용된다.
@RequestMapping(value = "/member/myPage.kh", method = RequestMethod.GET)
public ModelAndView viewMyPage(HttpServletRequest request,
ModelAndView mv) {
HttpSession session = request.getSession();
Member member = (Member) session.getAttribute("loginUser");
String memberId = member.getMemberId();
Member mOne = mService.printOneById(memberId);
//1
String post = mOne.getMemberAddress().split(",")[0];
String address1 = mOne.getMemberAddress().split(",")[1];
String address2 = mOne.getMemberAddress().split(",")[2]
try {
//2
mv.addObject("member", mOne);
mv.addObject("post", post);
mv.addObject("address1", address1);
mv.addObject("address2", address2);
mv.setViewName("member/myPage");
} catch (Exception e) {
mv.addObject("msg", e.getMessage());
mv.setViewName("common/errorPage");
}
return mv;
}
@RequestMapping(value = "/member/logout.kh", method = RequestMethod.GET)
public ModelAndView memberLogout(HttpServletRequest request,
ModelAndView mv
) {
HttpSession session = request.getSession();
if (session != null) {
session.invalidate();
mv.setViewName("redirect:/home.kh");
} else {
mv.addObject("mgs", "로그아웃 실패");
mv.setViewName("common/errorPage");
}
return mv;
}- 마이페이지에서 ,를 기준으로 담은 주소를 잘라서 변수에 넣어 전송했다.
- 마이페이지에서도 값을 입력받을수있기에 join컨트롤러와 똑같이 ,를 기준으로 저장된 각 값을 하나의 memberAddress에 저장했다.
마이페이지 jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보 수정</title>
</head>
<body>
<h1 align="center">회원정보수정</h1>
<div class="">
<form action="/member/modify.kh" method="post">
<table>
<tr>
<td>* 아이디</td>
<td><input type="text" id="memberId" name="memberId" value="${member.memberId }" readonly>
</td>
</tr>
<tr>
<td>* 비밀번호</td>
<td><input type="password" name="memberPw" value="" required="required"></td>
</tr>
<tr>
<td>* 이름</td>
<td><input type="text" name="memberName" value="${member.memberName }" readonly></td>
</tr>
<tr>
<td>* 이메일</td>
<td><input type="text" name="memberEmail" value="${member.memberEmail }"></td>
</tr>
<tr>
<td>* 전화번호</td>
<td><input type="text" name="memberPhone" value="${member.memberPhone }"></td>
</tr>
<tr>
<td>* 우편번호</td>
<td><input type="text" name="post" value="${post }" class="postcodify_postcode5"></td>
<!-- 배열로 값을 받았다면 ${addreess[0]}으로 표기하여 출력할수 있다-->
<td><button type="button" id="postcodify_search_button">검색</button></td>
</tr>
<tr>
<td>도로명주소</td>
<td><input type="text" name="address1" value="${address1 }" class="postcodify_address"></td>
</tr>
<tr>
<td>상세주소</td>
<td><input type="text" name="address2" value="${address2 }" class="postcodify_details"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="수정하기">
<button type="button" onclick="removeMember();"> 탈퇴하기 </button>
<!-- //type을 button으로 꼭 적어줘야! submit이 되지 않는다!! 꼭 기억하기!
-->
</td>
</tr>
</table>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>
<script>
function removeMember() {
if(window.confirm("탈퇴하시겠습니까?")){
location.href="/member/remove.kh";
}
}
$(function() { $("#postcodify_search_button").postcodifyPopUp(); }); </script>
</body>
</html>- 잘라서 전송한 주소를 변수로 담아 value에 저장해주었고 저장된값을 전송하는걸 확인할수있다.
이전페이지로 이동하기
<table align="center" border="1">
<tr>
<td>제목</td>
<td><input type="text" name="boardTitle" value="${board.boardTitle }" required="required"></td>
</tr>
<tr>
<td>작성자</td>
<td><input type="text" name="boardWirter" value="${board.boardWirter }" readonly="readonly"></td>
</tr>
<tr>
<td>내용</td>
<td><textarea id="summernote" name="boardContents"
style="resize: none; width: 500px; height: 100%;" required="required"> ${board.boardContents }</textarea></td>
</tr>
<tr>
<td>첨부파일</td>
<td><input type="file" name="reloadFile">
<a href="#"> ${board.boardFile }</a>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="등록"> <input
type="reset" value="취소">
<a href="/board/list.kh">목록으로</a>
<a href="javascript:history.go(-1);">이전페이지로</a>
</td>
</tr>
</table><a href="javascript:history.go(-1);">를 입력해주면 이전페이지로 이동한다.
이클립스 되돌리기
- 기억해둘것!! 잘못해서 날렸을떄 쓸수있다.
hello world