1 00:00:01,170 --> 00:00:04,190 ‫Mari kita mulai dengan menyiapkan mesin templating kita 2 00:00:04,190 --> 00:00:06,480 ‫di Express, yang kemudian akan memungkinkan kita 3 00:00:06,480 --> 00:00:09,830 ‫untuk merender situs web menggunakan templat sederhana seperti yang 4 00:00:09,830 --> 00:00:11,333 ‫kita bicarakan sebelumnya. 5 00:00:12,660 --> 00:00:14,520 ‫Jadi seperti yang sudah 6 00:00:14,520 --> 00:00:16,850 ‫Anda ketahui sekarang, di bagian kursus 7 00:00:16,850 --> 00:00:21,210 ‫ini sekarang saatnya untuk benar-benar mengirim situs web akhir yang dirender ke 8 00:00:21,210 --> 00:00:23,200 ‫klien yang berisi, tentu saja, 9 00:00:23,200 --> 00:00:25,590 ‫semua data yang telah kami kerjakan 10 00:00:25,590 --> 00:00:28,770 ‫hingga saat ini, seperti tur, pengguna dan ulasan. 11 00:00:28,770 --> 00:00:32,970 ‫Sekarang, bagaimana sebenarnya kita membangun atau merender situs web ini? 12 00:00:32,970 --> 00:00:35,920 ‫Nah, kita menggunakan apa yang disebut mesin template yang 13 00:00:35,920 --> 00:00:38,060 ‫memungkinkan kita untuk membuat template 14 00:00:38,060 --> 00:00:41,610 ‫dan kemudian dengan mudah mengisi template itu dengan data kita. 15 00:00:41,610 --> 00:00:43,580 ‫Dan mesin template yang akan 16 00:00:43,580 --> 00:00:46,210 ‫kita gunakan dalam kursus ini disebut pug. 17 00:00:46,210 --> 00:00:48,700 ‫Ada beberapa mesin template lain 18 00:00:48,700 --> 00:00:52,800 ‫seperti setang atau EGS untuk orang yang tidak suka pug, 19 00:00:52,800 --> 00:00:56,010 ‫karena saya tahu ada beberapa pendapat kuat seputar 20 00:00:56,010 --> 00:00:59,160 ‫pug, tetapi saya tetap akan mengatakan bahwa pug 21 00:00:59,160 --> 00:01:03,190 ‫sebenarnya adalah mesin template yang paling umum digunakan dengan Express. 22 00:01:03,190 --> 00:01:05,650 ‫Jadi sekarang, dalam video ini, siapkan pug 23 00:01:05,650 --> 00:01:08,453 ‫dan render halaman web pertama kita yang menggunakannya. 24 00:01:09,310 --> 00:01:11,920 ‫Langkah pertama adalah memberi tahu Express 25 00:01:11,920 --> 00:01:14,510 ‫mesin template apa yang akan kita 26 00:01:14,510 --> 00:01:16,970 ‫gunakan, dan kita melakukannya dengan 27 00:01:16,970 --> 00:01:18,920 ‫mengatakan tepat di 28 00:01:19,910 --> 00:01:24,050 ‫awal sini dari app, app. set, jadi pada dasarnya 29 00:01:24,050 --> 00:01:29,050 ‫ini seperti setting untuk view engine, dan kemudian kita set ke pug. 30 00:01:32,600 --> 00:01:33,910 ‫Dan itu saja. 31 00:01:33,910 --> 00:01:35,850 ‫Jadi Express secara 32 00:01:35,850 --> 00:01:38,320 ‫otomatis mendukung mesin yang paling umum, 33 00:01:38,320 --> 00:01:40,970 ‫dan tentu saja, pug adalah salah satunya. 34 00:01:40,970 --> 00:01:43,470 ‫Jadi sebenarnya kita tidak perlu menginstal pug, dan 35 00:01:43,470 --> 00:01:45,940 ‫kita juga tidak perlu membutuhkannya dimanapun. 36 00:01:45,940 --> 00:01:47,660 ‫Semua ini terjadi di 37 00:01:47,660 --> 00:01:49,870 ‫balik layar secara internal di Express. 38 00:01:49,870 --> 00:01:51,910 ‫Jadi kami mendefinisikan mesin tampilan 39 00:01:51,910 --> 00:01:54,450 ‫kami, sekarang kami juga perlu menentukan di mana 40 00:01:54,450 --> 00:01:57,013 ‫tampilan ini sebenarnya berada di sistem file kami. 41 00:01:57,916 --> 00:02:02,230 ‫Jadi template pug kami sebenarnya disebut view di Express. 42 00:02:02,230 --> 00:02:04,960 ‫Itu karena templat ini sebenarnya adalah 43 00:02:04,960 --> 00:02:08,090 ‫tampilan dalam arsitektur pengontrol tampilan model yang 44 00:02:08,090 --> 00:02:11,720 ‫telah kami gunakan dalam kursus ini hingga saat ini. 45 00:02:11,720 --> 00:02:13,980 ‫Seperti yang Anda ketahui, kami sudah memiliki 46 00:02:13,980 --> 00:02:15,273 ‫pengontrol, dan folder model. 47 00:02:16,180 --> 00:02:17,650 ‫Mari kita tutup ini. 48 00:02:17,650 --> 00:02:20,703 ‫Dan sekarang saatnya untuk benar-benar membuat folder views. 49 00:02:25,210 --> 00:02:27,590 ‫Dengan itu kami memiliki tiga 50 00:02:27,590 --> 00:02:29,583 ‫komponen arsitektur MVC. 51 00:02:30,900 --> 00:02:32,860 ‫Untuk sekarang menentukan folder mana pandangan 52 00:02:32,860 --> 00:02:35,070 ‫kita sebenarnya berada, yang perlu kita lakukan 53 00:02:35,070 --> 00:02:38,943 ‫lagi adalah mengatakan app. set, dan kali 54 00:02:40,660 --> 00:02:44,763 ‫ini adalah pengaturan tampilan, atau sebenarnya tampilan, dan 55 00:02:46,310 --> 00:02:48,660 ‫kemudian di sini nama jalurnya. 56 00:02:48,660 --> 00:02:52,500 ‫Sekarang di sini kita bisa meletakkan 57 00:02:52,500 --> 00:02:57,380 ‫sesuatu seperti ini, jadi /views, tapi itu tidak ideal. 58 00:02:57,380 --> 00:03:00,040 ‫Seperti yang sudah Anda ketahui, jalur yang 59 00:03:00,040 --> 00:03:02,330 ‫kami sediakan di sini selalu 60 00:03:02,330 --> 00:03:05,240 ‫relatif terhadap direktori tempat kami meluncurkan aplikasi Note, 61 00:03:05,240 --> 00:03:07,760 ‫dan itu biasanya adalah folder proyek root, 62 00:03:07,760 --> 00:03:09,180 ‫tetapi mungkin tidak. 63 00:03:09,180 --> 00:03:11,170 ‫Jadi kita tidak boleh menggunakan 64 00:03:11,170 --> 00:03:14,410 ‫titik di sini, tetapi kita harus menggunakan variabel nama direktori. 65 00:03:14,410 --> 00:03:17,550 ‫Jadi mari kita lakukan itu, dan bersama dengan 66 00:03:17,550 --> 00:03:22,150 ‫trik bagus yang bisa kita gunakan dengan Note, yaitu menggunakan modul path. 67 00:03:22,150 --> 00:03:26,340 ‫Path adalah modul Note bawaan, jadi modul inti, yang digunakan 68 00:03:26,340 --> 00:03:29,593 ‫untuk memanipulasi nama path, pada dasarnya. 69 00:03:32,130 --> 00:03:35,860 ‫Jadi membutuhkan path, jadi tentu saja kita tidak 70 00:03:35,860 --> 00:03:37,650 ‫perlu menginstal apapun. 71 00:03:37,650 --> 00:03:40,143 ‫Ini hanya modul bawaan bawaan. 72 00:03:41,320 --> 00:03:44,333 ‫Yang bisa kita lakukan sekarang adalah jalan. bergabung, 73 00:03:46,340 --> 00:03:51,340 ‫dan kemudian nama direktori, dan kemudian dilihat. 74 00:03:52,930 --> 00:03:55,790 ‫Ini kemudian, pada dasarnya di 75 00:03:55,790 --> 00:04:00,403 ‫belakang layar, membuat jalur yang menghubungkan nama direktori /views. 76 00:04:01,640 --> 00:04:03,520 ‫Sekarang mungkin tampak agak berlebihan 77 00:04:03,520 --> 00:04:06,620 ‫untuk menggunakan jalur ini. fungsi join disini, tapi 78 00:04:06,620 --> 00:04:08,880 ‫kita tidak selalu tahu apakah path 79 00:04:08,880 --> 00:04:13,120 ‫yang kita terima dari suatu tempat sudah memiliki garis miring atau belum. 80 00:04:13,120 --> 00:04:16,290 ‫Jadi Anda akan melihat fungsi ini di sini digunakan 81 00:04:16,290 --> 00:04:19,040 ‫sepanjang waktu untuk mencegah bug semacam ini. 82 00:04:19,040 --> 00:04:21,440 ‫Karena dengan cara ini kita bahkan tidak 83 00:04:21,440 --> 00:04:23,380 ‫perlu memikirkan garis miring atau 84 00:04:23,380 --> 00:04:26,463 ‫tidak, karena Note secara otomatis akan membuat jalur yang benar. 85 00:04:28,140 --> 00:04:30,140 ‫Sebenarnya kita juga harus menggunakan 86 00:04:30,140 --> 00:04:33,343 ‫ini di sini di mana kita membuat middleware ini. 87 00:04:34,290 --> 00:04:37,623 ‫Di sini kita memang harus menggunakan hal yang sama persis di sini. 88 00:04:39,070 --> 00:04:40,533 ‫Jadi mari kita duplikat ini saja. 89 00:04:43,540 --> 00:04:45,703 ‫Jadi jalan bergabung, dan publik. 90 00:04:54,470 --> 00:04:57,510 ‫Mari kita letakkan yang satu ini di 91 00:04:57,510 --> 00:05:01,373 ‫atas, karena ini sejenis dengan yang ini di sini. 92 00:05:02,330 --> 00:05:04,580 ‫Masih merupakan middleware, tetapi seperti yang akan 93 00:05:04,580 --> 00:05:07,020 ‫Anda lihat di salah satu video berikutnya, ini 94 00:05:07,020 --> 00:05:09,053 ‫bekerja sama dengan mesin penayangan. 95 00:05:10,520 --> 00:05:14,050 ‫Tapi ini di sini kita sekarang telah menyiapkan mesin pug kami. 96 00:05:14,050 --> 00:05:17,400 ‫Sekarang saatnya untuk membuat template pertama kita. 97 00:05:17,400 --> 00:05:19,890 ‫Jadi di sini mari kita buat file pug 98 00:05:21,660 --> 00:05:24,970 ‫pertama kita bernama base. pug, dan seperti yang 99 00:05:24,970 --> 00:05:29,453 ‫akan Anda lihat kode vs sebenarnya memiliki ikon Nice sendiri untuk jenis file ini. 100 00:05:30,919 --> 00:05:32,950 ‫Yang benar-benar ingin saya 101 00:05:32,950 --> 00:05:36,220 ‫lakukan di sini untuk saat ini adalah membuat elemen h1, 102 00:05:36,220 --> 00:05:38,660 ‫jadi judul utama hanya dengan nama beberapa 103 00:05:38,660 --> 00:05:41,720 ‫tur, dan cara kerjanya dengan pug adalah seperti ini. 104 00:05:41,720 --> 00:05:45,170 ‫Jadi h1, dan kemudian isi elemen. 105 00:05:45,170 --> 00:05:49,030 ‫Katakanlah The Park Camper. 106 00:05:49,030 --> 00:05:50,520 ‫Dan itu sebenarnya! 107 00:05:50,520 --> 00:05:54,730 ‫Itu kemudian akan diterjemahkan ke sini, 108 00:05:54,730 --> 00:05:59,730 ‫h1 The Park Camper, dan kemudian tutup itu. 109 00:06:04,730 --> 00:06:07,680 ‫Jadi, dalam html kita harus menulis ini, tetapi 110 00:06:07,680 --> 00:06:10,250 ‫sintaks pug membuatnya lebih mudah untuk 111 00:06:10,250 --> 00:06:12,193 ‫menulis html seperti ini. 112 00:06:13,470 --> 00:06:14,670 ‫Tentu saja ini juga 113 00:06:14,670 --> 00:06:16,880 ‫akan memungkinkan kita untuk menempatkan semua jenis variabel 114 00:06:16,880 --> 00:06:19,780 ‫di sini, sehingga kita benar-benar dapat memasukkan data kita ke dalam 115 00:06:19,780 --> 00:06:21,650 ‫template ini, tetapi untuk saat ini saya 116 00:06:21,650 --> 00:06:23,853 ‫benar-benar hanya tertarik untuk memasukkan sesuatu ke browser. 117 00:06:25,240 --> 00:06:27,570 ‫Lebih banyak tentang bagaimana pug benar-benar bekerja 118 00:06:27,570 --> 00:06:29,220 ‫selama beberapa kuliah berikutnya. 119 00:06:30,870 --> 00:06:33,400 ‫Untuk saat ini kami memiliki template dasar kami di sini, 120 00:06:33,400 --> 00:06:34,793 ‫dan ingat nama itu. 121 00:06:37,225 --> 00:06:40,680 ‫Sekarang kita benar-benar dapat membuat rute baru dari 122 00:06:40,680 --> 00:06:43,383 ‫mana kita akan mengakses template itu. 123 00:06:45,260 --> 00:06:48,893 ‫Jadi mari kita lakukan itu di sini tepat sebelum rute api. 124 00:06:51,160 --> 00:06:56,160 ‫Jadi, aplikasi. get, yang untuk merender halaman di 125 00:06:56,680 --> 00:06:59,060 ‫browser biasanya selalu yang kami 126 00:06:59,060 --> 00:07:02,990 ‫gunakan, dan itu menentukan url di sini, jadi rutenya, dan 127 00:07:02,990 --> 00:07:05,763 ‫itu hanya root dari situs web kami. 128 00:07:07,060 --> 00:07:10,283 ‫Kemudian sama seperti sebelumnya kita tentu membutuhkan 129 00:07:11,780 --> 00:07:14,363 ‫fungsi handler, jadi request, response, dan 130 00:07:17,140 --> 00:07:19,150 ‫sekarang untuk merender 131 00:07:19,150 --> 00:07:22,210 ‫template kita seperti sebelum kita menggunakan objek 132 00:07:22,210 --> 00:07:27,210 ‫response, kita masih mengatur status menjadi 200 dalam hal ini oke. 133 00:07:28,100 --> 00:07:31,830 ‫Tapi kemudian alih-alih menggunakan json, seperti ini, seperti 134 00:07:31,830 --> 00:07:34,250 ‫yang selalu kita gunakan sampai 135 00:07:34,250 --> 00:07:37,133 ‫saat ini sekarang saatnya menggunakan render. 136 00:07:38,015 --> 00:07:40,230 ‫Jadi render kemudian akan merender 137 00:07:40,230 --> 00:07:42,340 ‫template dengan nama yang 138 00:07:42,340 --> 00:07:44,963 ‫kita masukkan, dan dalam hal ini, base. 139 00:07:46,640 --> 00:07:49,910 ‫Kami bahkan tidak perlu menentukan ekstensi pug karena 140 00:07:49,910 --> 00:07:52,070 ‫Express akan secara otomatis mengetahui 141 00:07:52,070 --> 00:07:54,490 ‫bahwa ini adalah file yang 142 00:07:54,490 --> 00:07:56,920 ‫kami cari dan tentu saja akan 143 00:07:56,920 --> 00:07:59,060 ‫mencari file ini 144 00:07:59,060 --> 00:08:03,600 ‫di dalam folder yang ditentukan tepat di awal, jadi ini satu. 145 00:08:03,600 --> 00:08:05,390 ‫Ini akan masuk ke folder 146 00:08:05,390 --> 00:08:08,303 ‫views, dan di sana mencari template dengan nama dasar. 147 00:08:09,920 --> 00:08:12,840 ‫Kemudian ia akan mengambil template itu, dan 148 00:08:12,840 --> 00:08:16,430 ‫merendernya, dan pada dasarnya mengirimkannya sebagai respons ke browser. 149 00:08:16,430 --> 00:08:18,563 ‫Bagus, jadi mari kita uji sekarang. 150 00:08:22,190 --> 00:08:23,850 ‫Jadi, server kami 151 00:08:23,850 --> 00:08:27,223 ‫masih berjalan di port host lokal 3000 saya percaya. 152 00:08:32,170 --> 00:08:34,970 ‫Dan itu memberi kita kesalahan 153 00:08:34,970 --> 00:08:37,790 ‫ini, tidak dapat menemukan modul pug, 154 00:08:37,790 --> 00:08:41,323 ‫dan sebenarnya, kita benar-benar perlu menginstal modul pug. 155 00:08:42,845 --> 00:08:45,250 ‫Jadi saya katakan sebelumnya bahwa kami 156 00:08:45,250 --> 00:08:47,723 ‫tidak melakukannya, tetapi sebenarnya kami perlu melakukan itu. 157 00:08:49,220 --> 00:08:52,210 ‫Express masih akan memuatnya di belakang layar secara otomatis, 158 00:08:52,210 --> 00:08:54,890 ‫tetapi tidak datang dengan semua mesin template yang 159 00:08:54,890 --> 00:08:56,553 ‫dipasang di luar kotak. 160 00:08:57,460 --> 00:08:59,753 ‫Jadi npm instal pug. 161 00:09:06,063 --> 00:09:08,063 ‫Dan ini dia, jadi 162 00:09:09,220 --> 00:09:11,620 ‫mari kita coba lagi, dan 163 00:09:11,620 --> 00:09:14,310 ‫sekarang memang kita mendapatkan kemping taman. 164 00:09:14,310 --> 00:09:17,610 ‫Itu elemen h1 kami yang baru saja 165 00:09:17,610 --> 00:09:22,610 ‫kami buat di pangkalan. pug, dan jika sekarang kita 166 00:09:22,830 --> 00:09:26,750 ‫memeriksanya, Anda akan melihat bahwa itu adalah elemen h1 sederhana. 167 00:09:26,750 --> 00:09:28,210 ‫Tentu saja tidak ada 168 00:09:28,210 --> 00:09:31,160 ‫gaya dan CSS sama sekali pada saat ini, 169 00:09:31,160 --> 00:09:32,530 ‫tetapi kita akan 170 00:09:32,530 --> 00:09:34,290 ‫membahasnya selama beberapa kuliah berikutnya. 171 00:09:34,290 --> 00:09:36,180 ‫Untuk saat ini yang penting 172 00:09:36,180 --> 00:09:40,070 ‫di sini adalah saat kita mengakses root kita, merutekan di sini di host 173 00:09:40,070 --> 00:09:42,883 ‫kita, jadi memiliki ini memang sama dengan memiliki ini. 174 00:09:44,560 --> 00:09:46,810 ‫Saat kami mengakses rute ini, kami sekarang 175 00:09:46,810 --> 00:09:48,900 ‫mendapatkan akses ke situs web 176 00:09:48,900 --> 00:09:53,320 ‫yang dirender secara dinamis berdasarkan basis kami. template pug, bagus. 177 00:09:53,320 --> 00:09:56,150 ‫Itulah langkah pertama tentang cara menyiapkan pug, dan selama 178 00:09:56,150 --> 00:09:57,670 ‫beberapa kuliah berikutnya Anda 179 00:09:57,670 --> 00:10:00,570 ‫akan belajar untuk benar-benar menggunakan mesin template ini untuk 180 00:10:00,570 --> 00:10:02,663 ‫membangun situs web dinamis yang menakjubkan.