Daftar TODO sederhana menggunakan HTML5 WebDatabases

Paul Kinlan

Peringatan: Pada 18 November 2010, W3C mengumumkan bahwa database Web SQL adalah spesifikasi yang tidak digunakan lagi. Ini adalah saran bagi pengembang web untuk tidak lagi menggunakan teknologi seefektif spesifikasi tidak akan menerima pembaruan baru dan vendor browser tidak disarankan untuk mendukung teknologi ini. Sebagai gantinya, developer dianjurkan untuk menggunakan IndexedDB, teknologi pengganti.

Pengantar

Database Web masih baru di HTML5. Database Web dihosting dan disimpan di dalam browser pengguna. Dengan memungkinkan developer membuat aplikasi dengan kemampuan kueri yang beragam, 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 merupakan tur tingkat tinggi untuk beberapa fitur yang tersedia di HTML5.

Prasyarat

Contoh ini menggunakan namespace untuk mengenkapsulasi logika database.

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

Asinkron dan Transaksional

Pada sebagian besar kasus ketika Anda menggunakan dukungan Web Database, Anda akan menggunakan Asynchronous API. Asynchronous API adalah sistem non-pemblokiran sehingga tidak akan mendapatkan data melalui nilai yang ditampilkan, tetapi akan mengirimkan data ke fungsi callback yang ditentukan.

Dukungan Database Web melalui HTML bersifat transaksional. Pernyataan SQL tidak dapat dijalankan di luar transaksi. Ada dua jenis transaksi: transaksi baca/tulis (transaction()) dan transaksi hanya baca (readTransaction()). Perlu diperhatikan bahwa, baca/tulis akan mengunci seluruh database.

Langkah 1. Membuka database

{i>Database<i} 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 mengeksekusi status SQL CREATE TABLE di dalam transaksi.

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

Tabel ini disebut daftar tugas dan memiliki 3 kolom.

• ID - kolom ID berurutan yang bertambah
• todo - kolom teks yang merupakan isi item
• added_on - waktu saat item daftar tugas dibuat

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 membangun pengelola daftar tugas, sehingga kita harus dapat menambahkan item daftar tugas ke database.

Transaksi dibuat. Di dalam transaksi, INSERT ke dalam tabel daftar dilakukan dilakukan.

executionSql memerlukan beberapa parameter, SQL untuk 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 berada dalam database, Anda memerlukan fungsi yang akan mengembalikan data. 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);
});
}

Perlu diperhatikan bahwa semua perintah yang digunakan dalam contoh ini bersifat asinkron, sehingga data tidak ditampilkan dari transaksi atau panggilanexecuteSql. Hasilnya diteruskan ke callback yang berhasil.

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. Cukup mudah untuk melakukan iterasi di seluruh data:

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, lalu buat tabel (jika perlu), lalu render item daftar tugas yang mungkin sudah ada dalam database.

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

<body onload="init();">

Fungsi yang mengeluarkan data dari DOM diperlukan, jadi panggil metode html5 Grups.webdb.addTodo

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