회원가입폼 작성시에 주소입력이 필요한경우가 많습니다.
우체국에서 제공하는 디비를 직접 자신의 디비에 넣어 활용하는 경우도 좋지만,
무료로 제공해주는 daum 주소를 이용하는 방법도 나쁘지 않다고 생각됩니다.
먼저 http://postcode.map.daum.net/guide 사이트를 참고하여 보시면 좋을것 같습니다.
Controller에 테스트 폼에 접속할 소스를 작성해줍니다.
@RequestMapping("/addr")
public String addr(){
return "addr";
}
addr.jsp페이지를 생성하여 먼저 기본 스크립트 작성을 해줍니다.
기존버전
<script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>
신규버전
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
저는 신규버전으로 적용해보도록 하겠습니다.
<script></script>안에 내용을 작성해주시면 됩니다.
스크립트 작성이 완료되었으면 아래 <body>안에 폼을 작성해 보겠습니다.
-
모든소스작성이 완료 되었습니다. 이제 서버 실행 및 테스트 후 회원가입 폼에 적용시켜주시면 됩니다.
주소 입력 팝업창이 중간에 생성하게 되는데 그냥 좌측 상단에 위치 시키기 위해서는
//팝업창이 실행될때 위치지정 이라는 주석이 붙어있는 내용을 지우시면 됩니다.
폼을 실행하여 우편번호 찾기 버튼을 클릭하면 팝업창이 생성되며 해당 검색창에 주소를 입력합니다.
임의로 한남동714를 입력해 보았습니다.
주소를 보면 지번 , 도로명 주소가 모두 검색되는 것과 지번만 검색되는 부분이 보입니다.
저는 폼에 도로명주소 , 지번주소 모두 입력해 디비로 넣을 예정이라 두개다 작성했습니다.
주고 두개가 모두 나온 부분을 클릭하면 팝업창이 종료 되며, 주소가 모두 폼에 자동 입력되는것을 보실수 있습니다.
두번째 지번으로 커서가 위치하며 상세주소를 입력할수 있도록 폼을 작성하였습니다.
지번주소만 기재되어있는 주소를 클릭하면 도로명 주소를 제외한 내용이 입력되는것을 확인했습니다.
폼은 정상적으로 동작하는것을 확인하였습니다.
감사합니다^^
'JAVA개발' 카테고리의 다른 글
| [JAVA 개발] 체크박스 전체선택/해제 및 체크여부확인 (0) | 2015.07.06 |
|---|---|
| [JAVA 개발] 네이버에디터(스마트에디터) 연동 SmartEditor (0) | 2015.07.03 |
| [JAVA 개발] datepicker UI를 통한 달력생성 (0) | 2015.06.30 |
| [JAVA 개발] SHA 암호화 처리로 비밀번호 암호화 하기 (0) | 2015.06.29 |
| [JAVA 개발] md5 암호화 처리로 비밀번호 암호화 하기 (0) | 2015.06.26 |
