Discussion :

[Aygo-69]

Salut, Je suis en L2 informatique et on a un Projet en javascript à faire, qui est un forum...

Le problème c'est que les profs sont complètement *** et personne comprend rien à ce ***** de language étant donnée qu'on a aucune explication.
Je vous résume rapidement pour vous faire une idée de la chose :

• CM (Cour Magistraux) ensuite on applique en TP/TD.
• CM, le prof est complètement bourrée (ce n'es pas une blague) et deviner qui on a en TP/TD... bah le prof de CM...

Bref, on doit faire un Projet qui doit être un forum avec une 20aine de fonctionnalité donnée qui doivent marché bien-sûr. On a 1 mois.
Dieu merci une chose qu'il a bien fait c'est que tout est complet pour l'explication du projet.

Ma question est es-ce que vous pouvais m'aider à le faire, je ne veut pas que vous le fassiez complètement et que c'est finis car ce serais inutile je veut au moins comprendre comment et savoir l'expliquer par la suite pour avoir une base minimum dessus.

Merci d'avance pour votre aide.

[Sodium]

Heuuuh bon déjà un forum en JavaScript ça part mal. JavaScript est à la base un langage client, il ne rien enregistrer dans une base de données tout seul.
Donc soit vous êtes supposés faire du NodeJS (JavaScript côté serveur) mais pour des débutants ça serait absurde vu le niveau de difficulté, soit vous êtes supposés utiliser un langage serveur comme PHP et ça serait bien de le préciser.

[Aygo-69]

On a déjà un début de projet donner qui est la page donc forum en HTML/CSS .
La page HTML est une maquette statique HTML/CSS et on doit ensuote faire une génération dynamique sur un serveur qui nous ai donnée.

En 1ere étape il nous dit de le faire dans serveur ( je met ce qu'il nous dit de faire ce sera surement plus clair que ce je raconte moi ) :


Ensuite, vous devez dynamiser votre maquette : tout le HTML statique sera générée à partir des collections Projet-2019-users.json Projet-2019-topics.json lues en local avec l'API fetch (voir plus loin pour le détail de ces données).

Il est très important de travailler dès cette partie en asynchrone, le passage à un vrai serveur à la place des fichiers locaux sera facilité.

Séparez les fonctions de rendu qui ont la charge de mettre à jour l'interface web quand la collection est retournée par le serveur des fonctions de gestions des événements (handlers) qui seront associées aux différents éléments de l'interface.
N'utilisez pas de variables globales dans votre programme : représentez l'intégralité de l'état de votre application (liste des sujets et de leurs contributions, tris choisis, sujet sélectionné, clef d'API de l'utilisateur) dans une structure State (à compléter) qui sera explicitement passée en paramètre de toutes vos fonctions de rendu et de gestion des événements.

[Sodium]

Oui donc tu veux qu'on fasse le devoir à ta place en gros

[Aygo-69]

Bah j'aimerais juste qu'on m'explique si vous pouvez parceque oui je comprend juste rien là... Je vous l'ai dit c'est comme si j'en avais limite pas fait...

[Sodium]

Ben, euh, oui, mais en même temps ce n'est pas à nous de t'expliquer le cheminement complet pour développer un forum en AJAX, d'autant plus que si tu pars de zéro c'est déjà à un niveau que pas mal de professionnels débutants n'ont pas.
Donc soit d'autres élèves de la section ont mieux compris que toi et dans ce cas vois avec eux pour te faire aider, soit vos profs sont effectivement des manches qui vous donnent des trucs d'une difficulté absurde par rapport à votre niveau et dans ce cas il faudrait aller voir la direction.

Sinon eh bien regarde des tutos sur jQuery pour comprendre comment injecter du contenu dans le DOM facilement et des tutos sur AJAX pour les échanges de données.

[Watilin]

Bonjour,

pour commencer, essaye de mettre de côté ton ressentiment envers le / la / les profs. Je sais que parfois il y a simplement des profs qu’on ne peut pas supporter, il faut faire avec. Tu as eu une bonne idée de venir demander de l’aide ici.
Garde la tête claire, aborde les problèmes un par un et ça se passera bien.

Je voudrais réagir à un truc que Sodium a dit :

[…] vous êtes supposés faire du NodeJS (JavaScript côté serveur) mais pour des débutants ça serait absurde vu le niveau de difficulté […]

Non, Node.JS n’est pas plus dur que le JS côté client, on y trouve les mêmes concepts, en particulier les fonctions asynchrones. J’ai même envie de dire : c’est plus facile de commencer par Node.JS qui utilise massivement l’asynchrone, comme ça on maîtrise le concept et on n’a pas de problème après quand on le rencontre côté client.

Mais en l’occurence, la première étape du projet ne parle pas encore de serveur (si j’ai bien compris). Il s’agit simplement de récupérer du JSON via la fonction fetch, et pour ça il faut commencer par tester un code aussi simple que possible.

On va s’aider de la console. J’espère que ton ou ta prof vous a parlé de la console, sinon c’est criminel. La console s’ouvre avec la touche F12, et en cliquant si nécessaire sur l’onglet « console ». Tu peux tester du code directement dans la zone de saisie de la console.

Code :

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

1
2
3
fetch('Projet-2019-users.json') // url à ajuster si besoin
  .then((response) => response.json())
  .then((json) => console.log(json));

Pour la théorie, tu as sans doute vu ça en cours mais ça ne fait pas de mal d’avoir une autre version. Voici la mienne :
fetch renvoie une promesse (objet Promise). Les promesses ont une méthode .then() qui permettent d’y attacher une fonction à toi, qui sera appelée « plus tard ». Ce « plus tard » est ce qui fait le caractère asynchrone du script : tu ne sais pas quand ta fonction sera appelée, mais tu sais qu’elle sera appelée au bon moment, c’est-à-dire quand les données sont arrivées.

Dans le cas présent, il y a deux étapes : d’abord on reçoit la réponse à notre requête (le premier .then()), mais cette réponse n’est pas mise en forme. On la met en forme avec la méthode .json(). Cette opération est également asynchrone : elle renvoie une autre promesse, il faut donc faire un second .then().
Une fois que les données sont mises en forme en JSON, on les affiche simplement dans la console avec la fonction console.log().

Note : (response) => response.json() est la forme raccourcie de (response) => { return response.json(); }.

Si tu arrives à voir du JSON dans la console, tu auras franchi une étape importante. Après ça il suffira de remplacer l’instruction console.log(json) par du code qui fait des vrais trucs, par exemple insérer les données dans le HTML de la page.

Code :

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

1
2
3
4
5
6
...
  .fetch((json) => {
    // console.log(json);
 
    ... // les vrais trucs
  }

Pour parcourir l’objet JSON et insérer les données dans la page, tu auras probablement besoin de quelques outils :

• la boucle for...of
• textContent
• insertAdjacentHTML ^(*)

(Si tu es déjà familier avec les objets DOM, utilise createElement et insertAdjacentElement à la place de insertAdjacentHTML, ça sera plus efficace et, à long terme, ça t’aidera à mieux structurer ton code.)

Prends l’habitude d’utiliser le MDN, c’est une très bonne documentation

Mes conseils personnels pour bien débuter en JS :

• utilise toujours le mode strict ;
• utilise toujours const ou let, jamais var ;
• charge toujours les pages avec la console ouverte.

Je te laisse avec ça pour l’instant, car je n’ai pas assez de détails pour t’aider sur le reste (ces histoires de gestionnaires d’évènements et de structure State). Essaye d’aller aussi loin que possible, et si tu as un problème, reviens nous voir, et surtout : poste ton code et les messages d’erreur, c’est avec ça qu’on peut t’aider !

Bon courage

[Aygo-69]

Je te remercie !! Je vais essayer d'avancer et voir ou je bloque etc et je reviendrais sûrement souvent
Encore un grand merci à toi, je vais suivre tes conseils !

[Marco46]

Crée un profil GitHub ou GitLab, commence par pondre quelque chose, et ensuite si t'as de la chance peut être que t'auras des gens qui prendront du temps pour t'aider.