이번 포스팅은 다음(Daum)에서 제공하는 주소검색에 대한 소개 및 샘플로 ExtJS를 활용한 주소 연동을 

해보고자 한다.

기존에는 juso.go.kr에서 제공하는 api를 이용하여 주소검색을 사용했었는데 ajax 호출이다보니 

간혹가다 응답값을 못받을 경우가 많았다.

다음에서 주소검색 서비스를 완전 심플하게 제공 해주는 희소식을 전하고자 한다.

영문주소 + 도로명주소 모두 제공함

유지보수도 할필요가 없단다 얼마나 좋은가!! 

http://blog.daum.net/daummaps/565

HTTP URL

http://postcode.map.daum.net/guide

HTTPS URL

https://spi.maps.daum.net/postcode/guidessl

jQuery건 일반 html 태그건 ExtJS등등... 무얼 사용하던간에 전혀 영향을 받지 않기 때문에 

다음 두가지만 있으면 모든 페이지에서 사용이 가능하다.

<script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>

function openDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
                //우편번호 첫번째
                document.getElementById('post1').value = data.postcode1;
                //우편번호 두번째
                document.getElementById('post2').value = data.postcode2;
                // 기본주소
                document.getElementById('addr').value = data.address;
               // data.addressEnglish; <<< 영문주소 값
            }
        }).open();
}

위 2가지만 있으면 주소연동은 끝난다.

자세한건 가이드URL를 통해서 적용해보도록...

본인은 2가지 ExtJS를 이용하여 2가지 방식(팝업/모달창)을 적용해보았다.

<link rel="stylesheet" type="text/css" href="/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"/>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>

Ext.onReady(function(){
	Ext.create('Ext.form.Panel',{
		title : 'ExtJS를 활용한 우편번호검색 예제[팝업]',
	    renderTo : Ext.getBody(),
	    layout: 'vbox',
	    items : [
	    	{
	    		xtype : 'panel',
	    		layout: 'hbox',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 100,
	    		    id : 'zipcode1'
	    	    },{
	    		    xtype : 'label',
	    		    align : 'center',
	    		    text : '-'
	    	    },{
	    		    xtype : 'textfield',
	    		    width : 100,
	    		    id : 'zipcode2'
	    	    },{
	    	    	xtype : 'button',
	    	    	text : '우편번호찾기',
	    	    	handler : function(){
	    	    		openDaumPostcode();
	    	    	}
	    	    }]
	    	},
	    	{
	    		xtype : 'panel',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 430,
	    		    emptyText : '기본주소',
	    		    id : 'default_addr'
	    	    }]
	    	},
	    	{
	    		xtype : 'panel',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 430,
	    		    emptyText : '상세주소',
	    		    id : 'detail_addr'
	    	    }]
	    	} 
        ]
	    
	})
})
 function openDaumPostcode() {
     new daum.Postcode({
         oncomplete: function(data) {
             // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
             // 우편번호와 주소 정보를 해당 필드에 넣고, 커서를 상세주소 필드로 이동한다.
             Ext.getCmp("zipcode1").setValue(data.postcode1);
             Ext.getCmp("zipcode2").setValue(data.postcode2);
             Ext.getCmp("default_addr").setValue(data.address);
            // data.addressEnglish; <<< 영문주소 값
             Ext.getCmp("detail_addr").focus();
         }
     }).open();
 } 

이어서 모달창으로 주소검색 서비스를 사용해보도록 하자

INCLUDE 파일은 동일함.

이코드는 스크립트 코드만 있으면 되겠음. 위의 코드에서 일부 수정한것이 전부임

