Node js series kali ini tentang membuat aplikasi web dengan bantuan template engine yaitu handlebars.
Dengan sebuah template engine, aplikasi kita akan menjadi lebih jelas perbedaan controller model dan view nya serta lebih konsisten pembagiannya.
Dalam contoh project kali ini kita akan pakai windows sebagai operating systemnya.
Yang dibutuhkan adalah:
- Komputer yang sudah terinstal node dan npm. Cara cek nya, buka command prompt dan ketik node -v dan npm -v. jika keduanya menampilkan versi yang sudah terinstall, maka berarti di komputer tersebut sudah terinstall node dan npm. Selanjutnya kita siap untuk membuat projectnya. udah, ini aja intinya
Package yang dipakai
- express
- express-handlebars
Coding part:
- Buat directory projectnya.
- Masuk ke directory project.
- Buka command prompt dan masuk ke directory project.
- tulis npm init, untuk menginisiasi project dan membuat file package.json, file yang berisi preperties dari project termasuk catatan dependencies.
- Install express dengan menulis pada command promp
> npm install express --save
- Install express-handlebars dengan menulis pada command prompt
> npm install express-handlebars --save
- Buat file server.js. File ini sebagai file utama untuk menjalankan aplikasi webnya. Kalau di html atau php ini seperti index.html atau index.php nya. Tapi nama untuk node js ini bebas, cuma biasanya server.js atau app.js.
const path = require('path') const express = require('express') const hbs = require('express-handlebars') const app = express() // set port app.set('port', (process.env.PORT || 2000)) // view engine setup app.engine('hbs', hbs({ extname: 'hbs', defaultLayout: 'layout', layoutsDir: path.join(__dirname, 'views') })) app.set('views', path.join(__dirname, 'views')) app.set('view engine', 'hbs') //static file app.use(express.static('static')) const routes = require('./routes/routes.js')(app) app.listen(app.get('port'), ()=>{ console.log('server running at port 2000') }) - Buat directory routes
- Masuk ke directory routes dan buat file routes.js. File routes.js ini untuk menyimpan settingan routing. Routing ini untuk mengarahkan ketika pengunjung website mengetikkan nama alamat, maka sistemnya harus ngapain, dan memberikan respon apa yang harus ditampilkan ke pengunjung.
const data = require('../models/data.json') const pages = app=>{ // handle view engine const handleGetHBS = (req,res)=>{ res.render('index', { items : data }) } const handleGetRoot = (req,res)=>{ res.send('hello world') } //routes app.get('/', handleGetRoot) app.get('/hbs', handleGetHBS) } module.exports = pagesPada baris nomer satu diatas, itu memanggil file yang ada di directory models. File ini adalah file json sebagai penggambaran data dari database, atau dalam contoh project ini sebagai pengganti database.
- Buat directory views untuk menampung file template handlebars.
- Dalam directory views, buat file layout.hbs yang berisi:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{ title }}</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> {{{ body }}} </body> </html> - Dalam directory views, buat file index.hbs yang berisi:
{{# each items}} <h1>{{title}}</h1> <p>{{body}}</p> {{/each}} - Jalankan applikasi dengan mengetik perintah di command prompt
> node server.js
- Buka browser dan ketik pada address bar http://localhost:2000/hbs
disini kita akan melihat hasil dari applikasi node js kita menggunakan template engine handlebars.
Source code project ini bisa dibuka di account github saya: