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

JavaScript Discussion :

Recensement et tri de profils sur site web.


Sujet :

JavaScript

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Ouvrier
    Inscrit en
    juin 2019
    Messages
    6
    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 : 6
    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.
      0  0

  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 449
    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 449
    Points : 65 966
    Points
    65 966
    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
      0  0

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Ouvrier
    Inscrit en
    juin 2019
    Messages
    6
    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 : 6
    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...
      0  0

  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 449
    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 449
    Points : 65 966
    Points
    65 966
    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
      0  0

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Ouvrier
    Inscrit en
    juin 2019
    Messages
    6
    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 : 6
    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.
      0  0

  6. #6
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 940
    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 940
    Points : 3 826
    Points
    3 826
    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
      0  0

  7. #7
    Nouveau Candidat au Club
    Homme Profil pro
    Ouvrier
    Inscrit en
    juin 2019
    Messages
    6
    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 : 6
    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 !?
      0  0

  8. #8
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 940
    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 940
    Points : 3 826
    Points
    3 826
    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!
      0  0

  9. #9
    Membre régulier
    Homme Profil pro
    OOW
    Inscrit en
    juin 2019
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : Ukraine

    Informations professionnelles :
    Activité : OOW

    Informations forums :
    Inscription : juin 2019
    Messages : 16
    Points : 71
    Points
    71
    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.
      1  0

  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 449
    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 449
    Points : 65 966
    Points
    65 966
    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
      0  0

  11. #11
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 940
    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 940
    Points : 3 826
    Points
    3 826
    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
      0  0

  12. #12
    Nouveau Candidat au Club
    Homme Profil pro
    Ouvrier
    Inscrit en
    juin 2019
    Messages
    6
    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 : 6
    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.
      0  0

  13. #13
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 936
    Points : 34 187
    Points
    34 187
    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ù !!!
      0  0

  14. #14
    Nouveau Candidat au Club
    Homme Profil pro
    Ouvrier
    Inscrit en
    juin 2019
    Messages
    6
    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 : 6
    Points : 1
    Points
    1
    Par défaut
    Ok, donc je crois avoir compris le truc. Merci encore pour cette solution.

    Par contre, maintenant que j'essaie de mettre en oeuvre, ça soulève beaucoup de questions/problèmes auxquels je ne trouve pas de réponses/solutions...
    Par exemple pour l'affichage des résultats, je suis parvenu à y coller un semblant de mise en page, mais je ne parviens pas (par exemple) à remplacer l'affichage des résultats par des images correspondantes.
    Je n'arrive pas non plus à n'afficher que les propriétés de la const T, sans les valeurs (afficher les prénoms et pas les caractéristiques).

    Le but étant de parvenir à faire s'afficher les avatars des membres triés et de les rendre cliquables pour les lier à leurs pages de profil...

    Vous auriez des axes de recherche à me conseiller ?
      0  0

  15. #15
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 023
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 023
    Points : 32 821
    Points
    32 821
    Par défaut
    Citation Envoyé par Dave Hiock Voir le message
    pourquoi ne pas partir sur une structure de type JSON...
    1- Je suis aussi d'accord avec cette approche.
    Elle est assez similaire avec le traitement de données enregistrées "en base de données".

    2- Par contre, on ne va pas t'écrire tout le code.

    • Commence par rédiger un cahier des charges précis (les besoins, ce qu'il faut obtenir,...).
      "Je sais à peu près..." ne suffit pas.
    • Ensuite, fais des recherches (de codes similaires,...), et fais des ESSAIS.
    • Enfin, MONTRE les bouts de codes que tu as testés.
      On pourra alors proposer des corrections.


    3-
    Citation Envoyé par Besseb Voir le message
    ...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"...
    Déjà là, tu ajoutes une CONTRAINTE supplémentaire :
    • des catégories de "sport", avec des sous-catégories !

    Rien que ça, ça va apporter une complexité supplémentaire !

    Conseil : Commence avec des catégories de sport "simples" (SANS sous-catégories).


    4- Autre question (parmi d'autres) à laquelle il serait bon de répondre AVANT de coder :
    • "Et si un membre fais PLUSIEURS sports ??"

    Comment enregistrer/traiter ça ?
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images
      0  0

  16. #16
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 940
    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 940
    Points : 3 826
    Points
    3 826
    Par défaut
    Je reprends la fin du code:

    Code : 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
    	// les options du select affichent 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)){
    								let d=document.createElement("div");
    								let im=document.createElement("img");// tu crées une image
    								im.src=`membres/${i}.gif`;// avec pour adresse le nom du membre
    								im.alt=i;
    								d.appendChild(im);
    								// profil complet entre parenthèses; tu peux commenter ces 4 lignes;
    								let em=document.createElement("em");
    								em.textContent=` (${t[i].join(", ")})`;
    								d.appendChild(em);
    								e("noms").appendChild(d);
    					}
    				}
    			}
    		);
    	}
    }
    window.addEventListener("load",qui.membres);
    Même chose pour les options du profil; tu peux très bien les remplacer par des logos;

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

    Toujours pas de mise en page mais ce n'est pas le propos...
      1  0

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, 11h00
  2. Live webcam sur site web
    Par delavega dans le forum Général Conception Web
    Réponses: 5
    Dernier message: 23/05/2006, 18h39
  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, 13h13
  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, 18h57
  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, 11h04

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