1 00:00:01,240 --> 00:00:03,170 ‫-: Di video ini dan 2 00:00:03,170 --> 00:00:06,540 ‫video berikutnya, bersama-sama kita akan membuat halaman detail tur. 3 00:00:06,540 --> 00:00:07,500 ‫Dan di 4 00:00:07,500 --> 00:00:09,930 ‫sepanjang jalan Anda akan mempelajari beberapa teknik 5 00:00:09,930 --> 00:00:12,107 ‫Pug lagi seperti conditional dan mixin. 6 00:00:14,120 --> 00:00:15,840 ‫Dan seperti yang 7 00:00:15,840 --> 00:00:19,760 ‫saya tunjukkan sebelumnya, seperti inilah tampilan halaman detail tur. 8 00:00:19,760 --> 00:00:22,590 ‫Dan itulah yang akan kita buat dalam 9 00:00:22,590 --> 00:00:24,640 ‫video ini dan video berikutnya. 10 00:00:24,640 --> 00:00:26,180 ‫Sekarang satu-satunya hal yang 11 00:00:26,180 --> 00:00:27,550 ‫akan kita tinggalkan 12 00:00:27,550 --> 00:00:29,490 ‫sebentar lagi sebenarnya adalah peta ini. 13 00:00:29,490 --> 00:00:31,060 ‫Baiklah, tapi segala sesuatu 14 00:00:31,060 --> 00:00:33,760 ‫yang lain akan kita bangun dalam kuliah alat ini. 15 00:00:33,760 --> 00:00:35,873 ‫Termasuk ulasan ini. 16 00:00:37,510 --> 00:00:39,070 ‫Baiklah. 17 00:00:39,070 --> 00:00:41,830 ‫Jadi sekarang kami memiliki ikhtisar kami dan 18 00:00:41,830 --> 00:00:43,350 ‫tentu saja kami 19 00:00:43,350 --> 00:00:46,270 ‫memiliki tombol-tombol ini dengan URL yang sudah dibuat. 20 00:00:46,270 --> 00:00:49,430 ‫Tetapi kemudian ketika kami mencoba mengakses halaman ini, kami 21 00:00:49,430 --> 00:00:51,380 ‫tentu saja mendapatkan kesalahan ini. 22 00:00:51,380 --> 00:00:52,380 ‫Baiklah. 23 00:00:52,380 --> 00:00:55,170 ‫Jadi mari kembali ke kode VS kita 24 00:00:55,170 --> 00:00:57,470 ‫dan saya sebenarnya ingin memulai ini 25 00:00:57,470 --> 00:00:59,650 ‫dengan tantangan kecil untuk Anda. 26 00:00:59,650 --> 00:01:00,820 ‫Jadi yang saya 27 00:01:00,820 --> 00:01:03,310 ‫ingin Anda lakukan adalah membuat rute untuk halaman 28 00:01:03,310 --> 00:01:06,180 ‫detail sesuai dengan URL yang baru saja kita buat sebelumnya. 29 00:01:06,180 --> 00:01:07,370 ‫Dan itu akan 30 00:01:07,370 --> 00:01:09,100 ‫mirip dengan apa yang sudah kita 31 00:01:09,100 --> 00:01:11,640 ‫miliki di sini tetapi Anda harus mengubahnya sedikit. 32 00:01:11,640 --> 00:01:12,473 ‫Oke. 33 00:01:12,473 --> 00:01:13,306 ‫Cukup itu, 34 00:01:13,306 --> 00:01:16,120 ‫saya juga ingin Anda membangun pengontrol ini. 35 00:01:16,120 --> 00:01:17,530 ‫Jadi dapatkan untuk itu. 36 00:01:17,530 --> 00:01:19,370 ‫Karena saat ini kita hanya 37 00:01:19,370 --> 00:01:20,910 ‫memiliki tempat seperti ini. 38 00:01:20,910 --> 00:01:23,410 ‫Jadi izinkan saya memberi Anda langkah-langkahnya di sini. 39 00:01:23,410 --> 00:01:25,130 ‫Dan seperti biasa, 40 00:01:25,130 --> 00:01:26,660 ‫pertama, 41 00:01:26,660 --> 00:01:29,120 ‫kita perlu mendapatkan datanya. 42 00:01:29,120 --> 00:01:31,093 ‫Kali ini untuk tur yang diminta. 43 00:01:34,480 --> 00:01:35,313 ‫Dan untuk itu, 44 00:01:35,313 --> 00:01:37,360 ‫perlu diingat bahwa kita sebenarnya membutuhkan ulasan di 45 00:01:37,360 --> 00:01:38,693 ‫sini dan juga pemandu wisata. 46 00:01:43,670 --> 00:01:44,503 ‫Oke. 47 00:01:45,890 --> 00:01:46,723 ‫Jadi, sekali 48 00:01:46,723 --> 00:01:48,700 ‫lagi mari kita lihat itu. 49 00:01:48,700 --> 00:01:51,140 ‫Jadi kami memiliki pemandu wisata ini di sini. 50 00:01:51,140 --> 00:01:54,230 ‫Benar, dan pada dasarnya mereka adalah kumpulan data yang terpisah. 51 00:01:54,230 --> 00:01:55,550 ‫Jadi pengguna. 52 00:01:55,550 --> 00:01:57,933 ‫Dan kemudian di sini kami juga memiliki ulasan. 53 00:01:59,380 --> 00:02:00,730 ‫Sekarang pemandu wisata ini 54 00:02:00,730 --> 00:02:03,330 ‫di sini, saya yakin mereka sebenarnya secara otomatis diisi 55 00:02:03,330 --> 00:02:04,400 ‫dalam sebuah model. 56 00:02:04,400 --> 00:02:06,930 ‫Jadi mari kita lihat itu dengan sangat cepat. 57 00:02:06,930 --> 00:02:08,270 ‫Jadi model 58 00:02:09,610 --> 00:02:11,450 ‫tur dan sebagainya, 59 00:02:11,450 --> 00:02:12,283 ‫ya. 60 00:02:12,283 --> 00:02:13,116 ‫Jadi 61 00:02:13,116 --> 00:02:14,400 ‫di sini, kami memiliki 62 00:02:14,400 --> 00:02:16,600 ‫pengisian otomatis ini setiap kali ada permintaan 63 00:02:16,600 --> 00:02:18,070 ‫pencarian tetapi hanya untuk panduan. 64 00:02:18,070 --> 00:02:20,160 ‫Dan jadi jangan lupa juga 65 00:02:20,160 --> 00:02:21,173 ‫mengisi ulasan. 66 00:02:22,530 --> 00:02:23,450 ‫Oke. 67 00:02:23,450 --> 00:02:24,513 ‫Kemudian setelah 68 00:02:25,900 --> 00:02:27,120 ‫itu, kita akan membuat 69 00:02:27,120 --> 00:02:29,670 ‫template tetapi itu akan kita lakukan bersama-sama, jadi saya 70 00:02:29,670 --> 00:02:31,470 ‫tidak perlu Anda melakukan bagian ini. 71 00:02:33,880 --> 00:02:35,220 ‫Dan akhirnya, saya 72 00:02:35,220 --> 00:02:38,030 ‫ingin Anda menyelesaikan bagian ini di sini juga. 73 00:02:38,030 --> 00:02:38,950 ‫Jadi 74 00:02:40,370 --> 00:02:43,510 ‫render template menggunakan data dari 75 00:02:44,930 --> 00:02:47,050 ‫langkah pertama lagi. 76 00:02:47,050 --> 00:02:48,580 ‫Baiklah. 77 00:02:48,580 --> 00:02:50,120 ‫Jadi itu sangat sederhana juga. 78 00:02:50,120 --> 00:02:51,300 ‫Jadi yang saya 79 00:02:51,300 --> 00:02:52,870 ‫ingin Anda lakukan adalah membuat rute 80 00:02:52,870 --> 00:02:54,410 ‫dan kemudian juga mendapatkan datanya. 81 00:02:54,410 --> 00:02:57,763 ‫Oke jadi jeda video di sini dan semoga berhasil. 82 00:03:01,540 --> 00:03:03,280 ‫Jadi saya harap Anda melakukannya 83 00:03:03,280 --> 00:03:05,950 ‫dan beri tahu saya, selesaikan di sini untuk Anda. 84 00:03:05,950 --> 00:03:08,090 ‫Dan kita akan mulai dengan rutenya. 85 00:03:08,090 --> 00:03:11,360 ‫Dan sekarang yang perlu kita tambahkan di sini hanyalah siput ini. 86 00:03:11,360 --> 00:03:14,510 ‫Dan tentu saja, kami melakukannya sebagai parameter URL. 87 00:03:14,510 --> 00:03:17,693 ‫Jadi seperti ini, menyebutnya siput. 88 00:03:18,885 --> 00:03:21,150 ‫Jadi sebelum kita menggunakan ID kan? 89 00:03:21,150 --> 00:03:22,660 ‫Jadi kami memilikinya 90 00:03:22,660 --> 00:03:25,480 ‫seperti ini dan sekarang sebut saja siput. 91 00:03:25,480 --> 00:03:26,313 ‫Baiklah. 92 00:03:26,313 --> 00:03:27,146 ‫Karena sekali 93 00:03:27,146 --> 00:03:29,560 ‫lagi, seperti itulah tampilan halaman ikhtisar. 94 00:03:29,560 --> 00:03:32,413 ‫Kami memiliki tur slash slug pada dasarnya. 95 00:03:33,780 --> 00:03:36,100 ‫Oke, dan itulah yang kemudian 96 00:03:36,100 --> 00:03:39,460 ‫akan kita gunakan untuk membuat tur di controller. 97 00:03:39,460 --> 00:03:41,500 ‫Jadi mari kita lakukan itu sekarang di sini. 98 00:03:41,500 --> 00:03:44,460 ‫Jadi const, tour 99 00:03:44,460 --> 00:03:48,633 ‫sama menunggu tour dan 100 00:03:51,970 --> 00:03:53,440 ‫findone. 101 00:03:53,440 --> 00:03:56,540 ‫Jadi kali ini kita tidak bisa menggunakan find by ID. 102 00:03:56,540 --> 00:03:58,330 ‫Nah karena, kita tidak 103 00:03:58,330 --> 00:04:00,130 ‫tahu ID dari tur tersebut. 104 00:04:00,130 --> 00:04:01,030 ‫Dan 105 00:04:01,030 --> 00:04:04,040 ‫sebagai gantinya, kami mencari dengan siput. 106 00:04:04,040 --> 00:04:05,140 ‫Dan siput 107 00:04:06,140 --> 00:04:07,540 ‫itu seperti yang saya 108 00:04:07,540 --> 00:04:09,940 ‫harap Anda tahu permintaannya. params 109 00:04:09,940 --> 00:04:12,960 ‫dot siput baik-baik saja. 110 00:04:12,960 --> 00:04:15,180 ‫Dan sekarang akhirnya, itu saja untuk 111 00:04:16,570 --> 00:04:18,263 ‫mengisi bidang array. 112 00:04:19,390 --> 00:04:20,223 ‫Baiklah. 113 00:04:21,540 --> 00:04:24,063 ‫Jadi jalur untuk mengisi adalah ulasan. 114 00:04:25,080 --> 00:04:27,690 ‫Dan sebenarnya kita tidak membutuhkan semua bidang di sini. 115 00:04:27,690 --> 00:04:29,890 ‫Jadi mari kita tentukan saja yang kita butuhkan. 116 00:04:30,810 --> 00:04:32,480 ‫Jadi, itu 117 00:04:32,480 --> 00:04:34,023 ‫hanya 118 00:04:35,200 --> 00:04:38,450 ‫review, rating, dan pengguna. 119 00:04:38,450 --> 00:04:39,283 ‫Karena 120 00:04:39,283 --> 00:04:40,600 ‫ingat yang sebenarnya kita 121 00:04:41,500 --> 00:04:44,490 ‫tampilkan jadi nama pengguna dan foto pengguna. 122 00:04:44,490 --> 00:04:45,460 ‫Dan tentu 123 00:04:45,460 --> 00:04:47,873 ‫saja, ulasan itu sendiri dan peringkatnya. 124 00:04:50,065 --> 00:04:50,898 ‫Oke. 125 00:04:50,898 --> 00:04:51,910 ‫Kemudian tentu 126 00:04:51,910 --> 00:04:54,604 ‫saja, itu mengeluh bahwa kami tidak menggunakan async. 127 00:04:54,604 --> 00:04:56,763 ‫Dan tentu saja aku tidak akan melupakan itu. 128 00:04:58,140 --> 00:04:59,300 ‫Tapi bagaimanapun ada 129 00:04:59,300 --> 00:05:02,290 ‫baiknya ES Line memperingatkan kita tentang kesalahan semacam ini. 130 00:05:02,290 --> 00:05:04,660 ‫Ini benar-benar menghilangkan banyak bug 131 00:05:04,660 --> 00:05:06,353 ‫dari pengembangan. 132 00:05:07,880 --> 00:05:08,713 ‫Oke. 133 00:05:08,713 --> 00:05:09,770 ‫Dan kemudian 134 00:05:09,770 --> 00:05:12,030 ‫di sini tentu saja kita akan meneruskan 135 00:05:12,030 --> 00:05:14,660 ‫variabel tur itu ke dalam template tur kita. 136 00:05:14,660 --> 00:05:16,240 ‫Jadi yang itu. 137 00:05:16,240 --> 00:05:17,380 ‫Berikan simpanan. 138 00:05:17,380 --> 00:05:19,010 ‫Tidak ada lagi kesalahan. 139 00:05:19,010 --> 00:05:21,590 ‫Dan bagian itu sebenarnya sekarang lengkap. 140 00:05:21,590 --> 00:05:22,940 ‫Jadi yang perlu 141 00:05:22,940 --> 00:05:26,420 ‫kita lakukan sekarang adalah melanjutkan dan membangun template kita. 142 00:05:26,420 --> 00:05:27,730 ‫Oke. 143 00:05:27,730 --> 00:05:28,940 ‫Jadi, kita 144 00:05:28,940 --> 00:05:30,920 ‫sudah harus memilikinya di sini. 145 00:05:30,920 --> 00:05:32,193 ‫Dan itulah data dev. 146 00:05:33,050 --> 00:05:34,230 ‫Jadi kami memiliki 147 00:05:34,230 --> 00:05:35,490 ‫banyak folder dan banyak data. 148 00:05:35,490 --> 00:05:37,370 ‫Dan itu bisa menjadi sedikit 149 00:05:37,370 --> 00:05:39,090 ‫membingungkan di beberapa titik. 150 00:05:39,090 --> 00:05:39,923 ‫Oke. 151 00:05:39,923 --> 00:05:40,923 ‫Jadi, 152 00:05:41,780 --> 00:05:45,310 ‫mari singkirkan konten placeholder ini di sini. 153 00:05:45,310 --> 00:05:47,510 ‫Dan sebelum kita melakukan 154 00:05:47,510 --> 00:05:51,690 ‫hal lain, mari kita lihat lagi file HTML aslinya. 155 00:05:51,690 --> 00:05:53,510 ‫Yang ada di folder 156 00:05:53,510 --> 00:05:55,900 ‫publik yang baru saja saya tutup. 157 00:05:55,900 --> 00:05:58,080 ‫Mari kita tutup semua ini di sini, karena 158 00:05:59,180 --> 00:06:00,980 ‫menurut saya ini sangat membingungkan. 159 00:06:03,150 --> 00:06:05,470 ‫Oke, model juga. 160 00:06:05,470 --> 00:06:08,290 ‫Jadi sekarang yang kita butuhkan adalah publik dan 161 00:06:08,290 --> 00:06:09,893 ‫kemudian tur. html. 162 00:06:12,180 --> 00:06:14,950 ‫Jadi header yang sudah kita miliki tentunya. 163 00:06:14,950 --> 00:06:16,970 ‫Dan kemudian di sini pergi semua konten. 164 00:06:16,970 --> 00:06:17,803 ‫Jadi, 165 00:06:17,803 --> 00:06:18,880 ‫semua bagian yang 166 00:06:18,880 --> 00:06:20,070 ‫kami miliki di halaman 167 00:06:20,070 --> 00:06:23,110 ‫ini tentu saja diterjemahkan di sini sebagai HTML. 168 00:06:23,110 --> 00:06:24,360 ‫Dan seperti 169 00:06:24,360 --> 00:06:26,830 ‫sebelumnya, saya sebenarnya sudah 170 00:06:26,830 --> 00:06:30,649 ‫membuat template Pug berdasarkan semua kode HTML ini. 171 00:06:30,649 --> 00:06:33,390 ‫Baiklah, kami tidak ingin menerjemahkan 172 00:06:33,390 --> 00:06:35,630 ‫ini secara manual bersama-sama. 173 00:06:35,630 --> 00:06:36,640 ‫Oke. 174 00:06:36,640 --> 00:06:40,050 ‫Jadi saya sudah memilikinya di sini di file template ini. 175 00:06:40,050 --> 00:06:40,883 ‫Tapi tentu 176 00:06:40,883 --> 00:06:42,630 ‫saja, sekali lagi, jika Anda 177 00:06:42,630 --> 00:06:44,020 ‫mau, Anda bisa menjeda 178 00:06:44,020 --> 00:06:46,113 ‫video sekarang dan menerjemahkannya sendiri juga. 179 00:06:47,010 --> 00:06:47,843 ‫Baiklah. 180 00:06:47,843 --> 00:06:49,870 ‫Tapi apa yang akan saya lakukan sekarang adalah 181 00:06:49,870 --> 00:06:51,850 ‫melanjutkan dan menyalin semua kode ini. 182 00:06:51,850 --> 00:06:54,933 ‫Yang masih banyak kode seperti yang Anda lihat. 183 00:06:56,310 --> 00:07:00,270 ‫Jadi mari salin semua ini dan masuk ke tur kami 184 00:07:00,270 --> 00:07:02,090 ‫dan tempel di sini. 185 00:07:02,090 --> 00:07:05,240 ‫Sekarang anotasi akan salah lagi. 186 00:07:05,240 --> 00:07:08,920 ‫Jadi mari kita salin, atau pilih yang baru saja kita tempel di sini. 187 00:07:08,920 --> 00:07:11,990 ‫Jadi semuanya kecuali baris pertama salah. 188 00:07:11,990 --> 00:07:14,490 ‫Tapi yang perlu kita lakukan di sini adalah menambahkan satu tab lagi. 189 00:07:15,400 --> 00:07:16,910 ‫Dan itu saja. 190 00:07:16,910 --> 00:07:20,420 ‫Jadi sekarang mereka semua berada di dalam blok konten ini pada 191 00:07:20,420 --> 00:07:21,720 ‫level yang sama. 192 00:07:21,720 --> 00:07:22,920 ‫Jadi bagian dan 193 00:07:22,920 --> 00:07:23,980 ‫bagian dan 194 00:07:23,980 --> 00:07:26,410 ‫pada dasarnya semua bagian sekarang berada 195 00:07:26,410 --> 00:07:27,700 ‫di level yang 196 00:07:27,700 --> 00:07:29,570 ‫sama, jadi mereka semua bersaudara. 197 00:07:29,570 --> 00:07:30,403 ‫Besar. 198 00:07:30,403 --> 00:07:32,650 ‫Jadi mari kita tutup semua ini yang 199 00:07:32,650 --> 00:07:33,973 ‫tidak lagi kita butuhkan. 200 00:07:34,820 --> 00:07:36,070 ‫Dan seperti sebelumnya, 201 00:07:36,070 --> 00:07:38,150 ‫kami sekarang memiliki halaman statis ini di 202 00:07:38,150 --> 00:07:40,120 ‫sini dengan semua data statis ini. 203 00:07:40,120 --> 00:07:43,310 ‫Yang kami tahu harus kami ganti. 204 00:07:43,310 --> 00:07:44,700 ‫Tetapi sebelum benar-benar melakukannya, 205 00:07:44,700 --> 00:07:46,960 ‫mari kita lihat apakah rute kita 206 00:07:46,960 --> 00:07:48,173 ‫sudah berfungsi. 207 00:07:49,670 --> 00:07:50,840 ‫Oke. 208 00:07:50,840 --> 00:07:52,600 ‫Jadi mari kita muat ulang 209 00:07:52,600 --> 00:07:54,700 ‫dan itu memberi kita kesalahan yang sama. 210 00:07:54,700 --> 00:07:55,690 ‫Dan saya rasa 211 00:07:55,690 --> 00:07:56,970 ‫itu karena di sini 212 00:07:56,970 --> 00:07:58,720 ‫kami memiliki tur dan bukan tur karena 213 00:07:58,720 --> 00:08:00,673 ‫saya pikir kami memilikinya di rute kami. 214 00:08:03,410 --> 00:08:04,800 ‫Benar jadi di sini kita memiliki tur. 215 00:08:04,800 --> 00:08:07,560 ‫Dan itu sebenarnya adalah cara yang masuk akal. 216 00:08:07,560 --> 00:08:10,443 ‫Jadi mari kita lanjutkan dan ubah itu di sini di 217 00:08:11,480 --> 00:08:12,313 ‫ikhtisar kami. 218 00:08:13,690 --> 00:08:14,950 ‫Oke dan jadi 219 00:08:14,950 --> 00:08:16,670 ‫di sini kami benar-benar ingin tur. 220 00:08:16,670 --> 00:08:17,680 ‫Karena sebenarnya, 221 00:08:17,680 --> 00:08:19,950 ‫kami sebenarnya hanya melihat satu tur 222 00:08:19,950 --> 00:08:21,333 ‫dan bukan beberapa tur. 223 00:08:22,460 --> 00:08:23,570 ‫Benar? 224 00:08:23,570 --> 00:08:25,800 ‫Jadi jika kita kembali ke ikhtisar 225 00:08:25,800 --> 00:08:27,940 ‫sekarang, kita memuatnya, dan sekarang membuka 226 00:08:27,940 --> 00:08:29,800 ‫The Forest Hiker, maka 227 00:08:29,800 --> 00:08:32,500 ‫Anda melihat bahwa itu akan menjadi tur. 228 00:08:32,500 --> 00:08:33,420 ‫Dan 229 00:08:33,420 --> 00:08:35,533 ‫tentu saja, kita mendapatkan HTML 230 00:08:35,533 --> 00:08:38,160 ‫untuk halaman yang baru saja kita buat. 231 00:08:38,160 --> 00:08:41,360 ‫Sekarang untuk beberapa alasan CSS tidak ada di sini. 232 00:08:41,360 --> 00:08:42,860 ‫Mari kita coba memuat ulang ini. 233 00:08:44,410 --> 00:08:46,100 ‫Nah, apa yang terjadi di sini? 234 00:08:46,100 --> 00:08:48,340 ‫Mari kita coba periksa ini. 235 00:08:48,340 --> 00:08:50,440 ‫Dan saya melihat kami memiliki beberapa kesalahan. 236 00:08:50,440 --> 00:08:52,510 ‫Jadi kita bisa klik itu. 237 00:08:52,510 --> 00:08:55,000 ‫Dan alasan CSS hilang, karena 238 00:08:55,000 --> 00:08:57,630 ‫malah mencoba memuat file di tempat 239 00:08:57,630 --> 00:08:58,640 ‫yang salah. 240 00:08:58,640 --> 00:09:01,320 ‫Jadi ia mencoba memuatnya di folder CSS di 241 00:09:01,320 --> 00:09:02,310 ‫dalam tur. 242 00:09:02,310 --> 00:09:04,890 ‫Tapi itu tentu saja tidak ada. 243 00:09:04,890 --> 00:09:05,950 ‫Dan itu karena 244 00:09:05,950 --> 00:09:08,430 ‫kita ada di sini di rute wisata ini, oke. 245 00:09:08,430 --> 00:09:10,230 ‫Jadi pada dasarnya kita 246 00:09:10,230 --> 00:09:13,493 ‫perlu memperbaiki cara kita mengimpor CSS di template dasar kita. 247 00:09:14,850 --> 00:09:16,113 ‫Ayo pergi kesana. 248 00:09:18,720 --> 00:09:19,950 ‫Dan di 249 00:09:19,950 --> 00:09:23,070 ‫sini sebenarnya, kita harus memiliki garis miring lagi. 250 00:09:23,070 --> 00:09:25,010 ‫Oke, dan sama sebenarnya di sini. 251 00:09:25,010 --> 00:09:25,910 ‫Dan itu 252 00:09:25,910 --> 00:09:27,153 ‫untuk alasan yang sama 253 00:09:27,153 --> 00:09:30,770 ‫persis seperti yang saya jelaskan kepada Anda sebelumnya dalam ikhtisar di sini. 254 00:09:30,770 --> 00:09:33,930 ‫Jadi kami memulai URL ini juga dengan garis miring. 255 00:09:33,930 --> 00:09:36,260 ‫Dan sekali lagi, itu akan dimulai 256 00:09:36,260 --> 00:09:38,120 ‫dari akar halaman. 257 00:09:38,120 --> 00:09:40,350 ‫Dan begitulah seharusnya bekerja. 258 00:09:40,350 --> 00:09:43,470 ‫Dan faktanya, hal yang sama berlaku untuk semua gambar di sini. 259 00:09:43,470 --> 00:09:45,630 ‫Jadi semua gambar juga 260 00:09:45,630 --> 00:09:49,080 ‫harus selalu dimulai relatif terhadap URL root. 261 00:09:49,080 --> 00:09:52,030 ‫Jadi mari kita tambahkan dengan sangat cepat di sini ke semua gambar ini. 262 00:09:54,800 --> 00:09:55,633 ‫Dan, 263 00:09:55,633 --> 00:09:56,590 ‫ya, itu saja. 264 00:09:56,590 --> 00:09:57,723 ‫Jadi itu semua dari mereka. 265 00:09:58,800 --> 00:09:59,813 ‫Jadi, 266 00:10:01,020 --> 00:10:02,810 ‫dengan itu kami telah 267 00:10:02,810 --> 00:10:06,210 ‫memperbaiki ikhtisar dan juga file dasar ini. 268 00:10:06,210 --> 00:10:07,950 ‫Jadi jika sekarang kita 269 00:10:07,950 --> 00:10:11,610 ‫memuat ulang, kita seharusnya mendapatkan akses ke CSS yang benar. 270 00:10:11,610 --> 00:10:13,610 ‫Dan memang, ini dia. 271 00:10:13,610 --> 00:10:15,000 ‫Hanya ada satu kesalahan lagi 272 00:10:15,000 --> 00:10:16,610 ‫yang ada di sini di gambar ini. 273 00:10:16,610 --> 00:10:17,480 ‫Dan 274 00:10:17,480 --> 00:10:19,390 ‫sekali lagi, itu karena mencoba 275 00:10:19,390 --> 00:10:20,830 ‫memuatnya di sini dari 276 00:10:20,830 --> 00:10:22,830 ‫tur dan bukan dari URL root. 277 00:10:22,830 --> 00:10:23,663 ‫Jadi, masalah 278 00:10:23,663 --> 00:10:25,563 ‫itu ada di sini di header. 279 00:10:27,040 --> 00:10:27,873 ‫Dan tentu 280 00:10:27,873 --> 00:10:29,770 ‫saja, di sini kita juga 281 00:10:29,770 --> 00:10:31,700 ‫perlu membuatnya relatif terhadap jalur root. 282 00:10:31,700 --> 00:10:33,853 ‫Mungkin sama di footer. 283 00:10:34,950 --> 00:10:35,783 ‫Dan ya. 284 00:10:37,180 --> 00:10:38,033 ‫Baiklah. 285 00:10:39,320 --> 00:10:41,960 ‫Hanya untuk mengkonfirmasi itu dengan cepat, ya 286 00:10:41,960 --> 00:10:43,573 ‫memang, ini dia. 287 00:10:45,320 --> 00:10:46,350 ‫Besar. 288 00:10:46,350 --> 00:10:47,830 ‫Jadi seperti yang saya 289 00:10:47,830 --> 00:10:49,890 ‫sebutkan tentu saja, ini memiliki semua 290 00:10:49,890 --> 00:10:52,380 ‫data statis tentang The Park Camper Tour yang 291 00:10:52,380 --> 00:10:54,650 ‫merupakan salah satu yang kami miliki di template. 292 00:10:54,650 --> 00:10:57,140 ‫Tapi kita melihat pejalan kaki hutan. 293 00:10:57,140 --> 00:11:01,060 ‫Jadi, sekarang mari kita mulai dengan memperbaiki template kita 294 00:11:01,060 --> 00:11:04,663 ‫dan pada dasarnya menggunakan data dinamis di sini. 295 00:11:07,620 --> 00:11:10,720 ‫Jadi, ingat bahwa variabel yang kita lewati di 296 00:11:10,720 --> 00:11:12,053 ‫sini disebut tour. 297 00:11:13,210 --> 00:11:14,043 ‫Benar? 298 00:11:14,043 --> 00:11:15,480 ‫Jadi ini disebut 299 00:11:15,480 --> 00:11:18,100 ‫tur dan itulah yang kami sebut di sini. 300 00:11:18,100 --> 00:11:18,933 ‫Jadi tur. nama, dan 301 00:11:19,997 --> 00:11:20,883 ‫juga sama di sini. 302 00:11:21,720 --> 00:11:23,600 ‫Dan sekarang Anda sudah tahu bahwa kita 303 00:11:23,600 --> 00:11:24,630 ‫perlu menggunakan string 304 00:11:24,630 --> 00:11:26,840 ‫template di sini karena kita sebenarnya ingin membuat string. 305 00:11:26,840 --> 00:11:29,993 ‫Jadi bernama. wisata. 306 00:11:31,240 --> 00:11:32,463 ‫Dan di sini jalan ini juga tidak benar. 307 00:11:33,460 --> 00:11:36,543 ‫Pertama-tama perlu string template dan kemudian 308 00:11:37,920 --> 00:11:40,530 ‫gambar kita, saya akan menulis 309 00:11:40,530 --> 00:11:42,250 ‫gambar slash 310 00:11:42,250 --> 00:11:45,000 ‫wisata slash nama gambar sampul. 311 00:11:46,280 --> 00:11:48,983 ‫Jadi titik tur, dan sekarang 312 00:11:52,140 --> 00:11:53,330 ‫saya tidak 313 00:11:53,330 --> 00:11:56,880 ‫ingat apakah itu gambar sampul, atau gambar sampul. 314 00:11:56,880 --> 00:12:00,080 ‫Jadi, ya. 315 00:12:00,080 --> 00:12:01,160 ‫Gambar sampul. 316 00:12:01,160 --> 00:12:01,993 ‫Oke. 317 00:12:03,780 --> 00:12:04,613 ‫Jadi mari kita cepat mencobanya. 318 00:12:04,613 --> 00:12:07,140 ‫Dan ingat, kita berada di The First Hiker. 319 00:12:07,140 --> 00:12:09,830 ‫Dan jadi itu sekarang harus namanya. 320 00:12:09,830 --> 00:12:11,580 ‫Dan kesalahan lain. 321 00:12:12,710 --> 00:12:14,480 ‫Jadi, dikatakan di sini, tidak dapat membaca tur 322 00:12:14,480 --> 00:12:15,450 ‫properti yang tidak ditentukan. 323 00:12:15,450 --> 00:12:19,310 ‫Jadi mari kita kembali dan 324 00:12:19,310 --> 00:12:21,020 ‫ya. 325 00:12:21,890 --> 00:12:22,770 ‫Jadi inilah kesalahan bodoh ini. 326 00:12:22,770 --> 00:12:27,900 ‫Jadi tentu saja tur. nama dan bukan nama. 327 00:12:27,900 --> 00:12:27,900 ‫wisata. 328 00:12:27,900 --> 00:12:30,420 ‫Jadi, apa yang saya pikirkan 329 00:12:30,420 --> 00:12:31,290 ‫di sana? 330 00:12:31,290 --> 00:12:32,663 ‫Mari kita muat ulang ini dan 331 00:12:33,980 --> 00:12:34,910 ‫sekarang memang, kita 332 00:12:34,910 --> 00:12:37,820 ‫mendapatkan The Forest Hiker dengan gambar sampul yang sangat bagus di latar belakang. 333 00:12:37,820 --> 00:12:41,980 ‫Besar. 334 00:12:41,980 --> 00:12:42,813 ‫Dan mari kita terus bergerak di sini. 335 00:12:42,813 --> 00:12:44,373 ‫Jadi buat string template lain. 336 00:12:45,550 --> 00:12:47,723 ‫Wisata. 337 00:12:49,980 --> 00:12:50,813 ‫Durasi, dan 338 00:12:52,320 --> 00:12:53,343 ‫kemudian jumlah hari. 339 00:12:55,421 --> 00:12:57,680 ‫Kemudian di bawah sini, kami memiliki lagi 340 00:12:57,680 --> 00:12:58,560 ‫lokasi awal. 341 00:12:58,560 --> 00:13:03,930 ‫Jadi, tur. 342 00:13:03,930 --> 00:13:05,570 ‫mulai lokasi. deskripsi, ingat. 343 00:13:07,000 --> 00:13:09,643 ‫Baiklah. 344 00:13:11,440 --> 00:13:12,520 ‫Sekarang di sini kita 345 00:13:12,520 --> 00:13:14,070 ‫memiliki kotak ikhtisar ini di sini. 346 00:13:14,070 --> 00:13:16,220 ‫Jadi ikhtisar detail kotak. 347 00:13:16,220 --> 00:13:18,110 ‫Dan seperti yang Anda lihat, kami 348 00:13:18,110 --> 00:13:19,100 ‫memiliki empat 349 00:13:19,100 --> 00:13:21,660 ‫kotak yang sama di sini di mana satu-satunya 350 00:13:21,660 --> 00:13:23,530 ‫yang berubah adalah nama ikon 351 00:13:23,530 --> 00:13:25,687 ‫ini, lalu tanggal dan tanggal berikutnya. 352 00:13:25,687 --> 00:13:28,810 ‫Oke, jadi di sini yang berubah bukan 353 00:13:28,810 --> 00:13:29,643 ‫tanggal 354 00:13:29,643 --> 00:13:32,140 ‫berikutnya, yang berubah adalah deskripsi kotak. 355 00:13:32,140 --> 00:13:34,210 ‫Jadi tanggal berikutnya, 356 00:13:34,210 --> 00:13:36,540 ‫kesulitan, peserta dan peringkat. 357 00:13:36,540 --> 00:13:38,500 ‫Baiklah. 358 00:13:38,500 --> 00:13:39,350 ‫Jadi pada 359 00:13:39,350 --> 00:13:40,260 ‫dasarnya, kode ini di 360 00:13:40,260 --> 00:13:42,550 ‫sini selalu sama hanya dengan tiga bagian yang berubah. 361 00:13:42,550 --> 00:13:44,710 ‫Jadi nama ikon, deskripsi dan 362 00:13:44,710 --> 00:13:46,100 ‫nilai deskripsi itu. 363 00:13:46,100 --> 00:13:49,560 ‫Jadi, karena kita tidak suka kode yang diulang-ulang, 364 00:13:49,560 --> 00:13:50,393 ‫kan? 365 00:13:50,393 --> 00:13:53,510 ‫Mari kita gunakan fitur lain dari Pug 366 00:13:53,510 --> 00:13:56,070 ‫yang belum kita gunakan yang 367 00:13:56,070 --> 00:13:57,410 ‫disebut mixin. 368 00:13:57,410 --> 00:13:59,500 ‫Jadi mixin pada dasarnya adalah 369 00:13:59,500 --> 00:14:03,060 ‫potongan kode yang dapat digunakan kembali tempat kita dapat meneruskan argumen. 370 00:14:03,060 --> 00:14:05,060 ‫Jadi agak mirip fungsi. 371 00:14:05,060 --> 00:14:06,940 ‫Dan juga persis seperti mixin di SAS. 372 00:14:06,940 --> 00:14:10,400 ‫Jadi itulah pra-prosesor CSS yang mungkin 373 00:14:10,400 --> 00:14:12,460 ‫sudah Anda kenal. 374 00:14:12,460 --> 00:14:14,370 ‫Jadi mari kita salin kode ini di sini untuk kotak ikhtisar ini. 375 00:14:14,370 --> 00:14:17,950 ‫Jadi menyalinnya. 376 00:14:17,950 --> 00:14:19,200 ‫Dan sekarang di 377 00:14:19,200 --> 00:14:22,240 ‫sini, dari blok ini, mari kita buat mixin baru. 378 00:14:22,240 --> 00:14:24,353 ‫Jadi kami menulis mixin dan 379 00:14:25,930 --> 00:14:29,140 ‫kemudian nama mixin, yang saya sebut kotak ikhtisar. 380 00:14:29,140 --> 00:14:30,793 ‫Dan kemudian sedikit seperti 381 00:14:33,400 --> 00:14:35,200 ‫fungsi, kita dapat menentukan beberapa argumen. 382 00:14:35,200 --> 00:14:37,200 ‫Jadi ingat bagaimana kita 383 00:14:37,200 --> 00:14:41,430 ‫memiliki deskripsi kotak, lalu kita memiliki nilai deskripsi itu dan 384 00:14:41,430 --> 00:14:43,600 ‫sebut saja teks di sini. 385 00:14:43,600 --> 00:14:45,283 ‫Dan kemudian juga, nama ikon. 386 00:14:46,241 --> 00:14:48,570 ‫Oke. 387 00:14:48,570 --> 00:14:49,790 ‫Jadi sekarang, mari salin 388 00:14:49,790 --> 00:14:52,020 ‫teks itu di sini dan tentu saja ini sekarang 389 00:14:53,447 --> 00:14:54,450 ‫mengacaukan pemformatan kita. 390 00:14:54,450 --> 00:14:56,853 ‫Ayo cepat perbaiki itu. 391 00:14:58,420 --> 00:14:59,980 ‫Dan sekarang, variabel-variabel ini di sini, mereka 392 00:15:02,047 --> 00:15:02,880 ‫benar-benar berfungsi 393 00:15:02,880 --> 00:15:04,320 ‫seperti semua variabel lain di Pug. 394 00:15:04,320 --> 00:15:07,940 ‫Jadi, di sini sekarang ini harus menjadi 395 00:15:07,940 --> 00:15:08,773 ‫teks. 396 00:15:08,773 --> 00:15:11,563 ‫Benar? 397 00:15:13,640 --> 00:15:14,473 ‫Dan ini di sini harus menjadi deskripsi. 398 00:15:14,473 --> 00:15:16,410 ‫Jadi deskripsi yang sama. 399 00:15:18,300 --> 00:15:20,920 ‫Nah di sini sebenarnya disebut label di CSS. 400 00:15:20,920 --> 00:15:23,730 ‫Jadi sebut saja label di sini juga. 401 00:15:23,730 --> 00:15:26,303 ‫Oke jadi label, teks dan ikon. 402 00:15:28,210 --> 00:15:30,833 ‫Jadi di sini kita juga perlu mengubah nama 403 00:15:31,850 --> 00:15:35,280 ‫ikon itu dan semua nama ikon ini selalu dimulai dengan 404 00:15:35,280 --> 00:15:36,530 ‫tanda hubung ikon. 405 00:15:36,530 --> 00:15:38,730 ‫Jadi yang benar-benar perlu kita 406 00:15:38,730 --> 00:15:40,630 ‫ganti hanyalah bagian ini. 407 00:15:40,630 --> 00:15:42,350 ‫Jadi mari kita buat lagi string template. 408 00:15:42,350 --> 00:15:44,963 ‫Dan kemudian singkirkan ini. 409 00:15:46,500 --> 00:15:48,493 ‫Dan ikon. 410 00:15:51,690 --> 00:15:52,943 ‫Oke dan sekarang kita bisa menggunakan ini. 411 00:15:54,000 --> 00:15:56,363 ‫Saya juga ingin mengatakan bahwa kami 412 00:15:57,310 --> 00:15:58,800 ‫juga dapat mengekspor 413 00:15:58,800 --> 00:16:03,200 ‫mixin ini ke file lain dan kemudian menyertakan file itu di sini. 414 00:16:03,200 --> 00:16:05,170 ‫Tapi saya pikir ini tidak masuk akal. 415 00:16:05,170 --> 00:16:07,040 ‫Dalam hal ini 416 00:16:07,040 --> 00:16:09,780 ‫karena sebenarnya tidak banyak kode. 417 00:16:09,780 --> 00:16:11,890 ‫Bagaimanapun, sekarang mari kita lanjutkan dan gunakan 418 00:16:11,890 --> 00:16:12,723 ‫mixin ini. 419 00:16:12,723 --> 00:16:15,760 ‫Jadi izinkan saya menyalin namanya saja. 420 00:16:15,760 --> 00:16:17,510 ‫Jadi di sini alih-alih kotak ikhtisar ini. 421 00:16:18,490 --> 00:16:22,203 ‫Dan untuk saat ini biarkan saya benar-benar hanya menduplikasinya di sini. 422 00:16:23,290 --> 00:16:25,840 ‫Oke, jadi kami menggunakan mixin ini 423 00:16:27,290 --> 00:16:29,310 ‫dengan menulis plus lalu seperti 424 00:16:29,310 --> 00:16:31,220 ‫fungsi biasa, kami memasukkan 425 00:16:31,220 --> 00:16:33,130 ‫argumen kosong ke dalamnya. 426 00:16:33,130 --> 00:16:35,340 ‫Jadi kotak ikhtisar pertama kami adalah tanggal berikutnya. 427 00:16:35,340 --> 00:16:38,043 ‫Kemudian untuk saat ini, hanya tanggal yang ada di sini. 428 00:16:41,150 --> 00:16:43,380 ‫Jadi saya hanya dapat menunjukkan kepada Anda bahwa itu benar-benar berfungsi. 429 00:16:43,380 --> 00:16:46,383 ‫Jadi 20 Agustus 430 00:16:47,600 --> 00:16:49,480 ‫21. 431 00:16:49,480 --> 00:16:50,380 ‫Dan kemudian 432 00:16:50,380 --> 00:16:51,363 ‫di sini, kalender. 433 00:16:52,400 --> 00:16:53,510 ‫Oke karena itulah nama ikon di sini. 434 00:16:53,510 --> 00:16:56,280 ‫Jadi sekarang kita harus 435 00:16:56,280 --> 00:16:58,420 ‫mendapatkan dua kotak. 436 00:16:58,420 --> 00:16:59,810 ‫Jadi yang ini dan 437 00:16:59,810 --> 00:17:01,560 ‫yang ini yang seharusnya terlihat persis sama. 438 00:17:01,560 --> 00:17:03,740 ‫Jadi mari kita cepat mengkonfirmasi itu. 439 00:17:03,740 --> 00:17:05,800 ‫Dan kemudian kita dapat melanjutkan untuk 440 00:17:05,800 --> 00:17:07,830 ‫benar-benar menggunakan mixin dengan benar. 441 00:17:07,830 --> 00:17:10,103 ‫Dan ya, jadi inilah dua kotak kami 442 00:17:11,220 --> 00:17:12,240 ‫yang persis sama. 443 00:17:12,240 --> 00:17:15,163 ‫Besar. 444 00:17:16,450 --> 00:17:17,490 ‫Jadi mari kita singkirkan yang pertama ini. 445 00:17:17,490 --> 00:17:20,203 ‫Dan tentu saja di sini kita menginginkan 446 00:17:24,450 --> 00:17:25,760 ‫kencan yang sebenarnya. 447 00:17:25,760 --> 00:17:27,233 ‫Oke. 448 00:17:28,540 --> 00:17:29,410 ‫Dan 449 00:17:29,410 --> 00:17:33,960 ‫begitulah, tambahkan tur. mulai, tanggal, nol. 450 00:17:33,960 --> 00:17:34,793 ‫Jadi mari kita lihat itu. 451 00:17:36,450 --> 00:17:37,283 ‫Dan ingat, 452 00:17:38,330 --> 00:17:39,910 ‫ini akan terlihat agak aneh. 453 00:17:39,910 --> 00:17:41,310 ‫Seperti yang dilakukan sebelumnya. 454 00:17:41,310 --> 00:17:43,410 ‫Oke. 455 00:17:43,410 --> 00:17:45,083 ‫Jadi mari kita maju dan memperbaikinya. 456 00:17:45,920 --> 00:17:46,860 ‫Jadi mari kita ambil itu dari sini. 457 00:17:46,860 --> 00:17:49,820 ‫Jadi yang kita butuhkan pada 458 00:17:49,820 --> 00:17:52,503 ‫dasarnya adalah ini. 459 00:17:53,610 --> 00:17:55,220 ‫Sekarang saya tidak 460 00:17:55,220 --> 00:17:57,603 ‫ingin membuat baris ini terlalu panjang 461 00:17:59,370 --> 00:18:01,290 ‫hanya dengan menempelkannya di sini. 462 00:18:01,290 --> 00:18:02,300 ‫Jadi mengapa 463 00:18:02,300 --> 00:18:04,800 ‫tidak membuat variabel skrip java baru untuk itu. 464 00:18:04,800 --> 00:18:06,700 ‫Jadi ingat kita perlu menggunakan sintaks ini 465 00:18:06,700 --> 00:18:08,560 ‫di sini untuk membuat kode 466 00:18:08,560 --> 00:18:11,100 ‫skrip java yang tidak akan menghasilkan output apa pun. 467 00:18:11,100 --> 00:18:12,910 ‫Dan sekali lagi kita 468 00:18:12,910 --> 00:18:15,083 ‫cukup menulis skrip java di sini. 469 00:18:16,780 --> 00:18:17,613 ‫Oke. 470 00:18:17,613 --> 00:18:20,133 ‫Dan sekarang di sini saya hanya akan menggunakan 471 00:18:21,060 --> 00:18:21,893 ‫tanggal itu. 472 00:18:21,893 --> 00:18:24,780 ‫Besar. 473 00:18:24,780 --> 00:18:26,240 ‫Dan sekarang mari kita gandakan ini di sini beberapa kali untuk 474 00:18:26,240 --> 00:18:27,073 ‫semua kotak yang kita miliki. 475 00:18:27,073 --> 00:18:29,470 ‫Jadi yang pertama adalah untuk kesulitan. 476 00:18:29,470 --> 00:18:31,610 ‫Dan ikonnya sedang tren. 477 00:18:31,610 --> 00:18:33,623 ‫Kemudian yang berikutnya adalah untuk peserta. 478 00:18:37,150 --> 00:18:38,833 ‫Dengan ikon pengguna. 479 00:18:41,970 --> 00:18:44,483 ‫Dan yang terakhir adalah penilaian. 480 00:18:48,040 --> 00:18:50,220 ‫Dan ikonnya adalah bintang. 481 00:18:50,220 --> 00:18:52,383 ‫Jadi di sini kami memiliki tanggal tetapi, di sini dalam 482 00:18:58,010 --> 00:18:59,403 ‫kesulitan kami sebenarnya memiliki tur. kesulitan. 483 00:19:00,540 --> 00:19:02,770 ‫Kemudian di sini untuk 484 00:19:02,770 --> 00:19:05,080 ‫para peserta kami menginginkan string ini. 485 00:19:06,860 --> 00:19:07,860 ‫Seperti 10 orang. 486 00:19:09,149 --> 00:19:10,810 ‫Jadi string 487 00:19:10,810 --> 00:19:14,053 ‫template mengatakan tur. campuran, 488 00:19:15,160 --> 00:19:19,120 ‫ukuran kelompok, dan kemudian orang. 489 00:19:21,327 --> 00:19:22,940 ‫Dan akhirnya kami ingin peringkat dan 490 00:19:22,940 --> 00:19:23,823 ‫kemudian dari lima. 491 00:19:24,740 --> 00:19:25,573 ‫Jadi tur, 492 00:19:26,950 --> 00:19:28,570 ‫dan saya tidak pernah 493 00:19:28,570 --> 00:19:30,850 ‫ingat apa yang saya sebut bidang ini. 494 00:19:30,850 --> 00:19:32,333 ‫Dan itu adalah peringkat rata-rata. 495 00:19:37,130 --> 00:19:38,530 ‫Baiklah. 496 00:19:38,530 --> 00:19:40,730 ‫Dan kemudian, dari 497 00:19:40,730 --> 00:19:44,673 ‫lima. 498 00:19:49,730 --> 00:19:50,563 ‫Oke. 499 00:19:50,563 --> 00:19:51,396 ‫Dan itu seharusnya. 500 00:19:51,396 --> 00:19:52,380 ‫Sekarang kita bisa menyingkirkan semua kode ini. 501 00:19:52,380 --> 00:19:53,213 ‫Dan cara ini terlihat jauh lebih bagus. 502 00:19:54,560 --> 00:19:55,393 ‫Dan 503 00:19:55,393 --> 00:19:56,530 ‫hanya untuk memastikan 504 00:19:56,530 --> 00:19:58,660 ‫itu berhasil, mari kita simpan 505 00:19:58,660 --> 00:20:01,760 ‫di sini, muat ulang, dan memang, kita mendapatkan 506 00:20:01,760 --> 00:20:03,820 ‫mudah, 25 orang, dan peringkat 507 00:20:03,820 --> 00:20:05,203 ‫lima dari lima. 508 00:20:06,370 --> 00:20:08,140 ‫Luar biasa. 509 00:20:08,140 --> 00:20:09,350 ‫Jadi kita sudah membahas 510 00:20:09,350 --> 00:20:12,170 ‫banyak hal, tapi mari kita bagi video ini menjadi dua dan 511 00:20:12,170 --> 00:20:13,453 ‫lanjutkan dengan sisa halaman di 512 00:20:14,360 --> 00:20:15,193 ‫halaman berikutnya.