[Plugin] Csv2Table : afficher un beau tableau avec son fichier CVS

bazooka07bazooka07 PluXml Lead Developer, Moderator
février 2023 modifié dans Plugins
Bonjour

On a souvent des listes dans un tableur qu'on voudrait afficher sur son site au moindre effort.
Et dans ce cas, il y a toujours moyen d'exporter vers un fichier au format csv.
Avec ce plugin, si un lien <a href=".."> pointe vers un tel fichier, alors ce lien sera transformé en tableau html pour afficher les contenus du fichier.
Pour voir le rendu de la page statique, cliquez sur cet exemple.
La saisie de la page correspondante ressemble à ceci ou avec son code source.
Le fichier CSV peut-être aussi un tableau stocké dans Google Docs qui peut modifié indépendamment de votre site.
On peut stocker les fichiers CSV sur d'autres serveurs, à condition que votre hébergement le permettent (pas évident avec un hébergement gratuit).
Et bien sûr, les fichiers peuvent être stockés dans le dossier documents ou medias du site selon la version de PluXml.

Télécharger la dernière version du plugin
14/03/17 - version 1.10.0 :Prise en compte de la valeur de plxMotor::aConf
02/04/14 - verssion 1.0.2 : quelques bugfixes - voir release.txt
A++

Réponses

  • StéphaneStéphane Member, Former PluXml Project Manager
    Bonjour

    Très interessant ce plugin. Y a un vrai coté pratique.
    Merci pour la réalisatin et le partage

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • Bien joué. Je vais jouer les pinailleurs mais serait-il possible que l'entête du tableau soit entre des balises <thead> et le reste entre des balises <tbody> ?
    Sinon, belle idée.
    Est-ce qu'on peut voir la source d'un des fichiers csv utilisés dans l'exemple ?
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    J'ai rajouté les balises thead et tbody.

    J'ai ajouté la balise caption. Son contenu provient de la balise a qu'elle remplace.

    Pour voir la tête du fichier csv, il y a sur ma page d'exemple un lien vers un tableau dans mon Google Docs.
    Il suffit alors d'aller dans Menu/Fichier/Télécharger au format/Valeurs séparées par des virgules (.csv).
    Inutile d'ouvrir son compte chez Google.
  • Cool. Merci ;)
  • cpalocpalo Member
    avril 2014 modifié
    Le séparateur est-il obligatoirement une virgule?
    [del]car si cela avait pu etre une tabulation, ce serait plus facile pour préparer un fichier sous excel[/del]
    Il est vrai qu'on peut enregistrer le fichier excel sous le fichier csv qu'on veut
  • l'idée est vraiment sympa !
  • cpalocpalo Member
    avril 2014 modifié
    Bonsoir,

    Avec un peu de retard, je me mettais à vouloir utiliser le plugin.
    Mais je n'obtiens pas de résultat.
    Ce que je fais:
    -création d'une nouvelle page statique
    -menu insertion lien vers le fichier csv stocké dans data/documents/
    -enregistrer

    Mais il n'y a rien. Et dans le code source le lien vers le fichier csv n'apparaît pas.
    J'utilise ton plugin TinyMce

    Modif: ça a fonctionné à partir du moment où j'ai copié le lien dans la case texte à afficher.

    Par contre comment fait-on pour que cela soit des ul et li et non pas des tableaux. ? Directement dans les fichiers du plugin?
  • cpalocpalo Member
    Bonsoir

    Je n'avais pas téléchargé la dernière version ( j'étais resté sur celle du 17 février) !!!!
    Par contre, la version précédente m'affichait bien le résultat sous forme de tableau.
    Mais là ça ne m'affiche rien; excepté l'intitulé du lien du fichier csv.
  • cpalocpalo Member
    Bonjour

    Toutes mes excuses... j'avais oublié d'aller jusqu'au bout de l'installation du plugin en n'effectuant pas l'étape configuration.
    Mais cela me donne toujours le résultat sous forme de tableau ( ce qui est super dans le cas d'un besoin d'un tableau dans une page web).
    Mais pour avoir sous forme de liste, où fait-on la modification pour déclarer ce choix?
    Dans la configuration du plugin, j'ai bien vu la case: format d'édition des cellules. est-là ?

    Cordialement
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    avril 2014 modifié
    @cpalo,

    Voir explication sur mon site de démo
    Il faut aller dans le panneau de config faire les réglages après édition avancée, cliquer sur calcul lien, et copier-coller la valeur de "lien à recopier" dans page statique.

    Télécharger la dernière version 1.02 (quelques corrections pour l'édition avancée. Pour les tableaux: aucun changement)
  • cpalocpalo Member
    avril 2014 modifié
    Je comprends un peu mieux l'utilisation.
    Mais :

    <a id="catalogue" href="data/documents/vegelab-feuille-1.csv" rel="list(2,4,2,||Brevets ##|Flacon de ## gélules|## €/pièce,data/images/vegelab/)">

    Est-ce qu'on doit le saisir manuellement?
    Parce que le calcul du lien donne:
    <p><a href="data/documents/monfichier.cvs" rel="list(2,4,2,,data/
    parce que le champ est trop court et ne permet pas le copier entier.
    Donc j'ai rajouté manuellement /images/vegelab


    Lorsque je suis dans l'édition de la page (mode code) je fais coller puis OK pour enregistrer. Impossible. La touche OK provoque l'insertion de &#x0;

    Après plusieurs essais, ce "bug" serait uniquement lorsque je viens de coller ce lien et que je veux l'enregistrer.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @cpalo,

    Va falloir réviser ses raccourcis clavier :D
    Cliques sur le champ, puis au clavier
    Ctrl-A pour tout sélectionner (même ce qui est caché)
    Ctrl-C pour copier dans le presse-papier
    Ctrl-V pour coller ce qui vient du presse-papier

    Oui, on peut faire à la main si on ne se trompe pas. Mais bon...
  • cpalocpalo Member
    Bonjour

    J'utilisais bien les raccourci clavier, avec juste une petite différence le Ctrl-A que je ne faisais pas ( glissement de la souris pour séléctionner, don cje n'avais pas tout).
    Et avec ta réponse à mon autre post, je fais attention avant de valider que mon curseur de souris ne soit pas dans une balise html, et là OK.

    Je disais à la main parce le code copié-collé n'intègre pas : ,||Brevets ##|Flacon de ## gélules|## €/pièce,

    Je dois zappé quelque chose, car avant j'avais l'affichage sous forme de tableau. Mais là rien ne s'affiche.
    [== Indéfini ==]
    <p><a href="data/documents/vegelab.cvs" rel="list(2,4,2,||Brevets ##|Flacon de ## g&eacute;lules|## &euro;/pi&egrave;ce,,data/images/vegelab/)">Title</a></p>
    

    Mais sans doute parce que je n'ai pas rajouté cette partie de code qui figure sur ta page de test: <a id="catalogue"
    Cela ne donne qu'en plus la mise en forme lié au css.

    Cordialement
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @cpalo,

    Pour afficher la page de catalogue sur mon site de démo, j'utilise une feuille de style spéciale pour elle. C'est toute l'astuce.
    Et pour écrire plus facilement les règles CSS, il vaut mieux avoir un id quelque part.
    Csv2table va recupérer la balise a avec son id et la remplacer dans par un div avec le même id et toute une série de balises ul et li.
    Dans le plugin tu as une feuille de style vegelab.css.

    P.S.: sur mon site de démo, j'ai corrigé la page technique (quelques erreurs suite à une mise à jour qui a un peu merdé). En bas tu as le contenu complet de la page statique pour le catalogue. Il n'y a pas grand chose mais cela suffit.
  • cpalocpalo Member
    avril 2014 modifié
    J'avais bien vu cette feuille de style spéciale pour le catalogue et le role de cet id ="catalogue.

    Je suis reparti à zéro et cela fonctionne maintenant.
    Le seul changement que j'ai effectué c'est de reprendre le fichier initial csv,: vegelab-feuille-1.csv.
    Peut-être que je l'avais modifié en voulant le fabriquer à partir d'excel.
    Car c'est quand même plus facile de le faire d'abord avec excel et ensuite l'enregistrer en csv?

    Quand je disais s'il fallait entrer manuellement, c'est cette partie: ,||Brevets ##|Flacon de ## gélules|## €/pièce,
    mais en fait il faut que le la saisisse aussi dans la config du plugin.
    De la même manière que je n'avais pas fait attention au rôle des caractères d'encadrement des chaines de caractère.

    Petite question: si on modifie le fichier csv, est-ce que la page catalogue est automatiquement mise à jour?

    Cordialement

    rajout: source de l'erreur excel enregistre par défaut les csv avec le point-virgule comme séparateur.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Bonjour,

    Oui, tu peux mettre à jour les données dans le tableur, exporter au format csv et la page HTML sera actualisée.
    Tu peux aussi avoir plusieurs fichiers CSV sur le site. En jouant avec l'attribut id, tu peux personnaliser la mise en page pour chaque fichier.

    Libre Office fournit un excellent tableur, un traitement de texte, une présentation en diapos, un logiciel de dessin, ...
    C'est gratuit et il y a moins de chance que le couple NSA / M$ vienne fourrer le nez dans tes affaires.
    Et l'interface utilisateur fait moins usine à gaz.
  • Bonjour bazooka07,

    L'exemple suivant est compréhensible et répétable :
    Exemple 1 : http://jeveuxpartir.free.fr/pluxml/index.php?static3/technique

    Cependant je n'arrive pas a reproduire le même résultat que ton 2eme exemple :
    Exemple 2 : http://www.echecs-annonay.fr/adherents.html

    Mon idée est d'utiliser un CSS identique a celui de ton 2eme exemple (simple colonne type Calc) en utilisant ton plugin "Csv2Table" sur un fichier CSV.

    Te serait il possible de partager la méthode utilisé dans ton 2 exemples ?
    - Feuille de style
    - Code feuille statique

    Merci pour ton aide et pour ton plugin ;o)
  • michelwmichelw Member
    avril 2016 modifié
    Bonjour,
    Je souhaiterai réaliser quelque chose comme cela:
    http://stephane.genouel.free.fr/
    A partir de fichiers tableurs sous calc ou excel, est-ce que ce plugin répond à mon besoin? J'ai essayé de voir de quoi il était capable mais les trois premiers liens de la discussion ne fonctionnent plus. Est-il opérationnel sous pluxml 5.5?
    En vous remerciant pour vos réponses.
  • Le problème immédiat d'une telle feuille Excel est le cauchemar créé par les cellules jumelées. L'automatisation de la création d'une page Excel est toujours possible, peu importe la circonstance mais chacune des cellule doit instruire si elle doit être allongée dans un sens ou dans l'autre.

    Un fichier CSV est facile a traiter en Excel parce qu'il constitue, au bas mot, une grille qui "respecte" la définition d'une grille. Toutes les cases existent, qu'elles soient vides ou non.

    Bonne chance tout de même...
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    @Michelw,

    J'ai retiré tous les plugins que j'avais stocké sur Google Drive. On peut les récupérer sur le site kazimentou.fr.

    Comme le dit Pierre les cellules à cheval sur plusieurs lignes posent problème. De plus c'est un classeur avec plusieurs feuilles. Donc a priori cela sera compliqué avec ce plugin et je n'ai pas prévu de le modifier.
    Plusieurs pistes :
    - utiliser une bibliothèque PHP qui gère les fichiers Excel (rechercher "excel php" sur Google)
    - A priori, calc exporte les feuilles au fomat HTML. Voire pour l'afficher dans un iframe
    - peut être passer par les classeurs de Google
  • jol5926jol5926 Member
    avril 2017 modifié
    Hello,

    J'aurai aimé utilisé ce plugin. Je l'ai installé sur un pluxml version 5.6 et dans la partie admin, configuration, j'ai ceci :

    Notice: Undefined index: images in /public_html/asl/plugins/csv2table/config.php on line 37

    Notice: Undefined index: documents in /public_html/asl/plugins/csv2table/config.php on line 42

    Ce plugin est-il compatible avec la nouvelle version de pluxml ?

    Merci
  • Bonsoir jol5926,
    jol5926 a écrit:
    Ce plugin est-il compatible avec la nouvelle version de pluxml ?

    Oui, je viens de faire le test sur un hébergement OVH mutualisé avec les versions php suivante :

    PHP 7.0
    PHP 5.6
    PHP 5.5
    PHP 5.4

    et le tableau côté site s'affiche correctement et je n'ai pas les messages d'erreurs dans la configuration du plugins.

    Ne pas hésiter à nous transmettre un copier coller de la page d'informations relatives à PluXml accessible par la zone d'administration-->Paramètres-->Informations (http://tonsite.url/core/admin/parametres_infos.php)

    Voici ce que me donne cette page avec la version 5.6 de Pluxml et configuré avec la version PHP 7.0 sur mon hébergement :
    PluXml version 5.6 (encodage UTF-8)
    
        Version de PHP : 7.0.17
        Apache
    
        ✔ ../../ est accessible en écriture
        ✔ ../../data/configuration/ est accessible en écriture
        ✔ ../../data/configuration/plugins/ est accessible en écriture
        ✔ ../../data/articles/ est accessible en écriture
        ✔ ../../data/commentaires/ est accessible en écriture
        ✔ ../../data/statiques/ est accessible en écriture
        ✔ ../../data/medias/ est accessible en écriture
        ✔ ../../plugins/ est accessible en écriture
        ✔ Bibliothèque GD installée
        ✔ Bibliothèque XML installée
        ✔ Fonction d'envoi de mail disponible
    

    Tiens nous au courant,

    Amicalement,
    Gaëtan.
  • jack31jack31 Member
    A quand la possibilité de modifier le fichier .cvs directement dans Pluxml ? ;)
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    csv : comma separated values ( données séparées par des virgules )
    Editer les données d'un fichier CSV n'est pas l'idée de départ mais d'afficher des données provenant d'un tableur, d'une base de données ou d'un logiciel capable d'exporter des données. Par exemple, les données d'un tableau stocké sur Google Docs partagés entre plusieurs utilisateurs.

    C'est faisable mais il faut créer un formulaire avec un tableau de balises input pour chaque cellule
    Certaines cellules peuvent être le résultat d'un calcul à partir d'autres cellules et là cela revient à réinventer un tableur.

    Pour l'instant rien n'est prévu dans ce sens.
  • jack31jack31 Member
    bazooka07 a écrit:
    Pour l'instant rien n'est prévu dans ce sens.

    Evidement ! C'était un joke. ;)

    Cela dit, j'ai testé ce plugin et l'idée est astucieuse.
    Cela marche avec Framacalc ?

    Bon, je retourne à mes histoires de plugins réseaux sociaux dés maintenant.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Apparemment Framacalc sait exporter en csv. Donc a priori oui.
  • jack31jack31 Member
    Je demande ça parce que l'admin du plugin parle de SheetGoogle et je ne sais plus quoi et je me demandais si ça pouvait le faire.
Connectez-vous ou Inscrivez-vous pour répondre.