Lập trình HTML5 – Web SQL Database

01/03/2015 in Lập trình

2193 Lượt xem

Web SQL Database là một công nghệ kết hợp giữa trình duyệt và SQLite để hỗ trợ việc tạo và quản lý database ở phía client. Các thao tác với database sẽ được thực hiện bởi javascript và sử dụng các câu lệnh SQL để truy vấn dữ liệu.

Giới thiệu

Lợi ích của SQLite là có để được tích hợp vào các ứng dụng với một thư viện duy nhất để truy xuất được database. Chính vì vậy, bạn có thể sử dụng nó làm cơ sở dữ liệu cho những ứng dụng nhỏ và không cần thiết cài đặt bất kì phần mềm hoặc driver nào. Hiện tại Web SQL Database được hỗ trợ trong các trình duyệt Google Chrome, Opera và Safari.

Trong javascript, bạn sử dụng các phương thức chính sau để làm việc với Web SQL Database.

openDatabase: mở một database có sẵn hoặc tạo mới nếu nó chưa tồn tại.

transaction / readTransaction: hỗ trợ thực hiện các thao tác với database và rollback nếu xảy ra sai sót.

executeSql: thực thi một câu lệnh SQL.

Open Database

Phương thức này có nhiệm vụ mở một database có sẵn hoặc tạo mới nếu nó chưa tồn tại. Phương thức này được khai báo như sau:

Database openDatabase(

in DOMString name,

in DOMString version,

in DOMString displayName,

in unsigned long estimatedSize,

in optional DatabaseCallback creationCallback

);

Tham số:

– name: tên của database.

– version: phiên bản. Hai database trùng tên nhưng khác phiên bản thì khác nhau.

– displayname: mô tả.

– estimatedSize: dung lượng được tính theo đơn vị byte.

– creationCallback: phương thức callback được thực thi sau khi database mở/tạo.

Ví dụ tạo một database với tên “mydb” và dung lượng là 5 MB:

var db = openDatabase("mydb", "1.0", "My First DB", 5 * 1024 * 1024);

Transaction

Bạn cần thực thi các câu SQL trong ngữ cảnh của một transaction. Một transaction cung cấp khả năng rollback khi một trong những câu lệnh bên trong nó thực thi thất bại. Nghĩa là nếu bất kì một lệnh SQL nào thất bại, mọi thao tác thực hiện trước đó trong transaction sẽ bị hủy bỏ và database không bị ảnh hưởng gì cả.

Interface Database hỗ trợ hai phương thức giúp thực hiện điều này là transaction() và readTransaction(). Điểm khác biệt giữa chúng là transaction() hỗ trợ read/write, còn readTransaction() là read-only. Như vậy sử dụng readTransaction() sẽ cho hiệu suất cao hơn nếu như bạn chỉ cần đọc dữ liệu.

void transaction(

in SQLTransactionCallback callback,

in optional SQLTransactionErrorCallback errorCallback,

in optional SQLVoidCallback successCallback

);

Ví dụ:

var db = openDatabase("mydb", "1.0", "My First DB", 5 * 1024 * 1024);

db.transaction(function (tx) {

// Using tx object to execute SQL Statements

});

Execute SQL

executeSql() là phương thức duy nhất để thực thi một câu lệnh SQL trong Web SQL. Nó được sử dụng cho cả mục đích đọc và ghi dữ liệu

void executeSql(

in DOMString sqlStatement,

in optional ObjectArray arguments,

in optional SQLStatementCallback callback,

in optional SQLStatementErrorCallback errorCallback

);

Ví dụ 1: tạo bảng Customers và thêm hai dòng dữ liệu vào bảng này.

db.transaction(function (tx) {

  tx.executeSql("CREATE TABLE IF NOT EXISTS CUSTOMERS(id unique, name)");

  tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (1, 'peter')");

  tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (2, 'paul')");

});

Tuy nhiên cách thực thi SQL trên không được rõ ràng và có thể bị các vấn đề về bảo mật như SQL injection. Vì vậy tốt hơn bạn nên để các tham số cần truyền cho câu SQL trong một mảng và đặt vào làm tham số thứ 2 của phương thức executeSql(). Các vị trí trong câu SQL chứa tham số sẽ được thay thế bởi dấu ‘?’:

tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (?,?)", [1,”peter”]);

tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (?,?)", [2,"paul"]);

Ví dụ 2: Hiển thị dữ liệu của bảng Customer lên trang web dưới dạng table:

db.readTransaction(function(tx){

    showCustomers(tx);

});

function showCustomers(tx)

{

    var table="",row="";

    var i;

    tx.executeSql("SELECT * FROM CUSTOMERS", [], function (tx1, results) {

    for (i=0;i < results.rows.length; i++){

        var customer=results.rows.item(i);

        row="<td>"+customer.id+"</td>";

        row+="<td>"+customer.name+"</td>";

        table+="<tr>"+row+"</tr>";

    }

    table="<table border='1'><th>Id</th><th>Name</th><tbody>"+table+"</tbody></table>";

    document.write(table);

    }, null);

}

Bạn cũng thế xem các database được tạo ra trong thẻ Resources của Chrome Developer Tools (Ctrl+Shift+I):

lap-trinh-html5-web-sql-database

Ví dụ hoàn chỉnh

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

var db = openDatabase("mydb", "1.0", "My First DB", 5 * 1024 * 1024);

db.transaction(function (tx) {

  tx.executeSql("CREATE TABLE IF NOT EXISTS CUSTOMERS(id unique, name)");

tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (?,?)", [1,”peter”]);

tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (?,?)", [2,”paul”]);

});

db.readTransaction(function(tx){

    showCustomers(tx);

});

function showCustomers(tx)

{

    var table="",row="";

    var i;

    tx.executeSql("SELECT * FROM CUSTOMERS", [], function (tx1, results) {

    for (i=0;i < results.rows.length; i++){

        var customer=results.rows.item(i);

        row="<td>"+customer.id+"</td>";

        row+="<td>"+customer.name+"</td>";

        table+="<tr>"+row+"</tr>";

    }

    table="<table border='1'><th>Id</th><th>Name</th><tbody>"+table+"</tbody></table>";

    document.write(table);

    }, null);

}

</script>

</head>

<body>

</body>

</html>