[HTML5강좌] 15. Web SQL Database

우정환 2011.06.21 08:44 Views : 39802

다음의 내용과 소스는
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.


이번엔 Web SQL Database 를 살펴볼까요?
Web SQL Database 는 지난 아티클에서 소개한 Storage 와 함께 기본적인 Web Storage 중 하나입니다.
말씀 안드려도 딱! 알고 계시겠지만 Client 에 데이터를 저장한다는 공통점을 가지고 있지요.

개발자분들께서는 SQL 에 익숙하시니 금방 접근 하실수 있으리라 생각됩니다.
개발자가 아닌 분들도 그리 어렵지 않은 내용이니 너무 어려워 마시고요... ^^

그럼 Database 를 생성하는 작업부터 시작해 보겠습니다.

15-1. Create Database
생성하기 전에 먼저 사용하는 Web Browser 가 Web SQL Database를 지원하는지 확인해 봐야겠죠?
if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
} else {
...
}

확인도 했으니 이젠 Database를 생성해 보겠습니다.
다음과 같은 Database 를 생성하는 Method 를 제공합니다.

if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
} else {
var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");
}

openDatabase 함수를 사용하여 Database 를 생성합니다. 그리고 함수에 사용되는 parameter 들은 아래와 같습니다.

openDatabase("Database 이름", "Database Version", "Database 설명", "Database Size");

함수명 이름만 봐서는 Open 이라는 말에 이미 존재하는 Database 를 연다고 생각하기 쉬운데 Database 가 존재하지 않으면 Database 를 생성한다는 것! 기억해 두셔요...

15-2. transaction
Database 가 생성도 되었으니 이젠 슬슬 접근해 보겠습니다.
접근하는 Method 는 transaction()입니다.

if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
} else {
var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");
db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
...
},
function(error) { //transaction 에 Error 가 발생한 경우
...
},
function() { //transaction 을 성공했을 때
...
});
}

Error 발생시 그리고 성공완료시에 진행할 코드는 생략가능한 부분입니다.

요기까지가 Database 를 생성하고 접근하는 것 까지의 순서입니다.
많이 어렵게 느껴지시나요?

그럼 계속 이어나가겠습니다.


15-3. executeSql
이젠 테이블을 생성하고 데이터를 입력하는 작업을 해보겠습니다.
이런 작업을 할때 사용하는 Method 는 executeSql() 입니다.
if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
} else {
var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");
db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
tx.executeSql('CREATE TABLE worklist(idx integer primary key, subject, memo)');

tx.executeSql('INSERT INTO worklist(idx, subject, memo) VALUES (1, "업무", "WCF Server 작성")';
tx.executeSql('INSERT INTO worklist(idx, subject, memo) VALUES (2, "약속", "SQLer Article작성")';
tx.executeSql('INSERT INTO worklist(idx, subject, memo) VALUES (3, "가정", "일주일식량 장보기")';
});
}

Table 을 생성하고 세건의 Data 를 입력하는 코드입니다.

음.. 여기까지 작업했으니 제대로 Database 가 생성되고 데이터가 제대로 들어갔는지 확인해 볼까효~~ ^^


확인도 됐으니.. 이젠 데이터를 삭제해 보겠습니다.
삭제하는 구문은 여러분도 알고 계시겠지만 서도...
tx.executeSql('DELETE FROM worklist WHERE idx=2');

테이블 삭제요?
tx.executeSql('DROP TABLE worklist');

^^


15-4. 예제
그럼 위 사항들을 모두 적용한 예제를 만들어 보겠습니다.
<!DOCTYPE html>
< html lang="ko">
  <head>
         <meta charset="utf-8" />
   <title>Web SQL Database 예제</title>
         <script type="text/javascript">

                 if (!window.openDatabase) {
                     document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
                     return false;
                 } else {

                     var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");

                     db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
                         tx.executeSql('SELECT Count(idx) FROM worklist');
                     },
                     function(error) { //transaction 에 Error 가 발생한 경우
                         alert("Select Error : " + error.message);
                         tx.executeSql('CREATE TABLE worklist(idx integer primary key, subject, memo)');
                     },
                     function() { //transaction 을 성공했을 때        
                     });

                     db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
                         tx.executeSql('INSERT INTO worklist(idx, subject, memo) values (1, "업무", "WCF Server 작성")');
                         tx.executeSql('INSERT INTO worklist(idx, subject, memo) values (2, "약속", "SQLer Article작성")');
                         tx.executeSql('INSERT INTO worklist(idx, subject, memo) values (3, "가정", "일주일식량 장보기")');
                     },
                     function(error) { //transaction 에 Error 가 발생한 경우                    
                         alert("insert Error : " + error.message);
                     },
                     function() { //transaction 을 성공했을 때
                         alert("insert Success");        
                     });

                 };
         </script>
  </head>
  <body>
  </body>
