Prenons en exemple des données publiquement accessibles telles les meilleurs livres de l'année. Si une personne s'enparerait de ces données, elle ne pourrait nuire en aucun cas à l'entité les gérant. Exposer sa BD peut alors ne poser aucun problème. Dans le cas où vous avez une petite quantité de données et n'avez pas accès à héberger une BD côté serveur, l'exposer serait même une bonne option.
Mais comment faire ? Il existe une solution bien simple, utiliser une BD SQLite et quelques librairies Javascript pour accéder et afficher les données. Explorons cette solution plus en détails.
C'est quoi SQLite
SQLite est l'engin de base de données le plus utilisé au monde. Dû à sa portabilité, il est utilisé de façon embarquée avec plusieurs applications, incluant celles des téléphones mobiles. Tous les téléphones intelligents utilisent SQLite !
Créer et éditer une DB SQLite
Avant tout, il vous faut créer votre DB. Vous aurez besoin d'un éditeur tel Sqliteman 1.22. Ce gestionnaire de base de données vous offre une interface simple permettant à l'utilisateur d'effectuer des opérations de base telles l'ajout et la modification d'une table et l'entrée de données.
Allez dans le menu Fichier, Nouveau et créez un fichier Livres.txt. J'ai dû utiliser cette extension pour que le fichier ne soit pas bloqué par l'hébergeur, comparativement à .db.
Créez une table avec un clic-droit sur Tables, Créer une table. Indexez le nom Livres et ajoutez les colonnes suivantes:
- ID, PK Integer, Non NULL
- Titre, Text
- Auteur, Text
- Description, Text
Cliquez sur Créer. Vous avez maintenant votre table.
Pour ajouter des entrées, double-cliquez sur le nom de la table et cliquez sur le premier icône (Nouvelle ligne). Ajoutez les données et cliquez ensuite sur le quatrième icône (Valider la transaction). Le résultat devrait ressembler à ceci :
Interface utilisateur Sqliteman.
Librairie sql.js
Nous avons maintenant une BD SQLite, mais comment faire pour interagir avec les données ? La librairie sql.js nous permettra d'interroger les données côté client en Javascript.
La première étape est de créer une page Web et ajouter la référence à la librairie avec la balise script suivante dans la balise head:
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.13.0/sql-wasm.js"
integrity="sha512-Yra4xuTWinXfBpG2ftgDX8MVmMiOev1FtqiYs51+kEna/5peD0kZqAL1syYCH61f9gxmAFidIJz42IKcRhWMkw=="
crossorigin="anonymous">
</script>
Ensuite on peut charger la BD. Notez le nom du fichier de la BD Livres.txt?version=20250322. Le nom du fichier sur disque est Livres.txt mais on ajoute un paramètre pour rendre cette version unique. Lorsqu'on changera le contenu du fichier, on changera aussi le paramètre pour s'assurer que le navigateur retéléchargera le fichier.
config = {
locateFile: (filename, prefix) => {
return `https://sql.js.org/dist/${filename}`;
}
}
initSqlJs(config).then(async function () {
const sqlPromise = initSqlJs({
locateFile: file => `https://sql.js.org/dist/${file}`
});
const dataPromise = fetch("Livres.txt?version=20250322").then(res => res.arrayBuffer());
const [SQL, buf] = await Promise.all([sqlPromise, dataPromise])
const db = new SQL.Database(new Uint8Array(buf));
Tous les morceaux sont finalement en place pour nous permettre d'exécuter une requête SQL et obtenir la liste des meilleurs livres. Nous remplirons la collection livres avec les enregistrements de la table livres.
var stmt = db.prepare("SELECT * FROM livres ORDER BY ID");
stmt.bind([]);
var livres = [];
while (stmt.step()) {
var row = stmt.getAsObject();
livres.push(row);
}Librairie handlebars
Comment afficher cette collection de livres ? Un solution simple sans avoir à sauter dans le train des React, Angular et Vue.js de ce monde est la librairie handlebars.
Ça semble un peu primitif aujourd'hui mais c'est un utilitaire efficace qui fait exactement ce dont on a besoin : utiliser un gabarit pour afficher des données.
Encore une fois, la première étape est d'ajouter la référence à la librairie avec la balise script. On aura aussi besoin de JQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.1/handlebars.min.js"
integrity="sha256-nGCNYQ+aj0GQsuayEJTyjqObkENoXk6HBIwW+fd8wH0="
crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>On cré ensuite le gabarit en HTML en insérant des balises pour les propriétés (exemple : {{Titre}}) et l'itérateur each.
<template id="livre-list-template">
{{#each livres}}
<div class="livre">
<h5>
{{Titre}}
</h5>
<div class="info">
<p class="auteur">{{Auteur}}</p>
<p class="description">{{Description}}</p>
</div>
</div>
{{/each}}
</template>On ajoute aussi l'endroit où l'on veut afficher le résultat final:
<div id="livre-list"></div>On injecte finalement les données dans le gabarit pour afficher le tout.
var livreListHtml = $('#livre-list-template').html();
livreListTemplate = Handlebars.compile(livreListHtml);
$('#livre-list').html(livreListTemplate({ livre: livres }));
À l'aide de Bootstrap et d'un peu de style, on obtient le résultat suivant :
Résultat final de la fusion des données extraites de SQLite et du gabarit handlebars.
Conclusion
Bien que nous ayons démontré la possibilité théorique d'utiliser une BD côté client, en pratique ce n'est qu'un projet du dimanche. Je ne considèrerais pas cette technique dans un contexte de commerce électronique où l'on doit lister un catalogue contenant des milliers de produits. Ce serait un très mauvais choix d'architecture de projet !
Il existe aussi des alternatives plus simples comparées à l'utilisation d'une BD telles un fichier JSON, XML ou même CSV. Cependant, on perdrait tous les avantages d'une BD (inteface utilisateur tel Sqliteman, relation entre tables, etc.). Peut-être un jour y aura-t-il une DB sérialisée sous format JSON pour combiner le meilleur des deux mondes, mais la performance y serait certainement impactée.
La solution serait-elle un fichier Excel ? De façon surpemante, ce format est parfois utilisé par des processus d'entreprise critiques à leur fonctionnement. Son interface intuitive similaire à une BD le rend utilisable par n'importe quel individu d'une entreprise. À voir dans un prochain billet.