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

Paul Kinlan

Wprowadzenie

Bazy danych internetowych to nowość w HTML5. Bazy danych internetowe są hostowane i przechowywane w przeglądarce użytkownika. Dzięki temu, że deweloperzy mogą tworzyć aplikacje z możliwością wykonywania zaawansowanych zapytań, pojawią się nowe rodzaje aplikacji internetowych, które będą mogły działać online i offline.

Przykładowy kod w tym artykule pokazuje, jak utworzyć bardzo prosty menedżer listy zadań. To ogólne omówienie niektórych funkcji dostępnych w HTML5.

Wymagania wstępne

Ta próbka używa przestrzeni nazw do spakowania logiki bazy danych.

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

Asynchroniczny i transakcyjny

W większości przypadków, gdy korzystasz z obsługi bazy danych w internecie, używasz asymetrycznego interfejsu API. Interfejs API asynchronicznego jest systemem niezablokowanym, więc nie będzie otrzymywać danych za pomocą wartości zwracanych, ale dane będą dostarczane do zdefiniowanej funkcji wywołania zwrotnego.

Obsługa bazy danych w HTML jest transakcyjna. Nie można wykonywać instrukcji SQL poza transakcją. Istnieją 2 typy transakcji: transakcje odczytu/zapisu (transaction()) i transakcje tylko do odczytu (readTransaction()). Pamiętaj, że transakcja odczytu/zapisu blokuje całą bazę danych.

Krok 1. Otwieranie bazy danych

Baza danych musi być otwarta, aby można było uzyskać do niej dostęp.
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żesz utworzyć tylko przez wykonanie instrukcji SQL CREATE TABLE w ramach transakcji.

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

Tabela ma nazwę todo i 3 kolumny.

  • ID – kolumna z rosnącym sekwencyjnym identyfikatorem
  • todo – kolumna tekstowa, która jest treścią elementu.
  • added_on – czas utworzenia elementu listy zadań;
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ń, więc ważne jest, abyśmy mogli dodawać do bazy danych elementy listy zadań.

Tworzona jest transakcja, w ramach której wykonywane jest polecenie INSERT do tabeli todo.

Metoda executeSql przyjmuje kilka parametrów: zapytanie SQL do wykonania oraz wartości parametrów, które wiążą zapytanie.

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

Teraz, gdy dane są już w bazie danych, potrzebujesz funkcji, która je zwróci. W Chrome bazy danych internetowe korzystają ze 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 te polecenia użyte w tym przykładzie są asynchroniczne, więc dane nie są zwracane przez transakcję ani wywołanie executeSql. Wyniki są przekazywane do funkcji wywołania zwrotnego success.

Krok 4a. Renderowanie danych z tabeli

Po pobraniu danych z tabeli zostanie wywołana metoda loadTodoItems.

Wywołanie zwrotne onSuccess przyjmuje 2 parametry. Pierwszy to identyfikator transakcji zapytania, a drugi to zbiór wyników. Przetwarzanie 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>";
}

Wywołanie tej metody powoduje, że lista zadań jest renderowana 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. Łączenie

Po załadowaniu strony otwórz bazę danych i utwórz tabelę (w razie potrzeby) oraz wyświetl wszystkie elementy listy zadań, które mogą już znajdować się 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. W tym celu wywołaj metodę html5rocks.webdb.addTodo.

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