Website dengan Express

Sebelum kita kita membahas tentang website express kita mungkin perlu tau apa itu Express?. Express bukan kereta tapi platform yang dibangun khusus untuk developer web yang ingin mengembangkan website dengan mudah, simpel dan cepat tapi tetap power full.

Platform express ini berdiri di aplikasi node js, jadi tentunya sobat mesti melakukan instalasi node js sebelum bisa menggunakannya.

Kenapa menggunakan express lebih mudah? karena ada metode yang lain bisa dipakai dalam pembuatan website, yaitu menggunakan http yang sebagian orang dianggap lebih sulit.

Express diambil dari sumbernya expressjs.com adalah sbb:

"Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications"

Kalau dibahasa Indonesiakan kurang lebih Express adalah kerangka web minimal dan fleksibel yang menyediakan satu set fitur untuk web dan aplikasi mobile, menurut info yang ExpressJS paling populer dikomunitas NodeJS

Website dengan express

Berikut adalah implementasi sederhana express yang sudah jadi, bagi sobat yang ingin mengenal ExpressJS, bisa mengikuti step dibawah ini.

Script yang dipakai:

var express = require('express');
var app = express();

app.set('view engine', 'jade');
app.set('views', './views');

/* GET home page. */
app.get('/', function(req, res) {
  res.send('<h1>Welcome to ExpressJS!</h1>');
});

/* GET hello route. */
app.get('/hello', function(req, res) {
  res.render('index', {title: 'Welcome', message: 'Hello ExpressJS!'});
});

app.listen(3000);
console.log('Running Express...') 

Script diatas akan berjalan setelah kita membuat folder dan download modul Express, jadi untuk membuat web dengan Express kita perlu melakukan instalasi modul Express. Berikut tampilan hirarki folder lengkap:

Yuuk mulai :)

1. Install Nodejs

Untuk memulai pembuatan website dengan express, butuh instalasi node js, nodejs sendiri wadah untuk express bisa bekerja. Instalasi Nodejs cukup mudah download Nodejs di https://nodejs.org pilih LTS dan pilih installer yang cocok dengan OS yang sobat pakai, ulasan disini penulis menggunakan windows 7.

Cara installasi node js diulas disini. Setelah berhasil melakukan proses instalasi buka aplikasi Node.js command prompt

2. Buat folder dan Instal Modul

Setelah instalasi node selesai buat folder dengan nama "cobaExpress", di folder ini nanti tempat kita instalasi modul express dan mesin template jade.

Untuk instalasi modul Exprsss kita menggunakan Node Package Manager (NPM) yang sudah satu paket saat kita instalasi node barusan.

Buat folder "cobaExpress" dengan perintah mkdir cobaExpress && cd cobaExpress jika berhasil, otomatis sobat berada di root folder cobaExpress. Perintah mkdir perintah untuk membuat folder melalui command prompt windows.

3. Buat file json
File json adalah file yang dengan extensi *.json yang berisi informasi (metadata) yang akan dibaca oleh NPM, isinya bisa dilihat dibawah ini seperti nama projek, nama modul yang akan di install, konfigurasi aplikasi atau versi nya. Ok kita langsung saja membuatnya dengan perintah npm init --yes, Perintah init berfungsi untuk membuat file package.json dan atribut --yes untuk mempercepat proses pembuatan file, dengan atribut --yes semua pertanyaan sistem akan dijawab "yes".

jika berhasil akan tampil file package di folder cobaExpress

4. Install express
Kemudian install modul express, buat dengan perintah npm install express -save, tambahan atribut -save dibelakang nama modul, fungsinya untuk mendaftarkan modul ke file package.json, jika berhasil tampilan seperti ini

5. Install modul jade
Modul Ini digunakan sebagai view engine yang bekerja dengan Express atau disebut template. Perintahnya npm install jade -save, jika berhasil tampilannya seperti ini

Jika instalasi kedua modul berhasil, kita bisa buka folder cobaExpress dan cek di file package terdapat dependency Express dan jade, ini hasil dari atribut -save. Mendaftarkan nama modul di package.json kelak dipakai saat kita melakukan hosting ke openshift atau heroku. Klik kanan file package klik edit untuk melihat

Jika folder utama sudah dibuat dan modul modul sudah berhasil diinstall, lanjut membuat script server, jika belum berhasil sobat bisa cek koneksi internet mungkin putus atau coba login sebagai administrator.. :)

6. Membuat file server

Sobat telah memiliki file package.json, folder cobaExpress dan modul modul yang dibutuhkan untuk membuat website dengan express.

Kita lanjut membuat script server.js kemudian simpan script di notepad dengan nama "server" jangan lupa exstensi *.js

Di Node.js command pompt ketik echo.>server.js, perintah echo ini membuat file server sekaligus extensi javascript

jika berhasil akan terlihat file server seperti berikut

7. Mengisi script file server
Buka file server, klik kanan file, klik edit

dan kopas script dibawah ini dengan notepad:

var express = require('express'); 
var app = express();

app.get('/', function(req, res){
res.send('<h1>Welcome to ExpressJS!</h1>');
});

app.listen (3000,"127.0.0.1");
console.log ( 'Running Ekspres ...');

8. Menjalankan file server
Setelah script lengkap, ketik perintah node server, Jika berhasil akan tampil pesan “Running Ekspress ...”

Buka browser sobat bisa firefox, ketik di url http://127.0.0.1:3000 enter, akan tampil pesan Wellcome ExpressJS! pada browser, yang menandakan kita telah berhasil membuat website dengan express.

9. Membuat route Express

Sekarang mari kita membuat route atau bisa juga disebut link yang akan menampilkan pesan hello expres, kita akan menambahkan script.

Untuk memulainya Stop dulu server di node yang saat ini sedang listening/runing. . , dengan menekan bersamaan keyboard ctrl + c

Buka file server dengan klik kanan lalu edit file, ketikkan script berikut diatas app.listen,

/* GET hello route. */
app.get('/hello', function(req, res) {
  res.render('index', {title: 'Welcome', message: 'Hello ExpressJS!'});
});

jadinya seperti ini :

var express = require('express');
var app = express();

app.set('view engine', 'jade');
app.set('views', './views');

/* GET home page. */
app.get('/', function(req, res) {
  res.send('<h1>Welcome to ExpressJS!</h1>');
});

/* GET hello route. */
app.get('/hello', function(req, res) {
  res.render('index', {title: 'Welcome', message: 'Hello ExpressJS!'});
});
app.listen(3000);
console.log('Running Express...');

10. Membuat folder Views

Folder views ada di dalam folder cobaExpress. folder views adalah folder yang akan dipakai template engine untuk merender file template.

Buka aplikasi node, buat folder views dengan perintah mkdir views && cd views, Buka folder cobaExpress akan tampak folder views

Buka folder views, lalu buat file baru, beri nama index.jade, , ketikan perintah echo.>index.jade

Jika berhasil akan tampil file index.jade di folder views

klik kanan filenya, ketik script dibawah ini:

html
  head
    title #{title}
  body
    #container
      p #{message} 

Cara kerja script index.jade ini menerima value/nilai dari file server, sehingga konten bisa bekerja lebih dinamis

12. Menjalankan server dengan Express
Kembali ke Node ketik cmd node server, seperti langkah sebelumnya. Jika berhasil akan tampil pesan “Running Ekspress ...”