﻿1
00:00:01,150 --> 00:00:02,170
‫Instruktur: Dalam

2
00:00:02,170 --> 00:00:05,883
‫kuliah ini, kita akan mulai benar-benar membangun halaman tinjauan tur.

3
00:00:07,500 --> 00:00:09,170
‫Dan ingat, seperti

4
00:00:09,170 --> 00:00:11,900
‫inilah tampilan halaman ikhtisar sekarang.

5
00:00:11,900 --> 00:00:13,790
‫Jadi itu tidak memiliki konten

6
00:00:13,790 --> 00:00:16,860
‫nyata, dan itulah yang akan kami tambahkan dalam video ini.

7
00:00:16,860 --> 00:00:19,740
‫Jadi kita di sini di rute root

8
00:00:19,740 --> 00:00:22,803
‫ini, dan sekali lagi, di situlah gambarannya, oke?

9
00:00:23,670 --> 00:00:25,210
‫Jadi di router

10
00:00:25,210 --> 00:00:28,650
‫tampilan kami, tentu saja rute ini, oke?

11
00:00:28,650 --> 00:00:30,650
‫Jadi pengontrol yang bertanggung

12
00:00:30,650 --> 00:00:34,697
‫jawab untuk merender halaman ini adalah pengontrol getoverview, oke?

13
00:00:34,697 --> 00:00:37,650
‫Jadi pertama-tama mari kita pergi ke sini, dan

14
00:00:37,650 --> 00:00:39,840
‫menjelaskan langkah-langkah yang akan kita ambil

15
00:00:39,840 --> 00:00:41,373
‫untuk merender halaman ini.

16
00:00:42,650 --> 00:00:44,950
‫Jadi, hal pertama yang harus kita

17
00:00:44,950 --> 00:00:47,750
‫lakukan adalah benar-benar mendapatkan semua data wisata dari

18
00:00:47,750 --> 00:00:49,273
‫koleksi kita, bukan?

19
00:00:51,120 --> 00:00:52,170
‫Jadi dapatkan

20
00:00:54,740 --> 00:00:56,010
‫data tur dari koleksi.

21
00:00:56,010 --> 00:00:58,310
‫Kemudian kedua, kita akan membuat template kita dan

22
00:01:00,290 --> 00:01:01,420
‫tentunya kita tidak

23
00:01:01,420 --> 00:01:03,630
‫akan melakukannya di sini dalam fungsi pengontrol ini.

24
00:01:03,630 --> 00:01:05,333
‫Tapi, mari kita tetap menulisnya di sini.

25
00:01:06,800 --> 00:01:11,800
‫Jadi, buat template, lalu render template itu, menggunakan

26
00:01:14,210 --> 00:01:18,360
‫data tur dari langkah pertama.

27
00:01:18,360 --> 00:01:20,350
‫Jadi, dimulai dengan langkah

28
00:01:20,350 --> 00:01:22,930
‫pertama di sini, dapatkan data tur dari

29
00:01:22,930 --> 00:01:25,013
‫koleksi, itu berarti tentu saja kita

30
00:01:25,013 --> 00:01:27,413
‫harus benar-benar mengimpor model tur terlebih dahulu.

31
00:01:31,100 --> 00:01:34,030
‫Jadi, itu adalah sesuatu yang sudah sering

32
00:01:34,030 --> 00:01:35,513
‫kami lakukan sebelumnya.

33
00:01:36,490 --> 00:01:38,340
‫Itu sebenarnya satu tingkat, dan

34
00:01:38,340 --> 00:01:39,673
‫kemudian dalam model.

35
00:01:41,390 --> 00:01:42,593
‫dan model wisata.

36
00:01:45,300 --> 00:01:46,470
‫Dan kemudian kita

37
00:01:46,470 --> 00:01:48,163
‫juga akan membutuhkan fungsi atau

38
00:01:51,240 --> 00:01:52,290
‫catchAsync, karena

39
00:01:52,290 --> 00:01:55,513
‫tentu saja get Overview ini akan menjadi fungsi asynchronous.

40
00:02:04,190 --> 00:02:09,190
‫Baiklah, jadi mari kita tandai yang ini sebagai asinkron.

41
00:02:11,340 --> 00:02:14,120
‫Kami sekarang juga membutuhkan next di sini untuk

