‫Instructeur : Dans
‫cette conférence, nous allons commencer à vraiment créer la page de présentation de la visite.
‫Et rappelez-vous que c'est
‫à quoi ressemble la page d'aperçu en ce moment.
‫Il n'a donc pas de contenu
‫réel, et c'est donc ce que nous allons ajouter dans cette vidéo.
‫Nous sommes donc ici dans cette route racine, et encore
‫une fois, c'est là que sera la vue d'ensemble, d'accord ?
‫Donc à notre avis
‫le routeur, c'est alors bien sûr cette route, d'accord ?
‫Et donc le contrôleur qui est
‫en charge du rendu de cette page est le contrôleur getoverview, d'accord ?
‫Et donc allons d'abord ici, et exposons les
‫étapes que nous allons suivre pour
‫rendre cette page.
‫Donc, la première chose que nous devons faire
‫est d'obtenir toutes les données de tournée de notre
‫collection, n'est-ce pas ?
‫Obtenez donc des données
‫de tournée à partir de la collecte.
‫Ensuite, nous allons construire notre modèle et nous n'allons
‫pas le faire
‫ici dans cette fonction de contrôleur bien sûr.
‫Mais, écrivons-le toujours ici.
‫Donc, créez un modèle, puis restituez enfin ce modèle, en utilisant
‫les données de visite de la première étape.
‫Donc, en commençant par la
‫première étape ici, récupérez les données de tournée de
‫la collection, cela signifie bien sûr que
‫nous devons d'abord importer le modèle de tournée.
‫Donc, c'est quelque chose que nous avons déjà
‫fait plusieurs fois auparavant.
‫C'est en fait un niveau supérieur,
‫puis dans les modèles.
‫et modèle de tournée.
‫Et puis nous aurons
‫également besoin de la fonction
‫catchAsync, car
‫alors bien sûr, cette vue d'ensemble deviendra une fonction asynchrone.
‫Très bien, alors marquons celui-ci comme asynchrone.
‫Nous avons maintenant également besoin de next ici pour
‫que la fonction catchAsync fonctionne réellement.
‫D'accord, et j'espère que maintenant vous commencez réellement à voir
‫la valeur d'avoir construit tous les trucs
‫d'API et tous les codes
‫que nous avons fait jusqu'à présent, de sorte que tout ce
‫que nous devons faire maintenant est de vraiment brancher tous ces morceaux ensemble, d'accord?
‫Donc, nous savons déjà maintenant comment faire tout cela.
‫Notre modèle de tournée fonctionne déjà correctement.
‫Alors maintenant, tout cela est très facile.
‫Donc const tours est égal à attendre.
‫Donc encore une fois, rien de nouveau pour le moment.
‫Et trouvez-les tous en gros, d'accord ?
‫Et maintenant, qu'allons-nous faire avec ces
‫données de tournées ?
‫Eh bien, nous allons devoir coller toutes
‫ces données de visite dans le modèle, afin que nous puissions
‫l'utiliser et l'afficher sur le site Web, n'est-ce pas ?
‫Et donc, c'est en fait très facile à faire.
‫Tout ce que nous avons à faire est de le mettre
‫ici dans cet objet qui va être collé dans le modèle de
‫vue d'ensemble dans ce cas, d'accord ?
‫Donc, très facile, tout ce que nous avons à dire, ce sont des visites.
‫Donc, c'est la même chose que des tournées égales à des
‫tournées et encore une fois, vous savez déjà qu'à partir de ES 6, il suffit
‫de le faire comme ça.
‫Génial, donc chaque fois qu'il y a
‫maintenant une demande pour la page d'aperçu, donc essentiellement notre
‫page d'accueil de notre site Web rendu dynamiquement, toutes les données
‫de la tournée seront récupérées dans notre base de
‫données ici, puis ces données seront collées dans notre modèle.
‫Et maintenant, tout ce que
‫nous avons à faire est de créer ce modèle, n'est-ce pas ?
‫Passons donc à la vue d'ensemble. carlin.
‫Ici, nous pouvons réellement nous débarrasser de cet espace réservé h1 ici.
‫Et, maintenant, je veux jeter un coup
‫d'œil au fichier html statique ici à nouveau.
‫Donc, c'est dans le dossier public,
‫puis aperçu. html, d'accord ?
‫Donc, nous avons déjà construit l'en-tête
‫dans l'une des conférences
‫précédentes et il est maintenant temps de construire cette partie ici.
‫Maintenant, lorsque nous avons construit le
‫modèle pour la première fois, je me suis trompé dans mon
‫fichier html et j'avais un aperçu de la classe de
‫section, mais dans votre fichier de démarrage, vous
‫auriez dû avoir ce main avec la classe main.
‫Et, donc je crois que dans votre dossier
‫il y a en fait un petit texte expliquant ça, d'accord ?
‫Mais, de toute façon, nous avons en fait supprimé cette partie
‫de notre modèle de base.
‫Alors, rappelez-vous qu'ici, dans le
‫contenu, nous n'avons en fait pas de code HTML.
‫Donc, cet élément principal qui se
‫trouve actuellement dans le code html est introuvable.
‫Et maintenant, nous en avons besoin dans notre aperçu, d'accord ?
‫Alors, créons cette partie du html dans la vue d'ensemble car
‫après cela, nous avons toutes ces cartes répétitives.
‫Alors, jetons un coup d'œil à
‫cela aussi avant de copier le code.
‫Donc, vous voyez que nous avons
‫ces cartes ici et donc fondamentalement, chacune de ces cartes, donc chacun
‫de ces éléments ici,
‫est ce que j'appelle une carte.
‫Et, en gros, nous allons avoir neuf cartes.
‫Donc, ces neuf cartes sur cette page d'aperçu.
‫Et c'est neuf cartes parce qu'en ce moment nous avons
‫neuf tournées, mais bien
‫sûr, cela pourrait être moins ou plus de ces cartes, n'est-ce pas ?
‫Mais de toute façon, ce qui est important de
‫noter ici, c'est que ces cartes se répètent
‫en fait encore et encore.
‫Nous avons donc cet énorme élément de carte ici.
‫Et donc il y a
‫le premier, et puis il y a beaucoup d'éléments répétés égaux après.
‫D'accord?
‫Et donc, en fait, je suis allé de l'avant et j'ai créé un
‫modèle de carlin pour cette
‫carte uniquement, afin que nous n'ayons pas à l'écrire manuellement
‫maintenant et à perdre beaucoup de temps à le faire, d'accord ?
‫Cela rendrait le cours inutilement long et j'ai donc
‫décidé de créer ce modèle à l'avance pour que
‫nous puissions l'utiliser maintenant.
‫Maintenant, bien sûr, si vous souhaitez pratiquer un peu
‫plus vos compétences en carlin, n'hésitez pas à mettre la
‫vidéo en pause à ce stade, puis à traduire tout ce code en carlin.
‫Très bien?
‫Et quand vous avez terminé, vous pouvez alors revenir.
‫Mais maintenant, je vais réellement aller de l'avant et utiliser ce modèle.
‫Et c'est ici dans les données de développement, puis
‫dans les modèles et les modèles de cartes de visite, d'accord ?
‫Et c'est donc la carte entière
‫pour une carte, essentiellement traduite en code carlin, d'accord ?
‫Alors copions
‫tout cela, mettons-le ici dans la vue d'ensemble, d'accord ?
‫Et puis gardons à l'esprit qu'avant cela, nous avons
‫également besoin de ce conteneur principal et de ce conteneur de
‫carte, alors copions-le également.
‫Donc juste ici comme
‫référence, de sorte que nous pouvons maintenant écrire
‫main main et là-dedans nous avons un dev appelé card container.
‫D'accord?
‫Et puis, comme son nom
‫l'indique, ce conteneur va contenir la carte.
‫Alors maintenant, indentons ceci, car pour le moment, ce n'est
‫pas vraiment à l'intérieur du conteneur de la carte.
‫Donc pour le moment, ce serait à l'intérieur de main mais ce
‫n'est pas ce que nous voulons.
‫Et donc, je sélectionne tout et j'appuie sur l'onglet.
‫J'ai à nouveau appuyé sur Tab, et nous voyons maintenant
‫que le niveau est correct.
‫C'est à l'intérieur du conteneur de la carte.
‫Mais en fait, ce n'est toujours pas
‫correct à 100%
‫car cet élément devrait également être à l'intérieur de l'élément card.
‫Et pour une raison quelconque, copier ce
‫modèle d'un fichier à
‫l'autre a un peu gâché ce code.
‫Et donc faites attention à cela lorsque vous collez le
‫code comme ceci.
‫Donc, dans notre modèle d'origine, tout était correct, comme vous
‫le voyez, mais lorsque nous l'avons copié, c'est
‫un peu foiré.
‫Alors, fermons ça.
‫En fait, nous pouvons également
‫fermer cela, nous n'en avons plus besoin, et
‫en fait, également le modèle de base et le modèle de visite.
‫Nous ne travaillons donc qu'avec la vue d'ensemble pour le moment.
‫Et donc maintenant, nous avons cette carte ici.
‫Et maintenant, comme vous le voyez, c'est aussi une carte complètement statique.
‫Il n'utilise donc pas encore
‫les données que nous avons collées dans le modèle, n'est-ce pas ?
‫Il a donc cette image statique, il a tout ce texte ici,
‫et il n'utilise pas du tout la variable.
‫D'accord, parce que cette partie, je voulais en
‫fait la faire avec toi.
‫Parce qu'en fait c'est la partie la plus importante.
‫Donc, créer tout ce modèle comme
‫celui-ci n'est pas difficile et ce qui
‫compte vraiment, c'est comment le remplir de données, d'accord ?
‫Et c'est donc ce que nous allons faire ensuite.
‫Mais pour l'instant,
‫regardons à quoi cela ressemble en ce moment.
‫Alors gardez à l'esprit que nous ne devrions avoir qu'une seule
‫carte, et non neuf, d'accord ?
‫Car encore une fois, nous n'avons qu'un seul élément de carte statique
‫à ce stade.
‫Rechargez ceci, et cela n'a pas l'air si juste.
‫Essayons donc de comprendre ce qui se passe ici.
‫Nous avons donc notre élément principal lors
‫de notre création, puis nous avons également notre conteneur de cartes.
‫Mais alors, pour une raison
‫quelconque, il y a à nouveau un principal là-dedans.
‫Euh ah d'accord, je dois bien sûr supprimer cet élément
‫html d'origine que nous avons là.
‫Alors, essayons à nouveau.
‫Et maintenant, maintenant ça a l'air mieux, d'accord ?
‫Maintenant, l'image ici est
‫toujours manquante, mais peu importe pour l'instant.
‫Ce qui est important,
‫c'est que nous ayons cette jolie carte ici, d'accord ?
‫Maintenant, le fait est que nous
‫voulons bien sûr avoir une carte pour chacune des visites, n'est-ce pas ?
‫Et donc, fondamentalement, ce que nous
‫voulons faire maintenant, c'est parcourir ce tableau de tournées que
‫nous avons collé dans le modèle, n'est-ce pas ?
‫Donc, fondamentalement, cette variable de tournée.
‫Et gardez à l'esprit qu'il s'agit
‫d'un tableau car il contient plusieurs documents de visite.
‫Et donc, parcourons maintenant ce
‫tableau et créons une carte pour chacun des documents de visite, d'accord ?
‫Et heureusement, c'est très facile à faire
‫avec carlin car fondamentalement, carlin est livré avec des boucles intégrées, d'accord ?
‫Et maintenant,
‫nous pouvons faire chaque tournée en tournées, d'accord ?
‫Et donc, tours ici est la variable que nous avons
‫collée, puis à chaque
‫itération, la variable actuelle sera appelée tour.
‫On pourrait l'appeler x ou x y z ou autre chose mais ça
‫a du sens de l'appeler juste tournée, d'accord ?
‫Et donc, à chaque itération, ce qui entre alors
‫est ce qui sera imprimé en gros.
‫Donc, cela doit encore être indenté d'un niveau supplémentaire.
‫Donc, fondamentalement, c'est à l'intérieur
‫de cette déclaration de boucle ici.
‫Super, alors voyons à quoi ça ressemble maintenant.
‫Et donc nous devrions maintenant obtenir neuf cartes identiques.
‫Et effectivement, c'est exactement ce qui s'est passé, d'accord ?
‫Bien sûr, ces
‫données ici ne sont toujours pas créées dynamiquement.
‫Et c'est en fait exactement ce que nous
‫allons corriger dans la prochaine vidéo.