Premiers pas en JavaScript
33.4 fichiers CSV
cuy copyleft
  See You Why?  

 


base de donnees - fichiers TXT (33.3) | | exercices base de donnees (33.8)

Contenu

 

 

I. JavaScript et bases de données

voir séquence précédente

 

II. Cookies

voir séquence précédente

 

III. Les fichiers TXT

voir séquence précédente

 

IV. Les fichiers CSV

Qu'est-ce donc que ces fichiers CSV, alors que l'on veut traiter de bases de données ? Le fichier CSV n'est rien d'autre qu'une base de données en fichier 'texte' et dont chaque donnée est séparée de la précedente par un virgule... d'où son nom "Comma Separated Values".
Facile, mais parfois vicieux car aucune donnée ne peut contenir de virgule si souvent présente dans les valeurs décimales ou dans les adresses...

Un avantage ? La plupart des logiciels des Offices, que ce soit Microsoft Excel, Microsoft Access, OpenOffice Calc ou OpenOffice peuvent convertir leurs données en fichier CSV que ce soit via l'exportation ou l'enregistrement sous... il faut alors chercher un peu.

"Pénible, car pas possible d'y stocker des images ou des musiques..." Détrompez-vous, car tant les images que les sons ou les vidéos sont des fichiers qui ont un nom et une adresse qui se note facilement dans un fichier CSV. Mes anciens (collègues ? étudiants ?) sont d'ailleurs stockés dans un fichier CSV qui est lu lors de l'affichage de la page http://cuy.be/anciens/recherche.html. Vous souhaitez voir un extrait de ce fichier CSV ? Mais c'est juste pour vous montrer comment ce fichier est construit pour 3 anciens :

