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.edge adalah master template yang akan di extends halaman halaman lainya
  • partial/navbar.edge template partial yang akan di include di halaman lain
  • components/post.edge template components yang dapat digunakan dan diubah kontenya
  • post/index.edge template yang menampilkan semua post
  • post/detail.edge template 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
Template Engine EdgeJS

Github

Hasil tutorial ini saya unggah di github