42
00:02:14,120 --> 00:02:16,123
‫membuat fungsi catchAsync benar-benar berfungsi.

43
00:02:22,690 --> 00:02:25,770
‫Oke, jadi saya harap sekarang Anda benar-benar mulai melihat

44
00:02:25,770 --> 00:02:28,020
‫nilai dari kami yang telah membangun

45
00:02:28,020 --> 00:02:29,850
‫semua hal api dan

46
00:02:29,850 --> 00:02:33,380
‫semua kode yang telah kami lakukan hingga saat ini, sehingga

47
00:02:33,380 --> 00:02:37,680
‫yang perlu kami lakukan sekarang adalah benar-benar memasang semua ini potongan-potongan bersama-sama, oke?

48
00:02:37,680 --> 00:02:40,530
‫Jadi, kita sudah tahu sekarang bagaimana melakukan semua hal ini.

49
00:02:40,530 --> 00:02:44,060
‫Kami sudah memiliki model tur kami yang berfungsi dengan benar.

50
00:02:44,060 --> 00:02:46,033
‫Jadi sekarang semua ini sangat mudah.

51
00:02:47,460 --> 00:02:51,880
‫Jadi const wisata sama dengan menunggu.

52
00:02:51,880 --> 00:02:54,620
‫Jadi sekali lagi, tidak ada yang baru saat ini.

53
00:02:54,620 --> 00:02:58,423
‫Dan temukan, semuanya pada dasarnya, oke?

54
00:02:59,310 --> 00:03:01,700
‫Dan sekarang apa yang sebenarnya akan kita

55
00:03:01,700 --> 00:03:03,960
‫lakukan dengan data tur ini?

56
00:03:03,960 --> 00:03:06,510
‫Nah, kita harus menempelkan semua data tur

57
00:03:06,510 --> 00:03:09,700
‫ini ke dalam template, sehingga di sana kita benar-benar

58
00:03:09,700 --> 00:03:12,610
‫dapat menggunakan dan menampilkannya di situs web, bukan?

59
00:03:12,610 --> 00:03:14,910
‫Jadi, itu sebenarnya sangat mudah dilakukan.

60
00:03:14,910 --> 00:03:18,300
‫Yang perlu kita lakukan adalah meletakkannya di

61
00:03:18,300 --> 00:03:22,200
‫sini di objek yang akan ditempelkan ke template

62
00:03:22,200 --> 00:03:24,770
‫ikhtisar dalam kasus ini, oke?

63
00:03:24,770 --> 00:03:28,960
‫Jadi, sangat mudah, yang perlu kita katakan hanyalah tur.

64
00:03:28,960 --> 00:03:32,050
‫Jadi, itu sama dengan tur sama dengan tur

65
00:03:32,050 --> 00:03:35,910
‫dan sekali lagi Anda sudah tahu bahwa mulai dari ES

66
00:03:35,910 --> 00:03:37,460
‫6 cukup seperti ini.

67
00:03:40,100 --> 00:03:42,810
‫Bagus, jadi kapan pun sekarang ada

68
00:03:42,810 --> 00:03:45,860
‫permintaan untuk halaman ikhtisar, jadi pada dasarnya beranda kami

69
00:03:45,860 --> 00:03:49,290
‫dari situs web kami yang dirender secara dinamis, semua data

70
00:03:49,290 --> 00:03:52,070
‫tur akan diambil dari database kami di sini

71
00:03:52,070 --> 00:03:55,210
‫dan kemudian data itu akan ditempelkan ke template kami.

72
00:03:55,210 --> 00:03:56,920
‫Jadi sekarang yang perlu

73
00:03:56,920 --> 00:04:00,150
‫kita lakukan adalah benar-benar membangun template itu, bukan?

74
00:04:00,150 --> 00:04:03,560
‫Jadi mari kita beralih ke ikhtisar. pesek

75
00:04:03,560 --> 00:04:08,270
‫Di sini kita benar-benar dapat menyingkirkan placeholder h1 ini di sini.

76
00:04:08,270 --> 00:04:10,410
‫Dan, sekarang saya ingin melihat

77
00:04:10,410 --> 00:04:12,683
‫file html statis di sini lagi.

