PowerBuilder에서 Daum 우편번호 API 사용하기

※ PowerBuilder에서 Daum 우편번호 API 사용하기

 

1) 다음(Daum)에서 적용하는 javascript API 코드를 복사해서 HTML화일을 생성한다.

- postcode_new.html

- Daum API에 대한 정보는  http://postcode.map.daum.net/guide 

- 아래 소스는 Daum에서 제공하는 예제 소스내용입니다.

<input type="text" id="sample4_postcode1"> - <input type="text" id="sample4_postcode2"> <input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br> <input type="text" id="sample4_roadAddress" placeholder="도로명주소"> <input type="text" id="sample4_jibunAddress" placeholder="지번주소"> <span id="guide" style="color:#999"></span>   <script src="https://spi.maps.daum.net/imap/map_js_init/postcode.v2.js"></script> <script> function sample4_execDaumPostcode() { new daum.Postcode({ oncomplete: function(data) { // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.   // 도로명 주소의 노출 규칙에 따라 주소를 조합한다. // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. var fullRoadAddr = data.roadAddress; // 도로명 주소 변수 var extraRoadAddr = ''; // 도로명 조합형 주소 변수   // 법정동명이 있을 경우 추가한다. if(data.bname !== ''){ extraRoadAddr += data.bname; } // 건물명이 있을 경우 추가한다. if(data.buildingName !== ''){ extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName); } // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다. if(extraRoadAddr !== ''){ extraRoadAddr = ' (' + extraRoadAddr + ')'; } // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다. if(fullRoadAddr !== ''){ fullRoadAddr += extraRoadAddr; }   // 우편번호와 주소 정보를 해당 필드에 넣는다. document.getElementById("sample4_postcode1").value = data.postcode1; document.getElementById("sample4_postcode2").value = data.postcode2; document.getElementById("sample4_roadAddress").value = fullRoadAddr; document.getElementById("sample4_jibunAddress").value = data.jibunAddress;   // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다. if(data.autoRoadAddress) { //예상되는 도로명 주소에 조합형 주소를 추가한다. var expRoadAddr = data.autoRoadAddress + extraRoadAddr; document.getElementById("guide").innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';   } else if(data.autoJibunAddress) { var expJibunAddr = data.autoJibunAddress; document.getElementById("guide").innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';   } else { document.getElementById("guide").innerHTML = ''; } } }).open(); } </script>

 

2) Web서버의 특정 위치에 postcode_new.html를 복사

 

3) 인터넷창(IE,크롬)에서 해당 html을 호출이 가능한지 테스트 진행

- http://웹서버주소/postcode_new.html

 

- 상단과 같이 나오면 다음 API를 사용할수 있음.

 

4) PowerBuilder OLE인 Microsoft Web Browser를 이용해서 html 화일을 호출해서 사용한는데 파워빌더가 자 체지원하는 Microsoft Web Browser를 사용하지 못 할수도 있기 때문에 아래의 사이트에 가서 유저오브젝 트(u_web_browser.sru)를 다운 받아 import해서 사용합니다.

 

받은 주소 : http://cafe.daum.net/SWShin/N7Ql/168

 

5) 윈도우 w_postcode_daum를 만든다

 

6) 작업 pbl내용

 

- u_web_browser

- w_postcode_daum

 

 

7) w_postcode_daum에 Create User Object control로 u_web_browser를 아래와 import시킨 후 아래와 같이 화면을 구성한다

 

 

 

8) w_post_code_daum의 Open 이벤트에 아래와 같이 기술한다.

 

string ls_url   ls_url = 'http://웹서버주소/postcode_new.html' ole_postcode.object.navigate(ls_url,0,0,0,0)

 

 - w_post_code_daum을 실행하면 아래와 같이 실행된다.

 

 

 

9) 이제 기본 화면 구성은 마무리 하고, postcode_new.html을 아래와 같이 수정합니다.

수정된 내용은 빨간색으로 표시 했습니다.

수정한 내용에 대해서는 자세히 설명하지 않겠습니다. JAVASCRIPT에 대한 약간의 지식이 필요합니다.

소스를 분석해보면 충분히 이해할수 있습니다.

