Sebelum memulai, kita sepakat dulu bahwa kita akan menggunakan Express Framework. Express framework adalah satu dari beberapa framework yang ada untuk membantu membangun aplikasi berbasis Node.js.
"Hello World"
Mari kita membuat folder projectnya, buka terminal/cmd ketikan perintah berikut
npm install -g express
untuk mendapatkan express terbaru. lalu command ini
express hello_world
kita akan melihat output ini diterminal
create : hello_world
create : hello_world/package.json
create : hello_world/app.js
create : hello_world/public
create : hello_world/public/javascripts
create : hello_world/routes
create : hello_world/routes/index.js
create : hello_world/routes/user.js
create : hello_world/public/stylesheets
create : hello_world/public/stylesheets/style.css
create : hello_world/views
create : hello_world/views/layout.jade
create : hello_world/views/index.jade
create : hello_world/public/images
install dependencies:
$ cd hello_world && npm install
Install dependncies nya seperti diatas
$ cd hello_world && npm install
Secara default, express akan menginstall jade , default templating nya. namun bnyak newbie yg kurang suka jade , saya pun sama :D, maka kita akan menginstall ejs saja.
Penampakan jade seperti ini
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
kalo di EJS kita bisa bikin html biasa, lebih mudah dibaca bagi yg lebih suka html murni :D
Install EJS
npm install ejs
Struktur Folder Aplikasi kita
Sekarang kita update code nya. buka app.js perhatikan baris berikut
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
Kita ubah menjadi
// all environments
app.set('port', process.env.PORT || 4300); //port nya bebas
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs'); //ganti jdi ejs
Sekarang buka folder routes , ubah index.js menjadi berikut
exports.index = function(req, res){
//title : akan dikirim ke views
res.render('index', { title: 'Hello World' });
};
Jika sudah, pergi ke folder views , kita bisa hapus index.jade dan users.jade . Lalu buat index.ejs , ketikan kode berikut
<%=(locals.title) ? title <span class="hljs-symbol">:<span class="hljs-string">''</span>%></span>
Hello world
Jika sudah, jalankan aplikasi , ketik diterminal
node app.js
lalu buka browser : http://localhost:4300/
Cheeerrssss