78
00:04:13,950 --> 00:04:18,320
‫Jadi, itu ada di folder publik,

79
00:04:18,320 --> 00:04:22,120
‫lalu ikhtisar. html, oke?

80
00:04:22,120 --> 00:04:24,370
‫Jadi, kita sudah membuat header di

81
00:04:24,370 --> 00:04:26,000
‫salah satu kuliah

82
00:04:26,000 --> 00:04:29,780
‫sebelumnya dan sekarang saatnya membangun bagian itu di sini.

83
00:04:29,780 --> 00:04:31,670
‫Sekarang, ketika kami pertama

84
00:04:31,670 --> 00:04:34,450
‫kali membuat template, saya sebenarnya salah dalam file

85
00:04:34,450 --> 00:04:37,010
‫html saya dan saya memiliki tinjauan kelas bagian,

86
00:04:37,010 --> 00:04:38,950
‫tetapi dalam file starter Anda, Anda

87
00:04:38,950 --> 00:04:41,410
‫seharusnya memiliki main ini dengan kelas main.

88
00:04:41,410 --> 00:04:43,430
‫Dan, jadi saya percaya pada file

89
00:04:43,430 --> 00:04:46,240
‫Anda sebenarnya ada teks kecil yang menjelaskan itu, oke?

90
00:04:46,240 --> 00:04:49,050
‫Tapi, bagaimanapun, kami benar-benar menghapus bagian itu

91
00:04:49,050 --> 00:04:50,720
‫dari template dasar kami.

92
00:04:50,720 --> 00:04:52,480
‫Jadi, ingat, bahwa di

93
00:04:52,480 --> 00:04:55,370
‫sini di konten kita sebenarnya tidak memiliki html.

94
00:04:55,370 --> 00:04:57,800
‫Jadi elemen utama yang ada

95
00:04:57,800 --> 00:05:00,510
‫di html sekarang, tidak bisa ditemukan.

96
00:05:00,510 --> 00:05:05,500
‫Dan sekarang kita membutuhkan itu dalam tinjauan kita, oke?

97
00:05:05,500 --> 00:05:09,790
‫Jadi, mari kita buat bagian html ini dalam ikhtisar karena setelah

98
00:05:09,790 --> 00:05:12,923
‫itu kita memiliki semua kartu berulang ini.

99
00:05:14,200 --> 00:05:15,770
‫Jadi, mari kita

100
00:05:15,770 --> 00:05:17,380
‫lihat juga sebelum menyalin kodenya.

101
00:05:17,380 --> 00:05:19,450
‫Jadi, Anda melihat bahwa kami memiliki

102
00:05:19,450 --> 00:05:23,340
‫kartu-kartu ini di sini dan pada dasarnya, masing-masing kartu ini, jadi masing-masing

103
00:05:23,340 --> 00:05:24,990
‫elemen di sini, adalah

104
00:05:24,990 --> 00:05:27,000
‫apa yang saya sebut satu kartu.

105
00:05:27,000 --> 00:05:29,813
‫Dan, pada dasarnya kita akan memiliki sembilan kartu.

106
00:05:30,650 --> 00:05:34,490
‫Jadi, sembilan kartu ini di halaman ikhtisar ini.

107
00:05:34,490 --> 00:05:37,560
‫Dan itu sembilan kartu karena saat ini kami

108
00:05:37,560 --> 00:05:39,080
‫memiliki sembilan tur,

109
00:05:39,080 --> 00:05:42,780
‫tetapi tentu saja, kartu ini bisa kurang atau lebih, bukan?

110
00:05:42,780 --> 00:05:45,540
‫Tapi bagaimanapun, yang penting untuk dicatat

111
00:05:45,540 --> 00:05:48,150
‫di sini adalah bahwa kartu-kartu ini

112
00:05:48,150 --> 00:05:49,890
‫benar-benar berulang berulang-ulang.

113
00:05:49,890 --> 00:05:52,263
‫Jadi kami memiliki elemen kartu besar ini di sini.

114
00:05:54,240 --> 00:05:56,340
‫Jadi ada yang

115
00:05:56,340 --> 00:06:01,083
‫pertama, dan kemudian ada banyak elemen berulang yang sama setelahnya.

116
00:06:01,940 --> 00:06:02,820
‫Oke?