< /html>

WebSQL_Example_12.jpg

 

Safari 의 Development Tool 인 Web Inspector 를 통해서 본 모습입니다.
보시면 제가 만든 Database 의 모습을 보실 수있을 겁니다. 데이터도 잘 들어가 있군요... ㅋㅋ

두번 Refresh 하면 에러납니다. ㅋㅋㅋ
왜 그런지 한번 돌려서 확인해보셔요... ㅋㅋㅋ

아 그리고 Database 의 버전이나 동기화에 대한 문제에 대해서는 숙제로 남겨놓기로 하겠습니다.


아래 이미지는 Webkit 에서 제공하는 예제인 Sticky Note 입니다. (안타깝지만 internet explore 9.0 과 firefox 4.0.1 에서는 돌아가지 않습니다.)
http://www.webkit.org/demos/sticky-notes/index.html
한번 간단히 살펴보셔도 좋을 듯합니다.

WebSQL_Example_10.jpg

 
 


지난 글과 이번글을 통해서 Web Storage 와 Web SQL Database 에 대해서 알아 보았습니다.
이제 데이터베이스까지 Client 로 넘어왔습니다. 글만 보고 있어도 클라이언트의 한계가 조금씩 없어지는 것 같아 기분좋아지지 않으신가요? 하긴 생각해야할 것들과 개발해야 하는 것들이 점점 많아지긴 하겠지만 말이죠.
더욱더 UX 라고 하는 사용자 경험에 손쉽게? 다가갈 수 있지 않을까 싶습니다. 아! 다른 녀석들의 도움없이요... ^^


그럼



HTML5 시리즈 강좌 리스트
[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API



HTML5 동영상 강좌 리스트
[HTML5 동영상 강좌] 1. HTML 5 개요
[HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
[HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
[HTML5 동영상 강좌] 4. Sementic Element (1)
[HTML5 동영상 강좌] 5. Sementic Element (2)
[HTML5 동영상 강좌] 6. Strong Web Form
[HTML5 동영상 강좌] 7. Rich Text Edit API
[HTML5 동영상 강좌] 8. Video Element
[HTML5 동영상 강좌] 9. Audio Element
[HTML5 동영상 강좌] 10. Canvas Element
[HTML5 동영상 강좌] 11. Drag & Drop API
[HTML5 동영상 강좌] 12. Offline Web Application
[HTML5 동영상 강좌] 13. Communication API
[HTML5 동영상 강좌] 14. Web Storage
[HTML5 동영상 강좌] 15. Web SQL Database
[HTML5 동영상 강좌] 16. Web Worker
[HTML5 동영상 강좌] 17. Web Socket
[HTML5 동영상 강좌] 18. Geolocation API
[HTML5 동영상 강좌] 19. SVG
[HTML5 동영상 강좌] 20. File API



행복한 고수되셔요... ^^


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

, , , , I want to
cmd_document_vote_user List
Write Tag


XE Login