1
00:00:01,240 --> 00:00:03,170
‫- : Dans cette vidéo et

2
00:00:03,170 --> 00:00:06,540
‫la suivante, nous allons créer ensemble la page de détail de la tournée.

3
00:00:06,540 --> 00:00:07,500
‫Et en

4
00:00:07,500 --> 00:00:09,930
‫cours de route, vous apprendrez d'autres techniques de

5
00:00:09,930 --> 00:00:12,107
‫carlin comme les conditions et les mixins.

6
00:00:14,120 --> 00:00:15,840
‫Et comme je vous l'ai

7
00:00:15,840 --> 00:00:19,760
‫déjà montré, voici à quoi ressemble la page de détail de la tournée.

8
00:00:19,760 --> 00:00:22,590
‫Et c'est donc ce que nous allons construire dans

9
00:00:22,590 --> 00:00:24,640
‫cette vidéo et la suivante.

10
00:00:24,640 --> 00:00:26,180
‫Maintenant, la seule chose que nous

11
00:00:26,180 --> 00:00:27,550
‫allons laisser un peu

12
00:00:27,550 --> 00:00:29,490
‫plus tard est en fait cette carte.

13
00:00:29,490 --> 00:00:31,060
‫D'accord, mais tout le reste

14
00:00:31,060 --> 00:00:33,760
‫que nous allons construire dans ces conférences sur les outils.

15
00:00:33,760 --> 00:00:35,873
‫Y compris ces critiques.

16
00:00:37,510 --> 00:00:39,070
‫Très bien.

17
00:00:39,070 --> 00:00:41,830
‫Donc en ce moment nous avons notre aperçu

18
00:00:41,830 --> 00:00:43,350
‫et nous avons

19
00:00:43,350 --> 00:00:46,270
‫bien sûr ces boutons avec les URL déjà créées.

20
00:00:46,270 --> 00:00:49,430
‫Mais ensuite, lorsque nous essayons d'accéder à cette page, nous

21
00:00:49,430 --> 00:00:51,380
‫obtenons bien sûr cette erreur.

22
00:00:51,380 --> 00:00:52,380
‫Très bien.

23
00:00:52,380 --> 00:00:55,170
‫Revenons donc à notre code VS et

24
00:00:55,170 --> 00:00:57,470
‫je veux en fait commencer avec

25
00:00:57,470 --> 00:00:59,650
‫un petit défi pour vous.

26
00:00:59,650 --> 00:01:00,820
‫Donc, ce que je

27
00:01:00,820 --> 00:01:03,310
‫veux que vous fassiez, c'est de créer un itinéraire pour la

28
00:01:03,310 --> 00:01:06,180
‫page de détail en fonction de l'URL que nous venons de créer auparavant.

29
00:01:06,180 --> 00:01:07,370
‫Et ça va être

30
00:01:07,370 --> 00:01:09,100
‫similaire à ce que nous avons

31
00:01:09,100 --> 00:01:11,640
‫déjà ici, mais vous devez le modifier un peu.

32
00:01:11,640 --> 00:01:12,473
‫D'accord.

33
00:01:12,473 --> 00:01:13,306
‫Assez de

34
00:01:13,306 --> 00:01:16,120
‫cela, je veux aussi que vous construisiez ce contrôleur.

35
00:01:16,120 --> 00:01:17,530
‫Alors allez-y.

36
00:01:17,530 --> 00:01:19,370
‫Parce que pour le moment, nous

37
00:01:19,370 --> 00:01:20,910
‫n'avons que cet espace réservé.

38
00:01:20,910 --> 00:01:23,410
‫Et laissez-moi vous donner les étapes ici.

39
00:01:23,410 --> 00:01:25,130
‫Et comme toujours,

40
00:01:25,130 --> 00:01:26,660
‫nous devons

41
00:01:26,660 --> 00:01:29,120
‫d'abord obtenir les données.

42
00:01:29,120 --> 00:01:31,093
‫Cette fois pour la tournée demandée.

43
00:01:34,480 --> 00:01:35,313
‫Et pour cela,

44
00:01:35,313 --> 00:01:37,360
‫gardez à l'esprit que nous avons réellement besoin des critiques

45
00:01:37,360 --> 00:01:38,693
‫ici et aussi des guides touristiques.

46
00:01:43,670 --> 00:01:44,503
‫D'accord.

47
00:01:45,890 --> 00:01:46,723
‫Alors, encore

48
00:01:46,723 --> 00:01:48,700
‫une fois, jetons un coup d'œil à cela.

49
00:01:48,700 --> 00:01:51,140
‫Nous avons donc ces guides touristiques ici.

50
00:01:51,140 --> 00:01:54,230
‫C'est vrai, et il s'agit donc essentiellement d'un ensemble de données distinct.

51
00:01:54,230 --> 00:01:55,550
‫Donc utilisateurs.

52
00:01:55,550 --> 00:01:57,933
‫Et puis ici, nous avons aussi les critiques.

53
00:01:59,380 --> 00:02:00,730
‫Maintenant, ces guides touristiques

54
00:02:00,730 --> 00:02:03,330
‫ici, je pense qu'ils sont en fait automatiquement renseignés

55
00:02:03,330 --> 00:02:04,400
‫dans un modèle.

56
00:02:04,400 --> 00:02:06,930
‫Voyons donc cela très rapidement.

57
00:02:06,930 --> 00:02:08,270
‫Donc le modèle

58
00:02:09,610 --> 00:02:11,450
‫de tournée et donc,

59
00:02:11,450 --> 00:02:12,283
‫ouais.

60
00:02:12,283 --> 00:02:13,116
‫Donc, ici,

61
00:02:13,116 --> 00:02:14,400
‫nous avons ce remplissage automatique

62
00:02:14,400 --> 00:02:16,600
‫chaque fois qu'il y a une requête de

63
00:02:16,600 --> 00:02:18,070
‫recherche, mais uniquement pour les guides.

64
00:02:18,070 --> 00:02:20,160
‫Et donc n'oubliez pas de remplir également

65
00:02:20,160 --> 00:02:21,173
‫les avis.

