이번 포스팅 내용은 HTML5의 Web SQL Database에 대하여 알아보도록 하자

HTML5의 Web SQL을 사용하고자 하려면 다음 브라우저 환경에서 진행을 하여야 한다

아쉽게도 IE와 Firefox에서는 지원을 하지 않는다

본인이 테스트해보면서 이해한 바로는 브라우저 내에 캐쉬 형식으로 데이터를 보유하고 있는거 같다

사용법은 일반 JAVA 에서 사용하는 JDBC와 거의 90% 흡사하다고 보면 되겠다

간단하게 jquery를 이용하여 예를들도록 해보겠다

<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.min.js'></script>

위와같이 jquery CDN을 INCLUDE 한 후에

HTML 코드를 다음처럼 삽입하자

<input type="button" id="createtable" value="CREATETABLE"/>
<input type="button" id="select" value="SELECT"/>
<input type="button" id="insert" value="INSERT"/><br/>
<!-- 입력타입  -->
입력값
<div>
<input type="text" id="test"/>
</div>
목록
<!-- 목록 -->
<div id="selectlist">
	<ul>
	</ul>
</div>

위와같이 삽입을 한 후 다음으로는 HTML5 WEB SQL을 위한 스크립트 코드를 작성하여 보자

$(function(){
		$("#createtable").click(function(){
			var db = openDatabase("test", "1.0", "test WebDB", 5 * 1024* 1024);
			db.transaction(function(execute) {
						var createQuery = "CREATE TABLE IF NOT EXISTS test(id INTEGER PRIMARY KEY, test TEXT )";
						execute.executeSql(createQuery);
						alert("TABLE 생성완료!!");
			});
		})
		
		$("#select").click(function(){
			var db = openDatabase("test", "1.0", "test WebDB", 5 * 1024* 1024);
					db.transaction(function(execute) {
						var sql = "SELECT * FROM test ORDER BY id DESC";
						execute.executeSql(sql, undefined, function(execute, result) {
									if (result.rows.length > 0) {
										var r = "";
										for (var i = 0; i < result.rows.length; i++) {
											var row = result.rows.item(i);
											r+="<li>";
											r+="<input type='text' value='"+row.test+"' id='"+row.id+"' name='test' />";
											r+="<input type='button' name='update' value='UPDATE'/>";
											r+="<input type='button' name='delete' value='DELETE'/>";
											r+="</li>";
										}
										$("#selectlist > ul").html(r);
									}
						}, function() {
							alert("조회 에러");
						});
					});
		})
		
		$("#insert").click(function(){
			var db = openDatabase("test", "1.0", "test WebDB", 5 * 1024* 1024);
			db.transaction(function(execute) {
				var insertQuery = "INSERT INTO test(test) VALUES(?)";
				execute.executeSql(insertQuery, [$("#test").val()], function(transaction,resultSet) {
							alert("등록 완료")
						}, function() {
							alert("등록 에러");
						});
			});
		})
		
		$(document).on("click","input[name=update]",function(){
			var id = $(this).parent().find("input[type=text]").attr("id");
			var value = $(this).parent().find("input[type=text]").val();
			var db = openDatabase("test", "1.0", "test WebDB", 5 * 1024* 1024);
			db.transaction(function(execute) {
				var insertQuery = "UPDATE test SET test = ? WHERE id = ?";
				execute.executeSql(insertQuery, [value,id], function(transaction,resultSet) {
							alert("수정 완료")
						}, function() {
							alert("수정 에러");
						});
			});
		})
		
		$(document).on("click","input[name=delete]",function(){
			var id = $(this).parent().find("input[type=text]").attr("id");
			var db = openDatabase("test", "1.0", "test WebDB", 5 * 1024* 1024);
			db.transaction(function(execute) {
				var deleteQuery = "DELETE FROM test WHERE id = ?";
				execute.executeSql(deleteQuery, [id], function(transaction,resultSet) {
							alert("삭제 완료")
						}, function() {
							alert("삭제 에러");
						});
			});
		})
	})