Ext.onReady(function(){
	Ext.create('Ext.form.Panel',{
		title : 'ExtJS를 활용한 우편번호검색 예제[레이아웃팝업(모달)]',
	    renderTo : Ext.getBody(),
	    layout: 'vbox',
	    items : [
	    	{
	    		xtype : 'panel',
	    		layout: 'hbox',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 100,
	    		    id : 'zipcode1'
	    	    },{
	    		    xtype : 'label',
	    		    align : 'center',
	    		    text : '-'
	    	    },{
	    		    xtype : 'textfield',
	    		    width : 100,
	    		    id : 'zipcode2'
	    	    },{
	    	    	xtype : 'button',
	    	    	text : '우편번호찾기',
	    	    	handler : function(){
	    	    		var win = Ext.create("Ext.window.Window",{
	    	    			height:600,
	    	    			width:500,
	    	    			modal : true,
	    	    			autoShow : false,
	    	    			titleAlign : 'center',
	    	    			layout : 'fit',
	    	    			items : [{
	    	    	        	 xtype: 'component',
	    	    	        	 id : 'ext_address'
	    	    	         }]
	    	    		});
	    	    		
	    	            win.show(undefined,function(){
	    	            	new daum.Postcode({
	    	                    oncomplete: function(data) {
	    	                    	Ext.getCmp("zipcode1").setValue(data.postcode1);
	    	                        Ext.getCmp("zipcode2").setValue(data.postcode2);
	    	                        Ext.getCmp("default_addr").setValue(data.address);
                                       // data.addressEnglish; <<< 영문주소 값
	    	                        Ext.getCmp("detail_addr").focus();
	    	                    	win.destroy();
	    	                    },
	    	                    width : '100%',
	    	                    height : '100%'
	    	                }).embed(Ext.get('ext_address'));
	    	            });
	    	    	}
	    	    }]
	    	},
	    	{
	    		xtype : 'panel',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 430,
	    		    emptyText : '기본주소',
	    		    id : 'default_addr'
	    	    }]
	    	},
	    	{
	    		xtype : 'panel',
	    		items : [{
	    		    xtype : 'textfield',
	    		    width : 430,
	    		    emptyText : '상세주소',
	    		    id : 'detail_addr'
	    	    }]
	    	} 
        ]
	})
})

잘~~~ 나온다 

검색속도도 완전 만족!!!!

평점 : ★★★★★

단점 : 다음(DAUM) 서버 죽으면 답없음 ㅋㅋ

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

정말 오랫만에 ExtJS 관련 포스팅을 하게되었다 .... 으캬캬캬캬 

사실 ... 회사 플젝 + 블로그 포스팅 + 개인플젝 리팩토링때문에 강좌를 미뤘었다.... 

이번 포스팅에는 Ext.Ajax.request를 사용하여 비동기 처리를 하고자 한다.

사용법 또한 거의 동일하다고 보면 되겠다.

ExtJS에서는 보통 ajax 사용시 

      form패널의 경우 submit을 해주고

     grid 또는 tree에서는 store -> proxy를 사용하여 비동기 처리를 한다.

하지만 Ext.Ajax.request 또한 필요에 따라 사용하게 되므로 포스팅을 해보도록 하겠다.

간단하게 회원가입에서 아이디 중복 조회를 한다는 시나리오를 가지고 한번 테스트를 해보도록 하자

<link rel="stylesheet" type="text/css" href="/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"/>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

Ext.onReady(function(){
	//꼭 form패널로 하지 않아도 된다.
	Ext.create('Ext.form.Panel',{
		title : '회원가입예제',
	    renderTo : Ext.getBody(),
	    layout: 'hbox',
	    items : [{
		    fieldLabel: '아이디',
		    xtype : 'textfield',
		    id : 'userId'
	    },{
	    	xtype : 'button',
	    	text : '중복조회',
	    	handler : function(){
	    		var userId = Ext.getCmp("userId").getValue();
	    		//ajax 호출
				Ext.Ajax.request({
					//호출 URL
					url : '/loginInfo.jsp',
					//submit 방식
					method : 'POST',
					//서버 전송 parameter
					params : {
						userId : userId
					},
					//성공
					success : function(response) {
						//response.responseText 문자열 로 넘어오므로 
						//Ext.JSON.decode를 이용하여 json object로 만들어준다.
						var jsonResult = Ext.JSON.decode(response.responseText);
						//jsonResult.flag 값이
						//     Y일 경우 중복입니다라는 alert 호출후input 초기화
						//     N일 경우 submit alert 호출
						if(jsonResult.flag){
		  				   Ext.MessageBox.show({
			  				title : '결과값',
							msg : '존재하는 아이디입니다.',
							buttons : Ext.MessageBox.YES,
							icon : Ext.MessageBox.ERROR
			  			  })  
		  			       } else {
		  				  Ext.MessageBox.show({
			  				title : '결과값',
							msg : 'SUBMIT',
							buttons : Ext.MessageBox.YES,
							icon : Ext.MessageBox.INFO
			  			  })
		  			     }
					},
					//실패
		  			failure : function(){
		  				  console.log("error");
		  			}
		  		}); 
	    	}
	    }]
	})
})

