node js – Alfan Nasrulloh

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 = pages
```
Pada 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:

https://github.com/alfannas/node-handlebars

Ini adalah postingan pertama tentang node js. Mudah mudahan nanti ada serial post tentang node js ini. Yang sudah kebayang adalah

Node js + Express : untuk node dan routing
Node js + Express + Handlebars : untuk node , routing dan memanfaatkan template engine
Node js + Express + MongoDB : untuk membangun API dengan node js
Node js + Heroku: Deploy node app di heroku

Baiklah, untuk node kali ini saya mau buat app sederhana untuk menampilkan hello world dari node dan ditampilkan di browser.

Instalasi

Yang diperlukan dalam app ini hanya node js saja dan tentu saja browser. Tidak ada module atau plugin tambahan. Cukup node js yang sudah terinstall di komputer.

Untuk instalasinya tinggal buka website node js dan silahkan download file instalasi yang sesuai dengan operating system.

cek instalasi node dengan mengetik perintah di command prompt atau cmd untuk melihat versi node yang terinstall:

node -v

Cek juga untuk npm nya, untuk memastikan npm nya juga terinstall. npm ini satu bundle dengan installasi node, jadi tidak perlu install terpisah.

npm -v

kalau berhasil muncul versinya, berarti node dan npm sudah terinstall dengan benar.

Let’s Code

Bagian coding ini sangat sederhana. Hanya ada satu file yang akan kita buat.

1. Buat folder project

buat folder atau directory project untuk menampung file project kita.

2. Buat file project

Buat file yang berisi code project node kita. Untuk kali ini kita buat dengan nama server.js dan simpan di dalam folder project kita. Tulis kode seperti dibawah ini.

const http = require('http');

http.createServer(function(req,res){
	res.writeHead(200,{
		'Content-Type' : 'text/html'
	})
	res.end('hello world')
}).listen(3000, '127.0.0.1');

console.log('node stating at http://127.0.0.1:3000');

3. Jalankan applikasi

Jalankan aplikasi dalam project kita dengan masuk ke command prompt atau cmd dengan command:

node server.js

tentu saja sebelum menjalankan periintah di atas, kita harus berada di direktori project kita.

4. Melihat hasil aplikasi

Setelah kita jalankan perintah diatas, maka kalau tidak ada error, dalam command prompt akan muncul text:

node stating at http://127.0.0.1:3000

sesuai dengan code yang kita tuliskan sebelumnya.

Setelah itu kita cek browser dengan membuka alamat

http://127.0.0.1:3000

dalam layar akan muncul text ‘hello world’

Repo Github: https://github.com/alfannas/node-hello

Tag: node js

Membuat Aplikasi Web Dengan Node js, Express dan Handlebars

Node js Hello World