위코드를 기준으로 설명을 하자면 'createtable' id의 버튼 클릭시 WEB STORAGE내에 test라는 

DB명 접속후 'test' 테이블을 생성한다

CRUD 예제를 위해 간단하게 test 컬럼과 pk인 id 컬럼 2개를 생성하였다

이제는 테스트를 위하여 위의 코드를 실행 후 동작을 시켜보도록 하자

WEB DB 생성전 Resources 탭에 Web SQL 을 보시면 테이블이 현재 존재하지 않음

화면의 createtable 버튼을 클릭하면 alert으로 "TABLE 생성완료!!"라는 경고창이 출력되면서 WEB SQL내에 WEB DB가 생성됨

최초 DB에는 테이블이 존재하지 않으므로 TEXT태그에 값을 입력 후 INSERT버튼을 클릭해봄

INSERT하였으니 이어서 SELECT 버튼을 클릭하여 WEB SQL에 등록된 데이터를 화면에 출력시켜보도록 함

정상적으로 INSERT 데이터들이 목록에 출력이 되었을것임

마지막으로 UPDATE/DELETE 를 한 ROW당 테스트를 해본 후 

페이지를 새로고침 한다음 UPDATE/DELETE 기능까지 

정상적으로 출력이 되는지 확인해보도록 하자

요즘 ExtJS로 티스토리 스킨 제작중이라 포스팅에 소홀했음... 

오늘은 ExtJS에서 어느분께서 HTML5 의 FILE태그중, MULTIPLE 속성을 주어 다중파일 업로드 처리에 대하여 질문해주셔서 한번 선택으로 다중 파일업로드 관련 포스팅을 진행 하겠음..

개념은 FILEFIELD 여러개를 받을수 있는 서버로직이 1차적으로 필요하다.

본인은 SPRING 프레임워크를 이용하여 서버로직을 제작한 후 테스트 하였음

private ArrayList<MultipartFile> uploadFile;

filefield 태그의 name명을 uploadFile이라고 주고 진행을 하겠음

간단하게 기본 폼필드와 단일 파일업로드 관련 샘플링은 다음 글을 참고하면 될듯.

2014/07/02 - [자바스크립트이야기/ExtJS] - [ExtJS강좌 20] 파일컴포넌트를 이용하여 파일업로드를 하자 (xtype : 'fieldfield')

이어서 다중 파일 업로드의 ExtJS 스크립트코드이다 .

Ext.onReady(function(){
	       var panel = Ext.create('Ext.form.Panel',{
	           title : '폼패널 - 파일첨부',
	           renderTo : Ext.getBody(),
	           items : [{
	                    xtype : 'filefield',
	                    name : 'uploadFile',
	                    buttonOnly: true,
	                    allowBlank : false,
	                    buttonText : '찾아보기',
	                    listeners:{
	                        afterrender:function(fileObj){
	                        	//파일태그옵션에 multiple이라는 옵션을 정의
	                        	fileObj.fileInputEl.set({
	                                multiple:'multiple'
	                            });
	                        },
	                        change : function(){
	                        	//파일첨부를 다중으로 선택시 열시버튼 누르면
	                        	//change 이벤트를 발생시켜 폼 submit!
	                        	var frm = panel.getForm();
	                            if(frm.isValid()) {
	                                frm.submit({
	                                	url: '/uploadFile',
	                                	success : function(fp, res) {
	                                		var jsonResult = Ext.JSON.decode(res.response.responseText);
	                                		var msg = "업로드된 파일명<br/>";
	                                		Ext.each(jsonResult.fileList,function(obj){
	                                			msg += obj.fileName+",";
	                                		});
	                                		msg = msg.substring(0,msg.length-1);
	                                		Ext.MessageBox.show({
	                                					title : '업로드된파일명',
	                                					msg : msg,
	                                					buttons : Ext.MessageBox.YES,
	                                					icon : Ext.MessageBox.INFO
                               				});
	                                		//한번 submit 처리가 되면 filefield는 초기화 되므로
	                                		//다시 filefield에 multiple 속성 설정
	                                		panel.down("filefield").fileInputEl.set({
	                                			multiple:'multiple'
	                                		});
	                                	}
	                                });
                            	}
                        	}
                    	}
				}]
	       })
	})

