BSoft&Co Humeurs et Rumeurs

10Aug/096

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.

<script type='text/javascript'>
  1. var db; // variable globale pour manipuler la bdd.
  2.  
  3. try {
  4. if (window.openDatabase) {
  5.     db = openDatabase("maBaseDeDonnees", "1.0", "Ex de bdd avec HTML5", 200000);
  6.     if (!db)
  7.         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.");
  8.     } else
  9.         alert("Impossible d'ouvrir la base de données. Merci d'essayer avec un autre navigateur.");
  10. } 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.

db.transaction(function(tx) {
  1.     tx.executeSql("select * from mabase where id=?", [56]);
  2. }

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 :

db.transaction(function(tx) {
  1.     tx.executeSql("select * from matable where id=?", [56], function(tx, resu){}, function(tx,error){});
  2. }

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 :

for( var i = 0; i < resu.rows.length; ++i ) {
  1.     var row = resu.rows.item(i);
  2.     // row.id, row.nom etc..
  3. }

Exemple de création d'une table :

db.transaction(function(tx) {
  1.     tx.executeSql("CREATE TABLE IF NOT EXISTS matable (id INTEGER PRIMARY KEY, nom TEXT, age NUMERIC)", [],
  2.         function(tx, rs) {},
  3.         function(tx, error) {
  4.             alert("Impossible de créer la table : " + error.message);
  5.             return;
  6.         }
  7.     );
  8. });

Insertion de données :

db.transaction(function(tx) {
  1.     tx.executeSql("INSERT INTO TABLE IF NOT EXISTS matable (nom, age) values (?,?)", ['Internet Explorer',72],
  2.         function(tx, rs) {},
  3.         function(tx, error) {
  4.             alert("Impossible d'ajouter des données : " + error.message);
  5.             return;
  6.         }
  7.     );
  8. });

Recherche de données :

db.transaction(function(tx) {
  1.     tx.executeSql("select * from matable where age = ?", [72],
  2.     function(tx, rs) {
  3.     // on travaille sur les résultats
  4.         if (!rs.rows.length) {
  5.             // Aucune ligne retournée
  6.             alert('aucun résultat');
  7.         }
  8.         else {
  9.             // je triche, on ne récupère ici que le 1er résultat. En même temps, c'est le seul Wink
  10.             var row = rs.rows.item(0);
  11.             var lenom = row['nom'];
  12.             var idnom = row['id'];
  13.         }
  14.     },
  15.     function(tx, error) {
  16.         alert("Problème d'accès aux données : " + error.message);
  17.         return;
  18.     }
  19.     );
  20. });

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!

Tagged as: , , , , 6 Comments
   

Tags

Adobe Flash Loppsi Astuce Conference Ubuntu Apollo AIR Coup de gueule Script Internet BDD Tutorial Adobe AIR RIA Liens Flex VPN Application Web Developpement HTML 5 PHP Mobile Menu Windows Hadopi Windows Mobile Iphone ACTA Python Android

Recent Comments

Archives

Meta