-0-ㅋ 블로그 이사진행중입니다!!

현재 기존글 옮기는 작업과 스킨제작에 몰두하고자 당분간 포스팅은 없을거 같네요 ㅠㅠ 

당분간은 포스팅계획이 없을거 같습니다.

첫블로그여서 중간에 이것저것 잘못건드리다보니

아무래도 저품질을 얻어 맞은거 같네요 ㅋㅋ

블로그 이사가 완료되면 추가 공지 드리겠습니다~ 

당분간 해당 블로그의 글은 이사가 진행되는동안은 남겨놓도록 하겠습니다!

신규 블로그에서 뵙도록 하겠습니다~

이사 완료 후 조금 더 좋은 품질의 포스팅을 찾아뵙도록 할겠습니다!!

기존 네이버 이웃분들과 신규 방문자분들께서는

http://hellogk.tistory.com

으로 방문해주셔서 이웃추가부탁드릴게요~

※ 스킨작업 진행중이라 필요한 기능이나 레이아웃적인 부분에 대한댓글 조언좀 부탁드려요!

이번 포스팅 내용은 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 기능까지 

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

하... 거의 5일만에 포스팅이다.. 

티스토리 스킨제작을 한다고 시간을 보냈다~~ 

포스팅 하고싶었으나 하나에 집중하면 다른 하나는 잘 못하는 본인이라. .ㅋ;;

지난시간에는 일정 시간이 될때 특정 메소드(?)를 호출하여 System.out.println을 콘솔창에 출력시키는 것을 확인하였다

이번에는 지난 코드에 이어서 MyBatis까지 연동을 하여 특정 시간에 DB를 조회하는 샘플을 진행

해보도록 하겠다

본인은 SELECT쿼리를 진행 해보도록 하겠음

CRUD 관련은 포스팅 샘플을 기준으로 응용을 하시길...

해당 포스팅의 코드를 기준으로 기본 Mybatis 연동을 해보도록 하자

위와같은 구조로 정의를 하였다

그럼 일정 시간에 CALL 해주는 DB에 대하 DAO 코드 와 쿼리XML 코드를 각각 다음과 같이 정의

해보도록 하자

<select id="testquery"  resultType="java.lang.String">
	SELECT 'TEST 쿼리'
</select>

@Repository
public class Dao {
	
	@Autowired
	private SqlSession sql;
	
	public String testquery() throws SQLException {
		return sql.selectOne("sql.testquery");
	}
}

package com.crontab;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;

import com.crontab.dao.Dao;

@Component
public class Scheduler {
	
	@Autowired
	private Dao dao;
	
	@Scheduled(cron = "00 45 23 * * *")
	public void cronTest1(){
		try {
			//일정시간이 되면 DAO를 통하여 DB에 쿼리문 조회
			String test = dao.testquery();
			System.out.println("DB조회값:"+test);	
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

저번 포스팅에 컬럼추가를 해보았다면 이번에는 컬럼삭제를 해보도록 하겠음

ALTER TABLE TABLENAME DROP(COLUMNNAME)

ALTER TABLE  TABLENAME DROP COLUMN COLUMNNAME

삭제에 대한 명령어는 위와 동일하다

그럼 각DBMS별로  MEMBERTABLE에서 'NAME' 컬럼을 삭제해보도록 하자

관련 테이블 내용은 다음포스팅을 참고하도록 하자

컬럼삭제는 추가로 포스팅 할 내용은 없다 그냥 명령어 사용법을 위하여 임의의 예를 들어보았다

개발을 하면서 요구사항에 따라 컬럼을 추가하는 경우가생긴다.

 이럴 경우를 위해 포스팅을 해보도록 하겠음

ALTER  TABLE TABLENAME ADD(COLUMNNAME COLUMNTYPE)

ALTER TABLE TABLENAME ADD COLUMN COLUMNNAME COLUMNTYPE

ALTER TABLE TABLENAME ADD  COLUMNNAME COLUMNTYPE

위는 각 DBMS별 컬럼 추가/삭제 기본 명령어들이다

ALTER TABLE 테이블이름 ADD COLUMN 추가하고자 하는 컬럼명 컬럼타입 AFTER 컬럼이름

ALTER TABLE 테이블이름 ADD COLUMN COLUMN_NAME COLUMN_TYPE FIRST

지난 포스팅이 MEMBERTABLE이라는 테이블을 생성했었다 

해당 포스팅에서 생성했던 테이블구조를 기준으로 각 DBMS별로 컬럼을 추가해보도록 하자

상단 기본 명령어들을 각 DBMS에 맞추어 실행 한후 컬럼을 확인해보도록 하자

동일하게 email varchar(200) 형식으로 컬럼을 추가하도록 하자

ALTER TABLE MEMBERTABLE ADD COLUMN EMAIL VARCHAR(200)

ALTER TABLE MEMBERTABLE ADD  EMAIL VARCHAR(200)

ALTER  TABLE MEMBERTABLE ADD(EMAIL VARCHAR(200))

모두 정상적으로 email 컬럼이 추가된것을 확인하였다