66
00:02:22,530 --> 00:02:23,450
‫D'accord.

67
00:02:23,450 --> 00:02:24,513
‫Ensuite, après cela,

68
00:02:25,900 --> 00:02:27,120
‫nous allons construire un

69
00:02:27,120 --> 00:02:29,670
‫modèle mais nous le ferons ensemble d'accord, donc je n'ai

70
00:02:29,670 --> 00:02:31,470
‫pas besoin que vous fassiez cette partie.

71
00:02:33,880 --> 00:02:35,220
‫Et puis enfin,

72
00:02:35,220 --> 00:02:38,030
‫je veux que vous complétiez cette partie ici aussi.

73
00:02:38,030 --> 00:02:38,950
‫Restituez donc le

74
00:02:40,370 --> 00:02:41,203
‫modèle

75
00:02:42,130 --> 00:02:43,510
‫en utilisant à nouveau

76
00:02:44,930 --> 00:02:47,050
‫les données de la première étape.

77
00:02:47,050 --> 00:02:48,580
‫Très bien.

78
00:02:48,580 --> 00:02:50,120
‫C'est donc très simple aussi.

79
00:02:50,120 --> 00:02:51,300
‫Et donc ce que

80
00:02:51,300 --> 00:02:52,870
‫je veux que vous fassiez, c'est de

81
00:02:52,870 --> 00:02:54,410
‫créer l'itinéraire, puis d'obtenir également les données.

82
00:02:54,410 --> 00:02:57,763
‫Bon alors mettez la vidéo en pause ici et bonne chance avec ça.

83
00:03:01,540 --> 00:03:03,280
‫J'espère donc que vous l'avez fait

84
00:03:03,280 --> 00:03:05,950
‫et pour me le faire savoir, résolvez-le ici pour vous.

85
00:03:05,950 --> 00:03:08,090
‫Et nous allons commencer par l'itinéraire.

86
00:03:08,090 --> 00:03:11,360
‫Et maintenant, tout ce que nous devons réellement ajouter ici, c'est cette limace.

87
00:03:11,360 --> 00:03:14,510
‫Et bien sûr, nous le faisons en tant que paramètre d'URL.

88
00:03:14,510 --> 00:03:17,693
‫Alors juste comme ça, l'appelant slug.

89
00:03:18,885 --> 00:03:21,150
‫Alors avant d'utiliser l'identifiant, n'est-ce pas ?

90
00:03:21,150 --> 00:03:22,660
‫Et donc nous l'avons

91
00:03:22,660 --> 00:03:25,480
‫eu comme ça et maintenant appelons ça la limace.

92
00:03:25,480 --> 00:03:26,313
‫Très bien.

93
00:03:26,313 --> 00:03:27,146
‫Car encore une

94
00:03:27,146 --> 00:03:29,560
‫fois, c'est à cela que ressemble la page d'aperçu.

95
00:03:29,560 --> 00:03:32,413
‫Nous avons essentiellement des slash slug de tournée.

96
00:03:33,780 --> 00:03:36,100
‫D'accord, et c'est ce que nous

97
00:03:36,100 --> 00:03:39,460
‫allons ensuite utiliser pour créer le tour dans le contrôleur.

98
00:03:39,460 --> 00:03:41,500
‫Alors faisons-le maintenant ici.

99
00:03:41,500 --> 00:03:44,460
‫Donc const, tour

100
00:03:44,460 --> 00:03:48,633
‫égal attend tour et

101
00:03:51,970 --> 00:03:53,440
‫findone.

102
00:03:53,440 --> 00:03:56,540
‫Donc, cette fois, nous ne pouvons pas utiliser la recherche par ID.

103
00:03:56,540 --> 00:03:58,330
‫Eh bien parce que, nous

104
00:03:58,330 --> 00:04:00,130
‫ne connaissons pas l'ID de la tournée.

105
00:04:00,130 --> 00:04:01,030
‫Et donc

106
00:04:01,030 --> 00:04:04,040
‫à la place, nous cherchons par la limace.

107
00:04:04,040 --> 00:04:05,140
‫Et la

108
00:04:06,140 --> 00:04:07,540
‫limace est comme j'espère que

109
00:04:07,540 --> 00:04:09,940
‫vous savez la demande. params

110
00:04:09,940 --> 00:04:12,960
‫dot slug d'accord.

111
00:04:12,960 --> 00:04:15,180
‫Et maintenant enfin, c'est tout pour remplir

112
00:04:16,570 --> 00:04:18,263
‫le champ des tableaux.

113
00:04:19,390 --> 00:04:20,223
‫Très bien.

114
00:04:21,540 --> 00:04:24,063
‫Donc, le chemin à remplir est les avis.

115
00:04:25,080 --> 00:04:27,690
‫Et en fait, nous n'avons pas besoin de tous les champs ici.

116
00:04:27,690 --> 00:04:29,890
‫Précisons donc simplement ceux dont nous avons besoin.

117
00:04:30,810 --> 00:04:32,480
‫Et donc, ce n'est

118
00:04:32,480 --> 00:04:34,023
‫que la critique,

119
00:04:35,200 --> 00:04:36,113
‫la

120
00:04:37,290 --> 00:04:38,450
‫note et l'utilisateur.

121
00:04:38,450 --> 00:04:39,283
‫Car rappelez-vous

122
00:04:39,283 --> 00:04:40,600
‫que nous affichons en

123
00:04:41,500 --> 00:04:44,490
‫fait donc le nom d'utilisateur et la photo de l'utilisateur.

124
00:04:44,490 --> 00:04:45,460
‫Et puis

125
00:04:45,460 --> 00:04:47,873
‫bien sûr, la critique elle-même et la note.

126
00:04:50,065 --> 00:04:50,898
‫D'accord.

127
00:04:50,898 --> 00:04:51,910
‫Alors bien sûr,

128
00:04:51,910 --> 00:04:54,604
‫il se plaint que nous n'avons pas utilisé async.

129
00:04:54,604 --> 00:04:56,763
‫Et bien sûr, je n'allais pas l'oublier.