Nom,Prenom,Section,Ecole,Etude,Anneee:Int,Anneep:Int,Ville,Image,Lien,TFE,Resume,Texte,FB
LIÉNART,Jean-Claude,Mathématiques Physique option Sciences religieuses,Collège Notre-Dame à Tournai,humanités ??,1974,1976,Tournai (Tournai à l'époque aussi),lienartjc.jpg,nomp.htm,\S??\,\??\,\depuis 1976 à Don Bosco Tournai\,
DOHY,Isabelle,Mathématiques option Sciences économiques,,,1992,1995,Momignies,yeux_013.gif,nomp.htm,\\,\\,\début de carrière à ??? ai poursuivi une formation (licence en sciences éco) _ Chargée de relations PL & TPE (Profession libérale et entreprise) chez CBC BANQUE \,
PALAZZO,Giovanna,Sciences économiques et sciences économiques appliquées,athénée royal de La Louvière,technicienne en comptabilité,2007,2010,La Louvière,palazzog.jpg,palazzog.htm,\Clic Droit site Web pédagogique\,\la responsabilité civile abordée par l'outil informatique\,\engagée à La Louvière et à Manage...\,

Je reste convaincu que la manipulation de fichier, quel qu'en soit le type, est nettement plus sure et plus fiable en PHP qu'en JS. Cependant, laissons aux amateurs de JS l'occasion de découvrir comment faire. Reste alors à voir :

 

A. Comment se compose un fichier CSV ?

L'essentiel a cependant été dit ci-dessus : chaque valeur est séparée de la suivante par une virgule.

Une première ligne peut avoir un statut particulier : elle servira à préciser le nom des données (comme les champs dans une base de données) et éventuellement à préciser leur type, ce dont JS peut se passer facilement. Dans l'extrait de la base donné ci-dessus, on compte 14 champs (respectivement : Nom, Prenom, Section, Ecole, etc.) ; le lecteur observera le traditionnel emploi de caractères non accentués.
Outre ce détail, le lecteur pourrait s'étonner des Anneee:Int,Anneep:Int, dans la 1re ligne qui ne sont rien d'autres que des noms de champs (annee d'entrée et annee de promotion ou sortie) dont on précise le type 'Int' pour 'integer', c'est-à-dire 'entier'.

Pour les lignes suivantes, chaque ligne correspond à une entité décrite (ici, un ancien) et autant d'éléments (de champs) dont le nom a été donné dans la 1re ligne. Si la valeur d'un champ n'est pas connue, on n'écrit rien, mais surtout on n'oublie pas la virgule pour indiquer que l'on passe au champ suivant... ce qui explique que parfois, plusieurs virgules se suivent.

Remarquons que pour les allergiques à la virgule, il est possible de choisir un autre séparateur, mais on s'écarte (un peu) de la norme des fichiers CSV.

 

B. Comment peut-on lire un fichier CSV en JS ?

Je vous avais dit que c'était impossible avec JS, et qu'il fallait faire usage des Activex. C'est ce que nous préconisons ici.
Beaucoup de programmeurs l'ignorent, mais ils font appel à des ActiveX lorsque l'on retrouve dans leur source une ligne telle que :
"<OBJECT id="basededonnee" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">",
suivi d'une série de paramètres tels que :
"<PARAM name="DataURL" value="donnee.txt">
<PARAM name="UseHeader" value="true">
" .

Sur notre page des anciens, vous retrouvez aussi les quelques lignes suivantes :
<div style="display:none">
   <object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="bd" height=0 width=0>
      <param name="DataURL" value="anciens.csv">
      <param name="UseHeader" value="true">
      <param name="TextQualifier" value="\">
   </object>
</div>

Mais qu'est-ce qu'un ActiveX ? C'est un programme (programmé dans un autre language que le javascript) que l'on utilise depuis une page internet (malheureusement seulement pour Internet Explorer). Le lecteur aura remarqué que le fichier de la base de données peut être écrit au format CSV ou au format TXT. Cet ActiveX permet d'ouvrir un fichier externe contenant des données, même des fichiers de type MDB propres au logiciel Access de la suite Micro§oft Office.
L'appel de cet ActiveX offert par Micro§oft dans son Internet Explorer depuis sa version 4, se fait via l'appel d'un objet : <object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id="bd"> où il convient de respecter le numéro d'entrée de l'ActiveX. L'id peut avoir un nom différent et vous pourriez même ouvrir plusieurs objets de type base de données.

Le lecteur aura constaté que l'on définit souvent des paramètres en ouvrant des objets en JS. Quels sont-ils ?
<param name="DataURL" value="anciens.csv"> qui derrière le value= reprend entre guilles l'url du fichier qui peut être de différents types : txt, csv, mdb et autres, ici on suppose que le fichier se trouve dans le même répertoire, mais l'url peut aussi indiquer une adresse absolue d'un fichier sur un autre site et la notation "../../dossier/fichier.txt" est aussi acceptable.
<param name="UseHeader" value="true"> qui stipule que la première ligne du fichier a cette particularité de ne pas contenir de données, mais de donner un nom à chacune des données qui suivront à partir de la 2e ligne (en base de données, on parle souvent de noms de champ).
<param name="TextQualifier" value="\"> qui spécifie le signe qui délimitera chaque donnée ou champ... pas indispensable, car par défaut c'est une virgule ; on peut cependant choisir un autre caractère, de préférence pas d'usage commun en français (souvent | un 'pipe' obtenu sur un clavier azerty belge par "AltGr 1", ou \ un backslash).
Facultativement, on peut aussi y indiquer les paramètres suivants, mais le lecteur comprendra que le but ici n'est pas de vous initier à toutes les astuces, mais de vous apprendre à faire vos premiers pas en JS :
<PARAM NAME="RowDelim" VALUE="&#10;">
<PARAM NAME="FieldDelim" VALUE=",">
<PARAM NAME="TextQualifier" VALUE='"'>
<PARAM NAME="EscapeChar" VALUE="">
<PARAM NAME="UseHeader" VALUE="0">
<PARAM NAME="SortAscending" VALUE="-1">
<PARAM NAME="SortColumn" VALUE="">
<PARAM NAME="FilterValue" VALUE="">
<PARAM NAME="FilterCriterion" VALUE="??">
<PARAM NAME="FilterColumn" VALUE="">
<PARAM NAME="CharSet" VALUE="">
<PARAM NAME="Language" VALUE="">
<PARAM NAME="CaseSensitive" VALUE="-1">
<PARAM NAME="Sort" VALUE="">
<PARAM NAME="Filter" VALUE="">
<PARAM NAME="AppendData" VALUE="0">
<PARAM NAME="DataURL" VALUE="DBase.csv">
<PARAM NAME="ReadyState" VALUE="4">

Mais que faut-il faire après pour pouvoir le lire ? C'est bien là le but poursuivi. Pour le reste, on pourrait s'attendre à la construction de boucles, il n'en est rien. Le reste sera affiché dans un tableau (dans le sens <table> de JS) et un jeu de paramètres datasrc, datafld, dataformatas.

 

B. Comment afficher des données d'un fichier CSV en JS ?

afficher des valeurs de la base de données

Si je souhaite afficher des valeurs extraites de ma base de données, je dois :

        1. créer un tableau <table>, sans autres obligations ; je peux cependant y ajouter librement des paramètres tels que une identification ou le nombre d'enregistrements à afficher en une seule fois, par exemple : <table id="tableauaffich" datasrc="#adresses" datapagesize=5 width=100%> ;
        2. ouvrir des <tr> et des <td> pour spécifier la manière dont je veux afficher les données ;
        3. pour chaque donnée, je peux ajouter quelques mots d'introduction, mais je dois absolument noter une instruction entre <span>, telle que <td width="350" valign="top"> <b>Titre du travail de fin d'étude : </b><br> <span datafld="tfe"></span> </td> qui affichera 'Titre du travail de fin d'étude' suivi du contenu du champ 'tfe' de la base de données (le 11e champ de la base, baptisé 'TFE' [n'oublions pas que Windows et M§ ne sont généralement pas 'case sensitive']) ; le datafld indique le nom du champ à afficher.

 

