‫Instruktur: Dalam kuliah
‫ini, Anda akan mempelajari dasar-dasar bekerja dengan template Pug.
‫Jadi mari kita buka template dasar kita di sini dan mari kita mulai.
‫Jadi intinya, Pug adalah sintaks sensitif spasi
‫putih sederhana untuk menulis html, jadi itulah intinya.
‫Artinya, semua yang kita gunakan
‫untuk menulis elemen html adalah nama dan lekukannya dalam
‫kode kita.
‫Jadi mari kita mulai
‫dengan menyiapkan struktur html yang sangat sederhana di
‫sini, jadi beri kami ruang.
‫Dan html biasanya selalu dimulai dengan doctype
‫dan html.
‫Jadi agar dapat bekerja dengan Pug dengan baik, Anda
‫tentu harus memiliki pengetahuan html; jika
‫tidak, ini mungkin tidak masuk akal bagi Anda.
‫Tapi tetap saja jika Anda tidak
‫tahu html, jangan khawatir, Anda masih bisa mengikuti apa yang saya
‫lakukan di sini dan
‫mungkin membaca artikel tentang memulai dengan
‫html karena sangat, sangat sederhana.
‫Bagaimanapun, kita selalu memulai dengan
‫doctype dan kemudian elemen pertama, jadi elemen
‫menyeluruh di semua dokumen html kita selalu html, lalu
‫di dalamnya biasanya ada elemen kepala.
‫Jadi di Pug untuk
‫mengatakan bahwa satu elemen ada di dalam elemen
‫lainnya, yang kita lakukan hanyalah menggunakan tag.
‫Jadi kami menggunakan lekukan, seperti yang saya sebutkan di awal,
‫dan hanya itu.
‫Jadi itulah elemen kepala kita, dan di dalam kepala
‫itu mari kita buat judul halaman web.
‫Dan, satu lagi tag.
‫Jadi
‫judul, dan katakanlah Natours.
‫Oke, sekali lagi hanya lekukan, lalu nama
‫elemen html, dan kemudian
‫konten itu sendiri.
‫Tidak ada tag pembuka, tidak ada tag
‫penutup, dan tidak ada kekacauan yang biasanya kita miliki di html.
‫Jadi saya sebenarnya sangat menyukai sintaks ini di sini
‫untuk menulis dokumen html, jadi
‫saya merasa sangat luar biasa, sangat mudah digunakan, dan
‫juga untuk dibaca.
‫Bagaimanapun, itulah konten yang kita inginkan di kepala, dan
‫sekarang kita juga ingin membuat badan.
‫Sekarang tubuh itu tentu saja tidak berada di dalam
‫kepala, melainkan berada di level yang sama
‫dengan kepala, jadi pada dasarnya juga merupakan anak langsung dari html.
‫Jadi yang perlu kita lakukan adalah kembali satu tingkat lekukan dan
‫kemudian membuat elemen di sana.
‫Kemudian di sana kita menginginkan h1,
‫dan sekarang kita perlu menggunakan beberapa lekukan lagi.
‫Jadi tentu saja tidak di sini, tidak di sini, tapi di
‫sini, di dalam tubuh.
‫Mari kita juga menambahkan
‫paragraf, dan untuk itu kita menggunakan elemen p yang
‫mengatakan sesuatu seperti, ini hanya beberapa teks.
‫Jadi mari kita coba sekarang di browser kita, jadi
‫muat ulang, dan ini dia.
‫Baiklah, jadi di sini Anda benar-benar melihat
‫seluruh struktur yang baru saja kita buat dengan doctype, elemen html,
‫dan tentu saja head dan body di sana.
‫Dan Anda juga melihat judul itu benar-benar muncul di sini.
‫Bagus, selanjutnya mari kita juga menyertakan file CSS dan
‫juga favicon untuk ditampilkan di
‫sini alih-alih halaman umum ini di sana.
‫Jadi, jika Anda mengetahui beberapa
‫html, Anda tahu bahwa hal semacam itu termasuk di sini untuk kepala.
‫Jadi bagaimana Anda benar-benar memasukkan style sheet CSS
‫dengan html normal?
‫Anda akan melakukan sesuatu seperti ini.
‫Jadi Anda akan membuat elemen tautan, lalu
‫menentukan bahwa itu adalah lembar gaya,
‫dan kemudian juga
‫referensi, jadi seperti ini.
‫Jadi gaya CSS. css, dan apa
‫yang kita miliki di sini, jadi ini dan ini adalah atribut.
‫Dan dengan Pug, kami menulis atribut seperti ini.
‫Jadi alih-alih memiliki elemen
‫ini, kita cukup menulis tautan, dan kemudian kita menulis atribut
‫ini dalam tanda kurung, jadi seperti ini.
‫Jadi tanpa spasi dan kurung buka, dan
‫kemudian di sanalah kita
‫menulis atribut-atribut ini seperti ini.
‫Dan kita harus selalu menulisnya dengan tanda kutip tunggal dan
‫bukan tanda kutip ganda,
‫jadi kita tidak perlu yang ini lagi di sini.
‫Sekarang hanya satu hal yang ingin saya
‫sampaikan kepada Anda, adalah bahwa kita sebenarnya dapat menggunakan html biasa juga di Pug.
‫Jadi jika Anda mau, Anda bisa meninggalkan baris
‫kode ini di sini dan Pug akan memahaminya dengan baik.
‫Tapi tentu saja di sini saya ingin
‫menunjukkan kepada Anda bagaimana kita dapat mendefinisikan atribut dengan Pug.
‫Jadi sekarang mari kita lakukan hal yang sama untuk favicon,
‫dan sekali lagi kita membutuhkan elemen link, dan di
‫sana kita akan mendefinisikan beberapa atribut.
‫Jadi kami mendefinisikan bahwa ini adalah ikon
‫pintasan, kami juga menentukan jenisnya, jadi gambar, dan dalam
‫hal ini adalah
‫PNG, dan sekali lagi referensi untuk
‫itu, dan itu adalah favicon gambar. png.
‫Dan sekarang mari kita lanjutkan dan
‫mengujinya, dan Anda melihat ini sebenarnya terlihat agak berbeda.
‫Jadi kami memiliki favicon kami,
‫dan juga teks kami sekarang ditumpuk dengan baik.
‫Dan sebenarnya Anda melihat beberapa properti CSS muncul di sini sekarang
‫di sisi kiri.
‫Dan tentu saja karena saya menulis banyak
‫CSS sebenarnya untuk
‫aplikasi ini, jadi itu saja di publik, CSS dan gaya.
‫Jadi Anda lihat bahwa
‫saya memiliki seperti, saya tidak tahu, seperti seribu baris atau lebih
‫dari CSS yang saya tulis hanya untuk
‫aplikasi ini agar terlihat seindah itu.
‫Jadi dengan kata lain, mengapa gaya ini. File css
‫sebenarnya dimuat dari folder CSS secara
‫otomatis, dan favicon juga dimuat secara
‫otomatis dari folder gambar.
‫Pertama-tama, perlu diingat bahwa masing-masing aset ini
‫sebenarnya memicu permintaan http-nya sendiri, jadi mari
‫kita konfirmasikan di sini di sumber atau sebenarnya
‫di panel jaringan.
‫Jadi di sini Anda melihat tiga permintaan
‫ini, jadi satu untuk halaman itu sendiri, yang lain untuk gaya kami,
‫dan untuk favicon kami.
‫Dan sekali lagi, mengapa ini
‫bekerja seperti ini karena jelas kami tidak memiliki
‫pengendali rute seperti file-file ini di sini.
‫Tapi itu masih rute jika Anda memikirkannya,
‫karena ini adalah permintaan get ke url ini
‫dan juga ke url ini.
‫Jadi izinkan saya mengingat mengapa ini benar-benar bekerja,
‫dan karena middleware inilah yang kami
‫definisikan di suatu tempat di sini, jadi ini di sini.
‫Jadi ingat itu dengan menggunakan express. static, pada dasarnya
‫kami mendefinisikan bahwa semua aset statis
‫akan selalu otomatis disajikan
‫dari folder bernama public, jadi dengan folder ini di sini.
‫Dan itulah mengapa ketika kami mengatakan gaya slash css,
‫itu sebenarnya berasal dari folder publik.
‫Jadi folder CSS ini adalah folder di dalam publik, dan tentu
‫saja sama untuk gambar.
‫Jadi jika di html kita memiliki favicon garis miring gambar,
‫maka itu akan membuka folder gambar
‫yang ada di dalam folder publik kita.
‫Sekali lagi karena kami mendefinisikannya dalam aplikasi ekspres kami.
‫Jadi Anda sudah belajar cara membuat elemen
‫di Pug menggunakan lekukan,
‫dan Anda juga belajar cara menggunakan atribut.
‫Tetapi hal lain yang
‫sangat keren adalah benar-benar menggunakan variabel di sini.
‫Sekarang izinkan saya menunjukkan kepada Anda bagaimana sebenarnya kami dapat mengirimkan
‫data ke dalam template dan kemudian bagaimana kami dapat menggunakan data tersebut di
‫sini di Pug.
‫Jadi ingat bahwa kita memiliki rute ini
‫di sini, yang kita gunakan untuk merender template dasar kita.
‫Dan tentunya jika
‫nanti kita akan memiliki file tersendiri,
‫dimana semua route tersebut nantinya akan live.
‫Tapi untuk saat ini yang ingin saya lakukan adalah benar-benar membuat ini berhasil.
‫Bagaimanapun, untuk mengirimkan data ke dalam template ini di sini, yang
‫perlu kita lakukan adalah mendefinisikan objek di sini
‫dan kemudian kita cukup memasukkan beberapa data di sana.
‫Dan data itu kemudian akan tersedia di template Pug.
‫Jadi mari kita buat objek
‫di sini dengan properti tur dan atur ke The Forest Tiger,
‫lalu...
‫mari kita juga membuat properti pengguna
‫dan mengaturnya ke Jonas.
‫Dan variabel-variabel yang kami lewati di
‫sini, mereka kemudian disebut lokal di file Pug.
‫Jadi sekarang mari kita lanjutkan dan gunakan data itu.
‫Dan yang ingin saya lakukan
‫sekarang adalah menempatkan variabel tur itu ke h1.
‫Jadi pada dasarnya, saya ingin membuat elemen h1, di
‫mana kontennya adalah nama tur itu.
‫Dan cara paling
‫sederhana untuk melakukannya adalah dengan menggunakan sintaks
‫yang sama seperti ini, jadi h1 sama, lalu spasi, lalu tur.
‫Dan hanya itu, hanya itu yang harus kita lakukan.
‫Jadi mari kita ambil yang
‫ini, dan sebenarnya hal lain yang ingin
‫saya tunjukkan kepada Anda adalah bahwa di Pug, kita dapat
‫membuat komentar, dan kita dapat membuat dua jenis komentar.
‫Jadi yang paling sederhana seperti di JavaScript,
‫jadi seperti ini.
‫Dan ini kemudian akan
‫membuat komentar yang akan terlihat di html.
‫Jadi sekarang mari kita
‫lihat ini,
‫dan jadi ingatlah bahwa sekarang h1 tidak lagi menjadi
‫The Park Camper, tetapi harus The Forest Hiker
‫karena itu adalah variabel tur,
‫atau dengan kata lain tur lokal,
‫itu sekarang diteruskan ke template ini.
‫Jadi di sini, saya
‫kemudian memasukkannya ke dalam h1 menggunakan sintaks yang sama.
‫Jadi mari kita periksa,
‫lihat ini.
‫Dan memang sekarang The Forest Hiker.
‫Dan juga di sini adalah komentar yang
‫baru saja kita bicarakan juga.
‫Jadi seperti yang saya katakan, garis miring ganda
‫yang kami lakukan di sana pada dasarnya membuat komentar html.
‫Jadi sintaks ini di sini adalah bagaimana kita menulis komentar dalam
‫html, tetapi jika Anda benar-benar ingin ini menjadi komentar untuk file Pug tetapi
‫tidak benar-benar dikeluarkan ke html, Anda perlu
‫menambahkan tanda hubung seperti ini.
‫Jadi jika sekarang kita memuat ulang ini, maka komentar itu seharusnya hilang.
‫Jadi jenis kode di sini, yang kami tulis di
‫sini, disebut kode buffer.
‫Dan sebenarnya kita juga bisa menulis beberapa
‫JavaScript di sini, jadi katakanlah h2 sama dengan pengguna, dan
‫kemudian kita juga bisa memanggil toUppercase untuk itu.
‫Jadi JavaScript sederhana di sini
‫karena sekali lagi di sini dalam kode buffer ini,
‫begitulah namanya, kita
‫dapat menjalankan JavaScript sederhana seperti yang kita lakukan di sini.
‫Jadi memang di sini kita pergi, Jonas sebagai huruf besar.
‫Jadi kode buffered, dan jika kita memiliki kode buffer,
‫maka kita juga harus memiliki kode unbuffered.
‫Jadi pada dasarnya, kode unbuffered adalah kode yang tidak
‫akan menambahkan apa pun ke output.
‫Dan kami menulisnya dengan menulis tanda hubung dan
‫kemudian mari kita lakukan beberapa
‫JavaScript di sini, misalnya hanya mendefinisikan variabel.
‫Jadi katakanlah const x sama dengan sembilan, lalu mari kita
‫lakukan beberapa kode buffer lagi.
‫Jadi sekali lagi kode yang akan menambahkan sesuatu ke output.
‫Dan sekali lagi kita dapat menggunakan JavaScript di sini,
‫jadi mari kita lakukan dua kali x.
‫Jadi di sini, kita akan mendapatkan akses ke variabel x itu.
‫Jadi seharusnya 18 dan memang begitu.
‫Jadi itu semua potongan kecil dari kode yang
‫berbeda yang bisa kita gunakan di Pug.
‫Sekarang sebenarnya ada juga cara ketiga untuk menulis kode, dan izinkan
‫saya menunjukkannya di sini.
‫Jadi itu disebut interpolasi, dan
‫sebenarnya yang itu
‫sedikit mirip dengan string template ES6.
‫Jadi daripada hanya memiliki Natours di
‫sini, mari tambahkan juga
‫nama turnya, sehingga kita bisa melakukannya seperti ini.
‫Jadi dengan template string di ES6, ia bekerja seperti ini, tapi
‫di sini di Pug dengan hash ini,
‫jadi seperti ini.
‫Dan di sini kita perlu
‫melakukannya seperti ini pada dasarnya karena ini adalah kode, jadi ini adalah
‫variabel, tetapi ini bukan kode, ini hanyalah teks.
‫Jadi kami tidak dapat melakukan ini karena semua yang ada di
‫sini kemudian diperlakukan sebagai JavaScript,
‫dan karena ini bukan JavaScript, itu tidak akan berfungsi.
‫Jadi ini hanya sebuah string, dan
‫jika kita ingin menambahkan sesuatu ke string itu,
‫maka kita perlu menggunakan sintaks interpolasi ini.
‫Oke, masuk akal?
‫Mari kita tambahkan seperti bar ini di sini,
‫yang juga merupakan bagian dari string.
‫Dan sekarang kami berharap Natours
‫menebas The Forest
‫Hiker, jadi itulah yang mereka dapatkan.
‫Bagus, jadi ini adalah dasar-dasar
‫bekerja dengan Pug.
‫Tapi tentu saja, masih banyak yang harus dipelajari
‫dan jadi mari kita
‫terus melakukannya selama beberapa kuliah berikutnya.