기존 단일 파일업로드와 차이가 있다면 

본인의 submit하는 서버 로직은 다음과 같다.

파일처리는 제외하였다.

어짜피 파일데이터가 넘어가느냐만 확인하기 위한 테스트 로직이므로 

로직 사이에 파일처리 하는 로직을 추가로 설정 하면 되겠음.

@RequestMapping(value="/uploadFile", method=RequestMethod.POST)
	public void uploadFile (FileVo fileVO, HttpServletRequest request, HttpServletResponse response) {
                //fileVO 안에 다중 파일값을 받기위한  private ArrayList<MultipartFile> uploadFile; 가 존재함
		JSONObject jsonObj = null;
		JSONObject jsonObj2 = null;
		try {
			JSONArray jsonArr = new JSONArray();
			if(connectionInfo.getUploadFile() != null && connectionInfo.getUploadFile().size() > 0) {
				/**
				 * 반복분 내에서 파일 처리를 해주면 될것이다.
				 */
				for(MultipartFile file : connectionInfo.getUploadFile()) {
					jsonObj2 = new JSONObject();
					jsonObj2.put("fileName", file.getOriginalFilename());
					jsonArr.add(jsonObj2);
				}
			}
			jsonObj = new JSONObject();
			//form submit에서 json 데이터로 success true 값을 받아야함
			jsonObj.put("success", true);
			jsonObj.put("fileList", jsonArr);
		} catch (Exception e) {
			e.printStackTrace();
		} finally{
			try {
                                response.setContentType("text/plain; charset=UTF-8");
				PrintWriter pw = response.getWriter();
				pw.print(jsonObj);
				pw.flush();
				pw.close();
			} catch (IOException e) {}
		}
	}

실행해보도록 하자

테스트 결과 잘 나온다. 

해당 샘플링을 잘 응용하여 멀티파일 업로드를 처리하도록 하자.

※ IE에서 MULTIPLE 속성은 IE9인가 10부터 지원이 된다고 한다.

    잘 사용하도록 하자.

이번 포스팅은 다음(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 사용을 해보신 개발자 분들이라면 

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

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

예전에 jqueryUI를 통한 레이어팝업(다이얼로그)를 소개했었다

2014/06/20 - [자바스크립트이야기/jQuery UI 소개] - [jQueryUI - dialog] 레이어 팝업을 띄워보자

이번에는 blockUI 플러그인을 이용하여 레이어팝업을 띄워보도록 하겠다.

● jQuery  [다운로드] 

    또는 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

● jQuery blockUI [다운로드]

다운로드를 받았으면 다음과 같이 프로젝트 생성 후  blockUI.js와 index.jsp를 위치시켰다

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>

<input type="button" id="btn" value="모달창띄우기"/>
<div id="question" style="display:none; cursor: pointer;"> 
<h1>모달창확인</h1> 
<input type="button" id="closebtn" value="닫기" /> 
</div>

$(function(){
		$("#btn").click(function(){
			//잠깐 나타났다가 사라지는 함수
			//$.growlUI('타이틀', '내용'); 
			$.blockUI({ 
				    //html태그를 문자열로 적용해도 무관함
				    //message : "<table><tr><td>태그테스트</td></tr><table>"
					message: $('#question')
					//css 설정
				   ,css: { 
					   width: '300px' 
					}
					//모달창 외부 클릭시 닫기
				   ,onOverlayClick: $.unblockUI 
			});	
		})
		$("#closebtn").click(function(){
			 //모달창 닫기
			 $.unblockUI(); 
		})
})

위 샘플링은 blockUI의 간단한 맛보기이고 자세한 상세옵션들을 하나둘씩 적용하면 훌륭한 모달창을 띄울 수 있을 것이다.

http://malsup.com/jquery/block/#options

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