‫Mari kita mulai dengan menyiapkan mesin templating kita
‫di Express, yang kemudian akan memungkinkan kita
‫untuk merender situs web menggunakan templat sederhana seperti yang
‫kita bicarakan sebelumnya.
‫Jadi seperti yang sudah
‫Anda ketahui sekarang, di bagian kursus
‫ini sekarang saatnya untuk benar-benar mengirim situs web akhir yang dirender ke
‫klien yang berisi, tentu saja,
‫semua data yang telah kami kerjakan
‫hingga saat ini, seperti tur, pengguna dan ulasan.
‫Sekarang, bagaimana sebenarnya kita membangun atau merender situs web ini?
‫Nah, kita menggunakan apa yang disebut mesin template yang
‫memungkinkan kita untuk membuat template
‫dan kemudian dengan mudah mengisi template itu dengan data kita.
‫Dan mesin template yang akan
‫kita gunakan dalam kursus ini disebut pug.
‫Ada beberapa mesin template lain
‫seperti setang atau EGS untuk orang yang tidak suka pug,
‫karena saya tahu ada beberapa pendapat kuat seputar
‫pug, tetapi saya tetap akan mengatakan bahwa pug
‫sebenarnya adalah mesin template yang paling umum digunakan dengan Express.
‫Jadi sekarang, dalam video ini, siapkan pug
‫dan render halaman web pertama kita yang menggunakannya.
‫Langkah pertama adalah memberi tahu Express
‫mesin template apa yang akan kita
‫gunakan, dan kita melakukannya dengan
‫mengatakan tepat di
‫awal sini dari app, app. set, jadi pada dasarnya
‫ini seperti setting untuk view engine, dan kemudian kita set ke pug.
‫Dan itu saja.
‫Jadi Express secara
‫otomatis mendukung mesin yang paling umum,
‫dan tentu saja, pug adalah salah satunya.
‫Jadi sebenarnya kita tidak perlu menginstal pug, dan
‫kita juga tidak perlu membutuhkannya dimanapun.
‫Semua ini terjadi di
‫balik layar secara internal di Express.
‫Jadi kami mendefinisikan mesin tampilan
‫kami, sekarang kami juga perlu menentukan di mana
‫tampilan ini sebenarnya berada di sistem file kami.
‫Jadi template pug kami sebenarnya disebut view di Express.
‫Itu karena templat ini sebenarnya adalah
‫tampilan dalam arsitektur pengontrol tampilan model yang
‫telah kami gunakan dalam kursus ini hingga saat ini.
‫Seperti yang Anda ketahui, kami sudah memiliki
‫pengontrol, dan folder model.
‫Mari kita tutup ini.
‫Dan sekarang saatnya untuk benar-benar membuat folder views.
‫Dengan itu kami memiliki tiga
‫komponen arsitektur MVC.
‫Untuk sekarang menentukan folder mana pandangan
‫kita sebenarnya berada, yang perlu kita lakukan
‫lagi adalah mengatakan app. set, dan kali
‫ini adalah pengaturan tampilan, atau sebenarnya tampilan, dan
‫kemudian di sini nama jalurnya.
‫Sekarang di sini kita bisa meletakkan
‫sesuatu seperti ini, jadi /views, tapi itu tidak ideal.
‫Seperti yang sudah Anda ketahui, jalur yang
‫kami sediakan di sini selalu
‫relatif terhadap direktori tempat kami meluncurkan aplikasi Note,
‫dan itu biasanya adalah folder proyek root,
‫tetapi mungkin tidak.
‫Jadi kita tidak boleh menggunakan
‫titik di sini, tetapi kita harus menggunakan variabel nama direktori.
‫Jadi mari kita lakukan itu, dan bersama dengan
‫trik bagus yang bisa kita gunakan dengan Note, yaitu menggunakan modul path.
‫Path adalah modul Note bawaan, jadi modul inti, yang digunakan
‫untuk memanipulasi nama path, pada dasarnya.
‫Jadi membutuhkan path, jadi tentu saja kita tidak
‫perlu menginstal apapun.
‫Ini hanya modul bawaan bawaan.
‫Yang bisa kita lakukan sekarang adalah jalan. bergabung,
‫dan kemudian nama direktori, dan kemudian dilihat.
‫Ini kemudian, pada dasarnya di
‫belakang layar, membuat jalur yang menghubungkan nama direktori /views.
‫Sekarang mungkin tampak agak berlebihan
‫untuk menggunakan jalur ini. fungsi join disini, tapi
‫kita tidak selalu tahu apakah path
‫yang kita terima dari suatu tempat sudah memiliki garis miring atau belum.
‫Jadi Anda akan melihat fungsi ini di sini digunakan
‫sepanjang waktu untuk mencegah bug semacam ini.
‫Karena dengan cara ini kita bahkan tidak
‫perlu memikirkan garis miring atau
‫tidak, karena Note secara otomatis akan membuat jalur yang benar.
‫Sebenarnya kita juga harus menggunakan
‫ini di sini di mana kita membuat middleware ini.
‫Di sini kita memang harus menggunakan hal yang sama persis di sini.
‫Jadi mari kita duplikat ini saja.
‫Jadi jalan bergabung, dan publik.
‫Mari kita letakkan yang satu ini di
‫atas, karena ini sejenis dengan yang ini di sini.
‫Masih merupakan middleware, tetapi seperti yang akan
‫Anda lihat di salah satu video berikutnya, ini
‫bekerja sama dengan mesin penayangan.
‫Tapi ini di sini kita sekarang telah menyiapkan mesin pug kami.
‫Sekarang saatnya untuk membuat template pertama kita.
‫Jadi di sini mari kita buat file pug
‫pertama kita bernama base. pug, dan seperti yang
‫akan Anda lihat kode vs sebenarnya memiliki ikon Nice sendiri untuk jenis file ini.
‫Yang benar-benar ingin saya
‫lakukan di sini untuk saat ini adalah membuat elemen h1,
‫jadi judul utama hanya dengan nama beberapa
‫tur, dan cara kerjanya dengan pug adalah seperti ini.
‫Jadi h1, dan kemudian isi elemen.
‫Katakanlah The Park Camper.
‫Dan itu sebenarnya!
‫Itu kemudian akan diterjemahkan ke sini,
‫h1 The Park Camper, dan kemudian tutup itu.
‫Jadi, dalam html kita harus menulis ini, tetapi
‫sintaks pug membuatnya lebih mudah untuk
‫menulis html seperti ini.
‫Tentu saja ini juga
‫akan memungkinkan kita untuk menempatkan semua jenis variabel
‫di sini, sehingga kita benar-benar dapat memasukkan data kita ke dalam
‫template ini, tetapi untuk saat ini saya
‫benar-benar hanya tertarik untuk memasukkan sesuatu ke browser.
‫Lebih banyak tentang bagaimana pug benar-benar bekerja
‫selama beberapa kuliah berikutnya.
‫Untuk saat ini kami memiliki template dasar kami di sini,
‫dan ingat nama itu.
‫Sekarang kita benar-benar dapat membuat rute baru dari
‫mana kita akan mengakses template itu.
‫Jadi mari kita lakukan itu di sini tepat sebelum rute api.
‫Jadi, aplikasi. get, yang untuk merender halaman di
‫browser biasanya selalu yang kami
‫gunakan, dan itu menentukan url di sini, jadi rutenya, dan
‫itu hanya root dari situs web kami.
‫Kemudian sama seperti sebelumnya kita tentu membutuhkan
‫fungsi handler, jadi request, response, dan
‫sekarang untuk merender
‫template kita seperti sebelum kita menggunakan objek
‫response, kita masih mengatur status menjadi 200 dalam hal ini oke.
‫Tapi kemudian alih-alih menggunakan json, seperti ini, seperti
‫yang selalu kita gunakan sampai
‫saat ini sekarang saatnya menggunakan render.
‫Jadi render kemudian akan merender
‫template dengan nama yang
‫kita masukkan, dan dalam hal ini, base.
‫Kami bahkan tidak perlu menentukan ekstensi pug karena
‫Express akan secara otomatis mengetahui
‫bahwa ini adalah file yang
‫kami cari dan tentu saja akan
‫mencari file ini
‫di dalam folder yang ditentukan tepat di awal, jadi ini satu.
‫Ini akan masuk ke folder
‫views, dan di sana mencari template dengan nama dasar.
‫Kemudian ia akan mengambil template itu, dan
‫merendernya, dan pada dasarnya mengirimkannya sebagai respons ke browser.
‫Bagus, jadi mari kita uji sekarang.
‫Jadi, server kami
‫masih berjalan di port host lokal 3000 saya percaya.
‫Dan itu memberi kita kesalahan
‫ini, tidak dapat menemukan modul pug,
‫dan sebenarnya, kita benar-benar perlu menginstal modul pug.
‫Jadi saya katakan sebelumnya bahwa kami
‫tidak melakukannya, tetapi sebenarnya kami perlu melakukan itu.
‫Express masih akan memuatnya di belakang layar secara otomatis,
‫tetapi tidak datang dengan semua mesin template yang
‫dipasang di luar kotak.
‫Jadi npm instal pug.
‫Dan ini dia, jadi
‫mari kita coba lagi, dan
‫sekarang memang kita mendapatkan kemping taman.
‫Itu elemen h1 kami yang baru saja
‫kami buat di pangkalan. pug, dan jika sekarang kita
‫memeriksanya, Anda akan melihat bahwa itu adalah elemen h1 sederhana.
‫Tentu saja tidak ada
‫gaya dan CSS sama sekali pada saat ini,
‫tetapi kita akan
‫membahasnya selama beberapa kuliah berikutnya.
‫Untuk saat ini yang penting
‫di sini adalah saat kita mengakses root kita, merutekan di sini di host
‫kita, jadi memiliki ini memang sama dengan memiliki ini.
‫Saat kami mengakses rute ini, kami sekarang
‫mendapatkan akses ke situs web
‫yang dirender secara dinamis berdasarkan basis kami. template pug, bagus.
‫Itulah langkah pertama tentang cara menyiapkan pug, dan selama
‫beberapa kuliah berikutnya Anda
‫akan belajar untuk benar-benar menggunakan mesin template ini untuk
‫membangun situs web dinamis yang menakjubkan.