Discussion :

[jeicko]

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]

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]

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]

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]

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]

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".