Introduction
Les bases de données Web sont nouvelles dans 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 dotées de fonctionnalités de requête avancées, il est prévu qu'un nouveau type 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 visite guidée très générale de certaines des fonctionnalités disponibles en HTML5.
Prérequis
Cet exemple utilise un espace de noms pour encapsuler la logique de base de données.
var html5rocks = {};
html5rocks.webdb = {};
Asynchrone et transactionnel
Dans la plupart des cas, lorsque vous utilisez une base de données Web, vous utiliserez l'API asynchrone. L'API asynchrone est un système non bloquant. Par conséquent, elle n'obtient pas de données via des valeurs renvoyées, mais les reçoit via une fonction de rappel définie.
La prise en charge des bases de données Web via HTML est transactionnelle. Il n'est pas possible 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()). Veuillez noter que les transactions en lecture/écriture verrouillent l'ensemble de la base de données.
Étape 1. Ouvrir la base de données
Vous devez ouvrir la base de données avant de pouvoir 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 un état SQL CREATE TABLE dans une transaction.
Nous avons défini une fonction qui va créer une table dans l'événement "onload" du corps. Si le tableau n'existe pas déjà, il sera créé.
Le tableau s'appelle Todo et comporte 3 colonnes.
- ID : colonne d'ID séquentiel incrémentée
- 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 à une table
Nous créons un gestionnaire de liste de tâches. Il est donc important de pouvoir ajouter des tâches à la base de données.
Une transaction est créée. Dans celle-ci, une opération INSERT dans la table des tâches est effectuée.
runSql utilise plusieurs paramètres, le code SQL à exécuter et les valeurs de paramètres pour 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 permettant de les récupérer. Dans Chrome, les bases de données Web utilisent des requêtes SQLite SELECT 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 les commandes utilisées dans cet exemple sont asynchrones et que, par conséquent, les données ne sont pas renvoyées par la transaction ni par l'appelexecuteSql. Les résultats sont transmis au rappel de réussite.
Étape 4a : Afficher des données à partir 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 à l'ensemble de résultats. Il est assez simple d'itérer 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>";
}
Cet appel de méthode permet d'afficher la liste de tâches 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 : Connexion établie
Une fois la page chargée, ouvrez la base de données et créez la table (si nécessaire) et affichez toutes les tâches qui peuvent 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. Vous devez donc appeler la méthode html5rocks.webdb.addTodo.
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}