Tutoriel HTML5 SQLite

Avant de débuter, sachez que SQLite n'est pas supporté par Firefox et ne le sera probablement jamais. Si vous êtes utilisateur de Firefox, le code suivant ne fonctionnera donc probablement jamais, il faudra vous tourner vers indexedDB. (probablement l'occasion de faire un prochain billet).

Vous pouvez utiliser SQLite dans vos pages HTML5 pour les navigateurs webkit (dans safari, chrome... ça marche). C'est particulièrement intéressant dans le cadre du développement mobile bien que l'espace alloué soit faible.

Dans le cadre de cet exemple, j'ai utilisé le framework jQuery pour simplifier le code, bien que je ne m'en serve que pour récupérer les valeurs des éléments de formulaire. Il n'est pas nécessaire d'avoir un excellent niveau jQuery ni Javascript pour comprendre ce tutoriel.

Vous pouvez voir et télécharger cet exemple ici. (il n'y a qu'une page HTML, inutile encore une fois de naviguer sur cette page avec Firefox), maintenant débutons :

Testez si SQLite est supporté

Facile :

 if(window.openDatabase)
{
    DB.instance = openDatabase(params.db,params.version,params.displayName,params.maxSize);
}
else
{
    alert("Le navigateur ne supporte pas les bases de données.");
}

Modèle... autant faire un singleton...

Pour ceux qui ne connaitraient pas le pattern, son principe est extrêmement simple, on récupère systématiquement l'instance unique de notre classe qui gère la connexion. Plus d'info sur wikipédia pour sur le pattern singleton.

 <script type="text/javascript"> 
$(document).ready(function(){
    DB.getInstance();
});
var params = {
    db: 'ligams',                         //nom de la BDD
    version: '1.0',                        //version
    displayName: 'Ligams Database',        //nom de la BDD affiché
    maxSize: 100000                        //en bytes
};
var DB = {};
/**
  * Renvoi l'instance unique de la connexion à la base de données locale, null si erreur
  */
DB.getInstance = function(){
    if(DB.instance!=null) return DB.instance; //accès déjà défini, on le renvoi (singleton)
    try{
        if(window.openDatabase){
            DB.instance = openDatabase(params.db,params.version,params.displayName,params.maxSize);
            createDB();
            return DB.instance;
        }else{
            alert("Le navigateur ne supporte pas les bases de données.");
        }
    }catch(e){
        if(e===2) console.log("Version de la base de données invalide.");
        else console.log("Exception : "+e);
    }
    DB.instance = null;
    return null;
};
</script>

Tout d'abord, on récupère l'accès à la base de données grâce à la méthode openDatabase(). Le test préalable tendait à vérifier qu'elle existe.
Si cette méthode existe (i.e. si votre navigateur supporte SQLite), on renvoi l'accès à la base.

Nous pourrons donc avoir accès à cette connexion n'importe quand en invoquant : DB.getInstance().

Vous remarquez la présence de la fonction createDB() dans cette méthode, en réalité, il s'agit plutôt de créer la table ssi elle n'existe pas :

Création de la table

 /**
  * Crée la base de données locale si elle n'existe pas
  */
createDB = function()
{
        DB.getInstance().transaction(
        function (trans) {
            trans.executeSql('CREATE TABLE IF NOT EXISTS personne (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, nom TEXT NOT NULL,prenom TEXT NOT NULL);', [], refreshHandler, errorHandler);
        });
};

Nous créons là une table personne si elle n'existe pas, contenant id, nom, prénom. C'est assez analogue à la création d'une table dans MySQL, nous pouvons même signaler que id est une clé primaire.

Vous remarquez que la fonction executeSql() prend 4 paramètres :

• 1: la requête
• 2: le tableau de paramètre(s), qui est vide ici car il n'y a pas de paramètre
• 3: Fonction à invoquer en cas de succès, (delegate)
• 4: Fonction à invoquer en cas d'erreur.

Pour une requête avec paramètre cette fois, dans le cadre de l'insertion de données :

 /**
  * Sélectionne tous les tuples de la base de données
  */
