‫Instructeur : remplissons maintenant chacun des éléments de
‫la carte avec les données correctes pour chacune des visites.
‫Donc, juste pour récapituler rapidement.
‫Dans une dernière vidéo, nous avons commencé par créer cet élément
‫principal et un élément de conteneur à l'intérieur d'un conteneur
‫div, puis à l'intérieur
‫de ce conteneur, nous voulons un de ces
‫éléments de carte pour chacune des visites du tableau
‫que nous transmettons à ce modèle.
‫Et pour cela, nous utilisons un tableau Pug qui
‫fonctionne comme ceci.
‫Alors, quel est chaque mot-clé
‫ici et le résultat de cela ressemblait à ceci, très bien.
‫Et donc ce que nous allons faire
‫maintenant, c'est essentiellement remplir chacune de ces cartes ici avec les données réelles.
‫Et commençons ici par le nom de la tournée.
‫Alors, rappelez-vous comment nous mettons la valeur d'une variable à
‫l'intérieur d'un élément.
‫Eh bien, nous utilisons égal et puis dans ce cas, tour.
‫Donc, le nom de
‫la variable dans l'itération de la boucle actuelle, à droite.
‫Et donc c'est un document de visite et puis le nom du point, rappelez-vous.
‫Alors, vérifions cela dans la boussole très rapidement.
‫Donc, ici, nous avons quatre
‫tournées et ce sont
‫donc toutes les données dont nous allons avoir besoin maintenant, d'accord.
‫Et en commençant par le nom ici, d'accord.
‫Et donc si nous rechargeons maintenant notre page, cela devrait en
‫fait être reflété ici.
‫Et c'est donc là que la magie commence et que cela a fonctionné.
‫Et c'est donc la première fois que nous voyons
‫vraiment les données de la base de données être réellement
‫rendues sur le site Web.
‫Donc, ici, nous avons le nom de chacune des tournées
‫et encore une fois, cela sort maintenant directement de notre base de données.
‫Donc, fantastique, c'est vraiment cool
‫et continuons maintenant à construire cette carte.
‫Donc, ici à propos de l'image maintenant.
‫Mettons également le texte alternatif au nom de la tournée.
‫Maintenant, nous ne pouvons pas simplement mettre un nom de point de tournée
‫ici car nous sommes à l'intérieur d'une chaîne
‫et cela ne fonctionne donc pas.
‫Maintenant, en
‫même temps, si nous le
‫faisons comme ça, cela ne fonctionnera pas non plus car ici,
‫cet Alt attend en fait une chaîne, d'accord.
‫Nous avons donc besoin de quelques guillemets ici autour de cette variable.
‫Et donc, le moyen le plus simple
‫de le faire est d'utiliser des chaînes de modèle ES6, d'accord.
‫Donc, juste comme ceci et encore, c'est parce
‫que cela s'attend en fait à ce qu'une chaîne soit entrée
‫et donc avec cela, bien sûr, nous créons une chaîne.
‫Ensuite, spécifions l'image ici, d'accord.
‫Alors, jetons à nouveau un coup d'œil à
‫la boussole pour voir à quoi ressemble cette image de couverture.
‫Et donc nous avons une propriété appelée image
‫cover et ici nous n'avons que le nom de l'image elle-même.
‫Donc, pas le chemin vers l'image. = et
‫de sorte que nous devrons en fait spécifier manuellement, d'accord.
‫Donc, mais ce qui compte ici, c'est que cela
‫s'appelle une couverture d'image.
‫Et donc débarrassons-nous de tout cela.
‫Commencez par créer une chaîne de modèle,
‫puis faites le tour de la couverture de l'image par points et
‫nous devons maintenant
‫déterminer le chemin complet vers cette image, d'accord.
‫Et comme nous le savons déjà, les données d'image
‫se trouvent dans le dossier public.
‫Donc, le dossier à partir duquel tous les
‫actifs statiques vont être
‫servis et donc ici, nous avons des images.
‫Et puis nous avons un dossier.
‫Un pour les visites et un pour les utilisateurs, d'accord.
‫Et donc à l'intérieur de chacune de ces
‫visites, nous avons ensuite les trois images et une photo de couverture.
‫Donc, ça va ressembler à quelque chose comme ça.
‫Et donc le chemin ici est des visites de points d'image ou des visites de barres
‫obliques, puis une barre oblique du nom de l'image, super.
‫Cela devrait donc rendre les
‫sites Web entiers encore plus beaux maintenant, oui.
‫Maintenant, ça commence vraiment à prendre vie.
‫Alors, c'est fantastique.
‫Cela me fait vraiment du bien à
‫chaque fois que cela fonctionne.
‫Quoi qu'il en soit, occupons-nous maintenant du reste des
‫données qui, bien sûr,
‫ont toujours la même apparence sur toutes ces cartes, d'accord.
‫Et donc utilisons maintenant les données de notre collection
‫pour construire cette chaîne ici.
‫Donc, vous voyez qu'il s'agit en fait
‫d'une combinaison de données différentes.
‫Donc, nous avons la difficulté et la durée du tour et
‫créons donc ici maintenant une chaîne de modèle.
‫Donc, attribuez essentiellement cette chaîne de modèle à cet élément.
‫Et donc nous commençons ici avec la difficulté du point de
‫visite, rappelez-vous, puis l'espace et ensuite la durée de la visite,
‫la durée du point de la visite d'une journée, d'accord.
‫C'est donc la traduction de ce contenu.
‫Ensuite, nous avons ici le résumé de la tournée, d'accord.
‫Donc, résumé des points du tour égal, d'accord.
‫Ensuite, nous avons le lieu de départ et donc cette tournée
‫par exemple commence à Banff Canada
‫et donc encore une fois jetons un coup d'œil
‫à la boussole ici juste pour voir
‫à quoi ressemblent les données ou en
‫fait nous n'avons pas besoin de toujours basculer
‫d'avant en arrière boussole.
‫Nous pouvons également simplement ouvrir ou importer des données ici.
‫Ainsi, lors des tournées, nous pouvons simplement utiliser ces données
‫ici au lieu de toujours utiliser la boussole.
‫Donc, avant d'utiliser le résumé maintenant,
‫allons de l'avant et utilisons l'emplacement de départ qui
‫est en fait ici.
‫Donc, maintenant, nous voulons une description du point de l'emplacement de départ, d'accord.
‫Donc, la description du point de l'emplacement de départ du point de visite.
‫Et maintenant, vous commencez
‫à comprendre pourquoi il était logique de
‫créer toutes ces données différentes que nous avons créées ici.
‫Bon, nous allons ensuite utiliser pour commencer les dates et
‫donc garder à l'esprit.
‫Que c'est un tableau, d'accord.
‫Parce que maintenant, ce que nous voulons dans
‫notre aperçu, c'est essentiellement la date de début de la prochaine tournée.
‫C'est donc ce que signifie l'icône avec un calendrier
‫dans ce cas.
‫Donc, c'est essentiellement le
‫premier élément de ce tableau de dates de début.
‫Donc, commencez les dates à la position 0.
‫Ensuite, nous avons cette donnée qui indique combien d'arrêts il
‫y a dans ces circuits.
‫Et donc fondamentalement,
‫cela signifie combien d'emplacements nous avons
‫et donc encore une fois, nous allons utiliser les
‫emplacements et cette fois pas
‫l'emplacement de départ mais vraiment ces emplacements
‫et donc si vous voulez spécifier combien d'emplacements nous avons.
‫Eh bien, nous devons compter la longueur de ce tableau, d'accord.
‫Et si simple aussi.
‫Donc, égalisez puis définissez-le sur cette chaîne
‫de modèle car nous voulons
‫également ajouter cet arrêt et ainsi les emplacements des points de tournée, la
‫longueur des points, les arrêts et enfin le
‫nombre de personnes faisant partie de chacun des groupes.
‫Donc, les personnes qui peuvent participer à une tournée et
‫qui sont stockées dans la
‫tournée mais la taille maximale du groupe, souvenez-vous.
‫Et puis les gens.
‫Super, donc cette partie est terminée maintenant
‫et revenons donc à notre site Web et
‫testons cela.
‫Et oui belle au moins presque belle parce que ce rendez-vous
‫a l'air un peu bizarre ici.
‫Donc, nous voulons vraiment juste le 21 juin, donc nous n'avons pas
‫besoin d'être si précis
‫ici dans cet aperçu, d'accord.
‫Et donc ce que nous voulons, c'est ressembler à juin 2021 et
‫donc en ce moment c'est tout ce gâchis et
‫donc réparons cela et
‫heureusement c'est en fait très
‫facile avec JavaScript qui inclut quelques fonctions
‫très agréables pour travailler avec des dates.
‫Et gardez à l'esprit que chacune de ces dates
‫de début ici est vraiment un objet
‫date dans une base de données et donc
‫maintenant nous pouvons utiliser une fonction comme celle-ci pour une chaîne locale, d'accord.
‫Donc, fondamentalement, il convertira cette date en
‫une belle chaîne lisible
‫et ici, nous pouvons maintenant passer une option pour la langue.
‫Et donc c'est l'anglais pour les États-Unis
‫et puis aussi un objet avec quelques options et
‫donc ici nous pouvons maintenant spécifier que nous voulons
‫qu'un mois soit long.
‫Donc, au lieu d'une simple abréviation comme celle que
‫nous avions ici.
‫ainsi, un avril, un
‫août, il l'imprimera maintenant comme ceci.
‫Donc, vraiment le nom du mois entier et d'accord, puis
‫dire aussi que l'année doit être numérique et si vous voulez
‫en savoir plus sur
‫cette fonction ici, alors allez-y et Google ça, d'accord.
‫Alors, essayons à nouveau et
‫maintenant ça a l'air vraiment sympa, génial.
‫Alors, continuons et terminons cette dernière partie ici avec le
‫prix et les détails de l'évaluation.
‫Et donc c'est ici dans le pied de page de la
‫carte et donc ici c'est juste le prix.
‫Donc, égal à, laissons-le là car maintenant nous avons toujours besoin
‫d'une chaîne de modèle car le prix
‫n'est pas seulement ce nombre, mais en fait nous avons besoin
‫d'un signe dollar supplémentaire ici pour le prix
‫en dollars.
‫Alors, celui-ci, d'accord.
‫Ensuite, nous avons la note moyenne ici.
‫Donc, c'est ça et nous
‫savons déjà que cela s'appelle la note moyenne du tour.
‫Donc, nous l'avons utilisé tellement de fois au moins je crois.
‫Confirmons-le simplement, en fait, il s'agit de la moyenne des notes, puis
‫de la quantité des notes.
‫Alors, copions simplement ceci.
‫Donc, les notes sont
‫moyennes et maintenant, nous voulons la quantité de notes.
‫D'accord, mais bien sûr, cela doit être une
‫chaîne de modèle, puis définissez-la
‫ici sur la même valeur, puis interpolez bien sûr le nom de la
‫variable ici et maintenant, nous devons enfin créer
‫l'URL de la page de détail, d'accord.
‫Alors, rappelez-vous cela lorsque nous cliquons sur l'une des cartes.
‫Cela nous amène ensuite à la
‫page de détail et donc bien sûr ici nous devons maintenant
‫spécifier ce lien car bien sûr cela dépendra de chaque tournée.
‫Donc, nous voulons créer des liens vers des visites à barre oblique,
‫puis nous rappeler comment j'ai mentionné précédemment
‫que pour le rendu de ces pages, nous voudrons
‫en fait interroger les visites par leur slug
‫et non par leur ID.
‫Comment nous l'avons fait dans
‫l'API, d'accord, car cela rend l'URL beaucoup plus agréable, d'accord.
‫Et donc utilisons cela ici maintenant.
‫Alors faites le tour de dot slug et donc juste pour vous
‫expliquer pourquoi nous commençons
‫cette URL ici par une barre oblique.
‫C'est parce que la construction d'une URL comme celle-ci, en
‫commençant uniquement par la barre oblique, est appelée une URL relative et
‫ce que cela
‫fera, c'est qu'elle sera ensuite ajoutée à cette partie de
‫l'URL après le nom d'hôte.
‫Donc, cet hôte est actuellement de un à sept virgule zéro zéro un mais ce n'est
‫pas nécessaire de le spécifier ici car
‫encore une fois, lors de l'écriture d'une URL relative comme celle-ci,
‫il ajoutera ce que nous avons ici à ce nom d'hôte, d'accord.
‫Alors, rechargeons cela à nouveau et nous avons donc
‫presque fini ici, pas tout à
‫fait prêts.
‫Donc, ici, vous voyez indéfini et
‫nous avons probablement fait quelque chose de mal là-bas.
‫Et aussi vous voyez qu'il n'y a pas
‫d'espace ici entre le prix et
‫le par personne et aussi ici le même maintenant.
‫Si vous survolez ce bouton
‫ici, puis là-bas dans le coin gauche.
‫Donc, ici, vous verrez l'URL que nous
‫venons de créer.
‫Vous pouvez en
‫fait cliquer dessus et cela nous
‫donnera alors cette erreur car, bien sûr, nous
‫n'avons pas encore défini cet itinéraire,
‫mais vous voyez que cela a l'air vraiment sympa ici avec
‫les visites qui coupent le randonneur en forêt au lieu d'avoir cet identifiant moche là-haut, d'accord .
‫Mais de toute façon, corrigeons maintenant cet indéfini
‫dans cet espace manquant.
‫Alors, jetons un coup d'œil à celui-ci.
‫Eh bien, ça a l'air correct en fait, les notes, la quantité
‫mais bien sûr, il nous manque ce point de tournée, d'accord.
‫Vous étiez probablement déjà en train de voir celui-là.
‫Maintenant à propos de cet espace manquant.
‫Il y a quelque chose de nouveau que je dois vous montrer à
‫propos de carlin, qui est en fait ce qu'on appelle
‫une voie ou une ligne vide.
‫Donc, chaque fois que nous avons
‫besoin d'un espace réel entre deux éléments
‫de bloc en ligne qui sont ces bandes,
‫nous devons créer manuellement
‫cet espace en utilisant cette ligne canalisée ici comme ceci, d'accord.
‫Et la même chose ici
‫parce que sinon, comme
‫nous venons de le voir,
‫cela collera simplement tous ces éléments ensemble, d'accord.
‫Donc, maintenant tout cela devrait être réparé
‫et cet espace n'est toujours pas là et c'est en
‫fait parce que nous avons oublié quelque chose.
‫Et donc revenons
‫en arrière et nous devons en
‫fait ajouter manuellement cet espace vide ici et ici.
‫Donc, cette ligne de conduite vide ici, en gros,
‫crée un espace pour nous où nous pouvons ensuite créer du
‫contenu en dehors d'un
‫élément et c'est donc essentiellement ce qu'est cet espace.
‫Donc, cet espace ici que nous venons de mettre ici.
‫Donc, cet espace vide est un contenu qui n'est
‫à l'intérieur d'aucun de ces deux éléments.
‫Et donc encore une fois, pour pouvoir le faire, c'est pour
‫cela que nous avons besoin de ce pipeline.
‫Donc, ces deux pipelines.
‫Alors, réessayez et maintenant, en
‫effet, voici l'espace
‫que nous venons de créer, parfait.
‫Et avec cela, nous terminons en fait cette conférence
‫et ce premier site Web ou partie du
‫site Web d'une apparence époustouflante que nous venons de construire ensemble ici.
‫Alors, un moment pour apprécier à quel point c'est
‫vraiment cool et aussi comment tout
‫ce code que nous avons écrit ensemble fonctionne réellement, d'accord.
‫Et ensuite, revenez tout de suite pour
‫que nous puissions construire ensemble la page d'aperçu de la tournée.