Interface Web pour consulter des petites bases de données

 

1) Introduction

On considère des petites bases de données composées d'un unique tableau. Chaque ligne correspond à l'enregistrement d'un object mémorisé dans la base de donnée. Chaque colonne correspond à un attribut devant être renseigné.

On considère deux types de colonnes, les colonnes contenant au plus 8 valeurs distinctes, et les colonnes texte contenant au plus une quarantaine de caractères.

On se propose de programmer un interface web en javascript qui permet d'importer de telles bases de données, de présenter un filtre modifiable par l'utilisateur qui lui donne des informations quantitatives pour chaque attribut relativement au filtrage en cours, et qui extrait les enregistrements selon le filtrage en cours.

2) Représentation des données

Une telle base peut être écrite en JSON sous forme d'un tableau de données. Chaque ligne correspond à un enregistrement, un élément de la base. Chaque colonne corespond à un attribut, un champ.

On complète les données par des métadonnées, écrite également en JSON sous forme d'une liste de listes, qui décrit chaque champs du tableau de données c'est à dire chaque attribut.

Considérons par exemple une base de donnée sur les plantes tel qu'on peut en trouver dans de nombreux ouvrages. Une telle base doit comprendre une description des attribus que l'on regroupe en un tableau appelé metadata, et les données proprement dites que l'on regroupe dans un tableau appelé data. La base regroupant les metadata et les data s'écrit en JSON comme suit :

{
	"metadata" : [ 
    ["Zone_1","c1",3,"Oui","Non"],
    ["Zone_2","c1",2,"Oui","Non"],
    ["Zone_3","c1",2,"Oui","Non"],
    ["Vent","c2",2,"Oui","Non"],
    ["Embruns","c2",2,"Oui","Non"],
    ["Gel_précoce","c2",2,"Oui","Non"],
    ["Couleur","c3",5,"Rouge","Bleu","Jaune","Violet","Marron"],
    ["Aprovision","c4",3,"Facile","Assez facile", "Difficile"],
    ["Plantation","c5",4,"Fin d'été","Hiver","Printemps"],
    ["Nom","c0",0],
    ["Famille","c0",0],
    ["Ordre","c0",0]
  ], 
  "data" : [
    [1,0,1,1,0,1,2,3,2,"toto","ito","ga"],
    [1,1,0,0,1,0,3,1,1,"tarbi","ito","ga"],
    [1,1,1,1,0,1,4,3,1,"troto","ito","ga"],
    [2,1,1,0,0,1,2,2,2,"tarasci","grono","ga"],
    [0,0,0,1,0,1,0,1,0,"tarasgane","grono","ga"],
    [1,0,1,0,1,0,1,2,2,"tarapec","grono","ga"],
    [1,1,1,1,0,1,1,0,0,"hypac","esoles","boc"],
    [2,0,0,0,0,0,0,0,1,"hyphil","esoles","boc"],
    [2,0,0,1,1,0,2,2,0,"hypotalis","cariol","boc"],
    [0,1,1,0,1,0,4,2,0,"hypocampt","cariol","boc"],
    [1,1,0,1,1,1,3,1,0,"hypofont","cantris","boc"],
    [1,0,0,0,0,1,4,1,1,"hypofrate","cantris","boc"]
  ]
}

La liste "metadata" énumère pour chaque champ :

Le tableau data comprend pour chaque enregistrement et pour chaque attribut, sa valeur codée en partant de 0, c'est à dire une valeur comprise entre 0 et le nombre de réponses possibles moins un, ou bien si c'est un champ texte, le texte en question.

Une grande quantité de données peut être transmise et mémorisée de façons dense si elle tient dans une successions d'attribut au nombre de réponse distinctes possibles réduites (ici entre 2 et 8). Cette représentation des champs à nombre de réponse réduite permet d'effectuer un codage dense et de compresser considérablement cette partie de la base dite sélective, par une sorte de code barre pour chaque enregistrement. Ce code barre est un nombre en base adapté à chaque taille de champs, qui peut être exprimé en la base 26+26+10 = 62 si on prend en compte les lettres minuscules, les lettres majuscules et les chiffres.

Pour compresser les champs textes au grand nombre de réponses distinctes, d'autres procédés devront être mis en oeuvre qui sort du cadre de ce projet.

Les débits réseaux et la rapidité de calcul s'accroissant régulièrement d'un facteur constant (loi de Nielson et loi de Moore), il devient plus simple de télécharger la base complète et d'effectuer les recherches avec des instructions javascript mise à disposition des utilisateurs via un interface web.

 

3) XMLHttpRequest

Dans l'entête de la page web qui servira d'interface, afin que les caractères accentués apparaissent normalement, on précise l'encodage des caractères comme suit

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Puis le script contient une fonction getH( ) qui récupère la base de donnée JSON à une adresse devant se trouver sur le même domaine internet qui est ici une adresse relative "test.text" :

<script type="text/javascript">

function getH(){
	var H = new XMLHttpRequest();
	var Z = "application/x-www-form-urlencoded; charset=iso-8859-1";
	H.open('GET','test.txt','true');
	H.setRequestHeader('Content-type', Z);
	H.overrideMimeType(Z);
	H.onreadystatechange = function(){
		if (H.readyState == 4) {
			var R=eval('('+H.responseText+')');
  			alert(R.metadata);
		}
  }
  H.send(null);
  }

</script> 

La variable Z précise le codage des caractères utilisés iso-8859-1.
L'instruction H.setRequestHeader('Content-type', Z) précise que ce codage est utilisé pour les messages envoyés.
L'instruction H.overrideMimeType(Z) précise que ce codage est utilisé pour les messages reçus.

---- 7 novembre 2015 ----