insertData = function()
{
    if($('#nom').val()!='' && $('#prenom').val()!=''){
        DB.getInstance().transaction(
        function (trans) {
            trans.executeSql('INSERT INTO personne (nom, prenom) VALUES (?,?);', [$('#nom').val(),$('#prenom').val()], refreshHandler, errorHandler);
        });
    }
};

Les paramètres de la requête ( les points d'interrogation : ?) seront remplacés dans l'ordre par les valeurs des champs nom et prenom de notre formulaire.

Tout le reste n'est que fioriture pour un bon fonctionnement de l'interface utilisateur.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>SQLLite</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
  <body>    
   <br/><br/>
    <div>
         <input type="hidden" id="id"/>
         <p>Prénom:<input type="text" id="prenom"/></p>
         <p>Nom:<input type="text" id="nom"/></p>
         <button onClick="insertData()">Soumettre</button>
    </div> 
    <div id="personnes"></div>
  </body>
  
<script type="text/javascript"> 
$(document).ready(function(){
    DB.getInstance();
});
var params = {
    db: 'ligams',                         //nom de la BDD
    version: '1.0',                        //version
    displayName: 'Ligams Database',        //nom de la BDD affiché
    maxSize: 100000                        //en bytes
};
var DB = {};
/**
  * Renvoi l'instance unique de la connexion à la base de données locale, null si erreur
  */
DB.getInstance = function()
{
    if(DB.instance!=null) return DB.instance;
    try
    {
        if(window.openDatabase)
        {
            DB.instance = openDatabase(params.db,params.version,params.displayName,params.maxSize);
            createDB();
            return DB.instance;
        }
        else
        {
            alert("Le navigateur ne supporte pas les bases de données.");
        }
    }
    catch(e)
    {
        if(e===2) console.log("Version de la base de données invalide.");
        else console.log("Exception : "+e);
    }
    DB.instance = null;
    return null;
};
/**
  * Crée la base de données locale si elle n'existe pas
  */
createDB = function()
{
    DB.getInstance().transaction(
    function (trans) {
        trans.executeSql('CREATE TABLE IF NOT EXISTS personne (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, nom TEXT NOT NULL,prenom TEXT NOT NULL);', [], refreshHandler, errorHandler);
    });
};
/**
  * Supprime une entrée dans la base de données
  */
deleteData = function(id)
{
    DB.getInstance().transaction(
    function (trans) {
        trans.executeSql('DELETE FROM personne WHERE id=?;', [id], refreshHandler, errorHandler);
    });
};
/**
  * Sélectionne tous les tuples de la base de données
  */
selectAll = function()
{
    DB.getInstance().transaction(
    function (trans) {
        trans.executeSql('SELECT * FROM personne;', [], dataSelectAllHandler, errorHandler);
    });
};
/**
  * Sélectionne tous les tuples de la base de données
  */
insertData = function()
{
    if($('#nom').val()!='' && $('#prenom').val()!=''){
        DB.getInstance().transaction(
        function (trans) {
            trans.executeSql('INSERT INTO personne (nom, prenom) VALUES (?,?);', [$('#nom').val(),$('#prenom').val()], refreshHandler, errorHandler);
        });
    }
};
/**
  * Efface les données du formulaire
  */
resetForm = function()
{
    $('#nom').val('');
    $('#prenom').val('');
};

////////////////////////////////////////////////////////////////////
// EVENTS
////////////////////////////////////////////////////////////////////

/**
  * Rafraichi les données affichées
  */
refreshHandler = function(trans, result)
{    
    resetForm();
    selectAll();
};
/**
  * Rafraichi les données affichées
  */
dataSelectAllHandler = function(trans, result)
{
    $('#personnes').html('');
    var el = $('<ul></ul>');
    for (var i=0; i<result.rows.length; i++) 
    {
        el.append('<li>'+result.rows.item(i)['id']+' : '+result.rows.item(i)['nom']+' '+result.rows.item(i)['prenom']+' <a href="javascript:deleteData('+result.rows.item(i)['id']+')">Supprimer</a></li>');
    }
    $('#personnes').append(el);
};
/**
  * Traitement des erreurs
  */
errorHandler = function(trans, error){
    alert(error.message);
};
    
    </script>
</html>