130
00:04:58,140 --> 00:04:59,300
‫Mais de toute

131
00:04:59,300 --> 00:05:02,290
‫façon c'est bien qu'ES Line nous prévienne de ce genre d'erreurs.

132
00:05:02,290 --> 00:05:04,660
‫Cela enlève vraiment beaucoup de

133
00:05:04,660 --> 00:05:06,353
‫bugs du développement.

134
00:05:07,880 --> 00:05:08,713
‫D'accord.

135
00:05:08,713 --> 00:05:09,770
‫Et puis

136
00:05:09,770 --> 00:05:12,030
‫ici, bien sûr, nous allons passer cette

137
00:05:12,030 --> 00:05:14,660
‫variable de visite dans notre modèle de visite.

138
00:05:14,660 --> 00:05:16,240
‫Alors celui-là.

139
00:05:16,240 --> 00:05:17,380
‫Donnez-lui une sauvegarde.

140
00:05:17,380 --> 00:05:19,010
‫Plus d'erreurs.

141
00:05:19,010 --> 00:05:21,590
‫Et donc cette partie est en fait maintenant terminée.

142
00:05:21,590 --> 00:05:22,940
‫Et donc tout ce que

143
00:05:22,940 --> 00:05:26,420
‫nous devons faire maintenant est d'aller de l'avant et de construire notre modèle.

144
00:05:26,420 --> 00:05:27,730
‫D'accord.

145
00:05:27,730 --> 00:05:28,940
‫Donc, nous

146
00:05:28,940 --> 00:05:30,920
‫devrions déjà l'avoir ici.

147
00:05:30,920 --> 00:05:32,193
‫Et ce sont les données de développement.

148
00:05:33,050 --> 00:05:34,230
‫Nous avons donc beaucoup

149
00:05:34,230 --> 00:05:35,490
‫de dossiers et beaucoup de données.

150
00:05:35,490 --> 00:05:37,370
‫Et cela peut devenir un peu

151
00:05:37,370 --> 00:05:39,090
‫déroutant à un moment donné.

152
00:05:39,090 --> 00:05:39,923
‫D'accord.

153
00:05:39,923 --> 00:05:40,923
‫Et

154
00:05:41,780 --> 00:05:45,310
‫donc, débarrassons-nous de ce contenu d'espace réservé ici.

155
00:05:45,310 --> 00:05:47,510
‫Et avant de faire quoi

156
00:05:47,510 --> 00:05:51,690
‫que ce soit d'autre, examinons à nouveau le fichier HTML d'origine.

157
00:05:51,690 --> 00:05:53,510
‫Qui est dans ce

158
00:05:53,510 --> 00:05:55,900
‫dossier public que je viens de fermer.

159
00:05:55,900 --> 00:05:58,080
‫Fermons tout cela ici, car je

160
00:05:59,180 --> 00:06:00,980
‫trouve cela vraiment déroutant.

161
00:06:03,150 --> 00:06:05,470
‫D'accord, les modèles aussi.

162
00:06:05,470 --> 00:06:08,290
‫Et maintenant, ce dont nous avons besoin, c'est de public et

163
00:06:08,290 --> 00:06:09,893
‫ensuite de tournée. html.

164
00:06:12,180 --> 00:06:14,950
‫Donc l'en-tête que nous avons déjà bien sûr.

165
00:06:14,950 --> 00:06:16,970
‫Et puis voici tout le contenu.

166
00:06:16,970 --> 00:06:17,803
‫Ainsi,

167
00:06:17,803 --> 00:06:18,880
‫toutes ces sections

168
00:06:18,880 --> 00:06:20,070
‫que nous avons sur

169
00:06:20,070 --> 00:06:23,110
‫notre page sont bien sûr traduites ici en HTML.

170
00:06:23,110 --> 00:06:24,360
‫Et comme

171
00:06:24,360 --> 00:06:26,830
‫avant, j'ai déjà créé un

172
00:06:26,830 --> 00:06:30,649
‫modèle Pug basé sur tout ce code HTML.

173
00:06:30,649 --> 00:06:33,390
‫Très bien, nous ne voudrions pas traduire

174
00:06:33,390 --> 00:06:35,630
‫ceci ici manuellement ensemble.

175
00:06:35,630 --> 00:06:36,640
‫D'accord.

176
00:06:36,640 --> 00:06:40,050
‫Je l'ai donc déjà ici dans ce fichier modèle.

177
00:06:40,050 --> 00:06:40,883
‫Mais bien

178
00:06:40,883 --> 00:06:42,630
‫sûr, encore une fois, si vous en

179
00:06:42,630 --> 00:06:44,020
‫avez envie, vous pouvez mettre la

180
00:06:44,020 --> 00:06:46,113
‫vidéo en pause maintenant et la traduire vous-même également.

181
00:06:47,010 --> 00:06:47,843
‫Très bien.

182
00:06:47,843 --> 00:06:49,870
‫Mais ce que je vais faire maintenant, c'est aller

183
00:06:49,870 --> 00:06:51,850
‫de l'avant et copier tout ce code.

184
00:06:51,850 --> 00:06:54,933
‫Ce qui est encore une tonne de code comme vous pouvez le voir.

185
00:06:56,310 --> 00:07:00,270
‫Alors copions tout cela et entrons dans notre visite

186
00:07:00,270 --> 00:07:02,090
‫et collons-le ici.

187
00:07:02,090 --> 00:07:05,240
‫Maintenant, l'annotation va à nouveau être fausse.

188
00:07:05,240 --> 00:07:08,920
‫Alors copions, ou sélectionnons en fait ce que nous venons de coller ici.

189
00:07:08,920 --> 00:07:11,990
‫Et donc tout sauf la première ligne est incorrect.

190
00:07:11,990 --> 00:07:14,490
‫Mais tout ce que nous devons faire ici est d'ajouter un onglet supplémentaire.

191
00:07:15,400 --> 00:07:16,910
‫Et c'est tout.

192
00:07:16,910 --> 00:07:20,420
‫Alors maintenant, ils sont tous au même niveau à l'intérieur de

