Tutorial HTML 5 et les bases de données embarquées
HTML5 commence à montrer le bout de son nez. Les navigateurs "modernes" dans leurs versions récentes prennent en charge de plus en plus des nouvelles fonctionnalités prévues.
Attention tout de même, HTML5 n'est qu'un brouillon! Une version "draft" du W3C .
Une des nouvelles fonctionnalités, très pratique pour les applis web et autres sites, est la possibilité de pouvoir embarquer une base de données SQLite directement dans la navigateur du client. Sans qu'il soit nécessaire de gérer une base de données en plus de votre site.
Remarque : concernant les bases de données embarquées, la dernière version de Safari (mobile et desktop) semble être celle qui le gère le mieux.
Une document HTML 5 commence par :
<!doctype html>
La base de données se manipule au sein de balises JavaScript.
-
var db; // variable globale pour manipuler la bdd.
-
-
try {
-
if (window.openDatabase) {
-
db = openDatabase("maBaseDeDonnees", "1.0", "Ex de bdd avec HTML5", 200000);
-
if (!db)
-
alert("Impossible d'ouvrir la bdd. Peut être un problème de version ou alors pas assez de quota d'espace disque disponible pour ce domaine.");
-
} else
-
alert("Impossible d'ouvrir la base de données. Merci d'essayer avec un autre navigateur.");
-
} catch(err) { }
La méthode "openDatabase" comprend 4 arguments :
- Le nom de la base. Ce nom sera aussi la référence pour utiliser la base dans le code.
- La version de la base (optionnelle)
- une description
- La taille estimée de la base en octets. (1024 o = 1 ko!)
Pour requêter la base, nous allons utiliser les "transaction" et la méthode "executeSql" :
La méthode "executeSql" prend au minimum un paramètre, à savoir la requête à exécuter.
-
tx.executeSql("select * from mabase where id=?", [56]);
-
}
Le second paramètre, [56], permet de spécifier des valeurs à passer dans la requête à la place des '?'.
Pour récupérer les résultats de la requête, la méthode executeSql peut recevoir un 3e paramètre :
-
tx.executeSql("select * from matable where id=?", [56], function(tx, resu){}, function(tx,error){});
-
}
Le 4e paramètre permet quant à lui de gérer les erreurs.
La variable "resu" du 3e paramètre est un objet de type SQLResultSet qui permet ensuite d'accéder aux résultats de la requête.
Par exemple :
-
var row = resu.rows.item(i);
-
// row.id, row.nom etc..
-
}
Exemple de création d'une table :
-
tx.executeSql("CREATE TABLE IF NOT EXISTS matable (id INTEGER PRIMARY KEY, nom TEXT, age NUMERIC)", [],
-
function(tx, rs) {},
-
function(tx, error) {
-
alert("Impossible de créer la table : " + error.message);
-
return;
-
}
-
);
-
});
Insertion de données :
-
tx.executeSql("INSERT INTO TABLE IF NOT EXISTS matable (nom, age) values (?,?)", ['Internet Explorer',72],
-
function(tx, rs) {},
-
function(tx, error) {
-
alert("Impossible d'ajouter des données : " + error.message);
-
return;
-
}
-
);
-
});
Recherche de données :
-
tx.executeSql("select * from matable where age = ?", [72],
-
function(tx, rs) {
-
// on travaille sur les résultats
-
if (!rs.rows.length) {
-
// Aucune ligne retournée
-
alert('aucun résultat');
-
}
-
else {
-
// je triche, on ne récupère ici que le 1er résultat. En même temps, c'est le seul
-
var row = rs.rows.item(0);
-
var lenom = row['nom'];
-
var idnom = row['id'];
-
}
-
},
-
function(tx, error) {
-
alert("Problème d'accès aux données : " + error.message);
-
return;
-
}
-
);
-
});
Voilà, bref aperçu de comment embarquer rapidement et facilement une base de données dans son application web sans devoir installer quoique ce soit sur son serveur.
La seule limitation actuelle est le (non) support par certains navigateurs. Mais cela va très rapidement changer!
October 17th, 2012 - 09:01
Bonjour,
en fait, on peut dire pour faire court, que sqlite est embarqué dans le HTML 5. Donc, les navigateurs modernes qui prennent en charge le HTML 5 permettent d’accéder aux API JavaScript de gestion du sqlite.
October 17th, 2012 - 00:08
Bonjour, comment installe t’on sqlite pour qu’il fonctionne avec le javascript?
July 31st, 2010 - 21:23
En effet, il faut le faire en JS ou bien avoir accès aux dossiers systèmes, donc un jailbreaké…
July 31st, 2010 - 16:04
Bonjour,
Je fait des essais actuellement en utilisant les bases de données Safari. très concluant !
Sur mon iPod Touch, je voit bien la base de données, par contre je ne trouve pas le moyen de la supprimer, comme on peut le faire avec le navigateur Webkit (webkit.org) sur mon poste fixe..
Je ne trouve rien sur les forums ni sur le site webkit.org qui me donnerai une piste. Est-ce qu’une instruction SQL via js serait le seul moyen pour effacer une base de safari version “mobile” ?
June 8th, 2010 - 13:00
Bonjour,
de ce que j’en sais, les données restent dans le navigateur, même fermé (d’où l’intérêt!).
On peut toutefois les gérer manuellement selon les navigateurs. Par ex, dans la dernière version de safari (v5), dans l’onglet sécurité des préférences, on peut voir quelles sont les bases stockées et les supprimer.
Par contre, je ne sais pas si on peut spécifier une durée de vie comme pour les cookies. il ne me semble pas. N’oublions pas que tout cela n’est qu’un “brouillon” de spécifications du W3C. Les choses ne sont pas encore figées.
Un tel mécanisme peut toutefois se coder via le site qui utilise la bdd, mais alors il faut retourner sur ledit site pour le mettre en oeuvre.
BSoft
June 8th, 2010 - 11:00
Bonjour,
Si je reprends la question qui m’intéresse, Combien de temps les données sont gardées dans le naviguateur ?
jusqu’à ce qu’il soit fermé ou faudra-t il que le navigateur gère le temps de survie de ces données comme les cookies, il y a-t il un script pour pouvoir supprimer définitivement ces données et leurs entêtes ?
ça fait un peu de question, mais je trouve cela très intéressant.
Merci d’avance pour les réponses
April 30th, 2010 - 12:36
Qu’entendez vous par cycle de vie ?
Ces bases de données sont locales au navigateur.
April 30th, 2010 - 11:27
Bonjour,
Qu’en est il du cycle de vie de cette Base de données embarquées dans le navigateur ?
Merci