Hi Hi

'HTML5 웹 데이터베이스'에 해당되는 글 1건

  1. HTML5 웹 SQL 데이터베이스

HTML5 웹 SQL 데이터베이스

 

웹 SQL 데이터베이스란 ?

웹 SQL 데이터베이스는 SQL을 사용하여 관계형 데이터베이스를 이용할 수도 있도록 해주는 기능이다.

웹 SQL 데이터베이스의 기본적인 사용법
1. 데이터베이스 열기
2. 트랜잭션 시작
3. SQL 실행
4. SQL 실행 결과를 처리

트랜잭션(transaction)이란 ' 데이터베이스를 조작할 때, 관련된 여러 처리를 하나의 처리 단위로 묶은 것' 이다.

예를 들어 1번 계좌에서 2번 계좌로 송금을 한다. 2번 계좌로 입금을 하게 되면 1번 계좌의 금액은 감소하고 2번 계좌의 금액이 증가하게 된다. 이 과정에 있어서 1번 계좌에서 감소는 성공하고, 2번 계좌에서 증가는 실패하는 경우가 발생할 수 도 있다, 이런과정에서 데이터의 무결성을 보장하기 위해 출입금 처리가 실패하면 입출금 처리를 하지 않도록 할 필요가 있다. 이와 같이 관련된 여러 처리를 묶어 하나의 '트랜잭션'으로 취급한다. 

웹 SQL 데이터베이스에서는 자바스크립트의 콜백 함수를 이용하여 트랜잭션을 구현한다. 이 때문에 각 처리 별로 함수를 정의해야 하므로 코드가 다소 복잡해진다는 단점이 있다.

1, 사전 준비
데이터베이스에 접속하기 전에 웹 브라우저가 웹  SQL 데이터베이스를 지원하는지를 확인한다. 웹 SQL 데이터 베이스를 지원하는 경우,  Windows 객쳉 openDatabase() 메서드 가 정의되므로 이 메서드가 정의되어있는지를 확인한다.
   if (window.openDatabase == undefined){
    alert("Web Database를 지원하지 않습니다.");
    return;
   }

2, 데이터베이스 열기
데이터베이스에 접속하는 메서드의 형식
Database(데이터 베이스 이름,버전,표시할 이름,예상크기);

- 데이터베이스 이름 : 데이터베잇를 식별하기 위한 이름을 지정한다.
- 버전 : 데이터베이스 스키마의 버전을 지정한다.
- 표시할 이름 : 알기 쉬운 데이터베이스 이름.
- 예상 크기 : 데이터베이스의 예상 크기를 바이트 단위로 지정한다.
db = window.openDatabase("testdb","1.0","sample",1024*1024);

3, 트랜잭션 개시
데이터를 조작하려면 먼저 transaction() 메서드를 호출하여 트랜잭션을 시작한다. 이 메서드의 콜백 함수에서 SQL을 실행한다.

 transaction() 메서드의 형식
(Database객체).transaction(callback, onError, onSuccess)

- callback : 트랜잭션 중 실행할 처리
- onError : 트랜잭션 중 에러가 발생했을 때 실행할 처리
- onSuccess : 트랜잭션이 성공했을 때 실행할 처리

이들 인수는 모두 함수 객체를 지정한다. 
   db.transaction(function(tx){
    tx.executeSql("create table if not exists time_tbl(sec,str)");
    //테이블에 현재 시간을 등록
    var sec = new Data().getTime();
    var str = new Data(). toString();
    tx.executeSql("insert into time_tbl(sec,str)values(?,?)",[sec,str]);
    });
   };

4. SQL 실행
트랜잭션 메서드 내부에서 SQL을 실행한다. SQL을 실행하는 메서드는 트랜잭션 메서드가 반환하는 SQLTransaction 객체에 구현되어있다.
(SQLTransaction객체).executeSql(sql, args, onSuccess, onError)

