Mencoba AdonisJS 4.0 : EdgeJS Template Engine
Tulisan ini lanjutan dari artikel sebelumnya (baca disini). Pada post sebelumnya, kita sudah membuat model dan route sehingga kita bisa load data dari database dan ditampilkan sebagai JSON. Pada tulisan ini saya akan menampilkan data menggunakan template engine edge.js. EdgeJS ini merupakan perubahan besar di versi 4.0 ini, AdonisJS sebelumnya menggunakan template engine nunjucks.
View Provider
Melanjutkan proyek sebelumnya, kita tambahkan ViewProvider pada file start/app.js sehingga menjadi seperti berikut ini
const providers = [
'@adonisjs/framework/providers/AppProvider',
'@adonisjs/lucid/providers/LucidProvider',
'@adonisjs/framework/providers/ViewProvider'
]
Generate Template
Untuk membuat View / Template, kita bisa menggunakan perintah adonis-cli, pada tulisan ini saya akan membuat beberapa template untuk menampilkan index post dan detail post.
adonis make:view master
adonis make:view partial/navbar
adonis make:view components/post
adonis make:view post/index
adonis make:view post/detail
Berkas yang dihasilkan
master.edgeadalah master template yang akan di extends halaman halaman lainyapartial/navbar.edgetemplate partial yang akan di include di halaman laincomponents/post.edgetemplate components yang dapat digunakan dan diubah kontenyapost/index.edgetemplate yang menampilkan semua postpost/detail.edgetemplate yang menampilkan detail post
Edit berkas berkas diatas seperti contoh di bawah ini
master.edge
partial/navbar.edge
components/post.edge
post/index.edge
post/detail.edge
Update Controller
Pada proyek sebelumnya, controller langsung melakukan return object hasil query dari model, nah sekarang kita akan menggunakan View / Template yang akan dirender menggunakan data hasil query dari model, dengan begitu lengkaplah sudah MVC nya 😜.
Kemudian buka kembali melalui browser, jika tidak ada kesalahan maka hasilnya kira kira seperti ini
Github
Hasil tutorial ini saya unggah di github