Discussion :

[ThufirHawat]

Bonjour à toutes et à tous,

Depuis de nombreuses années j'écris des articles sur des films d'horreur que j'affiche sur mon site https://www.passionhorreur.ch.
C'est un site que j'ai créé de toutes pièces au fil des années avec les connaissances que j'ai pu accumuler, et je l'ai initialement confectionné en PHP en m'appuyant sur une base de donnée MySQL. Tout allait bien même si au fil des ans je ne me suis pas tenu au courant de toutes les nouveautés en PHP et certains bouts de codes commencent donc à être obsolètes.

J'ai décidé depuis une petite année de me mettre à l'apprentissage du JavaScript et j'ai pour objectif de recréer mon site en JavaScript. J'ai suivi un certain nombre de tutoriaux ou cours et j'ai appris quantité de choses qui me seront utiles pour ce faire, mais jusque-là je n'ai toujours pas trouvé comment gérer une chose fondamentale :

Comment récupérer les données de ma base de donnée MySQL pour les afficher sur les pages de mon site ?

J'ai bien trouvé des tutoriaux qui m'expliquent comment créer une page "mapage.js" dans laquelle je me connecte à la base de donnée, je lance une requête et j'affiche les données dans le terminal, mais aucun tutorial "simple" qui me montre comment faire pour que ces données se retrouvent sur une page du site, au sein du navigateur.

Est-il possible de faire cela "simplement" avec Nodejs et JavaScript ou faut-il utiliser divers Framework, du PHP ou autre pour y parvenir ?
Je patauge quelque peu actuellement, et toute aide de votre part serait la bienvenue. Si quelqu'un connaît un tutorial pouvant me mettre sur la bonne voie ou si quelqu'un peut m'indiquer grossièrement les étapes à accomplir pour m'aiguiller un peu.

D'avance un grand merci d'avoir pris le temps de me lire et merci à celles et ceux qui prendront encore un peu plus de temps pour me répondre.

Thufir Hawat

[Gobble]

Il te faut choisir une stack nodejs par exemple :

nodejs +Express (serveur web) +mongoDB (stockage des données) + un framework JS si tu le souhaites (React, Vue...)

Fais quelques recherches sur la MERN / MEVN stack.

Mais il existe différentes approches, le choix important est de savoir si tu souhaites une base de donnée relationnelle SQL en back ou une base de donnée orientiée document (NoSQL, JSON). ça dépends du besoin.

[ThufirHawat]

Merci Gobble pour ta réponse.

Idéalement je préfèrerai, du moins dans un premier temps, conserver ma base de donnée SQL.
J'aurai aimé apprendre à faire tout cela de la manière la plus "simple" possible. Et par simple j'entend avec le plus de contrôle sur le code employé. Donc éviter trop de framework et faire le maximum en vanilla JavaScript. Bêtement pour être en mesure de comprendre tout ce qui se déroule dans mon script, quitte à modifier par la suite lorsque j'aurai une meilleure maîtrise de JavaScript et de tout ce qui gravite autour (les framework notamment).

Je vais jeter un coup d'oeil à MERN / MEVN Stack comme tu me le suggères.

Pour la base de donnée, elle contient déjà près de 2000 films, des mots-clés, des réalisateurs, genres, etc. et je ne sais effectivement pas quel type de base de donnée est le plus adapté à mes besoins. C'est quelque chose qu'il va me falloir découvrir et tester.

Merci encore une fois d'avoir pris la peine de me répondre.

[Gobble]

De rien,

si tu viens de l'univers PHP, reste sur une base relationnelle MySQL, et regarde pour renvoyer les données au front-end via du JSON et renvoyer au server les requêtes via du vanilla JS et fetch ou axios.

Un petit lien pour travailler avec nodejs et une base MySQL

https://practicalprogramming.fr/nodejs-mysql

Happy coding

[grosfaignan]

si tu veut le faire en nodejs, il faudra que tu charge dans ta partie backend un gestionnaire de base de donnée comme par exemple celui ci : https://www.npmjs.com/package/mysql
et que tu fasse tes requête a partir de la.

mais rien ne t'empêche d'utiliser d'autres solutions comme que ce soit en php ou javascript

[ThufirHawat]

Bonjour à vous deux et merci pour vos réponses.