193
00:07:20,420 --> 00:07:21,720
‫ce bloc de contenu.

194
00:07:21,720 --> 00:07:22,920
‫Donc section et

195
00:07:22,920 --> 00:07:23,980
‫section et

196
00:07:23,980 --> 00:07:26,410
‫donc fondamentalement toutes les sections sont maintenant

197
00:07:26,410 --> 00:07:27,700
‫au même niveau,

198
00:07:27,700 --> 00:07:29,570
‫donc elles sont toutes sœurs.

199
00:07:29,570 --> 00:07:30,403
‫Super.

200
00:07:30,403 --> 00:07:32,650
‫Alors fermons simplement tout cela dont nous

201
00:07:32,650 --> 00:07:33,973
‫n'avons plus besoin.

202
00:07:34,820 --> 00:07:36,070
‫Et donc comme

203
00:07:36,070 --> 00:07:38,150
‫avant, nous avons maintenant cette page statique

204
00:07:38,150 --> 00:07:40,120
‫ici avec toutes ces données statiques.

205
00:07:40,120 --> 00:07:43,310
‫Ce que nous savons, nous devrons procéder à un remplacement.

206
00:07:43,310 --> 00:07:44,700
‫Mais avant de faire

207
00:07:44,700 --> 00:07:46,960
‫cela, regardons simplement si notre route

208
00:07:46,960 --> 00:07:48,173
‫fonctionne déjà.

209
00:07:49,670 --> 00:07:50,840
‫D'accord.

210
00:07:50,840 --> 00:07:52,600
‫Alors rechargeons-le et cela

211
00:07:52,600 --> 00:07:54,700
‫nous donne la même erreur.

212
00:07:54,700 --> 00:07:55,690
‫Et je suppose

213
00:07:55,690 --> 00:07:56,970
‫que c'est parce qu'ici nous avons

214
00:07:56,970 --> 00:07:58,720
‫des tournées et non des tournées comme

215
00:07:58,720 --> 00:08:00,673
‫je pense que nous l'avons dans notre itinéraire.

216
00:08:03,410 --> 00:08:04,800
‫Alors ici, nous avons une tournée.

217
00:08:04,800 --> 00:08:07,560
‫Et c'est en fait ainsi que cela a du sens.

218
00:08:07,560 --> 00:08:10,443
‫Et donc allons-y et changeons cela ici dans

219
00:08:11,480 --> 00:08:12,313
‫notre aperçu.

220
00:08:13,690 --> 00:08:14,950
‫D'accord et donc

221
00:08:14,950 --> 00:08:16,670
‫ici, nous voulons réellement une tournée.

222
00:08:16,670 --> 00:08:17,680
‫Parce qu'en

223
00:08:17,680 --> 00:08:19,950
‫fait, nous ne voyons qu'une seule tournée

224
00:08:19,950 --> 00:08:21,333
‫et pas plusieurs tournées.

225
00:08:22,460 --> 00:08:23,570
‫À droite?

226
00:08:23,570 --> 00:08:25,800
‫Et donc si nous revenons à l'aperçu

227
00:08:25,800 --> 00:08:27,940
‫maintenant, nous le chargeons, et ouvrons

228
00:08:27,940 --> 00:08:29,800
‫maintenant The Forest Hiker,

229
00:08:29,800 --> 00:08:32,500
‫alors vous voyez que ce sera une tournée.

230
00:08:32,500 --> 00:08:33,420
‫Et puis

231
00:08:33,420 --> 00:08:35,533
‫bien sûr, nous obtenons le code HTML

232
00:08:35,533 --> 00:08:38,160
‫de la page que nous venons de créer.

233
00:08:38,160 --> 00:08:41,360
‫Maintenant, pour une raison quelconque, le CSS n'est pas là.

234
00:08:41,360 --> 00:08:42,860
‫Essayons juste de recharger ceci.

235
00:08:44,410 --> 00:08:46,100
‫Eh bien, qu'est-ce qui se passe ici?

236
00:08:46,100 --> 00:08:48,340
‫Essayons d'inspecter cela.

237
00:08:48,340 --> 00:08:50,440
‫Et je vois que nous avons quelques erreurs.

238
00:08:50,440 --> 00:08:52,510
‫On peut donc cliquer dessus.

239
00:08:52,510 --> 00:08:55,000
‫Et donc la raison du CSS manquant, car

240
00:08:55,000 --> 00:08:57,630
‫au lieu de cela, il essaie de charger le fichier

241
00:08:57,630 --> 00:08:58,640
‫au mauvais endroit.

242
00:08:58,640 --> 00:09:01,320
‫Il essaie donc de le charger dans le dossier CSS à

243
00:09:01,320 --> 00:09:02,310
‫l'intérieur de la tournée.

244
00:09:02,310 --> 00:09:04,890
‫Mais cela bien sûr n'existe pas.

245
00:09:04,890 --> 00:09:05,950
‫Et c'est parce

246
00:09:05,950 --> 00:09:08,430
‫que nous sommes ici sur cet itinéraire de tournée, d'accord.

247
00:09:08,430 --> 00:09:10,230
‫Et donc nous devons essentiellement corriger

248
00:09:10,230 --> 00:09:13,493
‫la façon dont nous importons le CSS dans notre modèle de base.

249
00:09:14,850 --> 00:09:16,113
‫Allons-y.

250
00:09:18,720 --> 00:09:19,950
‫Et donc ici

251
00:09:19,950 --> 00:09:23,070
‫en fait, nous devrions avoir une autre barre oblique.

252
00:09:23,070 --> 00:09:25,010
‫D'accord, et la même chose en fait ici.

253
00:09:25,010 --> 00:09:25,910
‫Et c'est

254
00:09:25,910 --> 00:09:27,153
‫donc exactement pour la

255
00:09:27,153 --> 00:09:30,770
‫même raison que je vous ai expliquée précédemment dans l'aperçu ci-dessous.

256
00:09:30,770 --> 00:09:33,930
‫Nous avons donc également commencé cette URL par une barre oblique.

