1 00:00:01,150 --> 00:00:02,170 ‫Instructeur : Dans 2 00:00:02,170 --> 00:00:05,883 ‫cette conférence, nous allons commencer à vraiment créer la page de présentation de la visite. 3 00:00:07,500 --> 00:00:09,170 ‫Et rappelez-vous que c'est 4 00:00:09,170 --> 00:00:11,900 ‫à quoi ressemble la page d'aperçu en ce moment. 5 00:00:11,900 --> 00:00:13,790 ‫Il n'a donc pas de contenu 6 00:00:13,790 --> 00:00:16,860 ‫réel, et c'est donc ce que nous allons ajouter dans cette vidéo. 7 00:00:16,860 --> 00:00:19,740 ‫Nous sommes donc ici dans cette route racine, et encore 8 00:00:19,740 --> 00:00:22,803 ‫une fois, c'est là que sera la vue d'ensemble, d'accord ? 9 00:00:23,670 --> 00:00:25,210 ‫Donc à notre avis 10 00:00:25,210 --> 00:00:28,650 ‫le routeur, c'est alors bien sûr cette route, d'accord ? 11 00:00:28,650 --> 00:00:30,650 ‫Et donc le contrôleur qui est 12 00:00:30,650 --> 00:00:34,697 ‫en charge du rendu de cette page est le contrôleur getoverview, d'accord ? 13 00:00:34,697 --> 00:00:37,650 ‫Et donc allons d'abord ici, et exposons les 14 00:00:37,650 --> 00:00:39,840 ‫étapes que nous allons suivre pour 15 00:00:39,840 --> 00:00:41,373 ‫rendre cette page. 16 00:00:42,650 --> 00:00:44,950 ‫Donc, la première chose que nous devons faire 17 00:00:44,950 --> 00:00:47,750 ‫est d'obtenir toutes les données de tournée de notre 18 00:00:47,750 --> 00:00:49,273 ‫collection, n'est-ce pas ? 19 00:00:51,120 --> 00:00:52,170 ‫Obtenez donc des données 20 00:00:54,740 --> 00:00:56,010 ‫de tournée à partir de la collecte. 21 00:00:56,010 --> 00:00:58,310 ‫Ensuite, nous allons construire notre modèle et nous n'allons 22 00:01:00,290 --> 00:01:01,420 ‫pas le faire 23 00:01:01,420 --> 00:01:03,630 ‫ici dans cette fonction de contrôleur bien sûr. 24 00:01:03,630 --> 00:01:05,333 ‫Mais, écrivons-le toujours ici. 25 00:01:06,800 --> 00:01:11,800 ‫Donc, créez un modèle, puis restituez enfin ce modèle, en utilisant 26 00:01:14,210 --> 00:01:18,360 ‫les données de visite de la première étape. 27 00:01:18,360 --> 00:01:20,350 ‫Donc, en commençant par la 28 00:01:20,350 --> 00:01:22,930 ‫première étape ici, récupérez les données de tournée de 29 00:01:22,930 --> 00:01:25,013 ‫la collection, cela signifie bien sûr que 30 00:01:25,013 --> 00:01:27,413 ‫nous devons d'abord importer le modèle de tournée. 31 00:01:31,100 --> 00:01:34,030 ‫Donc, c'est quelque chose que nous avons déjà 32 00:01:34,030 --> 00:01:35,513 ‫fait plusieurs fois auparavant. 33 00:01:36,490 --> 00:01:38,340 ‫C'est en fait un niveau supérieur, 34 00:01:38,340 --> 00:01:39,673 ‫puis dans les modèles. 35 00:01:41,390 --> 00:01:42,593 ‫et modèle de tournée. 36 00:01:45,300 --> 00:01:46,470 ‫Et puis nous aurons 37 00:01:46,470 --> 00:01:48,163 ‫également besoin de la fonction 38 00:01:51,240 --> 00:01:52,290 ‫catchAsync, car 39 00:01:52,290 --> 00:01:55,513 ‫alors bien sûr, cette vue d'ensemble deviendra une fonction asynchrone. 40 00:02:04,190 --> 00:02:09,190 ‫Très bien, alors marquons celui-ci comme asynchrone. 41 00:02:11,340 --> 00:02:14,120 ‫Nous avons maintenant également besoin de next ici pour 42 00:02:14,120 --> 00:02:16,123 ‫que la fonction catchAsync fonctionne réellement. 43 00:02:22,690 --> 00:02:25,770 ‫D'accord, et j'espère que maintenant vous commencez réellement à voir 44 00:02:25,770 --> 00:02:28,020 ‫la valeur d'avoir construit tous les trucs 45 00:02:28,020 --> 00:02:29,850 ‫d'API et tous les codes 46 00:02:29,850 --> 00:02:33,380 ‫que nous avons fait jusqu'à présent, de sorte que tout ce 47 00:02:33,380 --> 00:02:37,680 ‫que nous devons faire maintenant est de vraiment brancher tous ces morceaux ensemble, d'accord? 48 00:02:37,680 --> 00:02:40,530 ‫Donc, nous savons déjà maintenant comment faire tout cela. 49 00:02:40,530 --> 00:02:44,060 ‫Notre modèle de tournée fonctionne déjà correctement. 50 00:02:44,060 --> 00:02:46,033 ‫Alors maintenant, tout cela est très facile. 51 00:02:47,460 --> 00:02:51,880 ‫Donc const tours est égal à attendre. 52 00:02:51,880 --> 00:02:54,620 ‫Donc encore une fois, rien de nouveau pour le moment. 53 00:02:54,620 --> 00:02:58,423 ‫Et trouvez-les tous en gros, d'accord ? 54 00:02:59,310 --> 00:03:01,700 ‫Et maintenant, qu'allons-nous faire avec ces 55 00:03:01,700 --> 00:03:03,960 ‫données de tournées ? 56 00:03:03,960 --> 00:03:06,510 ‫Eh bien, nous allons devoir coller toutes 57 00:03:06,510 --> 00:03:09,700 ‫ces données de visite dans le modèle, afin que nous puissions 58 00:03:09,700 --> 00:03:12,610 ‫l'utiliser et l'afficher sur le site Web, n'est-ce pas ? 59 00:03:12,610 --> 00:03:14,910 ‫Et donc, c'est en fait très facile à faire. 60 00:03:14,910 --> 00:03:18,300 ‫Tout ce que nous avons à faire est de le mettre 61 00:03:18,300 --> 00:03:22,200 ‫ici dans cet objet qui va être collé dans le modèle de 62 00:03:22,200 --> 00:03:24,770 ‫vue d'ensemble dans ce cas, d'accord ? 63 00:03:24,770 --> 00:03:28,960 ‫Donc, très facile, tout ce que nous avons à dire, ce sont des visites. 64 00:03:28,960 --> 00:03:32,050 ‫Donc, c'est la même chose que des tournées égales à des 65 00:03:32,050 --> 00:03:35,910 ‫tournées et encore une fois, vous savez déjà qu'à partir de ES 6, il suffit 66 00:03:35,910 --> 00:03:37,460 ‫de le faire comme ça. 67 00:03:40,100 --> 00:03:42,810 ‫Génial, donc chaque fois qu'il y a 68 00:03:42,810 --> 00:03:45,860 ‫maintenant une demande pour la page d'aperçu, donc essentiellement notre 69 00:03:45,860 --> 00:03:49,290 ‫page d'accueil de notre site Web rendu dynamiquement, toutes les données 70 00:03:49,290 --> 00:03:52,070 ‫de la tournée seront récupérées dans notre base de 71 00:03:52,070 --> 00:03:55,210 ‫données ici, puis ces données seront collées dans notre modèle. 72 00:03:55,210 --> 00:03:56,920 ‫Et maintenant, tout ce que 73 00:03:56,920 --> 00:04:00,150 ‫nous avons à faire est de créer ce modèle, n'est-ce pas ? 74 00:04:00,150 --> 00:04:03,560 ‫Passons donc à la vue d'ensemble. carlin. 75 00:04:03,560 --> 00:04:08,270 ‫Ici, nous pouvons réellement nous débarrasser de cet espace réservé h1 ici. 76 00:04:08,270 --> 00:04:10,410 ‫Et, maintenant, je veux jeter un coup 77 00:04:10,410 --> 00:04:12,683 ‫d'œil au fichier html statique ici à nouveau. 78 00:04:13,950 --> 00:04:18,320 ‫Donc, c'est dans le dossier public, 79 00:04:18,320 --> 00:04:22,120 ‫puis aperçu. html, d'accord ? 80 00:04:22,120 --> 00:04:24,370 ‫Donc, nous avons déjà construit l'en-tête 81 00:04:24,370 --> 00:04:26,000 ‫dans l'une des conférences 82 00:04:26,000 --> 00:04:29,780 ‫précédentes et il est maintenant temps de construire cette partie ici. 83 00:04:29,780 --> 00:04:31,670 ‫Maintenant, lorsque nous avons construit le 84 00:04:31,670 --> 00:04:34,450 ‫modèle pour la première fois, je me suis trompé dans mon 85 00:04:34,450 --> 00:04:37,010 ‫fichier html et j'avais un aperçu de la classe de 86 00:04:37,010 --> 00:04:38,950 ‫section, mais dans votre fichier de démarrage, vous 87 00:04:38,950 --> 00:04:41,410 ‫auriez dû avoir ce main avec la classe main. 88 00:04:41,410 --> 00:04:43,430 ‫Et, donc je crois que dans votre dossier 89 00:04:43,430 --> 00:04:46,240 ‫il y a en fait un petit texte expliquant ça, d'accord ? 90 00:04:46,240 --> 00:04:49,050 ‫Mais, de toute façon, nous avons en fait supprimé cette partie 91 00:04:49,050 --> 00:04:50,720 ‫de notre modèle de base. 92 00:04:50,720 --> 00:04:52,480 ‫Alors, rappelez-vous qu'ici, dans le 93 00:04:52,480 --> 00:04:55,370 ‫contenu, nous n'avons en fait pas de code HTML. 94 00:04:55,370 --> 00:04:57,800 ‫Donc, cet élément principal qui se 95 00:04:57,800 --> 00:05:00,510 ‫trouve actuellement dans le code html est introuvable. 96 00:05:00,510 --> 00:05:05,500 ‫Et maintenant, nous en avons besoin dans notre aperçu, d'accord ? 97 00:05:05,500 --> 00:05:09,790 ‫Alors, créons cette partie du html dans la vue d'ensemble car 98 00:05:09,790 --> 00:05:12,923 ‫après cela, nous avons toutes ces cartes répétitives. 99 00:05:14,200 --> 00:05:15,770 ‫Alors, jetons un coup d'œil à 100 00:05:15,770 --> 00:05:17,380 ‫cela aussi avant de copier le code. 101 00:05:17,380 --> 00:05:19,450 ‫Donc, vous voyez que nous avons 102 00:05:19,450 --> 00:05:23,340 ‫ces cartes ici et donc fondamentalement, chacune de ces cartes, donc chacun 103 00:05:23,340 --> 00:05:24,990 ‫de ces éléments ici, 104 00:05:24,990 --> 00:05:27,000 ‫est ce que j'appelle une carte. 105 00:05:27,000 --> 00:05:29,813 ‫Et, en gros, nous allons avoir neuf cartes. 106 00:05:30,650 --> 00:05:34,490 ‫Donc, ces neuf cartes sur cette page d'aperçu. 107 00:05:34,490 --> 00:05:37,560 ‫Et c'est neuf cartes parce qu'en ce moment nous avons 108 00:05:37,560 --> 00:05:39,080 ‫neuf tournées, mais bien 109 00:05:39,080 --> 00:05:42,780 ‫sûr, cela pourrait être moins ou plus de ces cartes, n'est-ce pas ? 110 00:05:42,780 --> 00:05:45,540 ‫Mais de toute façon, ce qui est important de 111 00:05:45,540 --> 00:05:48,150 ‫noter ici, c'est que ces cartes se répètent 112 00:05:48,150 --> 00:05:49,890 ‫en fait encore et encore. 113 00:05:49,890 --> 00:05:52,263 ‫Nous avons donc cet énorme élément de carte ici. 114 00:05:54,240 --> 00:05:56,340 ‫Et donc il y a 115 00:05:56,340 --> 00:06:01,083 ‫le premier, et puis il y a beaucoup d'éléments répétés égaux après. 116 00:06:01,940 --> 00:06:02,820 ‫D'accord? 117 00:06:02,820 --> 00:06:05,920 ‫Et donc, en fait, je suis allé de l'avant et j'ai créé un 118 00:06:05,920 --> 00:06:07,460 ‫modèle de carlin pour cette 119 00:06:07,460 --> 00:06:10,020 ‫carte uniquement, afin que nous n'ayons pas à l'écrire manuellement 120 00:06:10,020 --> 00:06:12,900 ‫maintenant et à perdre beaucoup de temps à le faire, d'accord ? 121 00:06:12,900 --> 00:06:15,660 ‫Cela rendrait le cours inutilement long et j'ai donc 122 00:06:15,660 --> 00:06:18,540 ‫décidé de créer ce modèle à l'avance pour que 123 00:06:18,540 --> 00:06:20,010 ‫nous puissions l'utiliser maintenant. 124 00:06:20,010 --> 00:06:22,970 ‫Maintenant, bien sûr, si vous souhaitez pratiquer un peu 125 00:06:22,970 --> 00:06:26,010 ‫plus vos compétences en carlin, n'hésitez pas à mettre la 126 00:06:26,010 --> 00:06:30,040 ‫vidéo en pause à ce stade, puis à traduire tout ce code en carlin. 127 00:06:30,040 --> 00:06:30,873 ‫Très bien? 128 00:06:30,873 --> 00:06:33,410 ‫Et quand vous avez terminé, vous pouvez alors revenir. 129 00:06:33,410 --> 00:06:36,400 ‫Mais maintenant, je vais réellement aller de l'avant et utiliser ce modèle. 130 00:06:36,400 --> 00:06:39,680 ‫Et c'est ici dans les données de développement, puis 131 00:06:39,680 --> 00:06:43,630 ‫dans les modèles et les modèles de cartes de visite, d'accord ? 132 00:06:43,630 --> 00:06:46,404 ‫Et c'est donc la carte entière 133 00:06:46,404 --> 00:06:50,333 ‫pour une carte, essentiellement traduite en code carlin, d'accord ? 134 00:06:51,210 --> 00:06:52,773 ‫Alors copions 135 00:06:54,090 --> 00:06:58,830 ‫tout cela, mettons-le ici dans la vue d'ensemble, d'accord ? 136 00:06:58,830 --> 00:07:01,700 ‫Et puis gardons à l'esprit qu'avant cela, nous avons 137 00:07:01,700 --> 00:07:05,030 ‫également besoin de ce conteneur principal et de ce conteneur de 138 00:07:05,030 --> 00:07:06,630 ‫carte, alors copions-le également. 139 00:07:10,440 --> 00:07:12,570 ‫Donc juste ici comme 140 00:07:12,570 --> 00:07:15,840 ‫référence, de sorte que nous pouvons maintenant écrire 141 00:07:16,720 --> 00:07:21,567 ‫main main et là-dedans nous avons un dev appelé card container. 142 00:07:23,870 --> 00:07:24,703 ‫D'accord? 143 00:07:24,703 --> 00:07:27,100 ‫Et puis, comme son nom 144 00:07:27,100 --> 00:07:29,533 ‫l'indique, ce conteneur va contenir la carte. 145 00:07:30,610 --> 00:07:33,240 ‫Alors maintenant, indentons ceci, car pour le moment, ce n'est 146 00:07:33,240 --> 00:07:35,720 ‫pas vraiment à l'intérieur du conteneur de la carte. 147 00:07:35,720 --> 00:07:38,490 ‫Donc pour le moment, ce serait à l'intérieur de main mais ce 148 00:07:38,490 --> 00:07:39,930 ‫n'est pas ce que nous voulons. 149 00:07:39,930 --> 00:07:42,450 ‫Et donc, je sélectionne tout et j'appuie sur l'onglet. 150 00:07:42,450 --> 00:07:44,770 ‫J'ai à nouveau appuyé sur Tab, et nous voyons maintenant 151 00:07:44,770 --> 00:07:45,950 ‫que le niveau est correct. 152 00:07:45,950 --> 00:07:47,693 ‫C'est à l'intérieur du conteneur de la carte. 153 00:07:49,310 --> 00:07:51,820 ‫Mais en fait, ce n'est toujours pas 154 00:07:51,820 --> 00:07:52,995 ‫correct à 100% 155 00:07:52,995 --> 00:07:56,540 ‫car cet élément devrait également être à l'intérieur de l'élément card. 156 00:07:56,540 --> 00:07:58,780 ‫Et pour une raison quelconque, copier ce 157 00:07:58,780 --> 00:08:00,600 ‫modèle d'un fichier à 158 00:08:00,600 --> 00:08:03,050 ‫l'autre a un peu gâché ce code. 159 00:08:03,050 --> 00:08:07,270 ‫Et donc faites attention à cela lorsque vous collez le 160 00:08:07,270 --> 00:08:08,830 ‫code comme ceci. 161 00:08:08,830 --> 00:08:11,490 ‫Donc, dans notre modèle d'origine, tout était correct, comme vous 162 00:08:11,490 --> 00:08:13,870 ‫le voyez, mais lorsque nous l'avons copié, c'est 163 00:08:13,870 --> 00:08:15,023 ‫un peu foiré. 164 00:08:16,160 --> 00:08:17,760 ‫Alors, fermons ça. 165 00:08:17,760 --> 00:08:19,340 ‫En fait, nous pouvons également 166 00:08:19,340 --> 00:08:21,800 ‫fermer cela, nous n'en avons plus besoin, et 167 00:08:21,800 --> 00:08:25,030 ‫en fait, également le modèle de base et le modèle de visite. 168 00:08:25,030 --> 00:08:27,580 ‫Nous ne travaillons donc qu'avec la vue d'ensemble pour le moment. 169 00:08:27,580 --> 00:08:30,377 ‫Et donc maintenant, nous avons cette carte ici. 170 00:08:30,377 --> 00:08:33,990 ‫Et maintenant, comme vous le voyez, c'est aussi une carte complètement statique. 171 00:08:33,990 --> 00:08:35,593 ‫Il n'utilise donc pas encore 172 00:08:35,593 --> 00:08:38,750 ‫les données que nous avons collées dans le modèle, n'est-ce pas ? 173 00:08:38,750 --> 00:08:42,180 ‫Il a donc cette image statique, il a tout ce texte ici, 174 00:08:42,180 --> 00:08:44,660 ‫et il n'utilise pas du tout la variable. 175 00:08:44,660 --> 00:08:46,960 ‫D'accord, parce que cette partie, je voulais en 176 00:08:46,960 --> 00:08:48,660 ‫fait la faire avec toi. 177 00:08:48,660 --> 00:08:51,440 ‫Parce qu'en fait c'est la partie la plus importante. 178 00:08:51,440 --> 00:08:53,730 ‫Donc, créer tout ce modèle comme 179 00:08:53,730 --> 00:08:56,370 ‫celui-ci n'est pas difficile et ce qui 180 00:08:56,370 --> 00:09:00,140 ‫compte vraiment, c'est comment le remplir de données, d'accord ? 181 00:09:00,140 --> 00:09:02,290 ‫Et c'est donc ce que nous allons faire ensuite. 182 00:09:02,290 --> 00:09:03,760 ‫Mais pour l'instant, 183 00:09:03,760 --> 00:09:06,409 ‫regardons à quoi cela ressemble en ce moment. 184 00:09:06,409 --> 00:09:09,370 ‫Alors gardez à l'esprit que nous ne devrions avoir qu'une seule 185 00:09:09,370 --> 00:09:11,070 ‫carte, et non neuf, d'accord ? 186 00:09:11,070 --> 00:09:14,240 ‫Car encore une fois, nous n'avons qu'un seul élément de carte statique 187 00:09:14,240 --> 00:09:15,083 ‫à ce stade. 188 00:09:16,760 --> 00:09:21,690 ‫Rechargez ceci, et cela n'a pas l'air si juste. 189 00:09:21,690 --> 00:09:24,833 ‫Essayons donc de comprendre ce qui se passe ici. 190 00:09:25,920 --> 00:09:28,083 ‫Nous avons donc notre élément principal lors 191 00:09:29,020 --> 00:09:31,940 ‫de notre création, puis nous avons également notre conteneur de cartes. 192 00:09:31,940 --> 00:09:32,970 ‫Mais alors, pour une raison 193 00:09:32,970 --> 00:09:34,723 ‫quelconque, il y a à nouveau un principal là-dedans. 194 00:09:36,230 --> 00:09:40,180 ‫Euh ah d'accord, je dois bien sûr supprimer cet élément 195 00:09:40,180 --> 00:09:43,223 ‫html d'origine que nous avons là. 196 00:09:44,150 --> 00:09:45,563 ‫Alors, essayons à nouveau. 197 00:09:46,920 --> 00:09:50,460 ‫Et maintenant, maintenant ça a l'air mieux, d'accord ? 198 00:09:50,460 --> 00:09:52,020 ‫Maintenant, l'image ici est 199 00:09:52,020 --> 00:09:54,340 ‫toujours manquante, mais peu importe pour l'instant. 200 00:09:54,340 --> 00:09:55,930 ‫Ce qui est important, 201 00:09:55,930 --> 00:09:59,570 ‫c'est que nous ayons cette jolie carte ici, d'accord ? 202 00:09:59,570 --> 00:10:01,360 ‫Maintenant, le fait est que nous 203 00:10:01,360 --> 00:10:04,940 ‫voulons bien sûr avoir une carte pour chacune des visites, n'est-ce pas ? 204 00:10:04,940 --> 00:10:07,220 ‫Et donc, fondamentalement, ce que nous 205 00:10:07,220 --> 00:10:10,343 ‫voulons faire maintenant, c'est parcourir ce tableau de tournées que 206 00:10:10,343 --> 00:10:13,070 ‫nous avons collé dans le modèle, n'est-ce pas ? 207 00:10:13,070 --> 00:10:14,950 ‫Donc, fondamentalement, cette variable de tournée. 208 00:10:14,950 --> 00:10:17,250 ‫Et gardez à l'esprit qu'il s'agit 209 00:10:17,250 --> 00:10:20,400 ‫d'un tableau car il contient plusieurs documents de visite. 210 00:10:20,400 --> 00:10:22,410 ‫Et donc, parcourons maintenant ce 211 00:10:22,410 --> 00:10:26,641 ‫tableau et créons une carte pour chacun des documents de visite, d'accord ? 212 00:10:26,641 --> 00:10:29,420 ‫Et heureusement, c'est très facile à faire 213 00:10:29,420 --> 00:10:33,860 ‫avec carlin car fondamentalement, carlin est livré avec des boucles intégrées, d'accord ? 214 00:10:33,860 --> 00:10:34,960 ‫Et maintenant, 215 00:10:36,130 --> 00:10:40,530 ‫nous pouvons faire chaque tournée en tournées, d'accord ? 216 00:10:40,530 --> 00:10:43,970 ‫Et donc, tours ici est la variable que nous avons 217 00:10:43,970 --> 00:10:45,460 ‫collée, puis à chaque 218 00:10:45,460 --> 00:10:47,830 ‫itération, la variable actuelle sera appelée tour. 219 00:10:47,830 --> 00:10:52,210 ‫On pourrait l'appeler x ou x y z ou autre chose mais ça 220 00:10:52,210 --> 00:10:55,790 ‫a du sens de l'appeler juste tournée, d'accord ? 221 00:10:55,790 --> 00:10:58,810 ‫Et donc, à chaque itération, ce qui entre alors 222 00:10:58,810 --> 00:11:01,800 ‫est ce qui sera imprimé en gros. 223 00:11:01,800 --> 00:11:05,363 ‫Donc, cela doit encore être indenté d'un niveau supplémentaire. 224 00:11:06,450 --> 00:11:08,740 ‫Donc, fondamentalement, c'est à l'intérieur 225 00:11:08,740 --> 00:11:11,380 ‫de cette déclaration de boucle ici. 226 00:11:11,380 --> 00:11:14,753 ‫Super, alors voyons à quoi ça ressemble maintenant. 227 00:11:15,800 --> 00:11:19,380 ‫Et donc nous devrions maintenant obtenir neuf cartes identiques. 228 00:11:19,380 --> 00:11:24,380 ‫Et effectivement, c'est exactement ce qui s'est passé, d'accord ? 229 00:11:24,400 --> 00:11:25,730 ‫Bien sûr, ces 230 00:11:25,730 --> 00:11:28,870 ‫données ici ne sont toujours pas créées dynamiquement. 231 00:11:28,870 --> 00:11:30,760 ‫Et c'est en fait exactement ce que nous 232 00:11:30,760 --> 00:11:32,373 ‫allons corriger dans la prochaine vidéo.