NodeJS Lesson-3 (Express)

 Author : hadinug, 11 May, 2014, Komentar

lesson -3 expresjs


Ada beberapa API yang dibuat di nodejs untuk menangani http response dan request, salah satunya adalah Expressjs yang pada tutorial kali ini akan kita bahas. Sebelumnya pada tutorial yang ke-2, kami telah menuliskan tentang penggunaan api HTTP bawaan dari nodejs itu sendiri.



Apa itu expressjs

Sebelum kita masuk lebih jauh tentang penggunaan librari expressjs, akan lebih baik jika kita tau, apa itu expressjs dan apa yang akan kita pelajari. 


Expressjs merupakan framework node.js yang membantu anda dalam membuat aplikasi web yang minimal dan fleksibel, menyediakan berbagai macam fitur yang sangat bagus untuk membangun web halaman tunggal atau multi-halaman, dan aplikasi web hybrid.


Kami menyarankan anda untuk mengunjungi website resmi expressjs di http://expressjs.com. Disitu anda bisa mempelajari banyak hal tentang expressjs. 


What do you get?

Sebelumnya kita sudah mengenal sedikti tentang expressjs, nah disini anda akan tau, apa saja yang nantinya akan anda dapatkan setelah mempelajari expressjs dihalaman ini?

  • Anda akan diajak untuk membuat sebuah aplikasi web server http sederhana
  • Anda akan mempelajari membuat aplikasi web static dengan expressjs
  • Penanganan Halaman 404 (Page Not Found)
  • Anda akan mempelajari bagaimana menangani request dan response 


Persiapan

Karena expressjs merupakan sebuah paket API nodejs yang terpisah diawal kita harus mengintal paket "manager nodejs" untuk expressjs dengan mengetikan pada console "npm install express" , namun sebelum memulai pastikan komputer anda terhubung dengan internet. 


Aplikasi HTTP Sederhana

Kembali saya ingatkan kepada anda untuk mengunjungi halaman website expressjs dan mulai membaca sedikit referensi api expressjs dihalaman tersebut.


Nah pada state ini kita akan coba membuat sebuah aplikasi web http sederhana dengan expressjs. Buat folder express/ pada komputer anda D:/nodejs/express. Kemudian buat file sample.js dan isikan kode berikut:


var express = require('express');

var app = express();

app.get('/',function(req,res){
    res.send("Hello World !"); 
});

app.listen(1337);


Atau anda bisa membuat sedikti lebih baik dengan menggambil nilai port dan host dari file config.json 


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

var config = JSON.parse(fs.readFileSync(__dirname+'/config.json'));
var port = config.port;
var host = config.host;

var app = express();

app.get('/',function(req,res){
    res.send("Hello World !"); 
});

app.listen(port,host,function(){
    console.log("Listen..... in "+host+":"+port);
});


Note: seperti pada tutorial sebelumnya, bahwa tiap-tiap tutorial nodejs disini akan di kelompokan dalam folder sehingga memudahkan kita untuk memanage hasil pemebelajaran nodejs. Dalam hal ini, tutorial kali ini akan dibuat dalam folder express/ dan didalam folder itu nantinya akan kita isikan file js.


Jalankan kode diatas dengan mengetikan perintah node express/sample.js dan lihat juga hasilnya dibrowser dengan mengunjungi halaman 127.0.0.1:1337


Web Static

Hampir sama dengan tutorial sebelumnya yang menggunakan API http nodejs, nah pada pembuatan aplikasi web static dengan http, kita mengakses file pada folder tertentu, dimana sebelumnya folder tersebut kita definisikan dalam programa. Sama seperti http, expressjs juga menggunakan konsep atau logik yang sama. 


Mari kita mulai dengan membuat file staticServer.js pada folder express/ dan isikan kode berikut:


var express = require('express');
var fs = require('fs');
// get port and host from file config.json
var config = JSON.parse(fs.readFileSync(__dirname+'/config.json'));
var port = config.port;
var host = config.host;

var app = express(); 
// default request
app.get('/',function(req,res){
    res.send("Hello World !"); 
});
// static directory for access
app.use(express.static(__dirname+'/public')); 
// run app in browser
app.listen(port,host,function(){
    console.log("Listen..... in "+host+":"+port);
});