257
00:09:33,930 --> 00:09:36,260
‫Et encore une fois, cela va alors commencer

258
00:09:36,260 --> 00:09:38,120
‫à la racine de la page.

259
00:09:38,120 --> 00:09:40,350
‫Et c'est comme ça que ça doit fonctionner.

260
00:09:40,350 --> 00:09:43,470
‫Et en fait, la même chose s'applique à toutes les images ici.

261
00:09:43,470 --> 00:09:45,630
‫Ainsi, toutes les images

262
00:09:45,630 --> 00:09:49,080
‫doivent toujours commencer par rapport à l'URL racine.

263
00:09:49,080 --> 00:09:52,030
‫Ajoutons donc cela très rapidement ici à toutes ces images.

264
00:09:54,800 --> 00:09:55,633
‫Et

265
00:09:55,633 --> 00:09:56,590
‫oui, c'est tout.

266
00:09:56,590 --> 00:09:57,723
‫C'est donc tous.

267
00:09:58,800 --> 00:09:59,813
‫Et donc,

268
00:10:01,020 --> 00:10:02,810
‫avec cela, nous avons corrigé

269
00:10:02,810 --> 00:10:06,210
‫la vue d'ensemble et également ce fichier de base.

270
00:10:06,210 --> 00:10:07,950
‫Donc, si nous rechargeons

271
00:10:07,950 --> 00:10:11,610
‫maintenant, nous devrions alors avoir accès au bon CSS.

272
00:10:11,610 --> 00:10:13,610
‫Et en effet, nous y voilà.

273
00:10:13,610 --> 00:10:15,000
‫Il y a juste une autre

274
00:10:15,000 --> 00:10:16,610
‫erreur qui est ici dans cette image.

275
00:10:16,610 --> 00:10:17,480
‫Et encore

276
00:10:17,480 --> 00:10:19,390
‫une fois, c'est parce qu'il essaie de

277
00:10:19,390 --> 00:10:20,830
‫le charger ici à partir

278
00:10:20,830 --> 00:10:22,830
‫de la visite et non de l'URL racine.

279
00:10:22,830 --> 00:10:23,663
‫Et donc,

280
00:10:23,663 --> 00:10:25,563
‫ce problème est ici dans l'en-tête.

281
00:10:27,040 --> 00:10:27,873
‫Et donc

282
00:10:27,873 --> 00:10:29,770
‫bien sûr, ici, nous devons également

283
00:10:29,770 --> 00:10:31,700
‫le rendre relatif au chemin racine.

284
00:10:31,700 --> 00:10:33,853
‫Probablement la même chose dans le pied de page.

285
00:10:34,950 --> 00:10:35,783
‫Et ouais.

286
00:10:37,180 --> 00:10:38,033
‫Très bien.

287
00:10:39,320 --> 00:10:41,960
‫Juste pour confirmer rapidement que, oui en

288
00:10:41,960 --> 00:10:43,573
‫effet, nous y voilà.

289
00:10:45,320 --> 00:10:46,350
‫Super.

290
00:10:46,350 --> 00:10:47,830
‫Donc, comme je l'ai

291
00:10:47,830 --> 00:10:49,890
‫mentionné bien sûr, cela contient toutes

292
00:10:49,890 --> 00:10:52,380
‫les données statiques sur The Park Camper Tour, qui

293
00:10:52,380 --> 00:10:54,650
‫sont celles que nous avons dans le modèle.

294
00:10:54,650 --> 00:10:57,140
‫Mais nous regardons le randonneur forestier.

295
00:10:57,140 --> 00:11:01,060
‫Et donc, commençons maintenant par corriger notre modèle et

296
00:11:01,060 --> 00:11:04,663
‫essentiellement en utilisant les données dynamiques ici.

297
00:11:07,620 --> 00:11:10,720
‫Donc, rappelez-vous que la variable que nous avons passée

298
00:11:10,720 --> 00:11:12,053
‫ici s'appelle tour.

299
00:11:13,210 --> 00:11:14,043
‫À droite?

300
00:11:14,043 --> 00:11:15,480
‫Donc ça s'appelle simplement

301
00:11:15,480 --> 00:11:18,100
‫tournée et c'est ainsi que nous devons l'appeler ici.

302
00:11:18,100 --> 00:11:18,933
‫Donc tournée. nom, et

303
00:11:19,997 --> 00:11:20,883
‫aussi le même ici.

304
00:11:21,720 --> 00:11:23,600
‫Et maintenant, vous savez déjà que nous devons utiliser

305
00:11:23,600 --> 00:11:24,630
‫une chaîne de modèle

306
00:11:24,630 --> 00:11:26,840
‫ici parce que nous voulons en fait créer une chaîne.

307
00:11:26,840 --> 00:11:29,993
‫Ainsi nommé. tour.

308
00:11:31,240 --> 00:11:32,463
‫Et ici, ce chemin n'est pas non plus correct.

309
00:11:33,460 --> 00:11:36,543
‫Tout d'abord, il doit s'agir d'une chaîne de modèle,

310
00:11:37,920 --> 00:11:40,530
‫puis de nos images, j'écrirai des visites

311
00:11:40,530 --> 00:11:42,250
‫de barres obliques d'images

312
00:11:42,250 --> 00:11:45,000
‫pour barrer le nom de l'image de couverture.

313
00:11:46,280 --> 00:11:48,983
‫Alors tour dot, et maintenant je ne

314
00:11:52,140 --> 00:11:53,330
‫me souviens plus

315
00:11:53,330 --> 00:11:56,880
‫si c'est une image de couverture, ou une image de couverture.

316
00:11:56,880 --> 00:12:00,080
‫Donc voilà.

317
00:12:00,080 --> 00:12:01,160
‫Couverture illustrée.

318
00:12:01,160 --> 00:12:01,993
‫D'accord.

319
00:12:03,780 --> 00:12:04,613
‫Essayons donc rapidement.

320
00:12:04,613 --> 00:12:07,140
‫Et rappelez-vous, nous sommes à The First Hiker.

321
00:12:07,140 --> 00:12:09,830
‫Et donc cela devrait maintenant être le nom.

