BSoft&Co Humeurs et Rumeurs

10Aug/098

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: , , , , Leave a comment
Comments (8) Trackbacks (1)
  1. admin
    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.

  2. lana
    October 17th, 2012 - 00:08

    Bonjour, comment installe t’on sqlite pour qu’il fonctionne avec le javascript?

  3. admin
    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é…

  4. iManu
    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” ?

  5. admin
    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

  6. Mat
    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

  7. admin
    April 30th, 2010 - 12:36

    Qu’entendez vous par cycle de vie ?
    Ces bases de données sont locales au navigateur.

  8. RudyWI
    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


Leave a comment

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image

Click to Insert Smiley

SmileBig SmileGrinLaughFrownBig FrownCryNeutralWinkKissRazzChicCoolAngryReally AngryConfusedQuestionThinkingPainShockYesNoLOLSillyBeautyLashesCuteShyBlushKissedIn LoveDroolGiggleSnickerHeh!SmirkWiltWeepIDKStruggleSide FrownDazedHypnotizedSweatEek!Roll EyesSarcasmDisdainSmugMoney MouthFoot in MouthShut MouthQuietShameBeat UpMeanEvil GrinGrit TeethShoutPissed OffReally PissedMad RazzDrunken RazzSickYawnSleepyDanceClapJumpHandshakeHigh FiveHug LeftHug RightKiss BlowKissingByeGo AwayCall MeOn the PhoneSecretMeetingWavingStopTime OutTalk to the HandLoserLyingDOH!Fingers CrossedWaitingSuspenseTremblePrayWorshipStarvingEatVictoryCurseAlienAngelClownCowboyCyclopsDevilDoctorFemale FighterMale FighterMohawkMusicNerdPartyPirateSkywalkerSnowmanSoldierVampireZombie KillerGhostSkeletonBunnyCatCat 2ChickChickenChicken 2CowCow 2DogDog 2DuckGoatHippoKoalaLionMonkeyMonkey 2MousePandaPigPig 2SheepSheep 2ReindeerSnailTigerTurtleBeerDrinkLiquorCoffeeCakePizzaWatermelonBowlPlateCanFemaleMaleHeartBroken HeartRoseDead RosePeaceYin YangUS FlagMoonStarSunCloudyRainThunderUmbrellaRainbowMusic NoteAirplaneCarIslandAnnouncebrbMailCellPhoneCameraFilmTVClockLampSearchCoinsComputerConsolePresentSoccerCloverPumpkinBombHammerKnifeHandcuffsPillPoopCigarette

Html5 & Css3+Js by cazenaveco - Pearltrees
» «
Titanium Certified Application Developer

Tags

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

Recent Comments

Archives

Meta