Daftar TODO sederhana menggunakan HTML5 WebDatabases

Paul Kinlan

Pengantar

Database Web adalah fitur baru di HTML5. Database Web dihosting dan dipertahankan di dalam browser pengguna. Dengan memungkinkan developer membuat aplikasi dengan kemampuan kueri yang kaya, diperkirakan akan muncul jenis aplikasi web baru yang memiliki kemampuan untuk bekerja secara online dan offline.

Contoh kode dalam artikel ini menunjukkan cara membuat pengelola daftar tugas yang sangat sederhana. Ini adalah tur tingkat tinggi tentang beberapa fitur yang tersedia di HTML5.

Prasyarat

Contoh ini menggunakan namespace untuk mengenkapsulasi logika database.

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

Asinkron dan Transaksi

Dalam sebagian besar kasus saat menggunakan dukungan Database Web, Anda akan menggunakan Asynchronous API. Asynchronous API adalah sistem non-blocking sehingga tidak akan mendapatkan data melalui nilai yang ditampilkan, tetapi akan mendapatkan data yang dikirim ke fungsi callback yang ditentukan.

Dukungan Database Web melalui HTML bersifat transaksional. Anda tidak dapat menjalankan pernyataan SQL di luar transaksi. Ada dua jenis transaksi: transaksi operasi baca/tulis (transaction()) dan transaksi hanya baca (readTransaction()). Perhatikan bahwa operasi baca/tulis akan mengunci seluruh database.

Langkah 1. Membuka database

Database harus dibuka sebelum dapat diakses.
Anda perlu menentukan nama, versi, deskripsi, dan ukuran database.

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);
}

Langkah 2. Membuat tabel

Anda hanya dapat membuat tabel dengan menjalankan pernyataan SQL CREATE TABLE di dalam transaksi.

Kita telah menentukan fungsi yang akan membuat tabel dalam peristiwa onload isi. Jika belum ada, tabel akan dibuat.

Tabel ini disebut daftar tugas dan memiliki 3 kolom.

  • ID - kolom ID berurutan yang bertambah
  • daftar tugas - kolom teks yang merupakan isi item
  • added_on - waktu pembuatan item daftar tugas
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)", []);
});
}

Langkah 3. Menambahkan data ke tabel

Kita sedang membuat pengelola daftar tugas sehingga sangat penting bagi kita untuk dapat menambahkan item daftar tugas ke database.

Transaksi dibuat, di dalam transaksi, INSERT ke dalam tabel daftar tugas dilakukan.

executeSql memerlukan beberapa parameter, SQL yang akan dieksekusi, dan nilai parameter untuk mengikat kueri.

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);
});
}

Langkah 4. Memilih data dari tabel

Setelah data ada di database, Anda memerlukan fungsi yang mengambil data kembali. Di Chrome, Webdatabase menggunakan kueri SELECT SQLite standar.

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

Perhatikan bahwa semua perintah yang digunakan dalam contoh ini adalah asinkron sehingga data tidak ditampilkan dari transaksi atau panggilan executeSql. Hasilnya diteruskan ke callback sukses.

Langkah 4a. Merender data dari tabel

Setelah data diambil dari tabel, metode loadTodoItems akan dipanggil.

Callback onSuccess menggunakan dua parameter. Yang pertama adalah transaksi kueri dan yang kedua adalah kumpulan hasil. Anda dapat melakukan iterasi di seluruh data dengan cukup mudah:

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>";
}

Efek dari panggilan metode ini adalah daftar tugas dirender menjadi Elemen DOM yang disebut "todoItems".

Langkah 5. Menghapus data dari tabel

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);
});
}

Langkah 6. Menghubungkan semuanya

Saat halaman dimuat, buka database dan buat tabel (jika diperlukan) serta render item daftar tugas yang mungkin sudah ada di database.

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

<body onload="init();">

Fungsi yang mengambil data dari DOM diperlukan, jadi, panggil metode html5rocks.webdb.addTodo

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