322
00:12:09,830 --> 00:12:11,580
‫Et encore une autre erreur.

323
00:12:12,710 --> 00:12:14,480
‫Donc, il est dit ici, ne peut pas lire la

324
00:12:14,480 --> 00:12:15,450
‫visite de la propriété d'undefined.

325
00:12:15,450 --> 00:12:19,310
‫Alors revenons en arrière et

326
00:12:19,310 --> 00:12:21,020
‫oui.

327
00:12:21,890 --> 00:12:22,770
‫Voici donc cette erreur stupide.

328
00:12:22,770 --> 00:12:27,900
‫C'est donc bien sûr la tournée. nom et non nom.

329
00:12:27,900 --> 00:12:27,900
‫tour.

330
00:12:27,900 --> 00:12:30,420
‫Alors, à quoi pensais-je

331
00:12:30,420 --> 00:12:31,290
‫là-bas ?

332
00:12:31,290 --> 00:12:32,663
‫Rechargeons ceci et maintenant en

333
00:12:33,980 --> 00:12:34,910
‫effet, nous obtenons

334
00:12:34,910 --> 00:12:37,820
‫The Forest Hiker avec cette très belle image de couverture en arrière-plan.

335
00:12:37,820 --> 00:12:41,980
‫Super.

336
00:12:41,980 --> 00:12:42,813
‫Et continuons d'avancer ici.

337
00:12:42,813 --> 00:12:44,373
‫Créez donc encore une autre chaîne de modèle.

338
00:12:45,550 --> 00:12:47,723
‫Tour.

339
00:12:49,980 --> 00:12:50,813
‫Durée, puis

340
00:12:52,320 --> 00:12:53,343
‫le nombre de jours.

341
00:12:55,421 --> 00:12:57,680
‫Ensuite, ici, nous avons à nouveau l'emplacement

342
00:12:57,680 --> 00:12:58,560
‫de départ.

343
00:12:58,560 --> 00:13:03,930
‫Alors, visite.

344
00:13:03,930 --> 00:13:05,570
‫point de départ. description, rappelez-vous.

345
00:13:07,000 --> 00:13:09,643
‫Très bien.

346
00:13:11,440 --> 00:13:12,520
‫Maintenant, ici, nous avons

347
00:13:12,520 --> 00:13:14,070
‫ces boîtes de vue d'ensemble ici.

348
00:13:14,070 --> 00:13:16,220
‫Donc vue d'ensemble détail de la boîte.

349
00:13:16,220 --> 00:13:18,110
‫Et comme vous le voyez, nous

350
00:13:18,110 --> 00:13:19,100
‫avons ici

351
00:13:19,100 --> 00:13:21,660
‫quatre cases égales où la seule chose qui

352
00:13:21,660 --> 00:13:23,530
‫change est ce nom d'icône,

353
00:13:23,530 --> 00:13:25,687
‫puis la date et la date suivante.

354
00:13:25,687 --> 00:13:28,810
‫Bon, ici ce qui change ce n'est pas la prochaine

355
00:13:28,810 --> 00:13:29,643
‫date, ce

356
00:13:29,643 --> 00:13:32,140
‫qui change c'est la description des cases.

357
00:13:32,140 --> 00:13:34,210
‫Donc prochaine date,

358
00:13:34,210 --> 00:13:36,540
‫difficulté, participants et note.

359
00:13:36,540 --> 00:13:38,500
‫Très bien.

360
00:13:38,500 --> 00:13:39,350
‫Et donc

361
00:13:39,350 --> 00:13:40,260
‫fondamentalement, ce code ici

362
00:13:40,260 --> 00:13:42,550
‫est toujours le même avec seulement trois morceaux qui changent.

363
00:13:42,550 --> 00:13:44,710
‫Donc le nom de l'icône, la description et

364
00:13:44,710 --> 00:13:46,100
‫la valeur de cette description.

365
00:13:46,100 --> 00:13:49,560
‫Et donc, puisque nous n'aimons pas le code répété, n'est-ce

366
00:13:49,560 --> 00:13:50,393
‫pas ?

367
00:13:50,393 --> 00:13:53,510
‫Utilisons une autre fonctionnalité de Pug que nous

368
00:13:53,510 --> 00:13:56,070
‫n'avons pas encore utilisée et qui

369
00:13:56,070 --> 00:13:57,410
‫s'appelle mixins.

370
00:13:57,410 --> 00:13:59,500
‫Les mixins sont donc essentiellement des

371
00:13:59,500 --> 00:14:03,060
‫morceaux de code réutilisables dans lesquels nous pouvons passer des arguments.

372
00:14:03,060 --> 00:14:05,060
‫Donc un peu comme une fonction.

373
00:14:05,060 --> 00:14:06,940
‫Et c'est aussi exactement comme les mixins dans SAS.

374
00:14:06,940 --> 00:14:10,400
‫C'est donc un pré-processeur CSS que

375
00:14:10,400 --> 00:14:12,460
‫vous connaissez peut-être.

376
00:14:12,460 --> 00:14:14,370
‫Alors copions ce code ici pour cette boîte de présentation.

377
00:14:14,370 --> 00:14:17,950
‫Donc en le copiant.

378
00:14:17,950 --> 00:14:19,200
‫Et maintenant ici,

379
00:14:19,200 --> 00:14:22,240
‫à partir de ce bloc, créons ensuite un nouveau mixin.

380
00:14:22,240 --> 00:14:24,353
‫Nous écrivons donc mixin puis le

381
00:14:25,930 --> 00:14:29,140
‫nom du mixin, que j'appelle la boîte de vue d'ensemble.

382
00:14:29,140 --> 00:14:30,793
‫Et puis un peu comme

383
00:14:33,400 --> 00:14:35,200
‫une fonction, on peut spécifier des arguments.

384
00:14:35,200 --> 00:14:37,200
‫Et alors rappelez-vous comment nous

385
00:14:37,200 --> 00:14:41,430
‫avons la description de la boîte, puis nous avons la valeur de cette

