다음의 내용과 소스는
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.
이번엔 Web SQL Database 를 살펴볼까요?
Web SQL Database 는 지난 아티클에서 소개한 Storage 와 함께 기본적인 Web Storage 중 하나입니다.
말씀 안드려도 딱! 알고 계시겠지만 Client 에 데이터를 저장한다는 공통점을 가지고 있지요.
개발자분들께서는 SQL 에 익숙하시니 금방 접근 하실수 있으리라 생각됩니다.
개발자가 아닌 분들도 그리 어렵지 않은 내용이니 너무 어려워 마시고요... ^^
그럼 Database 를 생성하는 작업부터 시작해 보겠습니다.
14-1. Create Database
생성하기 전에 먼저 사용하는 Web Browser 가 Web SQL Database를 지원하는지 확인해 봐야겠죠?
을 참고 하였습니다.
이번엔 Web SQL Database 를 살펴볼까요?
Web SQL Database 는 지난 아티클에서 소개한 Storage 와 함께 기본적인 Web Storage 중 하나입니다.
말씀 안드려도 딱! 알고 계시겠지만 Client 에 데이터를 저장한다는 공통점을 가지고 있지요.
개발자분들께서는 SQL 에 익숙하시니 금방 접근 하실수 있으리라 생각됩니다.
개발자가 아닌 분들도 그리 어렵지 않은 내용이니 너무 어려워 마시고요... ^^
그럼 Database 를 생성하는 작업부터 시작해 보겠습니다.
14-1. Create Database
생성하기 전에 먼저 사용하는 Web Browser 가 Web SQL Database를 지원하는지 확인해 봐야겠죠?
if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
return false;
} else {
...
}확인도 했으니 이젠 Database를 생성해 보겠습니다.
다음과 같은 Database 를 생성하는 Method 를 제공합니다.
if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
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 를 생성한다는 것! 기억해 두셔요...
14-2. transaction
Database 가 생성도 되었으니 이젠 슬슬 접근해 보겠습니다.
접근하는 Method 는 transaction()입니다.
if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
return false;
} else {
var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");
db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
...
},
function(error) { //transaction 에 Error 가 발생한 경우
function(error) { //transaction 에 Error 가 발생한 경우
...
},
function() { //transaction 을 성공했을 때
function() { //transaction 을 성공했을 때
...
});
}Error 발생시 그리고 성공완료시에 진행할 코드는 생략가능한 부분입니다.
요기까지가 Database 를 생성하고 접근하는 것 까지의 순서입니다.
많이 어렵게 느껴지시나요?
그럼 계속 이어나가겠습니다.
14-3. executeSql
이젠 테이블을 생성하고 데이터를 입력하는 작업을 해보겠습니다.
이런 작업을 할때 사용하는 Method 는 executeSql() 입니다.
if (!window.openDatabase) {
document.write("이 Browser 는 Web SQL Database 를 지원하지 않습니다.");
return false;
return false;
} else {
var db = openDatabase("MyFirstDatabase", "1.0", "첫번째 테스트 데이터베이스", "2*1024*1024");
db.transaction(function (tx) { //SQL 을 실행하고 Control 합니다.
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, "가정", "일주일식량 장보기")';
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');
^^
14-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>
<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>
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
한번 간단히 살펴보셔도 좋을 듯합니다.
지난 글과 이번글을 통해서 Web Storage 와 Web SQL Database 에 대해서 알아 보았습니다.
이제 데이터베이스까지 Client 로 넘어왔습니다. 글만 보고 있어도 클라이언트의 한계가 조금씩 없어지는 것 같아 기분좋아지지 않으신가요? 하긴 생각해야할 것들과 개발해야 하는 것들이 점점 많아지긴 하겠지만 말이죠.
더욱더 UX 라고 하는 사용자 경험에 손쉽게? 다가갈 수 있지 않을까 싶습니다. 아! 다른 녀석들의 도움없이요... ^^
그럼
행복한 고수되셔요... ^^
woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형
'Web > HTML 5' 카테고리의 다른 글
| [HTML 5] 17. Web Socket (1) | 2011.06.25 |
|---|---|
| [HTML 5] 16. Web Worker (0) | 2011.06.23 |
| [HTML 5] 14. Web Storage (0) | 2011.06.21 |
| [HTML 5] 13. Communication API (0) | 2011.06.19 |
| [HTML 5] 12. Offline Web Application (0) | 2011.06.18 |
