Dasar – dasar Node.js

Sebelum kita membahas dasar – dasar node.js kita akan melihat tiga bagian penting dalam node.js terlebih dahulu:

  1. Require Module
    Perintah require digunakan untuk memuat modul node.js.

    var http = require("http");
  2. Create Server
    Koders harus membuat server yang akan mengolah permintaan klien yang mirip dengan Apache HTTP Server.

    http.createServer(function (request, response) {
       response.writeHead(200, {'Content-Type': 'text/plain'});
       response.end('Hello World\n');  
    }).listen(8081);
    
    console.log('Server running at http://127.0.0.1:8081/');
    
  3. Request dan Response
    Server yang dibuat pada langkah kedua akan membaca permintaan HTTP yang dibuat oleh klien. Dapat berupa browser atau konsol dan mengembalikan respons.

Oke, sekarang saatnya kita belajar tentang dasar – dasar node.js

Routing dan Request

Routing kita gunakan untuk menentukan url dalam aplikasi web, sementara request merupakan data yang kita kirimkan ke server seperti url dari routing, user input, user file etc.

  1. const http = require('http');
  2. const fs = require('fs');
  3.  
  4. const server = http.createServer((req, res) => {
  5.   const url = req.url;
  6.   const method = req.method;
  7.   if (url === '/') {
  8.     res.write('<html>');
  9.     res.write('<head><title>Enter Message</title><head>');
  10.     res.write('<body><form action="/message" method="POST"><input type="text" name="message"><button type="submit">Send</button></form></body>');
  11.     res.write('</html>');
  12.     return res.end();
  13.   }
  14.   if (url === '/message' && method === 'POST') {
  15.     fs.writeFileSync('message.txt', 'DUMMY');
  16.     res.statusCode = 302;
  17.     res.setHeader('Location', '/');
  18.     return res.end();
  19.   }
  20.   res.setHeader('Content-Type', 'text/html');
  21.   res.write('<html>');
  22.   res.write('<head><title>My First Page</title><head>');
  23.   res.write('<body><h1>Hello from my Node.js Server!</h1></body>');
  24.   res.write('</html>');
  25.   res.end();
  26. });
  27.  
  28. server.listen(3000);

Pada contoh diatas kita memiliki 2 route, yaitu “/” yang akan kita gunakan untuk menampilkan form input dan route message yang kita gunakan untuk membuat file message dengan data DUMMY yang masih kita hardcode.

Sementara itu, jika kita menulis url diluar route yang kita buat, browser akan mengeluarkan output berupa response Hello from my Node.js Server!

Parsing Request Body

Pada kode sebelumnya route message memberikan value DUMMY pada file yang dibuat, sekarang kita akan membuat value nya menjadi dinamis sesuai yang Koders input pada form.

  1. const http = require('http');
  2. const fs = require('fs');
  3.  
  4. const server = http.createServer((req, res) => {
  5.   const url = req.url;
  6.   const method = req.method;
  7.   if (url === '/') {
  8.     res.write('<html>');
  9.     res.write('<head><title>Enter Message</title><head>');
  10.     res.write('<body><form action="/message" method="POST"><input type="text" name="message"><button type="submit">Send</button></form></body>');
  11.     res.write('</html>');
  12.     return res.end();
  13.   }
  14.   if (url === '/message' && method === 'POST') {
  15.     const body = [];
  16.     req.on('data', (chunk) => {
  17.       console.log(chunk);
  18.       body.push(chunk);
  19.     });
  20.     req.on('end', () => {
  21.       const parsedBody = Buffer.concat(body).toString();
  22.       const message = parsedBody.split('=')[1];
  23.       fs.writeFileSync('message.txt', message);
  24.     });
  25.     res.statusCode = 302;
  26.     res.setHeader('Location', '/');
  27.     return res.end();
  28.   }
  29.   res.setHeader('Content-Type', 'text/html');
  30.   res.write('<html>');
  31.   res.write('<head><title>My First Page</title><head>');
  32.   res.write('<body><h1>Hello from my Node.js Server!</h1></body>');
  33.   res.write('</html>');
  34.   res.end();
  35. });
  36.  
  37. server.listen(3000);

