Template Kartu

Untuk memunculkan jawaban kita bisa saja menggunakan req.params

/cards/1/soal
/cards/1/jawaban

Tapi kita juga bisa menggunakan cara lain dengan bermain query string, yaitu

/cards/1?key=value

// lebih spesifik
/cards/1?side=soal
/cards/1?side=jawaban

Maka kita akan mencoba menggunakan pilihan kedua. Untuk memenuhi hal tersebut, kita akan mencoba menyiapkannya

// cards.js
//    dalam router /:id

const { side } = req.query
const { id } = req.params
const text = cards[id][side]
const { hint } = cards[id]
const templateData = { text, hint }

res.render('card', templateDate)


// card.pug
...
    h2= text
...

Mari kita mencobanya di browser dengan menggunakan query string /cards/1?side=soal dan /cards/1?side=jawaban

Selanjutnya kita ingin menghilangkan hint pada bagian jawaban

// cards.js
//    dalam router /:id

const templateData = { text }

if (side == 'question') {
    templateData.hint = hint
}

Setelah itu, kita ingin menambahkan link, untuk dapat memanggil halaman soal, dan jawaban back-and-forth.

Sebelumnya, beberapa tentang Pug

// Pug
h1 Hi #{data}!
h1= `Hi ${data}!`

// HTML
<h1>Hi teman!</h1>
<h1>Hi teman!</h1>

// Pug
h1(title='Hi ' + data + '!') text
h1(title=`Hi ${data}!`) text

// HTML
<h1 title="Hi teman!">text</h1>
<h1 title="Hi teman!">text</h1>

// card.pug

...
    a(href=`${id}?side=${sideToShow}`)= sideToShowDisplay


// cards.js
//    dalam router.get('/:id/', ..)

    if (side == 'soal') {
        templateData.hint = hint
        templateData.sideToShow = 'jawaban'
        templateData.sideToShowDisplay = 'Jawaban'
    } else if (side == 'jawaban') {
        templateData.sideToShow = 'soal'
        templateData.sideToShowDisplay = 'soal'
    }