Website dengan Express -->
Home ›

Website dengan Express

Sorayakit
20 January 2017
Komentar

Baca Juga

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 ...”

jalankan http://127.0.0.1:3000/hello pada url browser, jika route yang kita buat berhasil  akan tampil hello expressJs
 

Sobat yang mau download script lengkap bisa di:
https://github.com/myusuf1982/node-express