Perhatikan perubahan pada route message diatas, pertama kita membuat array body untuk menampung user input. Jika route message mendeteksi ada data, data itu akan ditambahkan ke array body dengan perintah body.push(). Lalu disaat request sudah selesai route message akan memuat seluruh array dalam body kedalam file.

Blocking dan Non-Blocking

Pada JavaScript Koders harus mengenal istilah synchronous dan asynchronous.

Pada proses synchronous kode dijalankan berurutan dari atas kebawah, kode tidak akan dijalankan jika kode pada baris sebelumnya belum selesai diproses.

Berbeda dengan asynchronous dimana setiap proses yang berbeda berjalan bersamaan.

Pada contoh sebelumnya kita menggunakan fs.writeFileSync() dimana proses pada baris setelahnya dijalankan bersamaan saat proses pembuatan file berlangsung.

Jika Koders menggunakan fs.writeFile() saja, browser akan menunggu sampai proses pembuatan file selesai, baru menjalankan funsi redirect. Bayangkan jika data yang kita input pada form sangat panjang, ini juga akan memakan waktu yang sangat lama pada proses pembuatan file dan membuat waktu tunggu di browser juga semakin lama.

Menggunakan node modules system

Contoh kode diatas jika kita buat dalam satu file terlihat sedikit berantakan.

Oleh karena itu kita akan membuat nya menjadi dua file yang berbeda.

  1. const http = require('http');
  2.  
  3. const routes = require('./routes');
  4.  
  5. console.log(routes.someText);
  6.  
  7. const server = http.createServer(routes.handler);
  8.  
  9. server.listen(3000);
  1. const fs = require('fs');
  2.  
  3. const requestHandler = (req, res) => {
  4.   const url = req.url;
  5.   const method = req.method;
  6.   if (url === '/') {
  7.     res.write('<html>');
  8.     res.write('<head><title>Enter Message</title><head>');
  9.     res.write(
  10.       '<body><form action="/message" method="POST"><input type="text" name="message"><button type="submit">Send</button></form></body>'
  11.     );
  12.     res.write('</html>');
  13.     return res.end();
  14.   }
  15.   if (url === '/message' && method === 'POST') {
  16.     const body = [];
  17.     req.on('data', chunk => {
  18.       console.log(chunk);
  19.       body.push(chunk);
  20.     });
  21.     return req.on('end', () => {
  22.       const parsedBody = Buffer.concat(body).toString();
  23.       const message = parsedBody.split('=')[1];
  24.       fs.writeFile('message.txt', message, err => {
  25.         res.statusCode = 302;
  26.         res.setHeader('Location', '/');
  27.         return res.end();
  28.       });
  29.     });
  30.   }
  31.   res.setHeader('Content-Type', 'text/html');
  32.   res.write('<html>');
  33.   res.write('<head><title>My First Page</title><head>');
  34.   res.write('<body><h1>Hello from my Node.js Server!</h1></body>');
  35.   res.write('</html>');
  36.   res.end();
  37. };
  38.  
  39. exports.handler = requestHandler;
  40. exports.someText = 'Some hard coded text';

dengan begitu, file routing kita sudah terpisah dengan file app sebagai file utama aplikasi.

Penjelasan

Dengan tutorial ini Koders sudah mempelajari cara membuat routing manual dengan node.js.

Begitu juga dengan mem-parsing request serta mengetahui sedikit tentang synchronous dan asynchronous.

Selanjutnya kita akan membuat aplikasi node.js menggunakan framework express.

Author

Started coding from 3rd junior high school, 3+ years of experience in Software development using any programming language.

Pin It