Entre-temps j'ai quelque peu progressé dans ma compréhension de Nodejs mais je suis encore loin du compte.

J'ai effectivement lu la documentation pour le module "mysql" (comme suggéré par grosfaignan) et appris à faire pas mal de choses (pas encore ce que je désire exactement, mais c'est toujours ça).

Merci Gobble pour le lien, je vais me plonger dedans dans les minutes qui suivent. Pour le moment j'ai l'impression que je vais devoir apprendre à utiliser le module "express" tant tout le monde semble l'utiliser et le conseiller pour la création/gestion de site via Nodejs.

Je reviens très rapidement poster la suite de mes aventures car je sens que je vais avoir des questions.

Encore Merci

Thufir Hawat

[ThufirHawat]

En utilisant le module "mysql" je suis donc désormais capable de me connecter à ma base de donnée (uniquement sur "localhost", impossible de me connecter à ma base de donnée se trouvant chez mon hébergeur), à récupérer des données dans une table et à afficher ces données dans le terminal.

Mais comment "transmettre" ces données à un fichier html pour les afficher sur une page de mon site ?

D'avance merci si vous êtes en mesure de me mettre sur la piste.

Thufir Hawat

[Gobble]

Hello,

Avec un peu de retard, j'ai trouvé ce lien pertinent pour faire un CRUD avec vuejs + node / express + mysql. Il a le mérite de poser les bases du fonctionnement du système.



Le front-end consomme l'api via des appels ajax (axios / fetch) servie par node et express. La base est connectée à express via un ORM qui fait le pont avec la base MySQL.

https://www.bezkoder.com/vue-js-node...-crud-example/

[ThufirHawat]

Merci Gobble pour ce lien, j'en prends bonne note.

Cela nécessite l'utilisation du Framework Vue ce que j'aurai préféré éviter (en tout cas dans un premier temps), mais si c'est l'unique manière de le faire, je finirai par m'y résoudre.
Je suis en train d'apprendre à maîtriser AJAX et je vois déjà en quoi cela va m'être utile, mais je pense que je peux encore creuser et pousser plus loin.

En tout cas merci d'avoir pris le temps de chercher et de m'aider. Et bonne fêtes !

Thufir Hawat

[ThufirHawat]

Re bonjour à tous !

Je reviens plus tôt qu'espéré pour vous parler de la "solution provisoire" que j'ai trouvé. Je ne l'ai pas testé et développé jusqu'au bout, mais la base fonctionne et je dois pouvoir obtenir le reste avec suffisamment d'heures de réflexions et de recherches.

Je ne parvenais pas à gérer les données récupérées dans la base de donnée pour les "injecter" dans mon code JavaScript. Donc pour le moment, je m'appuie encore sur PHP pour récupérer les données et je les transmets à JavaScript avec une requête AJAX. Voici mon code :

Le fichier "traitement.php" qui se connecte à la base de donnée et récupère les 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
27
28
29
30
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db = "nom_de_la_bdd";
 
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
// Create connection
$conn = new mysqli($servername, $username, $password, $db);
$conn->set_charset('utf8mb4');
 
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
 
// requête
$req = "SELECT * FROM ph_genre LIMIT 10";
 
// exécution requête
$don = mysqli_query($conn, $req) or die ("Erreur dans la récupération des données");
 
// partie un peu bricolée, on peut surement faire mieux, mais ça fonctionne
$tbl_res = "[";
while($tbl = mysqli_fetch_assoc($don)){ 
  $tbl_res = $tbl_res . json_encode($tbl, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES).',';
}
$tbl_res = substr($tbl_res, 0, -1) . "]";
echo $tbl_res;
?>

Et le code JavaScript contenu dans le fichier HTML qui affiche ensuite les données :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script>
    var oReq = new XMLHttpRequest(); // New request object
    oReq.onload = function() {
 
        const resultat = JSON.parse(this.responseText);
        console.log(resultat[0].genre);
    };
    oReq.open("get", "traitement.php", true);
    oReq.send();
 
</script>

Ce code est loin d'être parfait, n'hésitez pas à me faire de commentaires si vous voyez une meilleure manière de procéder.
Pour le moment je vais probablement tenter de refaire mon site en utilisant cette astuce. Mais par la suite il me faudra tout de même apprendre comment me passer de PHP.

Merci pour votre aide.

Thufir Hawat