‫- : Dans cette vidéo et
‫la suivante, nous allons créer ensemble la page de détail de la tournée.
‫Et en
‫cours de route, vous apprendrez d'autres techniques de
‫carlin comme les conditions et les mixins.
‫Et comme je vous l'ai
‫déjà montré, voici à quoi ressemble la page de détail de la tournée.
‫Et c'est donc ce que nous allons construire dans
‫cette vidéo et la suivante.
‫Maintenant, la seule chose que nous
‫allons laisser un peu
‫plus tard est en fait cette carte.
‫D'accord, mais tout le reste
‫que nous allons construire dans ces conférences sur les outils.
‫Y compris ces critiques.
‫Très bien.
‫Donc en ce moment nous avons notre aperçu
‫et nous avons
‫bien sûr ces boutons avec les URL déjà créées.
‫Mais ensuite, lorsque nous essayons d'accéder à cette page, nous
‫obtenons bien sûr cette erreur.
‫Très bien.
‫Revenons donc à notre code VS et
‫je veux en fait commencer avec
‫un petit défi pour vous.
‫Donc, ce que je
‫veux que vous fassiez, c'est de créer un itinéraire pour la
‫page de détail en fonction de l'URL que nous venons de créer auparavant.
‫Et ça va être
‫similaire à ce que nous avons
‫déjà ici, mais vous devez le modifier un peu.
‫D'accord.
‫Assez de
‫cela, je veux aussi que vous construisiez ce contrôleur.
‫Alors allez-y.
‫Parce que pour le moment, nous
‫n'avons que cet espace réservé.
‫Et laissez-moi vous donner les étapes ici.
‫Et comme toujours,
‫nous devons
‫d'abord obtenir les données.
‫Cette fois pour la tournée demandée.
‫Et pour cela,
‫gardez à l'esprit que nous avons réellement besoin des critiques
‫ici et aussi des guides touristiques.
‫D'accord.
‫Alors, encore
‫une fois, jetons un coup d'œil à cela.
‫Nous avons donc ces guides touristiques ici.
‫C'est vrai, et il s'agit donc essentiellement d'un ensemble de données distinct.
‫Donc utilisateurs.
‫Et puis ici, nous avons aussi les critiques.
‫Maintenant, ces guides touristiques
‫ici, je pense qu'ils sont en fait automatiquement renseignés
‫dans un modèle.
‫Voyons donc cela très rapidement.
‫Donc le modèle
‫de tournée et donc,
‫ouais.
‫Donc, ici,
‫nous avons ce remplissage automatique
‫chaque fois qu'il y a une requête de
‫recherche, mais uniquement pour les guides.
‫Et donc n'oubliez pas de remplir également
‫les avis.
‫D'accord.
‫Ensuite, après cela,
‫nous allons construire un
‫modèle mais nous le ferons ensemble d'accord, donc je n'ai
‫pas besoin que vous fassiez cette partie.
‫Et puis enfin,
‫je veux que vous complétiez cette partie ici aussi.
‫Restituez donc le
‫modèle
‫en utilisant à nouveau
‫les données de la première étape.
‫Très bien.
‫C'est donc très simple aussi.
‫Et donc ce que
‫je veux que vous fassiez, c'est de
‫créer l'itinéraire, puis d'obtenir également les données.
‫Bon alors mettez la vidéo en pause ici et bonne chance avec ça.
‫J'espère donc que vous l'avez fait
‫et pour me le faire savoir, résolvez-le ici pour vous.
‫Et nous allons commencer par l'itinéraire.
‫Et maintenant, tout ce que nous devons réellement ajouter ici, c'est cette limace.
‫Et bien sûr, nous le faisons en tant que paramètre d'URL.
‫Alors juste comme ça, l'appelant slug.
‫Alors avant d'utiliser l'identifiant, n'est-ce pas ?
‫Et donc nous l'avons
‫eu comme ça et maintenant appelons ça la limace.
‫Très bien.
‫Car encore une
‫fois, c'est à cela que ressemble la page d'aperçu.
‫Nous avons essentiellement des slash slug de tournée.
‫D'accord, et c'est ce que nous
‫allons ensuite utiliser pour créer le tour dans le contrôleur.
‫Alors faisons-le maintenant ici.
‫Donc const, tour
‫égal attend tour et
‫findone.
‫Donc, cette fois, nous ne pouvons pas utiliser la recherche par ID.
‫Eh bien parce que, nous
‫ne connaissons pas l'ID de la tournée.
‫Et donc
‫à la place, nous cherchons par la limace.
‫Et la
‫limace est comme j'espère que
‫vous savez la demande. params
‫dot slug d'accord.
‫Et maintenant enfin, c'est tout pour remplir
‫le champ des tableaux.
‫Très bien.
‫Donc, le chemin à remplir est les avis.
‫Et en fait, nous n'avons pas besoin de tous les champs ici.
‫Précisons donc simplement ceux dont nous avons besoin.
‫Et donc, ce n'est
‫que la critique,
‫la
‫note et l'utilisateur.
‫Car rappelez-vous
‫que nous affichons en
‫fait donc le nom d'utilisateur et la photo de l'utilisateur.
‫Et puis
‫bien sûr, la critique elle-même et la note.
‫D'accord.
‫Alors bien sûr,
‫il se plaint que nous n'avons pas utilisé async.
‫Et bien sûr, je n'allais pas l'oublier.
‫Mais de toute
‫façon c'est bien qu'ES Line nous prévienne de ce genre d'erreurs.
‫Cela enlève vraiment beaucoup de
‫bugs du développement.
‫D'accord.
‫Et puis
‫ici, bien sûr, nous allons passer cette
‫variable de visite dans notre modèle de visite.
‫Alors celui-là.
‫Donnez-lui une sauvegarde.
‫Plus d'erreurs.
‫Et donc cette partie est en fait maintenant terminée.
‫Et donc tout ce que
‫nous devons faire maintenant est d'aller de l'avant et de construire notre modèle.
‫D'accord.
‫Donc, nous
‫devrions déjà l'avoir ici.
‫Et ce sont les données de développement.
‫Nous avons donc beaucoup
‫de dossiers et beaucoup de données.
‫Et cela peut devenir un peu
‫déroutant à un moment donné.
‫D'accord.
‫Et
‫donc, débarrassons-nous de ce contenu d'espace réservé ici.
‫Et avant de faire quoi
‫que ce soit d'autre, examinons à nouveau le fichier HTML d'origine.
‫Qui est dans ce
‫dossier public que je viens de fermer.
‫Fermons tout cela ici, car je
‫trouve cela vraiment déroutant.
‫D'accord, les modèles aussi.
‫Et maintenant, ce dont nous avons besoin, c'est de public et
‫ensuite de tournée. html.
‫Donc l'en-tête que nous avons déjà bien sûr.
‫Et puis voici tout le contenu.
‫Ainsi,
‫toutes ces sections
‫que nous avons sur
‫notre page sont bien sûr traduites ici en HTML.
‫Et comme
‫avant, j'ai déjà créé un
‫modèle Pug basé sur tout ce code HTML.
‫Très bien, nous ne voudrions pas traduire
‫ceci ici manuellement ensemble.
‫D'accord.
‫Je l'ai donc déjà ici dans ce fichier modèle.
‫Mais bien
‫sûr, encore une fois, si vous en
‫avez envie, vous pouvez mettre la
‫vidéo en pause maintenant et la traduire vous-même également.
‫Très bien.
‫Mais ce que je vais faire maintenant, c'est aller
‫de l'avant et copier tout ce code.
‫Ce qui est encore une tonne de code comme vous pouvez le voir.
‫Alors copions tout cela et entrons dans notre visite
‫et collons-le ici.
‫Maintenant, l'annotation va à nouveau être fausse.
‫Alors copions, ou sélectionnons en fait ce que nous venons de coller ici.
‫Et donc tout sauf la première ligne est incorrect.
‫Mais tout ce que nous devons faire ici est d'ajouter un onglet supplémentaire.
‫Et c'est tout.
‫Alors maintenant, ils sont tous au même niveau à l'intérieur de
‫ce bloc de contenu.
‫Donc section et
‫section et
‫donc fondamentalement toutes les sections sont maintenant
‫au même niveau,
‫donc elles sont toutes sœurs.
‫Super.
‫Alors fermons simplement tout cela dont nous
‫n'avons plus besoin.
‫Et donc comme
‫avant, nous avons maintenant cette page statique
‫ici avec toutes ces données statiques.
‫Ce que nous savons, nous devrons procéder à un remplacement.
‫Mais avant de faire
‫cela, regardons simplement si notre route
‫fonctionne déjà.
‫D'accord.
‫Alors rechargeons-le et cela
‫nous donne la même erreur.
‫Et je suppose
‫que c'est parce qu'ici nous avons
‫des tournées et non des tournées comme
‫je pense que nous l'avons dans notre itinéraire.
‫Alors ici, nous avons une tournée.
‫Et c'est en fait ainsi que cela a du sens.
‫Et donc allons-y et changeons cela ici dans
‫notre aperçu.
‫D'accord et donc
‫ici, nous voulons réellement une tournée.
‫Parce qu'en
‫fait, nous ne voyons qu'une seule tournée
‫et pas plusieurs tournées.
‫À droite?
‫Et donc si nous revenons à l'aperçu
‫maintenant, nous le chargeons, et ouvrons
‫maintenant The Forest Hiker,
‫alors vous voyez que ce sera une tournée.
‫Et puis
‫bien sûr, nous obtenons le code HTML
‫de la page que nous venons de créer.
‫Maintenant, pour une raison quelconque, le CSS n'est pas là.
‫Essayons juste de recharger ceci.
‫Eh bien, qu'est-ce qui se passe ici?
‫Essayons d'inspecter cela.
‫Et je vois que nous avons quelques erreurs.
‫On peut donc cliquer dessus.
‫Et donc la raison du CSS manquant, car
‫au lieu de cela, il essaie de charger le fichier
‫au mauvais endroit.
‫Il essaie donc de le charger dans le dossier CSS à
‫l'intérieur de la tournée.
‫Mais cela bien sûr n'existe pas.
‫Et c'est parce
‫que nous sommes ici sur cet itinéraire de tournée, d'accord.
‫Et donc nous devons essentiellement corriger
‫la façon dont nous importons le CSS dans notre modèle de base.
‫Allons-y.
‫Et donc ici
‫en fait, nous devrions avoir une autre barre oblique.
‫D'accord, et la même chose en fait ici.
‫Et c'est
‫donc exactement pour la
‫même raison que je vous ai expliquée précédemment dans l'aperçu ci-dessous.
‫Nous avons donc également commencé cette URL par une barre oblique.
‫Et encore une fois, cela va alors commencer
‫à la racine de la page.
‫Et c'est comme ça que ça doit fonctionner.
‫Et en fait, la même chose s'applique à toutes les images ici.
‫Ainsi, toutes les images
‫doivent toujours commencer par rapport à l'URL racine.
‫Ajoutons donc cela très rapidement ici à toutes ces images.
‫Et
‫oui, c'est tout.
‫C'est donc tous.
‫Et donc,
‫avec cela, nous avons corrigé
‫la vue d'ensemble et également ce fichier de base.
‫Donc, si nous rechargeons
‫maintenant, nous devrions alors avoir accès au bon CSS.
‫Et en effet, nous y voilà.
‫Il y a juste une autre
‫erreur qui est ici dans cette image.
‫Et encore
‫une fois, c'est parce qu'il essaie de
‫le charger ici à partir
‫de la visite et non de l'URL racine.
‫Et donc,
‫ce problème est ici dans l'en-tête.
‫Et donc
‫bien sûr, ici, nous devons également
‫le rendre relatif au chemin racine.
‫Probablement la même chose dans le pied de page.
‫Et ouais.
‫Très bien.
‫Juste pour confirmer rapidement que, oui en
‫effet, nous y voilà.
‫Super.
‫Donc, comme je l'ai
‫mentionné bien sûr, cela contient toutes
‫les données statiques sur The Park Camper Tour, qui
‫sont celles que nous avons dans le modèle.
‫Mais nous regardons le randonneur forestier.
‫Et donc, commençons maintenant par corriger notre modèle et
‫essentiellement en utilisant les données dynamiques ici.
‫Donc, rappelez-vous que la variable que nous avons passée
‫ici s'appelle tour.
‫À droite?
‫Donc ça s'appelle simplement
‫tournée et c'est ainsi que nous devons l'appeler ici.
‫Donc tournée. nom, et
‫aussi le même ici.
‫Et maintenant, vous savez déjà que nous devons utiliser
‫une chaîne de modèle
‫ici parce que nous voulons en fait créer une chaîne.
‫Ainsi nommé. tour.
‫Et ici, ce chemin n'est pas non plus correct.
‫Tout d'abord, il doit s'agir d'une chaîne de modèle,
‫puis de nos images, j'écrirai des visites
‫de barres obliques d'images
‫pour barrer le nom de l'image de couverture.
‫Alors tour dot, et maintenant je ne
‫me souviens plus
‫si c'est une image de couverture, ou une image de couverture.
‫Donc voilà.
‫Couverture illustrée.
‫D'accord.
‫Essayons donc rapidement.
‫Et rappelez-vous, nous sommes à The First Hiker.
‫Et donc cela devrait maintenant être le nom.
‫Et encore une autre erreur.
‫Donc, il est dit ici, ne peut pas lire la
‫visite de la propriété d'undefined.
‫Alors revenons en arrière et
‫oui.
‫Voici donc cette erreur stupide.
‫C'est donc bien sûr la tournée. nom et non nom.
‫tour.
‫Alors, à quoi pensais-je
‫là-bas ?
‫Rechargeons ceci et maintenant en
‫effet, nous obtenons
‫The Forest Hiker avec cette très belle image de couverture en arrière-plan.
‫Super.
‫Et continuons d'avancer ici.
‫Créez donc encore une autre chaîne de modèle.
‫Tour.
‫Durée, puis
‫le nombre de jours.
‫Ensuite, ici, nous avons à nouveau l'emplacement
‫de départ.
‫Alors, visite.
‫point de départ. description, rappelez-vous.
‫Très bien.
‫Maintenant, ici, nous avons
‫ces boîtes de vue d'ensemble ici.
‫Donc vue d'ensemble détail de la boîte.
‫Et comme vous le voyez, nous
‫avons ici
‫quatre cases égales où la seule chose qui
‫change est ce nom d'icône,
‫puis la date et la date suivante.
‫Bon, ici ce qui change ce n'est pas la prochaine
‫date, ce
‫qui change c'est la description des cases.
‫Donc prochaine date,
‫difficulté, participants et note.
‫Très bien.
‫Et donc
‫fondamentalement, ce code ici
‫est toujours le même avec seulement trois morceaux qui changent.
‫Donc le nom de l'icône, la description et
‫la valeur de cette description.
‫Et donc, puisque nous n'aimons pas le code répété, n'est-ce
‫pas ?
‫Utilisons une autre fonctionnalité de Pug que nous
‫n'avons pas encore utilisée et qui
‫s'appelle mixins.
‫Les mixins sont donc essentiellement des
‫morceaux de code réutilisables dans lesquels nous pouvons passer des arguments.
‫Donc un peu comme une fonction.
‫Et c'est aussi exactement comme les mixins dans SAS.
‫C'est donc un pré-processeur CSS que
‫vous connaissez peut-être.
‫Alors copions ce code ici pour cette boîte de présentation.
‫Donc en le copiant.
‫Et maintenant ici,
‫à partir de ce bloc, créons ensuite un nouveau mixin.
‫Nous écrivons donc mixin puis le
‫nom du mixin, que j'appelle la boîte de vue d'ensemble.
‫Et puis un peu comme
‫une fonction, on peut spécifier des arguments.
‫Et alors rappelez-vous comment nous
‫avons la description de la boîte, puis nous avons la valeur de cette
‫description et appelons-la simplement du texte ici.
‫Et puis aussi, le nom de l'icône.
‫D'accord.
‫Alors maintenant, copions ce
‫texte ici et bien sûr, cela gâche maintenant
‫notre formatage.
‫Corrigeons cela rapidement.
‫Et maintenant, ces variables ici, elles fonctionnent
‫vraiment comme
‫toutes les autres variables de Pug.
‫Donc, ici, cela devrait maintenant être le
‫texte.
‫À droite?
‫Et ceci ici devrait être la description.
‫Donc description égale.
‫Eh bien, ici, cela s'appelle en fait label dans le CSS.
‫Appelons-le donc étiquette ici aussi.
‫Bon alors étiquette, texte et icône.
‫Et donc ici, nous devons également changer le nom
‫de cette icône et tous ces noms d'icônes commencent toujours par
‫un tiret d'icône.
‫Et donc tout ce que nous avons vraiment
‫besoin de remplacer est cette pièce.
‫Créons donc à nouveau une chaîne de modèle.
‫Et puis débarrassez-vous de ça.
‫Et icône.
‫D'accord et maintenant nous pouvons l'utiliser.
‫Je voulais aussi dire que nous
‫aurions également pu
‫exporter ce mixin dans un autre fichier, puis inclure ce fichier ici.
‫Mais je pense que cela n'a pas beaucoup de sens.
‫Dans ce cas car
‫ce n'est pas vraiment beaucoup de code.
‫Quoi qu'il en soit, allons-y maintenant et utilisons
‫ce mixin.
‫Alors permettez-moi de copier juste le nom de celui-ci.
‫Et donc ici au lieu de cette boîte de vue d'ensemble.
‫Et pour l'instant, permettez-moi de le dupliquer ici.
‫D'accord, nous avons donc utilisé ce mixin
‫en écrivant plus, puis, comme une
‫fonction normale, nous y avons
‫passé des arguments vides.
‫Et donc notre première boîte de vue d'ensemble est la prochaine date.
‫Alors pour l'instant, juste la date qui est ici.
‫Alors juste que je peux vous montrer que cela fonctionne en fait.
‫Donc 20, 21
‫août.
‫Et
‫puis ici, calendrier.
‫D'accord parce que c'est le nom ici de l'icône.
‫Et maintenant, nous devrions
‫avoir deux boîtes.
‫Donc celui-ci et
‫celui-ci qui devraient se ressembler exactement.
‫Alors confirmons-le rapidement.
‫Et ainsi, nous pouvons passer à
‫l'utilisation correcte du mixin.
‫Et oui, voici donc nos deux box
‫exactement identiques.
‫Super.
‫Alors débarrassons-nous de ce premier.
‫Et bien sûr, ici, nous voulons la
‫vraie date.
‫D'accord.
‫Et c'est
‫ainsi, ajoutez la tournée. début, dates, zéro.
‫Jetons donc un œil à cela.
‫Et rappelez-vous que
‫cela va avoir l'air un peu bizarre.
‫Comme avant.
‫D'accord.
‫Alors allons de l'avant et corrigeons cela.
‫Alors prenons cela à partir d'ici.
‫Et donc ce dont nous avons besoin, c'est
‫fondamentalement de ceci à la place.
‫Maintenant, je ne
‫veux pas allonger cette ligne ici
‫en la collant simplement ici.
‫Et alors pourquoi ne
‫pas simplement créer une nouvelle variable de script java pour cela.
‫N'oubliez donc pas que nous devons utiliser
‫cette syntaxe ici afin de créer
‫un code de script Java qui ne produira aucune sortie.
‫Et là encore, nous
‫pouvons simplement écrire un script Java ici.
‫D'accord.
‫Et donc maintenant ici, je vais simplement utiliser
‫cette date.
‫Super.
‫Et maintenant, dupliquons ceci ici quelques fois pour toutes
‫les boîtes que nous avons.
‫Donc le premier est pour la difficulté.
‫Et l'icône est à la mode.
‫Ensuite, le prochain est pour les participants.
‫Avec l'icône de l'utilisateur.
‫Et le dernier est la notation.
‫Et l'icône est une star.
‫Donc ici nous avons la date mais, ici dans la difficulté
‫nous avons en fait une tournée. difficulté.
‫Alors ici pour les
‫participants nous voulons cette chaîne.
‫Comme 10 personnes.
‫Donc, une chaîne
‫de modèle disant tournée. mélange, la
‫taille
‫du groupe, puis les gens.
‫Et enfin on veut la note et
‫ensuite sur cinq.
‫Alors tournée,
‫et je ne me
‫souviens jamais comment j'ai appelé ce champ.
‫Et c'est la moyenne des notes.
‫Très bien.
‫Et puis, sur
‫cinq.
‫D'accord.
‫Et ça devrait être ça.
‫Maintenant, nous pouvons nous débarrasser de tout ce code.
‫Et comme ça, c'est beaucoup plus joli.
‫Et
‫juste pour nous
‫assurer que cela fonctionne, faisons une
‫sauvegarde ici, rechargez, et en effet, nous obtenons facilement,
‫25 personnes et la note
‫de cinq sur cinq.
‫Impressionnant.
‫Nous avons donc déjà parcouru
‫beaucoup de terrain, mais divisons cette vidéo en deux et continuons avec
‫le reste de la page directement
‫dans la suivante.