afficher des images

Je vous avais déjà dit que les images sont des noms de fichiers. Cela ne nous dit cependant pas comment les afficher...
Vous connaissez la procédure pour afficher une image dans HTML, <img> suivi du paramètre 'src=' puis l'adresse du fichier... en JS la procédure est la même, sauf que l'adresse du fichier est une donnée de notre base (la 9e dans notre exemple ci-dessus), on écrira donc :
<td width="160"><img datasrc="#bd" datafld="image" width="160"></td>
(toujours dans notre <table> et après l'ouverture de l'ActiveX mentionné plus haut), ce qui suffira pour afficher l'image souhaitée.

 

 

afficher des liens

Vous connaissez la procédure du lien en HTML, je n'ai donc (presque) plus rien à vous appredre. Le <a href="xxx.htm">mot lien</a> sera remplacé par <a datafld="lien">mot lien</a> si lien est un champ de votre base. Dans notre exemple, c'est le 10e champ de la base qui est à chaque fois le nom d'un fichier HTM du même répertoire.

Cet exemple montre que le lien peut être extrait d'une base de données CSV, mais l'expression qui servira de lien, le mot clickable, est toujours 'mot lien'. Dommage se dira la majorité des lecteurs intéressés par nos "premiers pas".

Cependant, vous en connaissez déjà assez pour que l'expression 'mot lien' soit remplacée par un ou plusieurs éléments de la base de données. Imaginons un enseignant qui souhaiterait que chaque élève atteigne une page différente, il pourrait écrire :
<td valign="top" colspan="2"> <h3 class="titre"><a datafld="lien" target="_blank"><span datafld="nom" dataformatas="html"></span></a>&nbsp; <small><i><span datafld="prenom" dataformatas="html"></span></i></small></h3></td>
ce qui afficherait les nom et prénom de l'élève associés à un lien qui lui soit propre... le </a> serait d'ailleurs mieux placé s'il figurait juste avant le </h3>...

 

 

 

 

VIII. Exercices relatifs aux bases de données

voir suite >>>

 

IX. Test relatif aux bases de données

voir suite >>>

 

 

 


base de donnees - fichiers TXT (33.3) | | exercices base de donnees (33.8)