JSONObject jsonObj = new JSONObject();
//사용자 페이지에서 받은 사용자ID값
String userId = request.getParameter("userId");
//임의의 DB데이터
String dbUserId = "user";

//만약 사용자페이지에서 넘어온 데이터가 user라는 값이라면 true json object 
//사용자 페이지로 response
if(userId.equals(dbUserId)) {
	//중복이다
	jsonObj.put("flag", true);
//아닐경우 false 로 response
} else {
	//아니다
	jsonObj.put("flag", false);
}
PrintWriter pw = response.getWriter();
pw.print(jsonObj);
pw.flush();
pw.close();

1. 중복회원일 경우

2. 중복회원이 아닌 경우

기존 jQuery의 ajax 사용을 해보신 개발자 분들이라면 

이번 포스팅은 쉽게 이해하실거라 생각함

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

이번에 다룰 내용은 다중 조건문이다.

2014/08/24 - [DB/MySQL] - MySQL - if ~ else 조건문 사용하기 : if

2014/08/24 - [DB/Oracle] - Oracle - if ~ else 조건문 사용하기 : DECODE

같은 단일 조건문에 대한 함수가 존재하지만 다중 조건일 경우에는 CASE문을 사용하도록 하자

CASE문의 경우는 DBMS 종류 상관없이 사용이 가능하다

CREATE TABLE case_table(
  msg varchar(1)
);
insert into case_Table
values('1');
insert into case_Table
values('2');
insert into case_Table
values('3');
insert into case_Table
values('2');
insert into case_Table
values('2');
insert into case_Table
values('3');
insert into case_Table
values('3');
insert into case_Table
values('2');
insert into case_Table
values('1');

위의 생성한 데이터에 따른 조건은 다음과 같다.

SELECT msg
      ,CASE 
          WHEN msg = '1'
          THEN '어서오세요'
         WHEN msg = '2'
          THEN '반갑습니다'
		 WHEN msg = '3'
          THEN '안녕히가세요'
       END msg_str
FROM case_table

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

2014/08/24 - [DB/MySQL] - MySQL - if ~ else 조건문 사용하기 : if

이번 포스팅은 Oracle 단일 조건문에 대하여 설명하고자 한다.

Oracle에서 제공하는 DECODE를 이용하여 조건에 따른 데이터를 변경해 보겠음

테이블은 이전에 포스팅한 ORACLE - NULL_TABLE 기준으로 설명을 진행하겠음

2014/08/23 - [DB/Oracle] - 오라클 - 널체크(NVL 사용하기)

SELECT null_text,DECODE(null_text,null,'널입니다','널이아닙니다') null_str 
  FROM null_table

널체크일 경우는 NVL을 이용하도 가능하지만 

널체크 외에 다른 조건을 비교할경우에는 DECODE를 사용하면 되겠다.

※ 단일 조건문의 경우 DECODE를 사용해도 되지만

    다중조건일 경우는 CASE를 사용하면 되겠다

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

2014/08/24 - [DB/Oracle] - Oracle - if ~ else 조건문 사용하기 : DECODE

이번 포스팅은 MySQL 단일 조건문에 대하여 설명하고자 한다.

MySQL에서 제공하는 if 함수를 이용하여 조건에 따른 데이터를 변경해보도록 하겠음

테이블 구조는 전에 포스팅한 mysql - null_table 구조를 기준으로 설명하도록 하겠음

2014/08/23 - [DB/MySQL] - MySQL - 널체크(IFNULL 사용하기)

select IF(null_text is null,'널입니다','널이아닙니다') null_str 
from null_table

널체크는 IFNULL과 위와같은 IF문을 이용하여 체크가 가능하지만

NULL이 아닐경우의 데이터의 경우는 IF 함수를 사용이 가능하다

※ 단일 조건문과 같은 경우는 IF문을 사용해도 무관하나 

    다중 조건일 경우는 CASE문을 사용하면 되겠다

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!