1 00:00:01,057 --> 00:00:02,830 ‫Instruktur: Dalam kuliah 2 00:00:02,830 --> 00:00:06,513 ‫ini, Anda akan mempelajari dasar-dasar bekerja dengan template Pug. 3 00:00:07,950 --> 00:00:12,950 ‫Jadi mari kita buka template dasar kita di sini dan mari kita mulai. 4 00:00:13,030 --> 00:00:17,720 ‫Jadi intinya, Pug adalah sintaks sensitif spasi 5 00:00:17,720 --> 00:00:22,550 ‫putih sederhana untuk menulis html, jadi itulah intinya. 6 00:00:22,550 --> 00:00:24,900 ‫Artinya, semua yang kita gunakan 7 00:00:24,900 --> 00:00:29,290 ‫untuk menulis elemen html adalah nama dan lekukannya dalam 8 00:00:29,290 --> 00:00:30,630 ‫kode kita. 9 00:00:30,630 --> 00:00:32,320 ‫Jadi mari kita mulai 10 00:00:32,320 --> 00:00:35,093 ‫dengan menyiapkan struktur html yang sangat sederhana di 11 00:00:36,420 --> 00:00:38,170 ‫sini, jadi beri kami ruang. 12 00:00:38,170 --> 00:00:41,680 ‫Dan html biasanya selalu dimulai dengan doctype 13 00:00:44,350 --> 00:00:45,990 ‫dan html. 14 00:00:45,990 --> 00:00:49,300 ‫Jadi agar dapat bekerja dengan Pug dengan baik, Anda 15 00:00:49,300 --> 00:00:51,943 ‫tentu harus memiliki pengetahuan html; jika 16 00:00:53,100 --> 00:00:56,280 ‫tidak, ini mungkin tidak masuk akal bagi Anda. 17 00:00:56,280 --> 00:00:58,090 ‫Tapi tetap saja jika Anda tidak 18 00:00:58,090 --> 00:01:01,750 ‫tahu html, jangan khawatir, Anda masih bisa mengikuti apa yang saya 19 00:01:01,750 --> 00:01:03,300 ‫lakukan di sini dan 20 00:01:03,300 --> 00:01:05,250 ‫mungkin membaca artikel tentang memulai dengan 21 00:01:05,250 --> 00:01:07,053 ‫html karena sangat, sangat sederhana. 22 00:01:08,250 --> 00:01:11,010 ‫Bagaimanapun, kita selalu memulai dengan 23 00:01:11,010 --> 00:01:14,500 ‫doctype dan kemudian elemen pertama, jadi elemen 24 00:01:14,500 --> 00:01:18,720 ‫menyeluruh di semua dokumen html kita selalu html, lalu 25 00:01:18,720 --> 00:01:21,960 ‫di dalamnya biasanya ada elemen kepala. 26 00:01:21,960 --> 00:01:23,650 ‫Jadi di Pug untuk 27 00:01:23,650 --> 00:01:26,360 ‫mengatakan bahwa satu elemen ada di dalam elemen 28 00:01:26,360 --> 00:01:28,700 ‫lainnya, yang kita lakukan hanyalah menggunakan tag. 29 00:01:28,700 --> 00:01:32,550 ‫Jadi kami menggunakan lekukan, seperti yang saya sebutkan di awal, 30 00:01:32,550 --> 00:01:33,720 ‫dan hanya itu. 31 00:01:33,720 --> 00:01:37,090 ‫Jadi itulah elemen kepala kita, dan di dalam kepala 32 00:01:37,090 --> 00:01:39,770 ‫itu mari kita buat judul halaman web. 33 00:01:39,770 --> 00:01:41,573 ‫Dan, satu lagi tag. 34 00:01:42,790 --> 00:01:43,773 ‫Jadi 35 00:01:45,490 --> 00:01:47,210 ‫judul, dan katakanlah Natours. 36 00:01:47,210 --> 00:01:50,610 ‫Oke, sekali lagi hanya lekukan, lalu nama 37 00:01:50,610 --> 00:01:52,997 ‫elemen html, dan kemudian 38 00:01:52,997 --> 00:01:54,890 ‫konten itu sendiri. 39 00:01:54,890 --> 00:01:57,450 ‫Tidak ada tag pembuka, tidak ada tag 40 00:01:57,450 --> 00:02:01,130 ‫penutup, dan tidak ada kekacauan yang biasanya kita miliki di html. 41 00:02:01,130 --> 00:02:04,040 ‫Jadi saya sebenarnya sangat menyukai sintaks ini di sini 42 00:02:04,040 --> 00:02:05,660 ‫untuk menulis dokumen html, jadi 43 00:02:05,660 --> 00:02:08,750 ‫saya merasa sangat luar biasa, sangat mudah digunakan, dan 44 00:02:08,750 --> 00:02:10,183 ‫juga untuk dibaca. 45 00:02:11,320 --> 00:02:14,290 ‫Bagaimanapun, itulah konten yang kita inginkan di kepala, dan 46 00:02:14,290 --> 00:02:16,660 ‫sekarang kita juga ingin membuat badan. 47 00:02:16,660 --> 00:02:19,660 ‫Sekarang tubuh itu tentu saja tidak berada di dalam 48 00:02:19,660 --> 00:02:22,340 ‫kepala, melainkan berada di level yang sama 49 00:02:22,340 --> 00:02:25,870 ‫dengan kepala, jadi pada dasarnya juga merupakan anak langsung dari html. 50 00:02:25,870 --> 00:02:29,190 ‫Jadi yang perlu kita lakukan adalah kembali satu tingkat lekukan dan 51 00:02:30,130 --> 00:02:31,830 ‫kemudian membuat elemen di sana. 52 00:02:32,900 --> 00:02:35,323 ‫Kemudian di sana kita menginginkan h1, 53 00:02:36,490 --> 00:02:39,070 ‫dan sekarang kita perlu menggunakan beberapa lekukan lagi. 54 00:02:39,070 --> 00:02:43,290 ‫Jadi tentu saja tidak di sini, tidak di sini, tapi di 55 00:02:43,290 --> 00:02:44,913 ‫sini, di dalam tubuh. 56 00:02:47,404 --> 00:02:49,270 ‫Mari kita juga menambahkan 57 00:02:49,270 --> 00:02:52,410 ‫paragraf, dan untuk itu kita menggunakan elemen p yang 58 00:02:52,410 --> 00:02:55,203 ‫mengatakan sesuatu seperti, ini hanya beberapa teks. 59 00:02:56,228 --> 00:03:00,600 ‫Jadi mari kita coba sekarang di browser kita, jadi 60 00:03:00,600 --> 00:03:03,223 ‫muat ulang, dan ini dia. 61 00:03:04,900 --> 00:03:08,200 ‫Baiklah, jadi di sini Anda benar-benar melihat 62 00:03:08,200 --> 00:03:12,400 ‫seluruh struktur yang baru saja kita buat dengan doctype, elemen html, 63 00:03:12,400 --> 00:03:15,740 ‫dan tentu saja head dan body di sana. 64 00:03:15,740 --> 00:03:19,620 ‫Dan Anda juga melihat judul itu benar-benar muncul di sini. 65 00:03:19,620 --> 00:03:24,140 ‫Bagus, selanjutnya mari kita juga menyertakan file CSS dan 66 00:03:24,140 --> 00:03:27,360 ‫juga favicon untuk ditampilkan di 67 00:03:27,360 --> 00:03:31,280 ‫sini alih-alih halaman umum ini di sana. 68 00:03:31,280 --> 00:03:33,230 ‫Jadi, jika Anda mengetahui beberapa 69 00:03:33,230 --> 00:03:37,320 ‫html, Anda tahu bahwa hal semacam itu termasuk di sini untuk kepala. 70 00:03:37,320 --> 00:03:40,650 ‫Jadi bagaimana Anda benar-benar memasukkan style sheet CSS 71 00:03:40,650 --> 00:03:42,233 ‫dengan html normal? 72 00:03:43,350 --> 00:03:45,310 ‫Anda akan melakukan sesuatu seperti ini. 73 00:03:45,310 --> 00:03:48,100 ‫Jadi Anda akan membuat elemen tautan, lalu 74 00:03:48,100 --> 00:03:50,763 ‫menentukan bahwa itu adalah lembar gaya, 75 00:03:54,220 --> 00:03:55,853 ‫dan kemudian juga 76 00:03:57,590 --> 00:03:59,453 ‫referensi, jadi seperti ini. 77 00:04:00,393 --> 00:04:03,483 ‫Jadi gaya CSS. css, dan apa 78 00:04:05,230 --> 00:04:10,230 ‫yang kita miliki di sini, jadi ini dan ini adalah atribut. 79 00:04:11,900 --> 00:04:15,260 ‫Dan dengan Pug, kami menulis atribut seperti ini. 80 00:04:15,260 --> 00:04:17,610 ‫Jadi alih-alih memiliki elemen 81 00:04:17,610 --> 00:04:21,950 ‫ini, kita cukup menulis tautan, dan kemudian kita menulis atribut 82 00:04:21,950 --> 00:04:25,140 ‫ini dalam tanda kurung, jadi seperti ini. 83 00:04:25,140 --> 00:04:28,030 ‫Jadi tanpa spasi dan kurung buka, dan 84 00:04:28,030 --> 00:04:29,890 ‫kemudian di sanalah kita 85 00:04:31,290 --> 00:04:33,343 ‫menulis atribut-atribut ini seperti ini. 86 00:04:35,410 --> 00:04:38,270 ‫Dan kita harus selalu menulisnya dengan tanda kutip tunggal dan 87 00:04:38,270 --> 00:04:39,553 ‫bukan tanda kutip ganda, 88 00:04:41,600 --> 00:04:44,210 ‫jadi kita tidak perlu yang ini lagi di sini. 89 00:04:44,210 --> 00:04:47,140 ‫Sekarang hanya satu hal yang ingin saya 90 00:04:47,140 --> 00:04:51,970 ‫sampaikan kepada Anda, adalah bahwa kita sebenarnya dapat menggunakan html biasa juga di Pug. 91 00:04:51,970 --> 00:04:54,880 ‫Jadi jika Anda mau, Anda bisa meninggalkan baris 92 00:04:54,880 --> 00:04:57,920 ‫kode ini di sini dan Pug akan memahaminya dengan baik. 93 00:04:57,920 --> 00:04:59,760 ‫Tapi tentu saja di sini saya ingin 94 00:04:59,760 --> 00:05:02,223 ‫menunjukkan kepada Anda bagaimana kita dapat mendefinisikan atribut dengan Pug. 95 00:05:03,860 --> 00:05:07,080 ‫Jadi sekarang mari kita lakukan hal yang sama untuk favicon, 96 00:05:07,080 --> 00:05:09,960 ‫dan sekali lagi kita membutuhkan elemen link, dan di 97 00:05:09,960 --> 00:05:12,160 ‫sana kita akan mendefinisikan beberapa atribut. 98 00:05:14,510 --> 00:05:17,323 ‫Jadi kami mendefinisikan bahwa ini adalah ikon 99 00:05:20,180 --> 00:05:23,723 ‫pintasan, kami juga menentukan jenisnya, jadi gambar, dan dalam 100 00:05:24,830 --> 00:05:26,713 ‫hal ini adalah 101 00:05:27,966 --> 00:05:30,530 ‫PNG, dan sekali lagi referensi untuk 102 00:05:30,530 --> 00:05:35,530 ‫itu, dan itu adalah favicon gambar. png. 103 00:05:37,300 --> 00:05:40,103 ‫Dan sekarang mari kita lanjutkan dan 104 00:05:40,980 --> 00:05:44,610 ‫mengujinya, dan Anda melihat ini sebenarnya terlihat agak berbeda. 105 00:05:44,610 --> 00:05:46,460 ‫Jadi kami memiliki favicon kami, 106 00:05:46,460 --> 00:05:48,943 ‫dan juga teks kami sekarang ditumpuk dengan baik. 107 00:05:50,342 --> 00:05:54,120 ‫Dan sebenarnya Anda melihat beberapa properti CSS muncul di sini sekarang 108 00:05:54,120 --> 00:05:55,153 ‫di sisi kiri. 109 00:05:56,490 --> 00:05:59,470 ‫Dan tentu saja karena saya menulis banyak 110 00:05:59,470 --> 00:06:01,443 ‫CSS sebenarnya untuk 111 00:06:02,980 --> 00:06:07,870 ‫aplikasi ini, jadi itu saja di publik, CSS dan gaya. 112 00:06:07,870 --> 00:06:09,733 ‫Jadi Anda lihat bahwa 113 00:06:10,690 --> 00:06:14,600 ‫saya memiliki seperti, saya tidak tahu, seperti seribu baris atau lebih 114 00:06:14,600 --> 00:06:16,950 ‫dari CSS yang saya tulis hanya untuk 115 00:06:16,950 --> 00:06:19,053 ‫aplikasi ini agar terlihat seindah itu. 116 00:06:21,784 --> 00:06:25,420 ‫Jadi dengan kata lain, mengapa gaya ini. File css 117 00:06:25,420 --> 00:06:28,820 ‫sebenarnya dimuat dari folder CSS secara 118 00:06:28,820 --> 00:06:32,110 ‫otomatis, dan favicon juga dimuat secara 119 00:06:32,110 --> 00:06:34,170 ‫otomatis dari folder gambar. 120 00:06:34,170 --> 00:06:38,040 ‫Pertama-tama, perlu diingat bahwa masing-masing aset ini 121 00:06:38,040 --> 00:06:41,433 ‫sebenarnya memicu permintaan http-nya sendiri, jadi mari 122 00:06:42,330 --> 00:06:46,690 ‫kita konfirmasikan di sini di sumber atau sebenarnya 123 00:06:46,690 --> 00:06:48,920 ‫di panel jaringan. 124 00:06:48,920 --> 00:06:51,270 ‫Jadi di sini Anda melihat tiga permintaan 125 00:06:51,270 --> 00:06:54,970 ‫ini, jadi satu untuk halaman itu sendiri, yang lain untuk gaya kami, 126 00:06:54,970 --> 00:06:56,593 ‫dan untuk favicon kami. 127 00:06:59,280 --> 00:07:02,410 ‫Dan sekali lagi, mengapa ini 128 00:07:02,410 --> 00:07:06,020 ‫bekerja seperti ini karena jelas kami tidak memiliki 129 00:07:06,020 --> 00:07:09,460 ‫pengendali rute seperti file-file ini di sini. 130 00:07:09,460 --> 00:07:12,250 ‫Tapi itu masih rute jika Anda memikirkannya, 131 00:07:12,250 --> 00:07:15,140 ‫karena ini adalah permintaan get ke url ini 132 00:07:15,140 --> 00:07:17,210 ‫dan juga ke url ini. 133 00:07:17,210 --> 00:07:20,930 ‫Jadi izinkan saya mengingat mengapa ini benar-benar bekerja, 134 00:07:20,930 --> 00:07:24,590 ‫dan karena middleware inilah yang kami 135 00:07:24,590 --> 00:07:29,290 ‫definisikan di suatu tempat di sini, jadi ini di sini. 136 00:07:29,290 --> 00:07:33,100 ‫Jadi ingat itu dengan menggunakan express. static, pada dasarnya 137 00:07:33,100 --> 00:07:36,190 ‫kami mendefinisikan bahwa semua aset statis 138 00:07:36,190 --> 00:07:38,170 ‫akan selalu otomatis disajikan 139 00:07:38,170 --> 00:07:43,170 ‫dari folder bernama public, jadi dengan folder ini di sini. 140 00:07:43,690 --> 00:07:47,470 ‫Dan itulah mengapa ketika kami mengatakan gaya slash css, 141 00:07:47,470 --> 00:07:50,050 ‫itu sebenarnya berasal dari folder publik. 142 00:07:50,050 --> 00:07:54,473 ‫Jadi folder CSS ini adalah folder di dalam publik, dan tentu 143 00:07:55,612 --> 00:07:57,810 ‫saja sama untuk gambar. 144 00:07:57,810 --> 00:08:01,550 ‫Jadi jika di html kita memiliki favicon garis miring gambar, 145 00:08:01,550 --> 00:08:04,010 ‫maka itu akan membuka folder gambar 146 00:08:04,010 --> 00:08:06,720 ‫yang ada di dalam folder publik kita. 147 00:08:06,720 --> 00:08:10,673 ‫Sekali lagi karena kami mendefinisikannya dalam aplikasi ekspres kami. 148 00:08:12,360 --> 00:08:15,400 ‫Jadi Anda sudah belajar cara membuat elemen 149 00:08:15,400 --> 00:08:17,570 ‫di Pug menggunakan lekukan, 150 00:08:17,570 --> 00:08:20,470 ‫dan Anda juga belajar cara menggunakan atribut. 151 00:08:20,470 --> 00:08:21,810 ‫Tetapi hal lain yang 152 00:08:21,810 --> 00:08:24,380 ‫sangat keren adalah benar-benar menggunakan variabel di sini. 153 00:08:24,380 --> 00:08:27,350 ‫Sekarang izinkan saya menunjukkan kepada Anda bagaimana sebenarnya kami dapat mengirimkan 154 00:08:27,350 --> 00:08:31,040 ‫data ke dalam template dan kemudian bagaimana kami dapat menggunakan data tersebut di 155 00:08:31,040 --> 00:08:32,153 ‫sini di Pug. 156 00:08:35,300 --> 00:08:38,143 ‫Jadi ingat bahwa kita memiliki rute ini 157 00:08:39,090 --> 00:08:42,580 ‫di sini, yang kita gunakan untuk merender template dasar kita. 158 00:08:42,580 --> 00:08:43,860 ‫Dan tentunya jika 159 00:08:43,860 --> 00:08:45,900 ‫nanti kita akan memiliki file tersendiri, 160 00:08:45,900 --> 00:08:48,173 ‫dimana semua route tersebut nantinya akan live. 161 00:08:49,050 --> 00:08:52,810 ‫Tapi untuk saat ini yang ingin saya lakukan adalah benar-benar membuat ini berhasil. 162 00:08:52,810 --> 00:08:57,030 ‫Bagaimanapun, untuk mengirimkan data ke dalam template ini di sini, yang 163 00:08:57,030 --> 00:09:00,560 ‫perlu kita lakukan adalah mendefinisikan objek di sini 164 00:09:00,560 --> 00:09:04,140 ‫dan kemudian kita cukup memasukkan beberapa data di sana. 165 00:09:04,140 --> 00:09:07,263 ‫Dan data itu kemudian akan tersedia di template Pug. 166 00:09:08,390 --> 00:09:10,910 ‫Jadi mari kita buat objek 167 00:09:10,910 --> 00:09:15,853 ‫di sini dengan properti tur dan atur ke The Forest Tiger, 168 00:09:18,795 --> 00:09:19,712 ‫lalu... 169 00:09:20,950 --> 00:09:23,660 ‫mari kita juga membuat properti pengguna 170 00:09:23,660 --> 00:09:25,993 ‫dan mengaturnya ke Jonas. 171 00:09:28,180 --> 00:09:30,710 ‫Dan variabel-variabel yang kami lewati di 172 00:09:30,710 --> 00:09:33,543 ‫sini, mereka kemudian disebut lokal di file Pug. 173 00:09:34,840 --> 00:09:39,380 ‫Jadi sekarang mari kita lanjutkan dan gunakan data itu. 174 00:09:39,380 --> 00:09:41,630 ‫Dan yang ingin saya lakukan 175 00:09:41,630 --> 00:09:45,140 ‫sekarang adalah menempatkan variabel tur itu ke h1. 176 00:09:45,140 --> 00:09:48,600 ‫Jadi pada dasarnya, saya ingin membuat elemen h1, di 177 00:09:48,600 --> 00:09:51,510 ‫mana kontennya adalah nama tur itu. 178 00:09:51,510 --> 00:09:53,260 ‫Dan cara paling 179 00:09:53,260 --> 00:09:56,510 ‫sederhana untuk melakukannya adalah dengan menggunakan sintaks 180 00:09:56,510 --> 00:10:01,340 ‫yang sama seperti ini, jadi h1 sama, lalu spasi, lalu tur. 181 00:10:01,340 --> 00:10:04,353 ‫Dan hanya itu, hanya itu yang harus kita lakukan. 182 00:10:05,830 --> 00:10:07,660 ‫Jadi mari kita ambil yang 183 00:10:07,660 --> 00:10:09,803 ‫ini, dan sebenarnya hal lain yang ingin 184 00:10:09,803 --> 00:10:12,830 ‫saya tunjukkan kepada Anda adalah bahwa di Pug, kita dapat 185 00:10:12,830 --> 00:10:15,450 ‫membuat komentar, dan kita dapat membuat dua jenis komentar. 186 00:10:15,450 --> 00:10:19,100 ‫Jadi yang paling sederhana seperti di JavaScript, 187 00:10:19,100 --> 00:10:20,703 ‫jadi seperti ini. 188 00:10:21,890 --> 00:10:23,600 ‫Dan ini kemudian akan 189 00:10:23,600 --> 00:10:26,120 ‫membuat komentar yang akan terlihat di html. 190 00:10:26,120 --> 00:10:27,770 ‫Jadi sekarang mari kita 191 00:10:29,290 --> 00:10:30,520 ‫lihat ini, 192 00:10:30,520 --> 00:10:34,330 ‫dan jadi ingatlah bahwa sekarang h1 tidak lagi menjadi 193 00:10:34,330 --> 00:10:37,480 ‫The Park Camper, tetapi harus The Forest Hiker 194 00:10:37,480 --> 00:10:39,520 ‫karena itu adalah variabel tur, 195 00:10:39,520 --> 00:10:42,090 ‫atau dengan kata lain tur lokal, 196 00:10:42,090 --> 00:10:44,640 ‫itu sekarang diteruskan ke template ini. 197 00:10:44,640 --> 00:10:46,390 ‫Jadi di sini, saya 198 00:10:46,390 --> 00:10:49,373 ‫kemudian memasukkannya ke dalam h1 menggunakan sintaks yang sama. 199 00:10:51,070 --> 00:10:53,160 ‫Jadi mari kita periksa, 200 00:10:53,160 --> 00:10:54,293 ‫lihat ini. 201 00:10:55,360 --> 00:10:57,743 ‫Dan memang sekarang The Forest Hiker. 202 00:11:00,020 --> 00:11:02,920 ‫Dan juga di sini adalah komentar yang 203 00:11:02,920 --> 00:11:05,250 ‫baru saja kita bicarakan juga. 204 00:11:05,250 --> 00:11:07,940 ‫Jadi seperti yang saya katakan, garis miring ganda 205 00:11:07,940 --> 00:11:10,810 ‫yang kami lakukan di sana pada dasarnya membuat komentar html. 206 00:11:10,810 --> 00:11:14,820 ‫Jadi sintaks ini di sini adalah bagaimana kita menulis komentar dalam 207 00:11:14,820 --> 00:11:19,380 ‫html, tetapi jika Anda benar-benar ingin ini menjadi komentar untuk file Pug tetapi 208 00:11:19,380 --> 00:11:21,950 ‫tidak benar-benar dikeluarkan ke html, Anda perlu 209 00:11:21,950 --> 00:11:24,093 ‫menambahkan tanda hubung seperti ini. 210 00:11:26,350 --> 00:11:29,513 ‫Jadi jika sekarang kita memuat ulang ini, maka komentar itu seharusnya hilang. 211 00:11:31,880 --> 00:11:34,550 ‫Jadi jenis kode di sini, yang kami tulis di 212 00:11:34,550 --> 00:11:36,163 ‫sini, disebut kode buffer. 213 00:11:37,080 --> 00:11:40,550 ‫Dan sebenarnya kita juga bisa menulis beberapa 214 00:11:40,550 --> 00:11:44,880 ‫JavaScript di sini, jadi katakanlah h2 sama dengan pengguna, dan 215 00:11:44,880 --> 00:11:48,700 ‫kemudian kita juga bisa memanggil toUppercase untuk itu. 216 00:11:53,080 --> 00:11:54,710 ‫Jadi JavaScript sederhana di sini 217 00:11:54,710 --> 00:11:57,600 ‫karena sekali lagi di sini dalam kode buffer ini, 218 00:11:57,600 --> 00:11:59,150 ‫begitulah namanya, kita 219 00:11:59,150 --> 00:12:02,403 ‫dapat menjalankan JavaScript sederhana seperti yang kita lakukan di sini. 220 00:12:05,840 --> 00:12:10,263 ‫Jadi memang di sini kita pergi, Jonas sebagai huruf besar. 221 00:12:12,160 --> 00:12:16,030 ‫Jadi kode buffered, dan jika kita memiliki kode buffer, 222 00:12:16,030 --> 00:12:19,660 ‫maka kita juga harus memiliki kode unbuffered. 223 00:12:19,660 --> 00:12:22,890 ‫Jadi pada dasarnya, kode unbuffered adalah kode yang tidak 224 00:12:22,890 --> 00:12:25,620 ‫akan menambahkan apa pun ke output. 225 00:12:25,620 --> 00:12:28,510 ‫Dan kami menulisnya dengan menulis tanda hubung dan 226 00:12:28,510 --> 00:12:30,863 ‫kemudian mari kita lakukan beberapa 227 00:12:31,990 --> 00:12:34,610 ‫JavaScript di sini, misalnya hanya mendefinisikan variabel. 228 00:12:34,610 --> 00:12:38,330 ‫Jadi katakanlah const x sama dengan sembilan, lalu mari kita 229 00:12:38,330 --> 00:12:40,720 ‫lakukan beberapa kode buffer lagi. 230 00:12:40,720 --> 00:12:45,200 ‫Jadi sekali lagi kode yang akan menambahkan sesuatu ke output. 231 00:12:45,200 --> 00:12:47,870 ‫Dan sekali lagi kita dapat menggunakan JavaScript di sini, 232 00:12:47,870 --> 00:12:50,290 ‫jadi mari kita lakukan dua kali x. 233 00:12:50,290 --> 00:12:54,613 ‫Jadi di sini, kita akan mendapatkan akses ke variabel x itu. 234 00:12:56,710 --> 00:13:00,833 ‫Jadi seharusnya 18 dan memang begitu. 235 00:13:01,990 --> 00:13:04,603 ‫Jadi itu semua potongan kecil dari kode yang 236 00:13:04,603 --> 00:13:06,950 ‫berbeda yang bisa kita gunakan di Pug. 237 00:13:06,950 --> 00:13:11,130 ‫Sekarang sebenarnya ada juga cara ketiga untuk menulis kode, dan izinkan 238 00:13:11,130 --> 00:13:12,970 ‫saya menunjukkannya di sini. 239 00:13:12,970 --> 00:13:15,240 ‫Jadi itu disebut interpolasi, dan 240 00:13:15,240 --> 00:13:16,690 ‫sebenarnya yang itu 241 00:13:16,690 --> 00:13:19,370 ‫sedikit mirip dengan string template ES6. 242 00:13:19,370 --> 00:13:21,430 ‫Jadi daripada hanya memiliki Natours di 243 00:13:21,430 --> 00:13:23,233 ‫sini, mari tambahkan juga 244 00:13:24,100 --> 00:13:26,883 ‫nama turnya, sehingga kita bisa melakukannya seperti ini. 245 00:13:29,380 --> 00:13:33,620 ‫Jadi dengan template string di ES6, ia bekerja seperti ini, tapi 246 00:13:33,620 --> 00:13:36,553 ‫di sini di Pug dengan hash ini, 247 00:13:37,660 --> 00:13:39,350 ‫jadi seperti ini. 248 00:13:39,350 --> 00:13:41,230 ‫Dan di sini kita perlu 249 00:13:41,230 --> 00:13:45,090 ‫melakukannya seperti ini pada dasarnya karena ini adalah kode, jadi ini adalah 250 00:13:45,090 --> 00:13:47,700 ‫variabel, tetapi ini bukan kode, ini hanyalah teks. 251 00:13:47,700 --> 00:13:51,500 ‫Jadi kami tidak dapat melakukan ini karena semua yang ada di 252 00:13:51,500 --> 00:13:53,630 ‫sini kemudian diperlakukan sebagai JavaScript, 253 00:13:53,630 --> 00:13:57,150 ‫dan karena ini bukan JavaScript, itu tidak akan berfungsi. 254 00:13:57,150 --> 00:13:59,810 ‫Jadi ini hanya sebuah string, dan 255 00:13:59,810 --> 00:14:02,730 ‫jika kita ingin menambahkan sesuatu ke string itu, 256 00:14:02,730 --> 00:14:05,430 ‫maka kita perlu menggunakan sintaks interpolasi ini. 257 00:14:05,430 --> 00:14:07,053 ‫Oke, masuk akal? 258 00:14:08,620 --> 00:14:11,320 ‫Mari kita tambahkan seperti bar ini di sini, 259 00:14:11,320 --> 00:14:13,940 ‫yang juga merupakan bagian dari string. 260 00:14:13,940 --> 00:14:15,717 ‫Dan sekarang kami berharap Natours 261 00:14:17,010 --> 00:14:18,573 ‫menebas The Forest 262 00:14:19,440 --> 00:14:21,810 ‫Hiker, jadi itulah yang mereka dapatkan. 263 00:14:21,810 --> 00:14:24,700 ‫Bagus, jadi ini adalah dasar-dasar 264 00:14:24,700 --> 00:14:26,760 ‫bekerja dengan Pug. 265 00:14:26,760 --> 00:14:28,970 ‫Tapi tentu saja, masih banyak yang harus dipelajari 266 00:14:28,970 --> 00:14:30,330 ‫dan jadi mari kita 267 00:14:30,330 --> 00:14:31,980 ‫terus melakukannya selama beberapa kuliah berikutnya.