117
00:06:02,820 --> 00:06:05,920
‫Jadi, sebenarnya saya melanjutkan dan membuat template pug untuk

118
00:06:05,920 --> 00:06:07,460
‫kartu ini saja,

119
00:06:07,460 --> 00:06:10,020
‫sehingga kita tidak perlu menulisnya secara manual

120
00:06:10,020 --> 00:06:12,900
‫sekarang dan membuang banyak waktu untuk melakukannya, oke?

121
00:06:12,900 --> 00:06:15,660
‫Jadi itu hanya akan membuat kursus tidak perlu panjang

122
00:06:15,660 --> 00:06:18,540
‫dan jadi saya memutuskan untuk membuat template ini sebelumnya

123
00:06:18,540 --> 00:06:20,010
‫untuk kita gunakan sekarang.

124
00:06:20,010 --> 00:06:22,970
‫Sekarang tentu saja jika Anda ingin melatih keterampilan

125
00:06:22,970 --> 00:06:26,010
‫pug Anda sedikit lebih banyak, maka jangan ragu untuk menjeda

126
00:06:26,010 --> 00:06:30,040
‫video pada saat ini dan kemudian terjemahkan semua kode ini ke dalam pug.

127
00:06:30,040 --> 00:06:30,873
‫Baiklah?

128
00:06:30,873 --> 00:06:33,410
‫Dan setelah selesai, Anda bisa kembali.

129
00:06:33,410 --> 00:06:36,400
‫Tapi sekarang saya benar-benar akan melanjutkan dan menggunakan template itu.

130
00:06:36,400 --> 00:06:39,680
‫Dan itu di sini di data

131
00:06:39,680 --> 00:06:43,630
‫dev dan kemudian template dan template kartu tur, oke?

132
00:06:43,630 --> 00:06:46,404
‫Jadi itu seluruh kartu untuk

133
00:06:46,404 --> 00:06:50,333
‫satu kartu, pada dasarnya diterjemahkan ke kode pug, oke?

134
00:06:51,210 --> 00:06:52,773
‫Jadi mari

135
00:06:54,090 --> 00:06:58,830
‫kita salin semua itu, taruh di sini di ikhtisar, oke?

136
00:06:58,830 --> 00:07:01,700
‫Dan mari kita ingat, bahwa sebelum itu, kita

137
00:07:01,700 --> 00:07:05,030
‫juga membutuhkan wadah utama dan kartu ini jadi mari

138
00:07:05,030 --> 00:07:06,630
‫kita salin ini juga.

139
00:07:10,440 --> 00:07:12,570
‫Jadi hanya di sini

140
00:07:12,570 --> 00:07:15,840
‫sebagai referensi, sehingga kita sekarang dapat menulis main

141
00:07:16,720 --> 00:07:21,567
‫main dan di sana kita memiliki dev yang disebut wadah kartu.

142
00:07:23,870 --> 00:07:24,703
‫Oke?

143
00:07:24,703 --> 00:07:27,100
‫Dan seperti namanya,

144
00:07:27,100 --> 00:07:29,533
‫wadah itu akan berisi kartu.

145
00:07:30,610 --> 00:07:33,240
‫Jadi sekarang mari kita indentasi ini, karena sekarang ini

146
00:07:33,240 --> 00:07:35,720
‫tidak benar-benar berada di dalam wadah kartu.

147
00:07:35,720 --> 00:07:38,490
‫Jadi sekarang ini akan berada di dalam main tapi bukan

148
00:07:38,490 --> 00:07:39,930
‫itu yang kami inginkan.

149
00:07:39,930 --> 00:07:42,450
‫Jadi, saya memilih semuanya dan menekan tab.

150
00:07:42,450 --> 00:07:44,770
‫Saya menekan tab lagi, dan sekarang kita melihatnya

151
00:07:44,770 --> 00:07:45,950
‫pada level yang benar.

152
00:07:45,950 --> 00:07:47,693
‫Itu ada di dalam wadah kartu.

153
00:07:49,310 --> 00:07:51,820
‫Namun sebenarnya masih belum 100% benar

154
00:07:51,820 --> 00:07:52,995
‫karena elemen

155
00:07:52,995 --> 00:07:56,540
‫ini juga harus berada di dalam elemen kartu.

156
00:07:56,540 --> 00:07:58,780
‫Dan untuk beberapa alasan, menyalin template

157
00:07:58,780 --> 00:08:00,600
‫ini dari satu file

158
00:08:00,600 --> 00:08:03,050
‫ke file lainnya, agak mengacaukan kode ini.

159
00:08:03,050 --> 00:08:07,270
‫Jadi berhati-hatilah saat Anda menempelkan kode

160
00:08:07,270 --> 00:08:08,830
‫seperti ini.

161
00:08:08,830 --> 00:08:11,490
‫Jadi dalam template asli kami, semuanya benar seperti yang

162
00:08:11,490 --> 00:08:13,870
‫Anda lihat, tetapi kemudian ketika kami menyalinnya,

163
00:08:13,870 --> 00:08:15,023
‫itu agak kacau.

164
00:08:16,160 --> 00:08:17,760
‫Jadi, mari kita tutup itu.

165
00:08:17,760 --> 00:08:19,340
‫Kita sebenarnya juga

166
00:08:19,340 --> 00:08:21,800
‫bisa menutup ini, kita tidak membutuhkannya lagi,

167
00:08:21,800 --> 00:08:25,030
‫dan sebenarnya, juga template dasar dan template tur.

168
00:08:25,030 --> 00:08:27,580
‫Jadi kami hanya bekerja dengan ikhtisar sekarang.

169
00:08:27,580 --> 00:08:30,377
‫Dan sekarang kami memiliki satu kartu ini di sini.

170
00:08:30,377 --> 00:08:33,990
‫Dan sekarang seperti yang Anda lihat, itu juga kartu yang sepenuhnya statis.

171
00:08:33,990 --> 00:08:35,593
‫Jadi belum menggunakan

172
00:08:35,593 --> 00:08:38,750
‫data yang kita tempel ke template, kan?

173
00:08:38,750 --> 00:08:42,180
‫Jadi ia memiliki gambar statis ini, ia memiliki semua teks ini di

174
00:08:42,180 --> 00:08:44,660
‫sini, dan ia tidak menggunakan variabel sama sekali.

175
00:08:44,660 --> 00:08:46,960
‫Oke, karena bagian itu, saya sebenarnya

176
00:08:46,960 --> 00:08:48,660
‫ingin melakukannya bersama Anda.

177
00:08:48,660 --> 00:08:51,440
‫Karena sebenarnya itu adalah bagian terpenting.

178
00:08:51,440 --> 00:08:53,730
‫Jadi membuat semua template

179
00:08:53,730 --> 00:08:56,370
‫ini tidak sulit dan yang

180
00:08:56,370 --> 00:09:00,140
‫terpenting adalah bagaimana sebenarnya mengisinya dengan data, oke?

181
00:09:00,140 --> 00:09:02,290
‫Dan itulah yang akan kita lakukan selanjutnya.

182
00:09:02,290 --> 00:09:03,760
‫Tapi untuk sekarang

183
00:09:03,760 --> 00:09:06,409
‫mari kita lihat seperti apa tampilannya sekarang.

184
00:09:06,409 --> 00:09:09,370
‫Kemudian perlu diingat bahwa kita seharusnya hanya memiliki satu

185
00:09:09,370 --> 00:09:11,070
‫kartu, dan bukan sembilan, oke?

186
00:09:11,070 --> 00:09:14,240
‫Karena sekali lagi, kami hanya memiliki satu elemen kartu statis

187
00:09:14,240 --> 00:09:15,083
‫saat ini.

188
00:09:16,760 --> 00:09:21,690
‫Muat ulang ini, dan itu sepertinya tidak benar.

189
00:09:21,690 --> 00:09:24,833
‫Jadi, mari kita coba mencari tahu apa yang terjadi di sini.

190
00:09:25,920 --> 00:09:28,083
‫Jadi kami memiliki elemen utama kami seperti

191
00:09:29,020 --> 00:09:31,940
‫yang kami buat, kemudian kami memiliki wadah kartu kami juga.

192
00:09:31,940 --> 00:09:32,970
‫Tapi kemudian untuk beberapa

193
00:09:32,970 --> 00:09:34,723
‫alasan, ada yang utama di sana lagi.

