Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Ouvrier
    Inscrit en
    juin 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ouvrier

    Informations forums :
    Inscription : juin 2019
    Messages : 5
    Points : 1
    Points
    1

    Par défaut Recensement et tri de profils sur site web.

    Bonjour à tous,

    Depuis quelques semaines je mets un peu les mains dans le cambouis concernant Javascript. Je suis totalement novice et j'essaie d'acquérir quelques bases sur mon temps libre, en autodidacte, via certains tutos/cours en ligne, mais aussi grâce aux différentes documentations.
    Pour mettre en pratique ce que j'apprends, je me suis donné pour but de réaliser un petit site web (3 ou 4 pages) pour une association fictive. Le but du site serait de recenser les membres de l'association et de pouvoir les trier (et donc les faire apparaître sur la page) selon certains critères.

    Et c'est là que j'ai besoin d'un petit coup de pouce de votre part.

    J'ai dans l'idée de lister les membres de ce club en leur attribuant des mots-clés grâce auxquels je pourrais les appeler pour afficher leurs profils sur la page.
    Par exemple :
    - Jean : 28 ans, Bordeaux, cyclisme
    - Pierre : 30 ans, Bordeaux, randonnée
    - Paul : 32 ans, Nice, cyclisme

    J'ai d'emblée pensé faire ça à l'aide de variables, en leur attribuant plusieurs valeurs (ici "28 ans, Bordeaux, cyclisme" etc...), mais je ne vois pas comment appeler la valeur "cyclisme" pour faire en sorte que seules les deux variables concernées (Jean et Paul) apparaissent sur ma page web.

    Comme dit plus haut, j'essaie d'apprendre par moi-même et je me tourne vers vous en dernier recours car je n'ai pas su trouver ailleurs (ou peut-être que je cherche mal, avec le mauvais vocabulaire).
    Si vous avez un petit coup de pouce à me donner par rapport à mon problème (un conseil, un lien ou que sais-je), ça m'enlèverait une grosse épine du pied.

    Merci d'avance.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 333
    Points : 65 676
    Points
    65 676
    Billets dans le blog
    1

    Par défaut

    Tu comptes gérer les données dans des variables js (tableau, json ?) ou bien as tu une base de données ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Ouvrier
    Inscrit en
    juin 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ouvrier

    Informations forums :
    Inscription : juin 2019
    Messages : 5
    Points : 1
    Points
    1

    Par défaut

    Je pensais le faire directement dans les variables js (une variable par membre), mais je fais peut-être erreur...

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 333
    Points : 65 676
    Points
    65 676
    Billets dans le blog
    1

    Par défaut

    tout dépend du nombre de membres et des informations stockées pour chaque membre...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Ouvrier
    Inscrit en
    juin 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ouvrier

    Informations forums :
    Inscription : juin 2019
    Messages : 5
    Points : 1
    Points
    1

    Par défaut

    Une quarantaine de membres, sept à huit info pour chacun, avec certaines qui entrent en corrélation.
    Par exemple Jean fait du VTT, ce qui le met dans les catégories "cyclisme" et "vtt", mais pas la catégorie "bmx" qui serait pourtant une sous-catégorie de "cyclisme".
    Comme ça c'est confus, mais je sais où je vais.

    J'ai aussi pensé au tableau, mais ça me parait un peu plus compliqué à mettre en oeuvre dans mon cas précis, y compris pour l'appel des catégories.
    La base de données peut aussi être une solution, mais je ne me suis pas encore documenté dessus.

  6. #6
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 796
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 796
    Points : 3 570
    Points
    3 570

    Par défaut

    Ben disons que sans base, tu vas être obligé de tout entrer en dur; ce qui veut dire maj du code html / js dès que tu changes une donnée

  7. #7
    Nouveau Candidat au Club
    Homme Profil pro
    Ouvrier
    Inscrit en
    juin 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ouvrier

    Informations forums :
    Inscription : juin 2019
    Messages : 5
    Points : 1
    Points
    1

    Par défaut

    D'accord, donc déjà je dois mettre l'accent sur la création de la base de données.
    Mais ça devient un autre domaine... On entre dans le PHP là non !?

  8. #8
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 796
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 796
    Points : 3 570
    Points
    3 570

    Par défaut

    mettons que tu sois sûr du nombre limité d'entrées, écris tes données en suivant la forme
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    const t=[
    ["Maurice", "Nice", "35", "Pongiste", "sympathique"],
    ["Jacques", "Bordeaux", "47", "Footballeur", "sympathique"],
    ["Johnny", "Limoges", "14", "roller", "sympathique"]
    ]
    Si ton seul problème est d'afficher des rubriques, sans avoir à insérer, éditer ou supprimer, on devrait s'en sortir avec JS!

  9. #9
    Membre à l'essai
    Homme Profil pro
    OOW
    Inscrit en
    juin 2019
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : Ukraine

    Informations professionnelles :
    Activité : OOW

    Informations forums :
    Inscription : juin 2019
    Messages : 8
    Points : 22
    Points
    22

    Par défaut

    Une quarantaine de membres, sept à huit info pour chacun
    pourquoi ne pas partir sur une structure de type JSON
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const membres = [
    {
        "nom": "",
        "prenom": "",
        "date": "",
        "sport": "cyclisme"
    },
    {
        "nom": "",
        "prenom": "",
        "date": "",
        "sport": "cyclisme"
    }];
    Ceci n'est bien sûr qu'une approche.

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 333
    Points : 65 676
    Points
    65 676
    Billets dans le blog
    1

    Par défaut

    ne pas perdre de vue le RGPD ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  11. #11
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 796
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 796
    Points : 3 570
    Points
    3 570

    Par défaut

    début d'idée

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    <script type="text/javascript">
     
     
    const qui={
     
            membres : function(){
            const e = (q) => {return document.getElementById(q)};// raccourci pour nommer les éléments de la page
     
            
            const t = {/* Le nom de chaque membre est une propriété de t;
                                    Chaque propriété a pour valeur un tableau pas forcément ordonné
                                    de renseignements sur le profil;
                                    L'avantage c'est de pouvoir saisir les nouvelles données comme elles viennent;
                           */
                    Maurice:["35 ans", "vélo","Tennis de table", "sympathique"],
                    Jacques:["Bordeaux", "47 ans", "roller", "Football", "sympathique"],
                    Jacky:["Limoges", "47 ans", "rugby", "Football", "rebelle","sympathique"],
                    Johnny:["Limoges", "Bordeaux", "14 ans", "roller", "sympathique"],
                    Grand_mère:["Genève", "102 ans", "vélo", "rebelle"]
            };
     
            // On regroupe toutes les informations possibles pour en faire une liste (select) sans doublon;
            const t2 = new Set();
     
            for (let i in t){
                    for(let j in t[i]){
                            t2.add(t[i][j])
                    }
            };
     
            // tri partiel
            const t3=[...t2].sort();
     
            for(let i of t3){// on ajoute les options
                    let v=document.createElement("option");
                    v.value=i;
                    v.text=i;
                    e("sel").appendChild(v);
            }
     
            // le choix d'une option affiche le nom des membres correspondants 
            //      + éventuellement leur profil complet
            e("sel").addEventListener("change",()=>{
                            e("noms").innerHTML="";
                                    for (i in t){
                                            if(t[i].includes(e("sel").value)){// affichage des résultats (pas beau du tout mais c'est pour l'idée)
                                                    e("noms").innerHTML+=`<div>${i} <span>( ${t[i].join(", ")})</span></div>`;
                                    }
                            }
                    }
            );
            }
    }
    window.addEventListener("load", qui.membres);
     
    </script>
     
    <select id="sel" width:"100px">
    <option value="options">options</option>
    </select>
     
    <div style="margin-top:50px" id="noms">
    </div>


    http://javatwist.imingo.net/test.htm

  12. #12
    Nouveau Candidat au Club
    Homme Profil pro
    Ouvrier
    Inscrit en
    juin 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ouvrier

    Informations forums :
    Inscription : juin 2019
    Messages : 5
    Points : 1
    Points
    1

    Par défaut

    Wahou ! oO
    C'est ce que je recherche dans l'idée en effet, super, merci à toi.

    Bon par contre comme je suis novice ton code est assez abstrait pour moi, mais je vais l'étudier dans mon coin pour le comprendre (merci pour les commentaires au fait ! ).
    Je reviens vers vous à la prochaine étape.

    Merci beaucoup pour votre aide.

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 672
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 672
    Points : 33 399
    Points
    33 399

    Par défaut

    Bonjour,
    Citation Envoyé par Dave Hiock
    pourquoi ne pas partir sur une structure de type JSON
    je voterais également pour ce style d'approche, plus évolutive et souple que les Array, mais pas plus compliqué à manipuler.

    De plus comme tu es novice cette approche me semble plus profitable pour la suite de ton parcours

    Citation Envoyé par SpaceFrog
    ne pas perdre de vue le RGPD ...
    ce n'est qu'une simulation de site...
    pour une association fictive.
    mais à garder en tête au cas où !!!

Discussions similaires

  1. Mettre font perso sur site web
    Par chico_du_33 dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 04/12/2007, 10h00
  2. Live webcam sur site web
    Par delavega dans le forum Général Conception Web
    Réponses: 5
    Dernier message: 23/05/2006, 17h39
  3. Lecteur MPEG4 sur site web...
    Par zoidy dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 16/05/2006, 12h13
  4. [C#][2.0] Ajout de Frames sur Site Web
    Par pocket dans le forum ASP.NET
    Réponses: 2
    Dernier message: 08/02/2006, 17h57
  5. Fichiers .nsf sur site web, c'est quoi ?
    Par vanmouniren dans le forum Général Conception Web
    Réponses: 1
    Dernier message: 16/10/2005, 10h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo