이번 포스팅 내용은 HTML5의 Web SQL Database에 대하여 알아보도록 하자
HTML5의 Web SQL을 사용하고자 하려면 다음 브라우저 환경에서 진행을 하여야 한다
Chrome / Safari / Opera / IOS Safari / Android Browser / Chrome for Android
아쉽게도 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개를 생성하였다
'select' 버튼은 조회버튼인대 클릭시 웹DB내에 존재하는 데이터 목록을 출력해서 화면에 출력
'insert'버튼은 등록버튼이며 클릭시 id값이 'test'인 text 태그에 입력되어있는 값을
test 테이블에 INSERT 시키는 동작
'update'/'delete' 버튼의 경우는 동적으로 생성된 버튼이라 일반적인 click이벤트가 동작이 되지 않으므로 on 기능을 이용하여 click 이벤트를 발생
(버튼의 문자 그대로 수정과 삭제의 기능을 동작시키는 버튼)
이제는 테스트를 위하여 위의 코드를 실행 후 동작을 시켜보도록 하자
WEB DB가 생성되었는지 확인을 위해서 크롬 - F12 를 누르면 Resources탭을 보면 되겠다
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 기능까지
정상적으로 출력이 되는지 확인해보도록 하자
웹상에서는 IE의 사용비중이 크므로 아직까지는 사용하기에는 무리인건 사실이다
하지만 스마트폰과 같은 모바일에서 이용을 한다면
괜찮은 기능이 될 것이다
