‫Instructeur : Passons maintenant à la première
‫partie de la création du site Web de la ferme de
‫nœuds dynamique en créant simplement
‫les modèles qui contiendront les données réelles.
‫Et rappelez-vous que notre objectif est de créer ce
‫genre de site Web dynamique où nous avons une vue d'ensemble où
‫nous avons tous les produits, puis
‫chaque produit a sa page de détail comme je
‫vous l'ai montré précédemment.
‫Et ces données ici sont bien sûr lues à partir du fichier json,
‫donc si nous modifions le fichier json, par exemple,
‫en supprimant l'un de ces produits puis en rechargeant cette
‫page, alors ce produit devrait disparaître d'ici.
‫Ou si nous avons modifié certaines de ces données ici ou le nom,
‫eh bien, cela devrait être mis à jour ici sur le site.
‫Encore une fois parce qu'il s'agit d'un site
‫Web dynamique construit à partir des données contenues dans le fichier json.
‫Donc, comme
‫je l'ai mentionné, la première étape consiste à créer
‫ces modèles, un pour cette page de
‫présentation et un pour la page de détail du produit.
‫Et nous allons commencer par la page de détail, et
‫je vais créer ces modèles
‫en fonction de ces pages Web de données que nous
‫avons ici dans le dossier des modèles.
‫Jetons donc un œil à eux.
‫Nous avons donc une vue d'ensemble et un produit, et encore une fois,
‫nous allons commencer par le produit. html.
‫Nous avons donc ici le nom du produit puis cette
‫image ici qui est en fait un emoji, mais cela n'a pas vraiment d'importance.
‫Donc, au lieu d'avoir à demander les
‫vraies images pour tous ces différents produits, j'ai
‫choisi d'utiliser des emojis.
‫C'est beaucoup plus facile.
‫Même chose en fait pour le style.
‫J'ai donc tout le style CSS intégré dans les pages html afin que
‫nous n'ayons pas à faire plusieurs
‫demandes pour obtenir ces différentes données, n'est-ce pas ?
‫Parce qu'en
‫fait, chaque fichier différent déclenchera une requête différente, d'accord ?
‫Rappelez-vous avant où nous avons eu la demande
‫pour l'icône cinq, n'est-ce pas ?
‫Nous avons donc vu une demande pour la racine, donc pour la
‫page principale, puis une demande pour cette image, et cela
‫signifie que chaque élément,
‫donc chaque élément faisant partie du site Web,
‫recevra sa
‫propre demande, et nous devra alors gérer cela,
‫et nous ne voulons
‫pas le faire, et j'ai donc simplement intégré le style dans ces pages html.
‫D'accord, alors voici un tas de style, style, style, et puis
‫ici nous avons le, eh
‫bien, le nom du produit quelque part.
‫Ah ouais, ici, c'est donc le nom du produit.
‫Voici l'image du produit, qui n'est
‫encore qu'un emoji, mais elle vient ici de ce champ d'image.
‫Nous avons donc ce champ appelé image.
‫Droit?
‫Ensuite, nous avons d'où il vient, certains des ingrédients,
‫et le prix, et aussi la description ici, d'accord ?
‫Mais encore une fois, tout cela vient de ces différents domaines.
‫Jetons donc un œil aux champs dont nous disposons.
‫Donc nom du produit, image, provenance, nutriments, quantité, prix, qu'il soit
‫bio ou non, et la description.
‫Donc, ce que nous allons faire maintenant, c'est
‫essentiellement remplacer tous ces éléments que nous voulons ajouter
‫dynamiquement par un espace réservé, et
‫nous remplacerons ensuite cet espace réservé par
‫notre code par la vraie donnée, d'accord ?
‫Commençons donc ici par le nom du produit,
‫et je vais donc le
‫supprimer, puis mettre un espace réservé ici.
‫Et je peux faire tout ce que je veux pour un espace réservé.
‫J'aime juste aller dans ce cas avec quelque chose comme ça.
‫Donc...
‫Nom du produit, puis pourcentage, puis les accolades.
‫Encore une fois, cela pourrait être tout ce que
‫nous voulions, mais nous
‫voulons trouver quelque chose qui n'est probablement
‫pas sur la page afin de ne rien remplacer
‫de mal donc tout ce que nous ne voulons pas réellement remplacer, d'accord ?
‫Et je pourrais mettre quelque chose comme ça ici, d'accord ?
‫Et puis remplacez tout ça, mais je pense que, comme ça,
‫ça a l'air sympa, et c'est facile à reconnaître.
‫Et donc tout ce que nous avons à faire
‫est d'aller de l'avant et de
‫mettre tout cela ici, et je vais ensuite remplacer, bien sûr, ces noms.
‫Nous avons donc ici les nutriments.
‫Ici, nous avons la quantité.
‫Et là j'ai le prix.
‫Ici, nous avons à nouveau le prix, voyez-vous.
‫Et le prix n'est que le nombre, d'accord ?
‫Le signe de l'euro ici reste juste là
‫parce que le prix que nous avons n'est en fait qu'un nombre.
‫Jetons un coup d'œil à cela ici en json.
‫Nous n'en avons donc que 6. 50 mais pas la monnaie.
‫Et en fait la même chose ici, alors saisissons-la et
‫copions-la ici très rapidement, et oui, en fait,
‫j'ai oublié de remplacer celle-ci, donc
‫c'est la source.
‫Et écrivons à partir de, pas en majuscules, pour que ce texte
‫ait un peu plus de sens.
‫Ainsi, par exemple, du Portugal ou d'Espagne ou autre.
‫Oh, qu'est-ce que c'est ici ?
‫D'accord, je suppose que je viens d'écrire au milieu du nom du produit.
‫Donc nutriments.
‫D'accord.
‫Oh, et ici, nous avons, bien sûr, la description,
‫alors remplaçons-la également.
‫Oh, bien sûr, j'ai besoin de récupérer celui-ci
‫et
‫donc la description.
‫Ensuite, nous avons ces images, donc l'avocat, et donc
‫j'appuie sur quelques commandes V, je les
‫colle ici, et je peux donc les éditer ici en
‫même temps.
‫D'accord, puis l'image et, oh, quelque chose ici dans le titre.
‫Nous voulons également remplacer l'image ici et le nom
‫du produit également.
‫Donc.
‫Nom du
‫produit ici et
‫ici l'image pour que celui-ci soit également remplacé dynamiquement.
‫Très bien, maintenant encore une chose qui est
‫un peu plus complexe.
‫Où est-ce?
‫Très bien, c'est ici.
‫Ainsi, certains produits sont biologiques et d'autres non.
‫Et donc il y a une classe dans le CSS
‫qui sera ajoutée à tous ces éléments quand ils ne sont pas organiques, d'accord ?
‫C'est donc cette classe ici.
‫Donc quand ce n'est pas bio, alors ça ne doit pas être
‫affiché, donc ce badge bio ici.
‫Et juste pour vous montrer de quoi
‫je parle, le badge bio est ce truc ici, d'accord ?
‫Donc, nous ne voulons pas
‫afficher cela au cas où il serait faux dans le json, donc ce
‫que nous allons faire ici est d'ajouter un autre
‫espace réservé ici ou à l'intérieur de
‫la classe, et donc je vais appeler celui-ci non
‫organique .
‫Et vous verrez pourquoi un peu plus tard, d'accord ?
‫Lorsque nous le remplacerons, cela aura un peu plus de sens pour vous.
‫Très bien, donc je pense que celui-ci est
‫terminé, et j'ai simplement écrasé tout ce que nous avions.
‫Alors permettez-moi maintenant d'appeler
‫ce modèle de produit, d'accord ?
‫Donc celui-ci est fait.
‫Passons au suivant, la vue d'ensemble.
‫Et celui-ci va en fait être un peu différent,
‫et laissez-moi vous montrer pourquoi.
‫Encore une fois, nous avons tous les SCC intégrés ici,
‫et maintenant nous avons ce conteneur
‫de cartes, puis pour chacun des produits, nous avons une carte.
‫Donc chacune de ces cartes ici a cette étiquette de figurine, n'est-ce pas ?
‫Maintenant, nous ne savons pas combien
‫de ces cartes seront ici dans cet aperçu, n'est-ce pas ?
‫Imaginez que nous ayons 10 produits dans le json.
‫Ensuite, nous avons besoin de 10 de ces cartes.
‫Mais imaginez que nous n'en ayons qu'un ou deux.
‫Bon alors, on ne veut pas toutes les 10 cartes mais seulement deux.
‫Alors comment va-t-on faire ça ?
‫Eh bien, nous allons en fait créer juste un autre modèle où
‫il n'y a qu'une seule carte, et nous
‫inclurons ensuite un de ces modèles pour
‫chacune des cartes que nous
‫voulons, donc chacun des produits dans le fichier json.
‫D'accord, ça a du sens ?
‫Appelons cela ici l'aperçu du modèle.
‫Et je vais aller de l'avant et créer la carte modèle.
‫Donc, ce que je vais faire ici, c'est maintenant, comme je l'ai mentionné, maintenant c'est
‫de retour au sommet,
‫alors je vais de l'avant et prends un chiffre.
‫C'était trop.
‫Et collez-le ici.
‫Alors baissez un peu ça.
‫D'accord, donc chaque carte a maintenant son propre chiffre.
‫D'accord, et maintenant, ce que je vais
‫faire, c'est supprimer toutes les cartes d'ici et
‫créer un espace réservé ici également.
‫Fiches produits.
‫D'accord?
‫Encore une fois, plus tard dans
‫notre code, nous créerons ensuite autant de cartes que nécessaire ici.
‫Par exemple, si nous avons
‫cinq produits, nous créons cinq cartes comme celle-ci.
‫Nous allons ensuite les rassembler en une
‫seule chaîne, puis remplacer les fiches produits par
‫cette chaîne qui contient toutes ces différentes fiches, d'accord ?
‫Donc en fait, nous en avons fini avec celui-ci.
‫D'accord?
‫Parce que la plupart
‫des choses se passent à l'intérieur de la carte modèle.
‫Donc rien d'autre à remplacer ici.
‫Je viens juste ici pour copier ceci ici,
‫et maintenant c'est très simple pour
‫nous de remplacer ce dont nous avons besoin ici.
‫Voici donc l'image, et nous l'avons en fait deux fois.
‫D'accord, ça le rend un peu plus joli.
‫Image, image, alors là on a le nom du produit, tu te souviens ?
‫Ici, à
‫cet endroit, nous aurons à nouveau l'espace réservé non organique, et encore une fois, celui-ci
‫aura plus de sens pour vous un peu plus tard.
‫Plus bio, puis la quantité ici.
‫Ensuite le prix.
‫Nous devons donc également créer le lien ici.
‫Donc celui-ci ici, donc l'élément
‫A, au cas où vous n'êtes pas vraiment familier
‫avec html, l'élément A est pour un lien.
‫Alors laissez-moi vous le montrer dans un exemple concret.
‫Donc, lorsque nous survolons ici ce lien,
‫là-bas dans le coin inférieur gauche, donc
‫ici, vous verrez qu'il s'agit d'un produit slash et que
‫l'ID est égal à zéro.
‫Et celui-ci est ID égal à un, ID égal à deux.
‫D'accord, et si nous cliquons dessus, nous le voyons en fait ici.
‫Donc, slash product puis ID est égal à zéro,
‫et cet ID ici est exactement l'ID que nous avons dans le json.
‫D'accord, alors celui-ci ici.
‫Donc l'avocat en est un, le chèvre en a un.
‫Désolé, l'avocat a zéro, bien sûr.
‫Le brocoli en a deux et ainsi de suite.
‫Et donc ici en fait, nous devons construire le lien.
‫Donc produit, et bien sûr, pas en majuscule.
‫Donc produit, et l'ID est
‫ID.
‫D'accord?
‫Nous devons donc remplacer cet espace réservé d'ID ici par
‫le bon numéro.
‫Donc zéro, un, deux, trois, quatre, cinq, et ainsi de suite
‫selon le nombre de produits.
‫Alors supposons que nous ayons un fromage ici, d'accord ?
‫Revenons ici.
‫Eh bien, alors l'image sera celle-ci ici, le
‫nom du produit sera celui-ci et l'ID en sera un.
‫D'accord, et ceci ici se
‫traduira alors en ID égal à un et à notre gestionnaire ici.
‫Donc, ce gestionnaire de serveur ici s'occupera d'aller
‫à la bonne page lorsque l'ID de produit est un, d'accord ?
‫Cette logique n'est donc pas encore mise en œuvre, mais bien
‫sûr, nous allons le faire dans les deux prochaines conférences.
‫Nous avons donc maintenant les modèles réellement construits, et passons
‫donc à la vidéo suivante où nous commencerons
‫réellement à remplir les modèles et à renvoyer
‫la page finale au navigateur.