Introduction
Les bases de données Web sont nouvelles en HTML5. Les bases de données Web sont hébergées et conservées dans le navigateur de l'utilisateur. En permettant aux développeurs de créer des applications avec des capacités de requête avancées, une nouvelle génération d'applications Web capables de fonctionner en ligne et hors connexion devrait émerger.
L'exemple de code de cet article montre comment créer un gestionnaire de liste de tâches très simple. Il s'agit d'une présentation très générale de certaines des fonctionnalités disponibles dans HTML5.
Prérequis
Cet exemple utilise un espace de noms pour encapsuler la logique de la base de données.
var html5rocks = {};
html5rocks.webdb = {};
Asynchrone et transactionnel
Dans la plupart des cas où vous utilisez la compatibilité avec la base de données Web, vous utiliserez l'API asynchrone. L'API asynchrone est un système non bloquant. Par conséquent, elle ne reçoit pas de données via des valeurs de retour, mais les données sont transmises à une fonction de rappel définie.
La compatibilité de la base de données Web via HTML est transactionnelle. Il est impossible d'exécuter des instructions SQL en dehors d'une transaction.
Il existe deux types de transactions: les transactions en lecture/écriture (transaction()) et les transactions en lecture seule (readTransaction()). Notez que la lecture/écriture verrouille l'ensemble de la base de données.
Étape 1 : Ouvrir la base de données
Vous devez ouvrir la base de données pour y accéder.
Vous devez définir le nom, la version, la description et la taille de la base de données.
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);
}
Étape 2 : Créer une table
Vous ne pouvez créer une table qu'en exécutant une instruction SQL CREATE TABLE dans une transaction.
Nous avons défini une fonction qui créera un tableau dans l'événement de chargement du corps. Si la table n'existe pas déjà, elle sera créée.
La table s'appelle "todo" et comporte trois colonnes.
- ID : colonne d'ID séquentiel incrémentiel
- todo : colonne de texte correspondant au corps de l'élément
- added_on : heure de création de la tâche
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)", []);
});
}
Étape 3 : Ajouter des données à un tableau
Nous créons un gestionnaire de listes de tâches. Il est donc important que nous puissions ajouter des tâches à la base de données.
Une transaction est créée. Dans la transaction, une INSERT est effectuée dans la table "todo".
executeSql prend plusieurs paramètres, le code SQL à exécuter et les valeurs des paramètres à lier à la requête.
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);
});
}
Étape 4 : Sélectionner des données dans un tableau
Maintenant que les données sont dans la base de données, vous avez besoin d'une fonction qui les récupère. Dans Chrome, les bases de données Web utilisent des requêtes SELECT SQLite standards.
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
html5rocks.webdb.onError);
});
}
Notez que toutes ces commandes utilisées dans cet exemple sont asynchrones. Par conséquent, les données ne sont pas renvoyées à partir de la transaction ou de l'appel executeSql. Les résultats sont transmis au rappel de réussite.
Étape 4a. Afficher les données d'une table
Une fois les données extraites de la table, la méthode loadTodoItems est appelée.
Le rappel onSuccess prend deux paramètres. La première correspond à la transaction de la requête et la seconde au jeu de résultats. Il est assez simple d'itérer sur les données:
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>";
}
L'effet de cet appel de méthode est que la liste de tâches est affichée dans un élément DOM appelé "todoItems".
Étape 5 : Supprimer des données d'une table
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);
});
}
Étape 6 : Brancher le tout
Lorsque la page se charge, ouvrez la base de données et créez la table (si nécessaire), puis affichez tous les éléments de la liste de tâches qui pourraient déjà se trouver dans la base de données.
....
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>
<body onload="init();">
Une fonction qui extrait les données du DOM est nécessaire. Appelez donc la méthode html5rocks.webdb.addTodo.
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}