Prosta lista zadań do wykonania za pomocą baz danych HTML5 WebDatabase

Paul Kinlan

Wstęp

Internetowe bazy danych to nowość w HTML5. Sieciowe bazy danych są hostowane i przechowywane w przeglądarce użytkownika. Umożliwiając programistom tworzenie aplikacji z rozbudowanymi funkcjami zapytań, przewiduje się powstanie nowego rodzaju aplikacji internetowych, które mogą działać w trybie online i offline.

Przykładowy kod w tym artykule pokazuje, jak utworzyć bardzo prostego menedżera listy zadań. Zawiera ono bardzo ogólny opis niektórych funkcji dostępnych w HTML5.

Wymagania wstępne

W tym przykładzie logika bazy danych została zawarta w przestrzeni nazw.

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

Asynchroniczne i transakcyjne

W większości przypadków, gdy korzystasz z obsługi Web Database, korzystasz z Asynchronicznego interfejsu API. Asynchroniczny interfejs API jest systemem nieblokującym, dlatego nie otrzymuje danych poprzez zwracane wartości, tylko otrzymuje dane dostarczane do zdefiniowanej funkcji wywołania zwrotnego.

Obsługa Web Database za pomocą języka HTML ma charakter transakcyjny. Instrukcji SQL nie można uruchamiać poza transakcją. Istnieją 2 typy transakcji: transakcje odczytu/zapisu (transaction()) i transakcje tylko do odczytu (readTransaction()). Uwaga: odczyt/zapis spowoduje zablokowanie całej bazy danych.

Krok 1. Otwieram bazę danych

Aby można było uzyskać dostęp do bazy danych, należy ją otworzyć.
Musisz określić nazwę, wersję, opis i rozmiar bazy danych.

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

Krok 2. Tworzenie tabeli

Tabelę można utworzyć tylko przez wykonanie w transakcji instrukcji stanu SQL CREATE TABLE.

Zdefiniowaliśmy funkcję, która utworzy tabelę w zdarzeniu „body onload”. Jeśli tabela jeszcze nie istnieje, zostanie utworzona.

Tabela nosi nazwę „todo” i ma 3 kolumny.

  • ID – rosnąca kolumna identyfikatora sekwencyjnego
  • todo – kolumna tekstowa, która jest treścią elementu
  • add_on – czas utworzenia elementu do wykonania.
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)", []);
});
}

Krok 3. Dodawanie danych do tabeli

Tworzymy menedżera listy zadań do wykonania, więc ważne jest, żebyśmy mogli dodawać do bazy danych elementy do zrobienia.

Pojawia się transakcja i w ramach transakcji wykonywana jest operacja INSERT do tabeli zadań.

challengeSql pobiera kilka parametrów, SQL do wykonania i wartości parametrów do powiązania zapytania.

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

Krok 4. Wybieranie danych z tabeli

Gdy dane znajdują się już w bazie danych, potrzebna jest funkcja, która będzie je pobierać z powrotem. W Chrome Webdatabase używają standardowych zapytań SQLite SELECT.

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

Pamiętaj, że wszystkie polecenia użyte w tym przykładzie są asynchroniczne, więc dane nie są zwracane z transakcji ani wywołania querySql. Wyniki są przekazywane do wywołania zwrotnego.

Krok 4a. Renderowanie danych z tabeli

Po pobraniu danych z tabeli wywoływana jest metoda loadTodoItems.

Wywołanie zwrotne onSuccess przyjmuje 2 parametry. Pierwsza to transakcja zapytania, a druga to zbiór wyników. Porównowanie danych jest dość proste:

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

Efektem tego wywołania metody jest renderowanie listy zadań w elemencie DOM o nazwie „todoItems”.

Krok 5. Usuwanie danych z tabeli

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

Krok 6. Wszystko w porządku

Po załadowaniu strony otwórz bazę danych i w razie potrzeby utwórz tabelę oraz wyrenderuj wszystkie zadania do wykonania, które mogą się już znajdować w bazie danych.

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

<body onload="init();">

Potrzebna jest funkcja, która pobiera dane z DOM, więc wywołaj metodę html5rocks.webdb.addTodo

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