Penjelasan kode

Sebelum nya pada folder express/ kami telah membuat folder public/ yang berisi dua buah file, hello.html dan word.html, yang nanti nya akan kita akses dengan mengetikan url pada browser 127.0.0.1:1337/hello.html dan  127.0.0.1:1337/world.html. 

Anda bisa membuat lebih dari satu folder static yang nantinya isi dari folder tersebut bisa diakses pada browser dengan mengirimkan request sebuah halaman. Misal, anda ingin menambahkan folder  static lain,ex: app/ dalam folder express/ dan menambahkan file html didalam nya. Untuk itu anda harus menambahkan kode 


app.use(express.static(__dirname+'/app'));


Jalankan kode diatas dengan menulisan perintah pada console node express/staticServer.js. Kemudian lihat hasilnya di browser


Penanganan Error 404

Jika pada staticServer.js, ketika anda mengetikan sebuah halaman diluar http://127.0.0.1:1337http://127.0.0.1:1337/hello.html dan http://127.0.0.1:1337/world.html, maka alamat url lah, yang nantinya akan ditampilkan pada halaman website ex:get:/your-request.


Nah untuk menagani halaman not found atau 404, pada kode file staticServer.js tambahkan sebuah fungsi untuk penanganan halaman 404


// handling response 404 
app.use(function(req,res){
   res.send(404,'Sorry page not found'); 
});


Sehingga ketika file atau halaman tidak ditemukan, maka yang tampil pada halaman web adalah pesan "Sorry page not found".


Penanganan Request dan Response

Pada state kali ini kita akan membuat sebuah palikias router dengan expressjs, dimana data yang ditampilkan pada halaman web disesuaikan dengan permintaan pada url website.

Router adalah sebuah class dari middleware dan route. Router dapat dianggap sebagai "mini" aplikasi hanya mampu melakukan middleware dan routing. Setiap aplikasi express memiliki router app builtin. 

Untuk memuat router baru dengan gunakan "express.Router ()"

helloServer.js

var express = require('express');

var app = express();
var router = express.Router(); // load class router

// http://127.0.0.1:3000/hello/:text
router.get('/hello/:text', function(req, res) {
    res.send("Hello "+req.params.text);
    next();
});

app.use('/', router);
app.listen(3000);
Penjelasan kode
  • Aplikasi helloServer.js menggunakan class router, yang memungkinkan kita untuk membuat sebuah aplikasi web route denga mudah. 
  • Class router nantinya akan dicombine dengan library express dengan menggunakan fungsi use "app.use('path',router);
  • req.params.text, digunakan untuk mendapatkan nilai parameter url yang dikirimkan

Jalankan kode diatas dengan menuliskan perintah node express/helloServer.js dan lihat hasilnya pada browser dengan mengetikan alamat http://127.0.0.1:3000/hello/your-world. Kemudian ganti parameter url your-world dengan kata-kata yang ingin anda tampilkan dihalaman web. 

Nah bagaimana kalau kita ingin membuat sebuah aplikasi web untuk mendapatkan data twitter pengguna atau user?. Nah dibawah ini kami tuliskan sebuah contoh aplikasi web untuk mendapatkan alamat twitter pengguna

twitterUser.js

var express = require('express');

var app = express();
var router = express.Router(); 

var users = {
    "1": {
        "name": "hadinug[dot]net",
        "twitter": "hadinug1"
    },
    "2": {
        "name": "codeanalytic",
        "twitter": "codeanalytic"
    }
};

// http://127.0.0.1:3000/user/:id
router.get('/user/:id', function(req, res) {
    var user = users[req.params.id];
    if(user){
        res.send("<a href='http://twitter.com/"+user.twitter+"'>Follow "+user.name+" in twitter</a>");
    }else{
        res.send("Sorry, user not found!");
    }
    next();
});
app.use('/', router);
app.listen(3000);

Jalankan kode js diatas dengan mengetikan perintah pada konsole "node express/twitterUser.js" dan lihat hasilnya di browser dengan mengetikan alamat http://127.0.0.1:3000/user/id. Ganti parameter id dengan data yang ada, dalam kasus ini kita hanya punya 2 user dengan id (1 dan 2).

 
Bagikan halaman ke sosial media
 
Tags :   nodejs    expressjs       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda