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

Paul Kinlan

Cảnh báo: Vào ngày 18 tháng 11 năm 2010, W3C đã thông báo rằng cơ sở dữ liệu Web SQL là một bản đặc tả kỹ thuật không được dùng nữa. Các nhà phát triển web không nên sử dụng công nghệ này nữa vì bản đặc tả kỹ thuật sẽ không nhận được bản cập nhật mới và các nhà cung cấp trình duyệt không được khuyến khích hỗ trợ công nghệ này. Thay vào đó, các nhà phát triển nên sử dụng IndexedDB, công nghệ thay thế.

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à tồn tại bên trong trình duyệt của người dùng. Bằng cách cho phép các nhà phát triển tạo ra các ứng dụng có khả năng truy vấn phong phú, chúng tôi dự định rằng một kiểu ứng dụng web mới có khả năng hoạt động trực tuyến và ngoại tuyến sẽ xuất hiện.

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à hướng dẫn cấp cao về một số tính năng có sẵn 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à mang tính giao dịch

Trong phần lớn trường hợp mà bạn sử dụ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.

Việc 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 một 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 việc đọ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 trước khi có thể truy cập.
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 lệnh TẠO BẢNG SQL trong một giao dịch.

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

Bảng này có tên là việc cần làm và có 3 cột.

• ID – cột mã nhận dạng tuần tự tăng dần
• việc cần làm - cột văn bản là phần nội dung của mục
• add_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 sẽ được tạo, bên trong giao dịch đó sẽ thực hiện thao tác INSERT vào bảng việc cần làm.

phương thức thực thiSql sẽ lấy một số tham số, SQL để thực thi và các 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

Giờ đây, khi dữ liệu đã nằm trong cơ sở dữ liệu, bạn cần một hàm giúp lấy lại dữ liệu đó. Trong Chrome, Webdatabase sử dụng các truy vấn SQLite SELECT 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);
});
}

Lưu ý rằng tất cả các lệnh 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 thực thi. Kết quả sẽ được chuyển đến lệnh gọi lại thành công.

Bước 4a. Hiển thị dữ liệu từ bảng

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

Lệnh gọi lại onSuccess có 2 tham số. Mục đầu tiên là giao dịch của truy vấn và mục thứ hai là tập hợp kết quả. Việc lặp lại dữ liệu 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>";
}

Tác dụng của lệnh gọi phương thức này là danh sách việc cần làm được kết xuất vào 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 thúc

Khi trang tải xong, hãy mở cơ sở dữ liệu rồi tạo bảng (nếu cần) và kết xuất 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();">

Cần có một hàm đưa dữ liệu ra khỏi DOM, vì vậy, hãy gọi phương thức html5rock.webdb.addTodo

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