- sql : 실행할 SQL을 지정한다.
- args : SQL에 포함된 ? 를 치환할 값을 배열로 지정한다.
-  onSuccess : SQL 실행이 성공했을 때 실행할 처리
- onError : SQL 실행이 실패했을 때 실행할 처리
   //2. 데이터베이스 열기
   db = window.openDatabase("testdb","1.0","sample",1024*1024);
    //3. 트랜잭션 시작
    db.transaction(function(tx){
    //(4) SQL 실행
    // 테이블이 존재하지 않을 경우 새로 작성
    tx.executeSql("create table if not exists time_tbl(sec,str)");
    });


5. SQL 실행 처리 결과를 처리
SELECT문 등의 SQL을 실행한 후 그 결과를 얻어오려면 콜백 함수 onSuccess() 메서드 내에 원하는 처리를 기술한다.
onSuccess() 메서드의 형식
function onSuccess(tx, resuleSet){
 //...
}

- tx : SQLTransaction 객체가 반환된다.
- resultSet : SQLResultSet 객체가 반환된다.

또한 resultSet 에는 다음과 같은 속성이 있다.

- insertId : INSERT 문을 싱행하여 생성된 ID를 반환
- rowAffected : SQL 실행에 의해 영향을 받은 레코드 수를 반환
- row : SELECT 문을 읽어 들인 결과( ResultSet)를 저장

- item(index) : index를 지정하여 ResultSet에서 레코드를 꺼내온다
- length : 레코드 수

item() 메서드 꺼내 온 객체에는 데이터베이스의 칼럼명을 속성으로 하는 값이 저장되어 있다.
    db.transaction(function(tx){
     //4.SQL 실행 : 저장된 모든 정보를 읽어온다
     tx.executeSql("select* from time_tbl",[],function(tx,rs){
      //5.SQL 실행 결과를 처리
      for (var i = 0; i< rs.rows.length;i++){
       var row = rs.rows.item(i);
       document.write(row.str+"<br/>");
      }
     });
    
    });

먼저 transaction() 메소드의 인수로 지정한 콜백 함수에서 반환된 SQLTransaction 객체의 executeSql() 메서드를 호출하면 , 다음으로 executeSql()메서드의 콜백 함수 내에서 반환된 SQLResultSet 객체를 이용하여 데이터를 표시한다.


 <body>
  <button onclick="showValues()">데이터 표시</button>
  <script type="text/javascript">
   var db;
   window.onload= function(){
   if (window.openDatabase == undefined){
    alert("Web Database를 지원하지 않습니다.");
    return;
   }
   //2. 데이터베이스 열기
   db = window.openDatabase("testdb","1.0","sample",1024*1024);
   //3. 트랜잭션 시작
   db.transaction(function(tx){
    tx.executeSql("create table if not exists time_tbl(sec,str)");
    //테이블에 현재 시간을 등록
    var sec = new Data().getTime();
    var str = new Data(). toString();
    tx.executeSql("inset into time_tbl(sec,str)values(?,?)",[sec,str]);
    });
   };
   
   function showValues(){
    db.transaction(function(tx){
     //4.SQL 실행 : 저장된 모든 정보를 읽어온다
     tx.executeSql("select* from time_tbl",[],function(tx,rs){
      //5.SQL 실행 결과를 처리
      for (var i = 0; i< rs.rows.length;i++){
       var row = rs.rows.item(i);
       document.write(row.str+"<br/>");
      }
     });
    
    });
   }
  </script>
  
 </body>


 [출처:스마트폰 앱 개발을 위한 HTML 5(아이폰/아이패드/안드로이드)]


'' 카테고리의 다른 글

HTML5 웹 SQL 데이터베이스  (0) 2012.01.20
HTML5 로컬 자장소에 데이터 저장 : 웹 스토리지  (3) 2012.01.16
HTML5 동영상 재생  (0) 2012.01.14
HTML5 개발툴 소개  (0) 2012.01.11
HTML5 컨버스의 기초  (0) 2012.01.09
HTML5 프로그래밍의 기초  (0) 2012.01.07