본문 바로가기

PowerBuilder/활용

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 OLEMicrosoft 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_daumCreate User Object controlu_web_browser를 아래와 import시킨 후 아래와 같이 화면을 구성한다

 

 

 

8) w_post_code_daumOpen 이벤트에 아래와 같이 기술한다.

 

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 TYPEHIDE을 사용한 의미를 파악하면될 것 같습니다.

<input type="hidden" id="addr2"> //추가된 부분 : INPUT TYPEHIDE을 사용한 의미를 파악하면될 것 같습니다.

<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)를 수정해서 원하는 화면으로 재구성해서 사용해야합니다.

'PowerBuilder > 활용' 카테고리의 다른 글

POWERBUILDER와 SAP RFC 연동 관련  (0) 2019.01.16