HTML5 Web Veritabanları kullanan basit bir YAPILACAKLAR listesi

Paul Kinlan

Giriş

Web Veritabanları, HTML5'teki yeni bir özelliktir. Web Veritabanları bir kullanıcının tarayıcısında barındırılır ve saklanır. Geliştiricilerin zengin sorgu yeteneklerine sahip uygulamalar oluşturmasına olanak tanımayla, çevrimiçi ve çevrimdışı çalışma yeteneğine sahip yeni bir web uygulaması türünün ortaya çıkacağı öngörülmektedir.

Bu makaledeki örnek kod, çok basit bir yapılacaklar listesi yöneticisinin nasıl oluşturulacağını gösterir. Burada, HTML5'te kullanılabilen bazı özelliklere çok genel bir bakış sunduk.

Ön koşullar

Bu örnek, veritabanı mantığını kapsüllemek için bir ad alanı kullanır.

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

Eşzamansız ve İşlemlerle İlgili

Web Veritabanı desteğini kullandığınız çoğu durumda Asenkron API'yi kullanacaksınız. Eşzamansız API, engelleme yapmayan bir sistemdir. Bu nedenle, verileri dönüş değerleri üzerinden almaz. Bunun yerine, tanımlanmış bir geri çağırma işlevine gönderilen verileri alır.

HTML üzerinden Web Veritabanı desteği, işlem odaklıdır. SQL ifadeleri, işlem dışında çalıştırılamaz. İki tür işlem vardır: okuma/yazma işlemleri (transaction()) ve salt okunur işlemler (readTransaction()). Okuma/yazmanın tüm veritabanını kilitleyeceğini lütfen unutmayın.

1. Adım: Veritabanını açma

Erişilebilmesi için veritabanının açılması gerekir.
Veritabanının adını, sürümünü, açıklamasını ve boyutunu tanımlamanız gerekir.

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

2. adım: Tablo oluşturma

Yalnızca bir işlem içinde CREATE TABLE SQL statemen çalıştırarak tablo oluşturabilirsiniz.

Body onload etkinliğinde tablo oluşturacak bir fonksiyon tanımladık. Tablo mevcut değilse yeni bir tablo oluşturulur.

Tablo, yapılacaklar olarak adlandırılır ve 3 sütun içerir.

• Kimlik - artan sıralı kimlik sütunu
• yapılacaklar listesi - öğenin gövdesi olan bir metin sütunu
• added_on - yapılacaklar listesi öğesinin oluşturulduğu saat

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)", []);
});
}

3. adım: Tabloya veri ekleme

Bir yapılacaklar listesi yöneticisi oluşturuyoruz. Bu nedenle, yapılacak öğeleri veritabanına ekleyebilmemiz çok önemli.

Bir işlem oluşturulur ve işlemin içinde yapılacaklar tablosuna INSERT işlemi gerçekleştirilir.

publishSql, yürütülecek SQL ve sorguyu bağlamak için parametre değerleri olmak üzere birkaç parametre alır.

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

4. Adım: Tablodan veri seçme

Artık veriler veritabanında olduğuna göre, verileri geri alan bir fonksiyona ihtiyacınız vardır. Chrome'da, Webveritabanı standart SQLite SELECT sorgularını kullanır.

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

Bu örnekte kullanılan tüm komutların eşzamansız olduğunu ve bu nedenle verilerin, işlemden veya transactionSql çağrısından döndürülmediğini unutmayın. Sonuçlar, başarılı geri çağırmaya aktarılır.

Adım 4a. Bir tablodan veri oluşturma

Veriler tablodan getirildikten sonra loadTodoItems yöntemi çağrılır.

onSuccess geri çağırma işlemi iki parametre alır. Birincisi sorgu işlemi, ikincisi de sonuç kümesidir. Verilerde yineleme yapmak oldukça kolaydır:

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

Bu yöntem çağrısının etkisi, yapılacaklar listesinin "todoItems" adlı bir DOM Öğesi içinde oluşturulmasıdır.

5. Adım: Tablodan veri silme

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

6. Adım: Hepsini bir araya getirme

Sayfa yüklendiğinde, veritabanını açın ve tabloyu oluşturun (gerekirse) ve zaten veritabanında bulunabilecek yapılacaklar öğelerini oluşturun.

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

<body onload="init();">

Verileri DOM'den çıkaran bir işlev gereklidir. Bunun için html5rocks.webdb.addTodo yöntemini çağırın.

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