HTML5 Web Veritabanları kullanan basit bir YAPILACAKLAR listesi

Paul Kinlan

Giriş

Web veritabanları, HTML5'te yeni bir özelliktir. Web veritabanları, kullanıcının tarayıcısında barındırılır ve devam ettirilir. Geliştiricilerin zengin sorgu özelliklerine sahip uygulamalar oluşturmasına olanak tanıyarak hem çevrimiçi hem de çevrimdışı çalışabilen yeni bir web uygulaması türünün ortaya çıkacağı öngörülüyor.

Bu makaledeki örnek kodda, çok basit bir yapılacaklar listesi yöneticisinin nasıl oluşturulacağı gösterilmektedir. Bu, HTML5'te bulunan bazı özelliklerin genel hatlarıyla ele alındığı bir tur.

Ön koşullar

Bu örnekte, veritabanı mantığını kapsayacak şekilde bir ad alanı kullanılır.

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

Eşzamansız ve İşlemsel

Web veritabanı desteğini kullandığınız çoğu durumda asynchronize API'yi kullanacaksınız. Asenkron API, engellemeyen bir sistemdir ve bu nedenle, döndürülen değerler aracılığıyla veri almaz. Bunun yerine, verileri tanımlanmış bir geri çağırma işlevine iletir.

HTML üzerinden web veritabanı desteği işlemseldir. SQL ifadeleri, bir işlem dışında yürütülemez. İki tür işlem vardır: okuma/yazma işlemleri (transaction()) ve salt okuma işlemleri (readTransaction()). Okuma/yazma işleminin veritabanının tamamını kilitleyeceğini lütfen unutmayın.

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

Veritabanına erişebilmek için 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

Tablo oluşturmak için yalnızca bir işlem içinde CREATE TABLE SQL deyimini yürütmeniz gerekir.

body onload etkinliğinde bir tablo oluşturacak bir işlev tanımladık. Tablo mevcut değilse tablo oluşturulur.

Tablonun adı "todo"dur ve 3 sütunu vardır.

  • Kimlik: Artımlı sıralı kimlik sütunu
  • todo: Öğenin gövdesi olan bir metin sütunu
  • added_on: To do listesinin oluşturulduğu zaman
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

To Do listesi yöneticisi oluşturuyoruz. Bu nedenle, veritabanına yapılacaklar listesi öğeleri ekleyebilmemiz oldukça önemli.

Bir işlem oluşturulur ve işlem içinde todo tablosuna INSERT işlemi gerçekleştirilir.

executeSql, yürütülecek SQL'yi ve sorguyu bağlamak için parametre değerlerini içeren çeşitli parametreler 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

Veriler veritabanında olduğu için verileri tekrar çıkaran bir işleve ihtiyacınız var. Chrome'da web veritabanı, standart SQLite SELECT sorguları 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 bu komutların hepsinin asenkron olduğunu ve bu nedenle verilerin işlemden veya executeSql çağrısından döndürülmediğini unutmayın. Sonuçlar, başarı geri çağırma işlevine iletilir.

4a adımı. Tablodaki verileri oluşturma

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

onSuccess geri çağırma işlevi iki parametre alır. Bunlardan ilki sorgunun işlemi, ikincisi ise sonuç kümesidir. Veriler arasında iterasyon yapmak oldukça basittir:

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 olarak oluşturulmasıdır.

5. Adım: Tablodaki verileri 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: Tümünü bağlama

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

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

<body onload="init();">

Verileri DOM'dan çıkaran bir işleve ihtiyaç vardır. Bu nedenle, html5rocks.webdb.addTodo yöntemini çağırın.

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