Menggunakan Pug

1. Download Pug menggunkan npm
2. Update kode di app.js untuk menggunakan Pug
3. Membuat template
4. Render template dengan response.render()

Install dengan npm i pug --save kemudian tambahkan app.set('view engine', 'pug') di kode app.js dan pug akan membaca template dari folder views dan kita akan membuat file template pertama kita

Buat file dengan nama 'index.pug' dengan isi bebas

doctype html
html(lang="en")
    head
        title Landing Page
    body
        h1 Ini adalah halaman yang bagus
        p Semoga semua yang disampaikan dapat dipahami dengan baik ya. Semisal ada yang kebingungan, tinggal tanyakan saja

Kemudian panggil template tersebut dengan res.render('index') saat pengguna mengakses url "/". Kemudian cek halaman yang telah dibuat tersebut di browser.

Selanjutnya kita akan mulai membuat aplikasi kuis, berupa flash card dengan bentuk halaman yang berbeda.

doctype html
html(lang="en")
    head
        title Flash Cards
    body
        header
            h1 Flash Cards
        section#content
            h2 Halo, Makers!
        footer
            p Adalah aplikasi yang membantu kamu belajar

Dengan melihat dokumentasi kita bisa melakukan templating, dengan membuat variabel penampung, kemudian memberikan konten dari variabel tersebut dari app.render().

Sebelumnya, kita duplikasi file index.pug dengan nama cards.pug namun ubah beberapa hal

//cards.pug
h2= prompt


//app.js
// tambahkan
app.get('/cards', (req, res) => {
    res.render('cards', {prompt: "Siapa nama aku?"})
})

// prompt tersebut dapat dipindah menjadi bagian yang berbeda dengan
    res.locals.prompt = "Siapa nama aku?"

Kemudian kita bisa menggabungkan templating dengan static string

//cards.pug
p
    i Hint: #{hint}

//app.js
// res.render() untuk data locals ditambahkan hint
    res.render('cards', {prompt: "Siapa nama aku?", hint: "Kira kira aja"})