386
00:14:41,430 --> 00:14:43,600
‫description et appelons-la simplement du texte ici.

387
00:14:43,600 --> 00:14:45,283
‫Et puis aussi, le nom de l'icône.

388
00:14:46,241 --> 00:14:48,570
‫D'accord.

389
00:14:48,570 --> 00:14:49,790
‫Alors maintenant, copions ce

390
00:14:49,790 --> 00:14:52,020
‫texte ici et bien sûr, cela gâche maintenant

391
00:14:53,447 --> 00:14:54,450
‫notre formatage.

392
00:14:54,450 --> 00:14:56,853
‫Corrigeons cela rapidement.

393
00:14:58,420 --> 00:14:59,980
‫Et maintenant, ces variables ici, elles fonctionnent

394
00:15:02,047 --> 00:15:02,880
‫vraiment comme

395
00:15:02,880 --> 00:15:04,320
‫toutes les autres variables de Pug.

396
00:15:04,320 --> 00:15:07,940
‫Donc, ici, cela devrait maintenant être le

397
00:15:07,940 --> 00:15:08,773
‫texte.

398
00:15:08,773 --> 00:15:11,563
‫À droite?

399
00:15:13,640 --> 00:15:14,473
‫Et ceci ici devrait être la description.

400
00:15:14,473 --> 00:15:16,410
‫Donc description égale.

401
00:15:18,300 --> 00:15:20,920
‫Eh bien, ici, cela s'appelle en fait label dans le CSS.

402
00:15:20,920 --> 00:15:23,730
‫Appelons-le donc étiquette ici aussi.

403
00:15:23,730 --> 00:15:26,303
‫Bon alors étiquette, texte et icône.

404
00:15:28,210 --> 00:15:30,833
‫Et donc ici, nous devons également changer le nom

405
00:15:31,850 --> 00:15:35,280
‫de cette icône et tous ces noms d'icônes commencent toujours par

406
00:15:35,280 --> 00:15:36,530
‫un tiret d'icône.

407
00:15:36,530 --> 00:15:38,730
‫Et donc tout ce que nous avons vraiment

408
00:15:38,730 --> 00:15:40,630
‫besoin de remplacer est cette pièce.

409
00:15:40,630 --> 00:15:42,350
‫Créons donc à nouveau une chaîne de modèle.

410
00:15:42,350 --> 00:15:44,963
‫Et puis débarrassez-vous de ça.

411
00:15:46,500 --> 00:15:48,493
‫Et icône.

412
00:15:51,690 --> 00:15:52,943
‫D'accord et maintenant nous pouvons l'utiliser.

413
00:15:54,000 --> 00:15:56,363
‫Je voulais aussi dire que nous

414
00:15:57,310 --> 00:15:58,800
‫aurions également pu

415
00:15:58,800 --> 00:16:03,200
‫exporter ce mixin dans un autre fichier, puis inclure ce fichier ici.

416
00:16:03,200 --> 00:16:05,170
‫Mais je pense que cela n'a pas beaucoup de sens.

417
00:16:05,170 --> 00:16:07,040
‫Dans ce cas car

418
00:16:07,040 --> 00:16:09,780
‫ce n'est pas vraiment beaucoup de code.

419
00:16:09,780 --> 00:16:11,890
‫Quoi qu'il en soit, allons-y maintenant et utilisons

420
00:16:11,890 --> 00:16:12,723
‫ce mixin.

421
00:16:12,723 --> 00:16:15,760
‫Alors permettez-moi de copier juste le nom de celui-ci.

422
00:16:15,760 --> 00:16:17,510
‫Et donc ici au lieu de cette boîte de vue d'ensemble.

423
00:16:18,490 --> 00:16:22,203
‫Et pour l'instant, permettez-moi de le dupliquer ici.

424
00:16:23,290 --> 00:16:25,840
‫D'accord, nous avons donc utilisé ce mixin

425
00:16:27,290 --> 00:16:29,310
‫en écrivant plus, puis, comme une

426
00:16:29,310 --> 00:16:31,220
‫fonction normale, nous y avons

427
00:16:31,220 --> 00:16:33,130
‫passé des arguments vides.

428
00:16:33,130 --> 00:16:35,340
‫Et donc notre première boîte de vue d'ensemble est la prochaine date.

429
00:16:35,340 --> 00:16:38,043
‫Alors pour l'instant, juste la date qui est ici.

430
00:16:41,150 --> 00:16:43,380
‫Alors juste que je peux vous montrer que cela fonctionne en fait.

431
00:16:43,380 --> 00:16:46,383
‫Donc 20, 21

432
00:16:47,600 --> 00:16:49,480
‫août.

433
00:16:49,480 --> 00:16:50,380
‫Et

434
00:16:50,380 --> 00:16:51,363
‫puis ici, calendrier.

435
00:16:52,400 --> 00:16:53,510
‫D'accord parce que c'est le nom ici de l'icône.

436
00:16:53,510 --> 00:16:56,280
‫Et maintenant, nous devrions

437
00:16:56,280 --> 00:16:58,420
‫avoir deux boîtes.

438
00:16:58,420 --> 00:16:59,810
‫Donc celui-ci et

439
00:16:59,810 --> 00:17:01,560
‫celui-ci qui devraient se ressembler exactement.

440
00:17:01,560 --> 00:17:03,740
‫Alors confirmons-le rapidement.

441
00:17:03,740 --> 00:17:05,800
‫Et ainsi, nous pouvons passer à

442
00:17:05,800 --> 00:17:07,830
‫l'utilisation correcte du mixin.

443
00:17:07,830 --> 00:17:10,103
‫Et oui, voici donc nos deux box

444
00:17:11,220 --> 00:17:12,240
‫exactement identiques.

445
00:17:12,240 --> 00:17:15,163
‫Super.

446
00:17:16,450 --> 00:17:17,490
‫Alors débarrassons-nous de ce premier.

447
00:17:17,490 --> 00:17:20,203
‫Et bien sûr, ici, nous voulons la

448
00:17:24,450 --> 00:17:25,760
‫vraie date.

449
00:17:25,760 --> 00:17:27,233
‫D'accord.

