Transformer des prénoms en liens cliquables

**jeicko** · 09/07/2021, 15h05

Bonjour,

Je viens vers vous car je bloque sur un script.

C'est un script qui me permet de faire défiler des prénoms, je souhaiterais modifier mon script pour que chaque prénom devienne un lien cliquable.

Je vous montre mon script :
(Pour l'exemple j'ai laissé 3 prénoms par catégorie mais il faut savoir qu'il y en a en tout environ 4000)

Code JS :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
const someAction = (selector, firstnames) => {
 
    d = document.createElement("div");
    b = document.createElement("button");
 
    for (i in firstnames) {
        let wrap = d.cloneNode();
        let resultat = d.cloneNode();
        let precedent = b.cloneNode();
        let suivant = b.cloneNode();
 
        firstnames[i].sort((a, b) => Math.random() - 0.5);
        let tab = i;
        let rg = 0;
        resultat.textContent = firstnames[tab][rg];
 
        wrap.classList.add("generateur");
        precedent.classList.add("prec");
        suivant.classList.add("suiv");
 
        wrap.append(resultat);
        wrap.append(precedent);
        wrap.append(suivant);
 
        document.querySelector(selector).append(wrap);
 
        precedent.addEventListener("click", () => {
            rg > 0 ? rg-- : rg = firstnames[tab].length - 1;
            resultat.textContent = firstnames[tab][rg];
        })
        suivant.addEventListener("click", () => {
            rg < firstnames[tab].length - 1 ? rg++ : rg = 0;
            resultat.textContent = firstnames[tab][rg];
        })
    }
}
 
document.addEventListener("DOMContentLoaded", () => {
    const firstnames = {
        f_aleatoires: ['Abigaïl', 'Adèle', 'Agathe']
    };
    someAction("#f_aleatoires", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_tendance: ['Adèle', 'Agathe', 'Albane']
    };
    someAction("#f_tendance", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_retros: ['Adèle', 'Adélie', 'Aglaé']
    };
    someAction("#f_retros", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_bibliques: ['Abigaïl', 'Anabel', 'Anabele']
    };
    someAction("#f_bibliques", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_celestes: ['Alva', 'Alya', 'Amaya']
    };
    someAction("#f_celestes", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_originaux: ['Abby', 'Achille', 'Adame']
    };
    someAction("#f_originaux", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_composes: ['Abby-Gaelle', 'Abby-Gaëlle', 'An-Sophie']
    };
    someAction("#f_composes", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_monde: ['Aanui', 'Aelan', 'Ailani']
    };
    someAction("#f_monde", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_rares: ['Abby', 'Abbygael', 'Abbygaëlle']
    };
    someAction("#f_rares", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
    const firstnames = {
        g_aleatoires: ['Aaron', 'Abel', 'Abraham']
    };
    someAction("#g_aleatoires", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
    const firstnames = {
        g_tendance: ['Aaron', 'Achille', 'Adam']
    };
    someAction("#g_tendance", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_retros: ['Aaron', 'Abélard', 'Achille']
    };
    someAction("#g_retros", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_bibliques: ['Aaron', 'Abel', 'Abraham']
    };
    someAction("#g_bibliques", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_celestes: ['Ange', 'Angel', 'Arwen']
    };
    someAction("#g_celestes", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_originaux: ['Abélard', 'Achil', 'Adame']
    };
    someAction("#g_originaux", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_composes: ['Ange-Marie', 'Charles-Edmond', 'Charles-Elie']
    };
    someAction("#g_composes", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_monde: ['Akamu', 'Akoni', 'Anakoni']
    };
    someAction("#g_monde", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_rares: ['Achille', 'Adamo', 'Adams']
    };
    someAction("#g_rares", firstnames);
});

Exemple d'une des catégories HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<h2 class="centrer-titre">Prénoms aléatoires</h2>
<h3 class="centrer-titre">Fille</h3>
<div aria-hidden="true" title="bouton précédent et suivant" id="f_aleatoires"></div>

Je vous explique mon projet. Sur mon site je fais défiler les prénoms par catégorie. Le but est de faire en sorte qu'en cliquant sur un des 4000 prénoms l'utilisateur sera dirigé sur une page avec la fiche de description du prénom, avec l'étymologie, le jour de la fête etc du prénom concerné.
J'aimerai donc par la même occasion, si possible, que vous me donniez votre avis à ce sujet.
De base je comptais faire 4000 page à la main avec un maximum d'include en PHP mais il semblerait qu'il y aurait peut-être plus simple en combinant PHP et MYSQL. Je ne sais pas vraiment comment m'y prendre.
De plus je souhaiterais ajouter à mon site une fonctionnalité de recherche, ou l'on puisse taper à la main un des prénoms qui ramènerait à la fiche de description. Donc 2 actions pour la même finalité.

Si quelqu'un à la motivation de m'aider ce serait tip top.

**jreaux62** · 10/07/2021, 12h43

Bonjour,

Oublie JS.
Pour ton projet, il faut du PHP et une base de données,

1- avec une table t_prenoms, dont les champs seraient :

id (identifiant unique, auto-incrementé)
prenom
description
.... (et tous les champs nécessaires pour remplir chaque fiche "prénom".

2- Une autre table t_categories, pour les catégories.

id_categorie (identifiant unique, auto-incrementé)
nom

3- Pour relier ces 2 tables, ça dépend si un prénom peut être dans plusieurs catégories ou dans une seule.
Si dans plusieurs catégories, une 3eme table "de liaison" est nécessaire
t_prenoms_categories :

id (celui du prénom)
id_categorie

4- Affichage / recherche :

fiche "prénom" : une seule page PHP (fiche-prenom.php)suffit alors pour tous les prénoms.
Idem pour le formulaire de recherche, qui ira chercher la bonne info dans la base de données.
Les liens cliquables seront de la forme : <a href="fiche-prenom.php?id=xxx">popol</a>

**jeicko** · 10/07/2021, 13h45

Salut, merci d’avoir répondu.

J’ai lu ta proposition, pour la base de données ça va mais après.. Je crois bien que je n’ai pas le niveau en PHP pour faire ça..
Effectivement un même prénom peut être dans plusieurs catégories.

Les liens cliquables seront de la forme : <a href="fiche-prenom.php?id=xxx">popol</a>

Je ne comprends pas bien, dois-je garder mon script de base pour faire défiler les prénoms tout en modifiant ces prénoms pour les transformer en lien avec ID dans ce même script ?

Je suis en train de rechercher un tutoriel qui se rapprocherait de ta solution, car je n’ai pas les bases en PHP pour mettre en pratique ce que tu me proposes. Si jamais tu as connaissance d’un tuto adéquat je suis preneur.

**jreaux62** · 10/07/2021, 14h03

Un très bon tuto pour bien démarrer :

PDO une soupe et au lit ! (-> fais l'exercice proposé)

N.B. J'ai mis à jour mon précédent message

PHP/SQL agit "coté serveur"
JS agit "coté client"

Cela dit, JavaScript peut faire appel à PHP/SQL grâce à Ajax.
Dans ton cas, ça peut être LA bonne solution.

**jeicko** · 11/07/2021, 11h55

Bonjour,

Merci pour le tuto.

Hier soir je me suis un peu exercé avec mais je bloque un peu pour faire la page "fiche-prenom.php", est-ce que ce tuto correspondrait aussi pour ma page php ou seulement pour les tables ? (savoir si je persiste avec ce tutoriel pour la suite)
Je pense que j'utiliserais Ajax même si je ne maitrise pas, je verrai par la suite..
Si je comprends bien, Ajax ferait appel à ma page "fiche-prenom.php" qui elle même fait appel à ma base de données ?

Je te montre ce que j'ai fait pour la base de donnée déjà voir si je pars d'une bonne base.
A savoir :
J’ai inversé les noms d'une table car je suis plus à l'aise dans ce sens.
Pour le test j'ai simplement mis 10 prénoms et utilisé comme catégories : f_aleatoires, f_tendance, g_aleatoires, g_tendance.
Les prénoms tendance sont également utilisés dans la catégorie aléatoire.

t_categories.sql :

Code SQL :

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
CREATE TABLE IF NOT EXISTS `t_categories` (
  `id_categorie` int(11) NOT NULL AUTO_INCREMENT,
  `nom` varchar(100) NOT NULL,
  PRIMARY KEY (`id_categorie`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
 
INSERT INTO `t_categories` (`id_categorie`, `nom`) VALUES
(1, 'f_aleatoires'),
(2, 'f_tendance'),
(3, 'f_retros'),
(4, 'f_bibliques'),
(5, 'f_celestes'),
(6, 'f_originaux'),
(7, 'f_composes'),
(8, 'f_monde'),
(9, 'f_rares'),
(10, 'g_aleatoires'),
(11, 'g_tendance'),
(12, 'g_retros'),
(13, 'g_bibliques'),
(14, 'g_celestes'),
(15, 'g_originaux'),
(16, 'g_composes'),
(17, 'g_monde'),
(18, 'g_rares');

t_prenoms.sql :

Code SQL :

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
CREATE TABLE IF NOT EXISTS `t_prenoms` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `prenom` varchar(100) NOT NULL,
  `description` varchar(500) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
 
INSERT INTO `t_prenoms` (`id`, `prenom`, `description`) VALUES
(1, 'Aline' , 'Ceci est la description du prénom Aline'),
(2, 'Amandine' , 'Ceci est la description du prénom Amandine'),
(3, 'Maël' , 'Ceci est la description du prénom Maël'),
(4, 'Lilian' , 'Ceci est la description du prénom Lilian'),
(5, 'Sara' , 'Ceci est la description du prénom Sara'),
(6, 'Luna' , 'Ceci est la description du prénom Luna'),
(7, 'Adam' , 'Ceci est la description du prénom Adam'),
(8, 'Léo' , 'Ceci est la description du prénom Léo'),
(9, 'Luna' , 'Ceci est la description du prénom Luna'),
(10, 'Alex' , 'Ceci est la description du prénom Alex fille'),
(11, 'Alex' , 'Ceci est la description du prénom Alex garçon');

t_categories_prenoms.sql

Code SQL :

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
CREATE TABLE IF NOT EXISTS `t_categories_prenoms` (
  `id_categorie` varchar(100) NOT NULL,
  `id_prenom` varchar(100) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
 
INSERT INTO `t_categories_prenoms` (`id_categorie`, `id_prenom`) VALUES
(1, 1),
(1, 2),
(1, 5),
(1, 6),
(1, 9),
(1, 10),
(2, 1),
(2, 2),
(2, 5),
(2, 6),
(2, 9),
(2, 10),
(10, 3),
(10, 4),
(10, 7),
(10, 8),
(10, 11),
(11, 3),
(11, 4),
(11, 7),
(11, 8),
(11, 11);

Et pour le moment ce qui fonctionne sur "fiche-prenom.php" :

La simple connexion à la base de données

Code PHP :

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
<?php
// @author : rawsrc - 2018 - Pour DVP
// on vérifie si la fonction de connexion a déjà été définie afin d'éviter de la redéfinir
if ( ! function_exists('db_connexion')) {
   function db_connexion() {
      // une fois ouverte, on renvoie toujours la même connexion
      static $pdo;
      // on vérifie si la connexion n'a pas déjà été initialisée
      if ( ! ($pdo instanceof PDO)) {
         // tentative d'ouverture de la connexion MySQL
         try {
            $pdo = new PDO('mysql-***;port=3306;dbname=***;charset=utf8','***', '***', [
            PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_EMULATE_PREPARES   => false
            ]);
         } 
         catch (PDOException $e) {
            throw new InvalidArgumentException('Erreur connexion à la base de données : '.$e->getMessage());
            exit;
         }
      }
      // renvoi de la ressource : connexion à la base de données
      return $pdo;
   }
}
return db_connexion();

Dsl pour toutes les questions je ne maitrise pas trop tout ça.

**jreaux62** · 11/07/2021, 14h26

Bonjour,

1- BRAVO : tu as tout compris * concernant la "table de liaison".

* sauf que :

dans `t_categories_prenoms`, ce sont des INT(11), pas des VARCHAR.
dans `t_categories`, `varchar(500) n'est pas possible (255 max). tu peux utiliser TEXT (pour des textes longs, formatés,...)
https://buzut.net/les-differents-typ...olonnes-mysql/

2- Fais l'exercice du tuto jusqu'au bout
(sans pour l'instant essayer de l'adapter à ton cas).
Ça te permettra de comprendre "la mécanique"

3- Ensuite, tu pourras l'adapter.

4- Par contre, 'f_aleatoires', 'f_tendance',... :
ce ne sont pas les noms qui s'afficheront à l'écran, si ?
Sinon, il te faut ajouter un champ supplémentaire "cat_code", par exemple.

5- Pour les prénoms, il faut aussi distinguer "fille" ET/OU "garçon" :

Code sql :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
(10, 'Alex' , 'Ceci est la description du prénom Alex fille'),
(11, 'Alex' , 'Ceci est la description du prénom Alex garçon');

2 méthodes :

soit (LE PLUS SIMPLE) dans la table "t_prenoms" en ajoutant un champ "sexe" (avec valeur 1 ou 2 pour "garçon" ou "fille")
soit sur le même principe que "t_categories" (mais ce n'est pas forcément ce qui te convient, surtout si les descriptions sont différentes entre garçon ou fille) :
t_sexes
- id_sexe
- nom_sexe
https://le-carnet-et-les-instants.ne...noms-epicenes/

CONSEILS :
je te conseille de toujours distinguer "nom_prenom", "nom_categorie" plutôt que de mettre "nom" partout.
Ça évitera des conflits lors des requêtes SQL.
Sur ce principe, remplace `id` par `id_prenom` dans la table "t_prenoms".

**jeicko** · 11/07/2021, 16h06

C'est une gymnastique qui demande de la concentration ^^.

Je me demande si je ne m'emmêle pas les pinceaux. Je te montre ce que j'ai fait :

t_sexes.sql

Code SQL :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
CREATE TABLE IF NOT EXISTS `t_sexes` (
  `id_sexe` int(11) NOT NULL AUTO_INCREMENT,
  `nom_sexe` varchar(100) NOT NULL,
  PRIMARY KEY (`id_sexe`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
 
INSERT INTO `t_sexes` (`id_sexe`, `nom_sexe`) VALUES
(1, 'Fille'),
(2, 'Garçon');

t_categories.sql

Code SQL :

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
CREATE TABLE IF NOT EXISTS `t_categories` (
  `id_categorie` int(11) NOT NULL AUTO_INCREMENT,
  `nom_categorie` varchar(100) NOT NULL,
  `code_categorie` varchar(100) NOT NULL,
  PRIMARY KEY (`id_categorie`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
 
INSERT INTO `t_categories` (`id_categorie`, `nom_categorie`, `code_categorie`) VALUES
(1, 'PRÉNOMS ALÉATOIRES', 'f_aleatoires'),
(2, 'PRÉNOMS TENDANCE', 'f_tendance'),
(3, 'PRÉNOMS RÉTROS', 'f_retros'),
(4, 'PRÉNOMS BIBLIQUES', 'f_bibliques'),
(5, 'PRÉNOMS CÉLESTES', 'f_celestes'),
(6, 'PRÉNOMS ORIGINAUX', 'f_originaux'),
(7, 'PRÉNOMS COMPOSÉS', 'f_composes'),
(8, 'PRÉNOMS DU MONDE', 'f_monde'),
(9, 'PRÉNOMS RARES', 'f_rares'),
(10, 'PRÉNOMS ALÉATOIRES', 'g_aleatoires'),
(11, 'PRÉNOMS TENDANCE', 'g_tendance'),
(12, 'PRÉNOMS RÉTROS', 'g_retros'),
(13, 'PRÉNOMS BIBLIQUES', 'g_bibliques'),
(14, 'PRÉNOMS CÉLESTES', 'g_celestes'),
(15, 'PRÉNOMS ORIGINAUX', 'g_originaux'),
(16, 'PRÉNOMS COMPOSÉS', 'g_composes'),
(17, 'PRÉNOMS DU MONDE', 'g_monde'),
(18, 'PRÉNOMS RARES', 'g_rares');

t_prenoms.sql

Code SQL :

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
CREATE TABLE IF NOT EXISTS `t_prenoms` (
  `id_prenom` int(11) NOT NULL AUTO_INCREMENT,
  `id_sexe` int(11) NOT NULL,
  `nom_prenom` varchar(100) NOT NULL,
  `description_prenom` text NOT NULL,
  PRIMARY KEY (`id_prenom`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
 
INSERT INTO `t_prenoms` (`id_prenom`, `id_sexe`, `nom_prenom`, `description_prenom`) VALUES
(1, 1, 'Aline' , 'Ceci est la description du prénom Aline'),
(2, 1, 'Amandine' , 'Ceci est la description du prénom Amandine'),
(3, 2, 'Maël' , 'Ceci est la description du prénom Maël'),
(4, 2, 'Lilian' , 'Ceci est la description du prénom Lilian'),
(5, 1, 'Sara' , 'Ceci est la description du prénom Sara'),
(6, 1, 'Luna' , 'Ceci est la description du prénom Luna'),
(7, 2, 'Adam' , 'Ceci est la description du prénom Adam'),
(8, 2, 'Léo' , 'Ceci est la description du prénom Léo'),
(9, 1, 'Luna' , 'Ceci est la description du prénom Luna'),
(10, 1, 'Alex' , 'Ceci est la description du prénom Alex fille'),
(11, 2, 'Alex' , 'Ceci est la description du prénom Alex garçon');

t_sexes_categories_prenoms.sql

Code SQL :

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
CREATE TABLE IF NOT EXISTS `t_sexes_categories_prenoms` (
  `id_sexe` int(11) NOT NULL,
  `id_categorie` int(11) NOT NULL,
  `id_prenom` int(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
 
INSERT INTO `t_sexes_categories_prenoms` (`id_sexe`, `id_categorie`, `id_prenom`) VALUES
(1, 1, 1),
(1, 1, 2),
(1, 1, 5),
(1, 1, 6),
(1, 1, 9),
(1, 1, 10),
(1, 2, 1),
(1, 2, 2),
(1, 2, 5),
(1, 2, 6),
(1, 2, 9),
(1, 2, 10),
(2, 10, 3),
(2, 10, 4),
(2, 10, 7),
(2, 10, 8),
(2, 10, 11),
(2, 11, 3),
(2, 11, 4),
(2, 11, 7),
(2, 11, 8),
(2, 11, 11);

Pour le sexe j'ai essayé de suivre le schéma de mon site car je pense que j'en aurais besoin par la suite :

Nom : Capture d’écran 2021-07-11 à 16.04.00.png
Affichages : 235
Taille : 578,8 Ko

Nom : Capture d’écran 2021-07-11 à 16.04.00.png
Affichages : 235
Taille : 578,8 Ko

Nom : Capture d’écran 2021-07-11 à 16.05.37.png
Affichages : 229
Taille : 547,5 Ko

**jreaux62** · 11/07/2021, 17h05

1-

Je pense qu'il faudrait que j'améliore la chose en créant un 3e sexe : "Fille & Garçon" pour les prénoms mixtes qui auraient la même description.

SURTOUT PAS !!
Car ça fausserait la recherche "par sexe".
IL vaut mieux créer 2 lignes dans la table "t_prenoms" (comme tu l'as fait), JUSTEMENT au cas où les de descriptions sont DIFFÉRENTES :

Code sql :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
(10, 1, 'Alex' , 'Ceci est la description du prénom Alex fille'),
(11, 2, 'Alex' , 'Ceci est la description du prénom Alex garçon');

2- `t_sexes_categories_prenoms`
NON.
Là, tu t'égares.

la table `t_categories_prenoms` suffit.

**jeicko** · 11/07/2021, 17h10

Je réponds pour que ton message est du sens :

J'ai édité mon précédant message en supprimant

Je pense qu'il faudrait que j'améliore la chose en créant un 3e sexe : "Fille & Garçon" pour les prénoms mixtes qui auraient la même description.

en même temps que tu répondais, dsl.

**jreaux62** · 11/07/2021, 17h19

J'ai vu que dans ton fichier js/commentaires.js, tu fais déjà un appel Ajax.
Donc, déjà, tu maitrises cette partie là.

Il te faut juste faire le même principe ici, en transmettant les bons paramètres.

**jeicko** · 11/07/2021, 17h39

OK.

Pour la base de donnée j'ai donc simplifié de cette manière :

t_categories.sql
Nom : t_categories.png
Affichages : 230
Taille : 427,9 Ko

t_prenoms.sql
Nom : t_prenoms.png
Affichages : 218
Taille : 302,2 Ko

t_categories_prenoms.sql
Nom : t_categories_prenoms.png
Affichages : 231
Taille : 53,9 Ko

Est-ce que cette fois c'est la bonne ?

(sachant que plus tard je complexifierai la chose car il n'y aura pas qu'une simple description.)

Après je passe à la suite.

Encore une fois merci pour ton aide

**jreaux62** · 11/07/2021, 17h41

Voilà à quoi pourrait ressembler le fichier PHP appelé via Ajax :

Code php :

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
64
65
66
67
68
69
70
71
72
73
<?php
// connexion a la bdd
$db = include('db_mysql.php'); 
// -------------
// récupération des parametres via AJAX en POST
$id_sexe		= ( !empty($_POST['id_sexe']) )? $_POST['id_sexe'] : 0;
$id_categorie	= ( !empty($_POST['id_categorie']) )? $_POST['id_categorie'] : 0;
$id_prenom		= ( !empty($_POST['id_prenom']) )? $_POST['id_prenom'] : 0;
$prenom_search	= ( !empty($_POST['prenom_search']) )? $_POST['prenom_search'] : '';
// -------------
// Construction de la clause WHERE
$clause_WHERE	= []; // array
$params_WHERE	= []; // array
// ------
// sexe
if( !empty($id_sexe) )
{
	$clause_WHERE[]	= " P.id_sexe = ? ";
	$params_WHERE[]	= $id_sexe;
}
// ------
// categorie
if( !empty($id_categorie) )
{
	$clause_WHERE[]	= " C.id_categorie = ? ";
	$params_WHERE[]	= $id_categorie;
}
// ------
// prenom
if( !empty($id_prenom) )
{
	$clause_WHERE[]	= " C.id_prenom = ? ";
	$params_WHERE[]	= $id_prenom;
}
// ------
// prenom (recherche)
if( !empty($prenom_search) )
{
	$clause_WHERE[]	= " C.prenom LIKE ? ";
	$params_WHERE[]	= "%".$prenom_search."%";
}
// ------
$clause_WHERE	= ( !empty($clause_WHERE) )? " WHERE ".implode(" AND ", $clause_WHERE) : "";
// $clause_WHERE est de la forme : " WHERE P.id_sexe = ? AND C.id_categorie = ? AND ..."
// -------------
// REQUETE SQL
$sql = "SELECT
	DISTINCT P.id_prenom, 
	P.nom_prenom, P.description,
	C.id_categorie, C.categorie_nom
	FROM t_prenoms P
	INNER JOIN t_categories_prenoms CP
		ON P.id_prenom = CP.id_prenom
	INNER JOIN t_categories C
		ON C.id_categorie = CP.id_categorie
	".$clause_WHERE."
	ORDER BY P.nom_prenom;";
// -------------
try{
   $stmt = $db->prepare($sql);		// preparation de la requête
   $stmt->execute( $params_WHERE ); // execution, avec les paramètres
   $data= $stmt->fetchAll(PDO::FETCH_ASSOC);
} 
catch (Exception $e) {
   //s'il y a un probleme PHP ou SQL, tout s'affichera ici
   print "Erreur ! " . $e->getMessage() . "<br/>";
}
 
 
// -------------
// AFFICHAGE
// $data est un tableau PHP, qui contient les résultats
/ on peut les retourner au format json pour affichage JS

A priori, avec ce code, tu dois pouvoir gérer tous les cas de figure.

A LIRE :

INNER JOIN

[EDIT] Tu n'as pas besoin du champ "nom_sexe" dans ta table "t_prenoms".
id_sexe suffit.

**jeicko** · 12/07/2021, 11h28

Malgré tes explications je dois avouer que je patauge. Je n'ai pas encore appréhendé la recherche de prénom car j'ai passé pas mal de temps à imaginer ma page prenom.js. J'ai essayé un peu tout et n'importe quoi a vrai dire..

Je n'arrive pas à faire la jonction entre tout ça, il y a des choses que je n'arrive pas à comprendre, et comment faire pour utiliser mon "animation" en JS tout en appelant les prénoms, dois-je remplacer chaque prénom par son id_prenom de la BDD ?

Pour le moment ma page prenom.js ne ressemble pas à grand chose, si jamais tu as encore la patience de m'aiguiller ^^:

Code JS :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
 
$.ajax({
 
    url: "fiche-prenom.php",
    method: "POST",
    data: {
        id_sexe,
        id_categorie,
        id_prenom
    },
    dataType: "JSON",
 
});
 
 
 
const someAction = (selector, firstnames) => {
 
        d = document.createElement("div");
        b = document.createElement("button");
 
        for (i in firstnames) {
            let wrap = d.cloneNode();
            let resultat = d.cloneNode();
            let precedent = b.cloneNode();
            let suivant = b.cloneNode();
 
            firstnames[i].sort((a, b) => Math.random() - 0.5);
            let tab = i;
            let rg = 0;
            resultat.textContent = firstnames[tab][rg];
 
            wrap.classList.add("generateur");
            precedent.classList.add("prec");
            suivant.classList.add("suiv");
 
            wrap.append(resultat);
            wrap.append(precedent);
            wrap.append(suivant);
 
            document.querySelector(selector).append(wrap);
 
            precedent.addEventListener("click", () => {
                rg > 0 ? rg-- : rg = firstnames[tab].length - 1;
                resultat.textContent = firstnames[tab][rg];
            })
            suivant.addEventListener("click", () => {
                rg < firstnames[tab].length - 1 ? rg++ : rg = 0;
                resultat.textContent = firstnames[tab][rg];
            })
        }
    }
 
    document.addEventListener("DOMContentLoaded", () => {
        const firstnames = {
            f_aleatoires: []
        };
        someAction("#f_aleatoires", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
                f_tendance: []
        };
        someAction("#f_tendance", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
                f_retros: []
        };
        someAction("#f_retros", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
                f_bibliques: []
        };
        someAction("#f_bibliques", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
                f_celestes: []
        };
        someAction("#f_celestes", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
            f_originaux: []
        };
        someAction("#f_originaux", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
                f_composes: []
        };
        someAction("#f_composes", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
                f_monde: []
        };
        someAction("#f_monde", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
            f_rares: []
        };
        someAction("#f_rares", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
        const firstnames = {
            g_aleatoires: []
        };
        someAction("#g_aleatoires", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
        const firstnames = {
                g_tendance: []
        };
        someAction("#g_tendance", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
            g_retros: []
        };
        someAction("#g_retros", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
                g_bibliques: []
        };
        someAction("#g_bibliques", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
                g_celestes: []
        };
        someAction("#g_celestes", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
            g_originaux: []
        };
        someAction("#g_originaux", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
                g_composes: []
        };
        someAction("#g_composes", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
                g_monde: []
        };
        someAction("#g_monde", firstnames);
    });
    document.addEventListener("DOMContentLoaded", () => {
 
        const firstnames = {
            g_rares: []
        };
        someAction("#g_rares", firstnames);
    });

**jreaux62** · 12/07/2021, 16h50

Bonjour,

1- tu auras remarqué dans ton script que le code devient répétitif à partir de la ligne 54 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
    document.addEventListener("DOMContentLoaded", () => {
        const firstnames = {
            f_aleatoires: []
        };
        someAction("#f_aleatoires", firstnames);
    });
...

La TOTALITÉ de ce code (à partir de la ligne 54) peut être généré en PHP.

Il faudra renommer le fichier en prenom-js.php, avec un entête :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<?php 
header("Content-type: application/javascript; charset: utf-8");
?>

2- par contre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const someAction = (selector, firstnames) => {
...

Il faudra transmettre les prénoms mais aussi les id_prenom.

Le problème, c'est :

qu'on n'a qu'une vision partielle de ton projet (d'autant qu'il n'y à plus le lien vers ton site)
et que tu ne mets aucun commentaire / explication dans tes scripts

Je ne vois pas non plus où tu génères les noms des catégories (pour les afficher).

**jeicko** · 12/07/2021, 17h51

Salut, merci pour ta réponse.

Le problème, c'est :
qu'on n'a qu'une vision partielle de ton projet (d'autant qu'il n'y à plus le lien vers ton site)
et que tu ne mets aucun commentaire / explication dans tes scripts

J'ai supprimé le lien car j'avais beaucoup de téléchargements depuis que je l'avais mis ici ( ce qui faussait mon compteur de téléchargement, d'autant plus que les dossiers à télécharger ne comportent pas encore tous leurs fichiers)
Dsl pour les commentaires mais j'ai compressé tous les fichiers qui sont en ligne pour améliorer la vitesse de mon site et assemblé les 3/4 de mes fichiers JS. Mais de base je n'ai pas commenté prenoms.js même dans mes fichiers perso.

Je ne vois pas non plus où tu génères les noms des catégories (pour les afficher).

C'est simplement du HTML dans index.html, exemple d'un article pour une catégorie :
(Il faut savoir que c'est un site one page avec un système d'ancrage, chaque catégorie de prénom est présente dans un article différent)

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
<article class="color-g" id="prenoms-aleatoires-garcon">
<h2 class="centrer-titre">Prénoms aléatoires</h2>
<h3 class="centrer-titre">Garçon</h3>
<!-- Générateur Prénom Garçon-->
<div aria-hidden="true" title="bouton précédent et suivant" id="g_aleatoires"></div>
<!-- Sous générateur-->
<div class="search-bla-name">
   <div class="wrap-theme">
      <div class="marge-search">
         <p>Une recherche par catégorie ?</p>
         <svg class="fleche-b" width="33.2" height="63.3"
            viewBox="0 0 33.2 63.3" xmlns="http://www.w3.org/2000/svg" version="1.1"
            preserveAspectRatio="xMinYMin">
            <title>flèche pointant vers le bas en direction du bouton de la recherche avancée
            </title>
            <use xlink:href="#img-fleche-b"></use>
         </svg>
         <form action="#recherche-avancee-garcon"> <button class="button1 color-link-i"
            type="submit"> Recherche Avancée </button> </form>
      </div>
   </div>
   <div class="wrap-bla">
      <p> Une idée de prénom ? Un prénom préféré ? <br /> Viens en discuter dans la rubrique Bla-Bla !
      </p>
      <svg class="fleche-d" width="65" height="36" viewBox="0 0 65 36"
         xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
         <title>flèche pointant vers la droite en direction du bouton de la rubrique bla-bla</title>
         <use xlink:href="#img-fleche-d"></use>
      </svg>
      <form class="no-marge" action="#bla-bla"> <button class="button1 color-link-i" type="submit">
         Bla-Bla </button> 
      </form>
   </div>
   <!-- Fairepart -->
   <div class="wrap-don">
      <div class="marge-search">
         <p>Tu n'as pas encore annoncé<br>le sexe de bébé ?</p>
         <svg class="fleche-b" width="33.2"
            height="63.3" viewBox="0 0 33.2 63.3" xmlns="http://www.w3.org/2000/svg" version="1.1"
            preserveAspectRatio="xMinYMin">
            <title>flèche pointant vers le bas en direction du bouton titoc</title>
            <use xlink:href="#img-fleche-b"></use>
         </svg>
         <form action="#fairepart-garcon"> <button class="button1 color-link-i" type="submit"> Clique
            ici </button> 
         </form>
      </div>
   </div>
</div>

Le fichier prenom.js du site :

Code JS :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
const someAction = (selector, firstnames) => {
 
    d = document.createElement("div");
    b = document.createElement("button");
 
    for (i in firstnames) {
        let wrap = d.cloneNode();
        let resultat = d.cloneNode();
        let precedent = b.cloneNode();
        let suivant = b.cloneNode();
 
        firstnames[i].sort((a, b) => Math.random() - 0.5);
        let tab = i;
        let rg = 0;
        resultat.textContent = firstnames[tab][rg];
 
        wrap.classList.add("generateur");
        precedent.classList.add("prec");
        suivant.classList.add("suiv");
 
        wrap.append(resultat);
        wrap.append(precedent);
        wrap.append(suivant);
 
        document.querySelector(selector).append(wrap);
 
        precedent.addEventListener("click", () => {
            rg > 0 ? rg-- : rg = firstnames[tab].length - 1;
            resultat.textContent = firstnames[tab][rg];
        })
        suivant.addEventListener("click", () => {
            rg < firstnames[tab].length - 1 ? rg++ : rg = 0;
            resultat.textContent = firstnames[tab][rg];
        })
    }
}
 
document.addEventListener("DOMContentLoaded", () => {
    const firstnames = {
        f_aleatoires: ['Abigaïl', 'Adèle', 'Agathe']
    };
    someAction("#f_aleatoires", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_tendance: ['Adèle', 'Agathe', 'Albane']
    };
    someAction("#f_tendance", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_retros: ['Adèle', 'Adélie', 'Aglaé']
    };
    someAction("#f_retros", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_bibliques: ['Abigaïl', 'Anabel', 'Anabele']
    };
    someAction("#f_bibliques", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_celestes: ['Alva', 'Alya', 'Amaya']
    };
    someAction("#f_celestes", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_originaux: ['Abby', 'Achille', 'Adame']
    };
    someAction("#f_originaux", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_composes: ['Abby-Gaelle', 'Abby-Gaëlle', 'An-Sophie']
    };
    someAction("#f_composes", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_monde: ['Aanui', 'Aelan', 'Ailani']
    };
    someAction("#f_monde", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        f_rares: ['Abby', 'Abbygael', 'Abbygaëlle']
    };
    someAction("#f_rares", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
    const firstnames = {
        g_aleatoires: ['Aaron', 'Abel', 'Abraham']
    };
    someAction("#g_aleatoires", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
    const firstnames = {
        g_tendance: ['Aaron', 'Achille', 'Adam']
    };
    someAction("#g_tendance", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_retros: ['Aaron', 'Abélard', 'Achille']
    };
    someAction("#g_retros", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_bibliques: ['Aaron', 'Abel', 'Abraham']
    };
    someAction("#g_bibliques", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_celestes: ['Ange', 'Angel', 'Arwen']
    };
    someAction("#g_celestes", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_originaux: ['Abélard', 'Achil', 'Adame']
    };
    someAction("#g_originaux", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_composes: ['Ange-Marie', 'Charles-Edmond', 'Charles-Elie']
    };
    someAction("#g_composes", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_monde: ['Akamu', 'Akoni', 'Anakoni']
    };
    someAction("#g_monde", firstnames);
});
document.addEventListener("DOMContentLoaded", () => {
 
    const firstnames = {
        g_rares: ['Achille', 'Adamo', 'Adams']
    };
    someAction("#g_rares", firstnames);
});

Je peux mettre ici mon code avec les commentaires si ça peut aider mais je ne vois pas quels fichiers pourraient servir..

**jreaux62** · 12/07/2021, 18h33

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

        f_aleatoires: ['Abigaïl', 'Adèle', 'Agathe']

D'où sortent ces prénoms ?
Ne me dis pas que tu les écrit comme ça, "en dur" pour chaque catégorie ?
Comment se fait la distinction "fille" / "garçon" dans ton code ?

De plus, pourquoi n'as-tu pas déjà :

un/des OBJETS JS qui contiennent la TOTALITÉ des prénoms ? les catégories ?
et dans lequel tu puisses venir "piocher" ceux dont tu as besoin pour construire telle ou telle liste ?

Utiliser les objets

En fait, ces OBJETS JS :

pourraient très bien remplacer la base de données !
et ne nécessiteraient pas de PHP.

Par contre,... il faut que tu sorte le nez du guidon...
Tu as besoin de recul pour avoir une vue d'ensemble.

Exemple :

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
const t_prenoms = {
	0: {
		sexe:1, 
		nom:'Aline', 
		desc:'Ceci est la description du prénom Aline'
	},
	1: {
		sexe:1, 
		nom:'Amandine', 
		desc:'Ceci est la description du prénom Amandine'
	},
	2: {
		sexe:2, 
		nom:'Lilian', 
		desc:'Ceci est la description du prénom Lilian'
	},
	3: {
		sexe:2, 
		nom:'Léo', 
		desc:'Ceci est la description du prénom Léo'
	},
  // ...
};

Comme on ajouté les description, plus besoin d'ajax non plus.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
console.log( t_prenoms[1].nom ); // Amandine
console.log( t_prenoms[1].desc ); // Ceci est la description du prénom Amandine
// ...

Idem pour les catégories, et la "table de liaison"

**jeicko** · 12/07/2021, 19h09

D'où sortent ces prénoms ?

Ces 3 prénoms sont le début de la liste de la catégorie Fille => aléatoire (appelé depuis l'article "Prénoms aléatoire" "Fille" => id=f_aleatoires) la liste réelle pour cette catégorie ressemble à ça :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
document.addEventListener("DOMContentLoaded", () => {
        const firstnames = {
            f_aleatoires: ['Abigaïl', 'Adèle', 'Agathe', 'Albane', 'Alice', 'Alicia', 'Alina', 'Aliona', 'Alix', 'Alma', 'Alva', 'Alya', 'Amandine', 'Amaya', 'Ambre', 'Amelia', 'Amélia', 'Anabel', 'Anabelle', 'Anastasia', 'Anaé', 'Anaïs', 'Andréa', 'Ange', 'Angelica', 'Angelina', 'Angelique', 'Angelle', 'Angèle', 'Angéline', 'Angélique', 'Anna', 'Anne', 'Apolline', 'Arielle', 'Arya', 'Assia', 'Astree', 'Aurora', 'Aurore', 'Ava', 'Axelle', 'Aya', 'Azur', 'Berenice', 'Beryl', 'Bérénice', 'Camille', 'Camillia', 'Candice', 'Capucine', 'Carla', 'Cassie', 'Cassiopee', 'Celeste', 'Celestine', 'Celia', 'Celtina', 'Chani', 'Charlie', 'Charlotte', 'Chloé', 'Clara', 'Cléa', 'Clémence', 'Constance', 'Célia', 'Céline', 'Deborah', 'Eden', 'Elaura', 'Eliana', 'Elin', 'Elisheva', 'Ella', 'Elsa', 'Elya', 'Ema', 'Emma', 'Emmy', 'Emy', 'Essie', 'Estella', 'Estelle', 'Ester', 'Esther', 'Estrella', 'Ethel', 'Eunice', 'Eva', 'Eve', 'Faustine', 'Gabrielle', 'Gaia', 'Galina', 'Giulia', 'Hanaé', 'Helen', 'Héloïse', 'Ilyana', 'Inaya', 'Inès', 'Iris', 'Jade', 'Jeanne', 'Jessica', 'Jezabel', 'Joanna', 'Jodie', 'Joelle', 'Joy', 'Jude', 'Judith', 'Judithe', 'Julia', 'Julie', 'Juliette', 'Justine', 'Kalie', 'Katalya', 'Kelliana', 'Kelyne', 'Keren', 'Keïla', 'Krystal', 'Kézia', 'Lana', 'Laura', 'Laurine', 'Lea', 'Leila', 'Lexie', 'Liana', 'Liette', 'Lila', 'Lili', 'Lilly', 'Lilou', 'Lily', 'Lilya', 'Lina', 'Lisa', 'Lisbeth', 'Lise', 'Lison', 'Liséa', 'Livia', 'Liza', 'Lizia', 'Loane', 'Lola', 'Lorelei', 'Lou', 'Louane', 'Louise', 'Louna', 'Luana', 'Lucie', 'Luna', 'Lune', 'Lya', 'Lyana', 'Lydie', 'Lyna', 'Lynn', 'Lyra', 'Lyse', 'Léa', 'Léana', 'Léane', 'Léna', 'Lénaëlle', 'Léonie', 'Maddyson', 'Magdalena', 'Maia', 'Maissa', 'Malaika', 'Malvyna', 'Manon', 'Maona', 'Mara', 'Marcele', 'Margaux', 'Margot', 'Maria', 'Marie', 'Marion', 'Marthe', 'Mary', 'Maryam', 'Mathilde', 'Maya', 'Mayari', 'Maëlle', 'Maëlynn', 'Maëlys', 'Maëva', 'Maïssa', 'Mia', 'Mila', 'Miram', 'Miriam', 'Mona', 'Mya', 'Myriam', 'Mélanie', 'Mélina', 'Nina', 'Ninon', 'Nour', 'Noémie', 'Noëlie', 'Océane', 'Olivia', 'Olympe', 'Paloma', 'Pauline', 'Phoebe', 'Priscille', 'Rachelle', 'Raihana', 'Rana', 'Raphaëlle', 'Rebecca', 'Romane', 'Romy', 'Rosa', 'Rose', 'Roxane', 'Ruth', 'Salome', 'Salomé', 'Salomée', 'Sara', 'Sarah', 'Selena', 'Selene', 'Sharon', 'Sofia', 'Solenn', 'Soline', 'Soraya', 'Stella', 'Sybille', 'Tahis', 'Tamara', 'Thais', 'Thaïs', 'Théa', 'Tiphaine', 'Tiya', 'Valentine', 'Vega', 'Victoire', 'Victoria', 'Yasmine', 'Yaël', 'Yaëlle', 'Yonah', 'Ysée', 'Zara', 'Zoé', 'Zélie', 'Élisa', 'Élise', 'Éloïse', 'Éléna', 'Éléonore', 'Émilie', 'Énora', 'Éva']
        };
        someAction("#f_aleatoires", firstnames);
    });

Ne me dis pas que tu les écrit comme ça, "en dur" pour chaque catégorie ?

Si si c'est bien ça.

Comment se fait la distinction "fille" / "garçon" dans ton code ?

Si tu parles du code JS, j'ai donc 18 catégories, 9 identiques pour chaque sexe.
Voici un exemple de 2 catégories identiques mais l'une est pour Fille l'autre pour Garçon (il y a un "f" et un "g" devant) :"#f_monde" et "#g_monde".
Même principe pour les articles en HTML

De plus, pourquoi n'as-tu pas déjà :
un/des OBJETS JS qui contiennent la TOTALITÉ des prénoms ? les catégories ?
et dans lequel tu puisses venir "piocher" ceux dont tu as besoin pour construire telle ou telle liste ?

Et bien je ne maitrise pas toutes ces subtilités, je n'ai pas appris je JS et le PHP. De base j'étais parti pour faire un site assez simpliste avec mes connaissances en HTML/CSS puis j'ai voulu l'améliorer petit à petit du coup je "bidouille" avec des tutos

Je lirai en détail ton lien ce soir.

En fait, ces OBJETS JS :
pourraient très bien remplacer la base de données !
et ne nécessiteraient pas de PHP.

Hum ok.. Je vais essayer de comprendre ce que tu me proposes dans la soirée. Je sens à nouveau que je vais patauger mais je vais faire de mon mieux

Je regarde ça en détail tout à l'heure.

**jreaux62** · 12/07/2021, 19h38

Si si c'est bien ça.
...
Si tu parles du code JS, j'ai donc 18 catégories, 9 identiques pour chaque sexe.
Voici un exemple de 2 catégories identiques mais l'une est pour Fille l'autre pour Garçon

Tu parles d'une usine à gaz !...

Et "bonjour la maintenance !"...

Tiens,
je t'invite à jouer :

Le Voyage de Nephi - Le Jeu

J'ai réalisé ce jeu en collaboration avec Bull, un dessinateur de BD (et imprimeur de métier).

ENTIEREMENT en JS et CSS.

Regarde le fichier JS :

un seul OBJET, contenant des fonctions, d'autres objets,...
(le script initial faisait 300 lignes... il en fait plus de 6700 !)

C'était MA PREMIERE EXPÉRIENCE en JS orienté objet !

**jeicko** · 13/07/2021, 10h28

Simpa ton jeu, ça a dû vous demander des centaines d’heures de travail pour créer ça !

En fait, ces OBJETS JS :
pourraient très bien remplacer la base de données !
et ne nécessiteraient pas de PHP.

Je n’arrive pas à savoir sur quelle piste je pars.. L’avantage de la base de données est la lisibilité, tout est dans des tableaux, je trouve ça plus lisible pour mon projet de 4000 prénoms. Mais ça a l’air beaucoup plus compliqué et pour le moment je suis coincé pour avancer.

L’avantage de la 2e solution, c’est peut-être la réactivité, ce sera peut-être plus réactif d’aller chercher directement les prénoms dans mon JS ?

**jreaux62** · 13/07/2021, 12h22

L'important est de se poser, et de bien réfléchir,
pour STRUCTURER correctement les données.

Je ne comprends pas trop où tu bloques, puisque tu as déjà réalisé un appel Ajax vers PHP * pour récupérer des données -> converties en JSON.

* dans js/commentaires.js à moins que ce fichier ne soit pas de toi ? [EDIT] après lecture rapide, je doute en effet que tu l'aies écrit

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

$.ajax({url:"fetch_comment.php",method:"POST",...

sous forme de fichier JSON : prenoms.json

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
const t_prenoms = [
	{
		sexe:1, 
		nom:'Aline', 
		desc:'Ceci est la description du prénom Aline'
	},
	{
		sexe:1, 
		nom:'Amandine', 
		desc:'Ceci est la description du prénom Amandine'
	},
	{
		sexe:2, 
		nom:'Lilian', 
		desc:'Ceci est la description du prénom Lilian'
	},
	{
		sexe:2, 
		nom:'Léo', 
		desc:'Ceci est la description du prénom Léo'
	},
  // ...
];

Transformer des prénoms en liens cliquables

JavaScript

Discussions similaires

Partager

Partager