194
00:09:36,230 --> 00:09:40,180
‫Umm ah oke, tentu saja saya harus menghapus elemen html

195
00:09:40,180 --> 00:09:43,223
‫asli yang kita miliki di sana.

196
00:09:44,150 --> 00:09:45,563
‫Jadi, mari kita coba lagi.

197
00:09:46,920 --> 00:09:50,460
‫Dan sekarang, sekarang itu terlihat lebih baik, oke?

198
00:09:50,460 --> 00:09:52,020
‫Sekarang gambar di sini

199
00:09:52,020 --> 00:09:54,340
‫masih hilang tetapi tidak apa-apa untuk saat ini.

200
00:09:54,340 --> 00:09:55,930
‫Yang penting kita

201
00:09:55,930 --> 00:09:59,570
‫punya kartu yang terlihat bagus ini, oke?

202
00:09:59,570 --> 00:10:01,360
‫Nah, masalahnya tentu kita

203
00:10:01,360 --> 00:10:04,940
‫ingin memiliki satu kartu untuk setiap tur, bukan?

204
00:10:04,940 --> 00:10:07,220
‫Jadi pada dasarnya, apa yang

205
00:10:07,220 --> 00:10:10,343
‫ingin kita lakukan sekarang adalah mengulang array tour

206
00:10:10,343 --> 00:10:13,070
‫yang kita tempelkan ke dalam template, bukan?

207
00:10:13,070 --> 00:10:14,950
‫Jadi, pada dasarnya variabel wisata ini.

208
00:10:14,950 --> 00:10:17,250
‫Dan perlu diingat, bahwa ini

209
00:10:17,250 --> 00:10:20,400
‫adalah array karena berisi beberapa dokumen tur di dalamnya.

210
00:10:20,400 --> 00:10:22,410
‫Jadi sekarang mari kita ulangi

211
00:10:22,410 --> 00:10:26,641
‫array ini dan buat satu kartu untuk setiap dokumen tur, oke?

212
00:10:26,641 --> 00:10:29,420
‫Dan untungnya, itu sangat mudah dilakukan

213
00:10:29,420 --> 00:10:33,860
‫di pug karena pada dasarnya pug dilengkapi dengan loop bawaan, oke?

214
00:10:33,860 --> 00:10:34,960
‫Jadi sekarang

215
00:10:36,130 --> 00:10:40,530
‫kita bisa melakukan setiap tur dalam tur, oke?

216
00:10:40,530 --> 00:10:43,970
‫Jadi tur di sini adalah variabel yang kita tempel dan

217
00:10:43,970 --> 00:10:45,460
‫kemudian di setiap

218
00:10:45,460 --> 00:10:47,830
‫iterasi variabel saat ini akan disebut tur.

219
00:10:47,830 --> 00:10:52,210
‫Kita bisa menyebutnya x atau x y z atau apa

220
00:10:52,210 --> 00:10:55,790
‫pun, tetapi masuk akal untuk menyebutnya tur, oke?

221
00:10:55,790 --> 00:10:58,810
‫Jadi di setiap iterasi apa yang datang kemudian di

222
00:10:58,810 --> 00:11:01,800
‫sana adalah apa yang akan dicetak pada dasarnya.

223
00:11:01,800 --> 00:11:05,363
‫Jadi ini lagi perlu indentasi satu tingkat lagi.

224
00:11:06,450 --> 00:11:08,740
‫Jadi pada dasarnya itu ada

225
00:11:08,740 --> 00:11:11,380
‫di dalam deklarasi loop ini di sini.

226
00:11:11,380 --> 00:11:14,753
‫Bagus, jadi mari kita lihat bagaimana tampilannya sekarang.

227
00:11:15,800 --> 00:11:19,380
‫Jadi sekarang kita harus mendapatkan sembilan kartu yang identik.

228
00:11:19,380 --> 00:11:24,380
‫Dan memang, itulah yang terjadi, oke?

229
00:11:24,400 --> 00:11:25,730
‫Nah tentunya

230
00:11:25,730 --> 00:11:28,870
‫data disini masih belum dibuat secara dinamis.

231
00:11:28,870 --> 00:11:30,760
‫Dan itulah sebenarnya yang akan kami

232
00:11:30,760 --> 00:11:32,373
‫perbaiki di video berikutnya.