450
00:17:28,540 --> 00:17:29,410
‫Et c'est

451
00:17:29,410 --> 00:17:33,960
‫ainsi, ajoutez la tournée. début, dates, zéro.

452
00:17:33,960 --> 00:17:34,793
‫Jetons donc un œil à cela.

453
00:17:36,450 --> 00:17:37,283
‫Et rappelez-vous que

454
00:17:38,330 --> 00:17:39,910
‫cela va avoir l'air un peu bizarre.

455
00:17:39,910 --> 00:17:41,310
‫Comme avant.

456
00:17:41,310 --> 00:17:43,410
‫D'accord.

457
00:17:43,410 --> 00:17:45,083
‫Alors allons de l'avant et corrigeons cela.

458
00:17:45,920 --> 00:17:46,860
‫Alors prenons cela à partir d'ici.

459
00:17:46,860 --> 00:17:49,820
‫Et donc ce dont nous avons besoin, c'est

460
00:17:49,820 --> 00:17:52,503
‫fondamentalement de ceci à la place.

461
00:17:53,610 --> 00:17:55,220
‫Maintenant, je ne

462
00:17:55,220 --> 00:17:57,603
‫veux pas allonger cette ligne ici

463
00:17:59,370 --> 00:18:01,290
‫en la collant simplement ici.

464
00:18:01,290 --> 00:18:02,300
‫Et alors pourquoi ne

465
00:18:02,300 --> 00:18:04,800
‫pas simplement créer une nouvelle variable de script java pour cela.

466
00:18:04,800 --> 00:18:06,700
‫N'oubliez donc pas que nous devons utiliser

467
00:18:06,700 --> 00:18:08,560
‫cette syntaxe ici afin de créer

468
00:18:08,560 --> 00:18:11,100
‫un code de script Java qui ne produira aucune sortie.

469
00:18:11,100 --> 00:18:12,910
‫Et là encore, nous

470
00:18:12,910 --> 00:18:15,083
‫pouvons simplement écrire un script Java ici.

471
00:18:16,780 --> 00:18:17,613
‫D'accord.

472
00:18:17,613 --> 00:18:20,133
‫Et donc maintenant ici, je vais simplement utiliser

473
00:18:21,060 --> 00:18:21,893
‫cette date.

474
00:18:21,893 --> 00:18:24,780
‫Super.

475
00:18:24,780 --> 00:18:26,240
‫Et maintenant, dupliquons ceci ici quelques fois pour toutes

476
00:18:26,240 --> 00:18:27,073
‫les boîtes que nous avons.

477
00:18:27,073 --> 00:18:29,470
‫Donc le premier est pour la difficulté.

478
00:18:29,470 --> 00:18:31,610
‫Et l'icône est à la mode.

479
00:18:31,610 --> 00:18:33,623
‫Ensuite, le prochain est pour les participants.

480
00:18:37,150 --> 00:18:38,833
‫Avec l'icône de l'utilisateur.

481
00:18:41,970 --> 00:18:44,483
‫Et le dernier est la notation.

482
00:18:48,040 --> 00:18:50,220
‫Et l'icône est une star.

483
00:18:50,220 --> 00:18:52,383
‫Donc ici nous avons la date mais, ici dans la difficulté

484
00:18:58,010 --> 00:18:59,403
‫nous avons en fait une tournée. difficulté.

485
00:19:00,540 --> 00:19:02,770
‫Alors ici pour les

486
00:19:02,770 --> 00:19:05,080
‫participants nous voulons cette chaîne.

487
00:19:06,860 --> 00:19:07,860
‫Comme 10 personnes.

488
00:19:09,149 --> 00:19:10,810
‫Donc, une chaîne

489
00:19:10,810 --> 00:19:12,740
‫de modèle disant tournée. mélange, la

490
00:19:12,740 --> 00:19:14,053
‫taille

491
00:19:15,160 --> 00:19:19,120
‫du groupe, puis les gens.

492
00:19:21,327 --> 00:19:22,940
‫Et enfin on veut la note et

493
00:19:22,940 --> 00:19:23,823
‫ensuite sur cinq.

494
00:19:24,740 --> 00:19:25,573
‫Alors tournée,

495
00:19:26,950 --> 00:19:28,570
‫et je ne me

496
00:19:28,570 --> 00:19:30,850
‫souviens jamais comment j'ai appelé ce champ.

497
00:19:30,850 --> 00:19:32,333
‫Et c'est la moyenne des notes.

498
00:19:37,130 --> 00:19:38,530
‫Très bien.

499
00:19:38,530 --> 00:19:40,730
‫Et puis, sur

500
00:19:40,730 --> 00:19:44,673
‫cinq.

501
00:19:49,730 --> 00:19:50,563
‫D'accord.

502
00:19:50,563 --> 00:19:51,396
‫Et ça devrait être ça.

503
00:19:51,396 --> 00:19:52,380
‫Maintenant, nous pouvons nous débarrasser de tout ce code.

504
00:19:52,380 --> 00:19:53,213
‫Et comme ça, c'est beaucoup plus joli.

505
00:19:54,560 --> 00:19:55,393
‫Et

506
00:19:55,393 --> 00:19:56,530
‫juste pour nous

507
00:19:56,530 --> 00:19:58,660
‫assurer que cela fonctionne, faisons une

508
00:19:58,660 --> 00:20:01,760
‫sauvegarde ici, rechargez, et en effet, nous obtenons facilement,

509
00:20:01,760 --> 00:20:03,820
‫25 personnes et la note

510
00:20:03,820 --> 00:20:05,203
‫de cinq sur cinq.

511
00:20:06,370 --> 00:20:08,140
‫Impressionnant.

512
00:20:08,140 --> 00:20:09,350
‫Nous avons donc déjà parcouru

513
00:20:09,350 --> 00:20:12,170
‫beaucoup de terrain, mais divisons cette vidéo en deux et continuons avec

514
00:20:12,170 --> 00:20:13,453
‫le reste de la page directement

515
00:20:14,360 --> 00:20:15,193
‫dans la suivante.