<input type="text" id="sample4_postcode1"> - <input type="text" id="sample4_postcode2"> <input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br> <input type="text" id="sample4_roadAddress" placeholder="도로명주소"> <input type="text" id="sample4_jibunAddress" placeholder="지번주소"> <input type="hidden" id="addr1"> //추가된 부분 : INPUT TYPE을 HIDE을 사용한 의미를 파악하면될 것 같습니다. <input type="hidden" id="addr2"> //추가된 부분 : INPUT TYPE을 HIDE을 사용한 의미를 파악하면될 것 같습니다. <span id="guide" style="color:#999"></span>   <script src="https://spi.maps.daum.net/imap/map_js_init/postcode.v2.js"></script> <script> function sample4_execDaumPostcode() { new daum.Postcode({ oncomplete: function(data) { // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.   // 도로명 주소의 노출 규칙에 따라 주소를 조합한다. // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. var fullRoadAddr = data.roadAddress; // 도로명 주소 변수 var extraRoadAddr = ''; // 도로명 조합형 주소 변수   // 법정동명이 있을 경우 추가한다. if(data.bname !== ''){ extraRoadAddr += data.bname; } // 건물명이 있을 경우 추가한다. if(data.buildingName !== ''){ extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName); } // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다. if(extraRoadAddr !== ''){ extraRoadAddr = ' (' + extraRoadAddr + ')'; } // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다. if(fullRoadAddr !== ''){ fullRoadAddr += extraRoadAddr; }   // 우편번호와 주소 정보를 해당 필드에 넣는다. document.getElementById("sample4_postcode1").value = data.postcode1; document.getElementById("sample4_postcode2").value = data.postcode2; document.getElementById("sample4_roadAddress").value = fullRoadAddr; document.getElementById("sample4_jibunAddress").value = data.jibunAddress;   var addr = fullRoadAddr.replace(/(\s|^)\(.+\)$|\S+~\S+/g, ''); //필요없는 문자를 ‘’로 변환한다. document.getElementById('addr1').value = '@' + data.postcode1 + data.postcode2 + '/' + addr + '$'; // 직접가져갈 자료(구주소) // 추가된 부분 : 호출될 소스에서 @,$를 기준으로 구분할겁니다.   var addr = data.jibunAddress.replace(/(\s|^)\(.+\)$|\S+~\S+/g, ''); //필요없는 문자를 ‘’로 변환한다. document.getElementById('addr2').value = '*' + data.postcode1 + data.postcode2 + '/' + addr + '%'; // 직접가져갈 자료(신주소) // 추가된부분 : 호출될 소스에서 *,%를 기준으로 구분할겁니다. // (중요) 구분값으로 사용되는 특수문자는 호출된 html에서 사용 되지 않는 기호를 사용해야합니다.   // 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다. if(data.autoRoadAddress) { //예상되는 도로명 주소에 조합형 주소를 추가한다. var expRoadAddr = data.autoRoadAddress + extraRoadAddr; document.getElementById("guide").innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';   } else if(data.autoJibunAddress) { var expJibunAddr = data.autoJibunAddress; document.getElementById("guide").innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';   } else { document.getElementById("guide").innerHTML = ''; } } }).open(); } </script>

 

   

10) w_post_code_daum 윈도우의 “확인” 버튼의 clicked 이벤트에 아래와 같이 기술한다.

oleobject obj string ls_temp, ls_return long ll_str, ll_end     //작업내용 가져오기 IF ole_postcode.object.Busy = FALSE THEN   Obj = ole_postcode.OBJECT.Document IF ole_postcode.OBJECT.document THEN ls_temp = Obj.body.outerhtml END IF END IF   //원하는 내용 자르기 //구주소 ll_str = pos(ls_temp, '@') ll_end = pos(ls_temp, '$') ll_end = ll_end - ll_str   ls_return = mid(ls_temp, ll_str + 1, ll_end - 1) sle_1.text = mid(ls_return,1,6) ll_end = len (ls_return) sle_2.text = mid(ls_return,8,ll_end)   //신주소 ll_str = pos(ls_temp, '*') ll_end = pos(ls_temp, '%') ll_end = ll_end - ll_str   ls_return = mid(ls_temp, ll_str + 1, ll_end - 1) sle_3.text = mid(ls_return,1,6) ll_end = len (ls_return) sle_4.text = mid(ls_return,8,ll_end)

  

(중요)Script를 분석하면 postcode_new.html에서 사용한 특수문자 사용 이유를 확인할수 있습니다.

  

 

11) 실행 결과 확인

가) 실행된 화면에서 우편번호 찾기를 Click한다

 

   

나) 호출된 POPUP창에서 주소를 검색 후 원하는 주소를 클릭한다.

     

다) 주소를 불러온 w_postcode_daum 윈도우에서 확인 버튼을 Click한다.

 

   

라) 최종 화면

 

   

 

  나. 참고 내용

 

- UserObject 로 호출한 html 문서는 Daum Api 샘플을 그대로 사용했기 때문에 상단의 화면을 그대로 사용 할수 없습니다

- 따라서, 해당 html의 소스(JavaScript)를 수정해서 원하는 화면으로 재구성해서 사용해야합니다.