Danh sách VIỆC CẦN LÀM đơn giản sử dụng HTML5 WebDatabases

Paul Kinlan

Giới thiệu

Cơ sở dữ liệu web là tính năng mới trong HTML5. Cơ sở dữ liệu web được lưu trữ và duy trì bên trong trình duyệt của người dùng. Bằng cách cho phép nhà phát triển tạo các ứng dụng có khả năng truy vấn phong phú, chúng tôi dự kiến sẽ có một loại ứng dụng web mới xuất hiện có khả năng hoạt động cả khi có mạng và khi không có mạng.

Mã ví dụ trong bài viết này minh hoạ cách tạo một trình quản lý danh sách việc cần làm rất đơn giản. Đây là một bài viết tổng quan rất cao cấp về một số tính năng có trong HTML5.

Điều kiện tiên quyết

Mẫu này sử dụng một không gian tên để đóng gói logic cơ sở dữ liệu.

var html5rocks = {};
html5rocks.webdb = {};

Không đồng bộ và giao dịch

Trong hầu hết các trường hợp sử dụng tính năng hỗ trợ Cơ sở dữ liệu web, bạn sẽ sử dụng API không đồng bộ. API không đồng bộ là một hệ thống không chặn và do đó sẽ không nhận dữ liệu thông qua các giá trị trả về, mà sẽ nhận dữ liệu được phân phối đến một hàm gọi lại đã xác định.

Hỗ trợ Cơ sở dữ liệu web thông qua HTML là giao dịch. Không thể thực thi câu lệnh SQL bên ngoài giao dịch. Có hai loại giao dịch: giao dịch đọc/ghi (transaction()) và giao dịch chỉ đọc (readTransaction()). Xin lưu ý rằng giao dịch đọc/ghi sẽ khoá toàn bộ cơ sở dữ liệu.

Bước 1. Mở cơ sở dữ liệu

Bạn cần mở cơ sở dữ liệu thì mới có thể truy cập vào cơ sở dữ liệu đó.
Bạn cần xác định tên, phiên bản, nội dung mô tả và kích thước của cơ sở dữ liệu.

html5rocks.webdb.db = null;

html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("Todo", "1", "Todo manager", dbSize);
}

html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}

html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
// loadTodoItems is defined in Step 4a
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}

Bước 2. Tạo bảng

Bạn chỉ có thể tạo bảng bằng cách thực thi câu lệnh SQL CREATE TABLE bên trong một giao dịch.

Chúng ta đã xác định một hàm sẽ tạo một bảng trong sự kiện tải nội dung. Nếu bảng chưa tồn tại, bảng sẽ được tạo.

Bảng này có tên là todo và có 3 cột.

  • Mã nhận dạng – cột mã nhận dạng tăng dần theo tuần tự
  • todo – cột văn bản là nội dung của mục
  • added_on – thời gian tạo mục việc cần làm
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS " +
                "todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
});
}

Bước 3. Thêm dữ liệu vào bảng

Chúng ta đang xây dựng một trình quản lý danh sách việc cần làm, vì vậy, điều quan trọng là chúng ta có thể thêm các mục việc cần làm vào cơ sở dữ liệu.

Một giao dịch được tạo, bên trong giao dịch này, một thao tác INSERT vào bảng todo sẽ được thực hiện.

executeSql nhận một số tham số, SQL để thực thi và giá trị tham số để liên kết truy vấn.

html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var addedOn = new Date();
tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
    [todoText, addedOn],
    html5rocks.webdb.onSuccess,
    html5rocks.webdb.onError);
});
}

Bước 4. Chọn dữ liệu từ bảng

Bây giờ, dữ liệu đã có trong cơ sở dữ liệu, bạn cần một hàm để lấy dữ liệu đó ra. Trong Chrome, Webdatabase sử dụng các truy vấn SELECT SQLite tiêu chuẩn.

html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
    html5rocks.webdb.onError);
});
}

Xin lưu ý rằng tất cả các lệnh này được sử dụng trong mẫu này đều không đồng bộ, do đó, dữ liệu không được trả về từ giao dịch hoặc lệnh gọi executeSql. Kết quả được truyền đến lệnh gọi lại thành công.

Bước 4a. Kết xuất dữ liệu từ bảng

Sau khi dữ liệu được tìm nạp từ bảng, phương thức loadTodoItems sẽ được gọi.

Lệnh gọi lại onSuccess có hai tham số. Lần đầu là giao dịch của truy vấn và lần thứ hai là tập hợp kết quả. Bạn có thể lặp lại dữ liệu một cách khá đơn giản:

function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}

todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<li>" + row.todo + 
        " [<a href='javascript:void(0);' onclick=\'html5rocks.webdb.deleteTodo(" + 
        row.ID +");\'>Delete</a>]</li>";
}

Hiệu quả của lệnh gọi phương thức này là danh sách việc cần làm được hiển thị thành một Phần tử DOM có tên là "todoItems".

Bước 5. Xoá dữ liệu khỏi bảng

html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
    html5rocks.webdb.onSuccess,
    html5rocks.webdb.onError);
});
}

Bước 6. Kết nối tất cả

Khi trang tải, hãy mở cơ sở dữ liệu và tạo bảng (nếu cần) rồi hiển thị mọi mục việc cần làm có thể đã có trong cơ sở dữ liệu.

....
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>

<body onload="init();">

Bạn cần một hàm lấy dữ liệu ra khỏi DOM, vì vậy, hãy gọi phương thức html5rocks.webdb.addTodo

function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}