Node.js semakin besar dan semakin populer saat ini.

Pertanyaannya adalah:

Bagaimana belajar node js dari awal?

Nah, itulah yang akan Anda pelajari dalam tutorial ini.

Dalam postingan ini saya akan sharing kepada Anda bagaimana belajar node js dari awal.

Jadi, tidak perlu khawatir apakah Anda sudah atau belum kenal dengan node js sebelumnya.

Mari kita mulai.

 

Apa Itu Node JS?

Node.js adalah runtime Javascript yang dibangun di mesin Javascript V8 Chrome untuk memudahkan pembuatan aplikasi jaringan cepat dan skalabel.

Seperti yang di jelaskan pada situs resminya nodejs.org:

Node js bukanlah bahasa pemrograman, melainkan runtime environment untuk mengeksekusi kode javascript di sisi server (server-side).

Sehingga memungkinkan kita untuk mengembangkan aplikasi web menggunakan bahasa pemrograman javascript di sisi server (server-side).

Layaknya PHP, Phyton, Ruby dan lainnya.

Tidak hanya itu, node.js juga include dengan berbagai modul library javascript yang dapat digunakan secara instan.

Seperti http modul, file system, dan lain sebagainya.

Jadi, dapat disimpulkan bahwa node.js adalah runtime environment + library javascript.

 

Kenapa Menggunakan Node.JS?

Node.js menggunakan model I / O non-blocking yang bersifat event-driven yang membuatnya ringan dan efisien, sempurna untuk aplikasi real-time data-intensif yang berjalan di perangkat terdistribusi.

Itulah alasannya kenapa menggunakan node js.

Untuk lebih jelasnya, berikut penjabarannya:

#1. Asynchronous and Event Driven 

Semua pustaka Node.js API adalah asynchronous, artinya, non-blocking. Ini pada dasarnya berarti server berbasis Node.js tidak pernah menunggu API untuk mengembalikan data. 

Server pindah ke API berikutnya setelah memanggilnya dan mekanisme pemberitahuan event Node.js membantu server untuk mendapatkan respons dari panggilan API sebelumnya.

#2. Sangat Cepat 

Dibangun di Google Chrome V8 JavaScript Engine, pustaka Node.js sangat cepat dalam eksekusi kode.

#3. Single Threaded tetapi Highly Scalable 

Node.js menggunakan model bergulir tunggal dengan perulangan peristiwa. 

Mekanisme event membantu server untuk merespons dengan cara non-blocking dan menjadikan server sangat skalabel dibandingkan dengan server tradisional yang membuat untaian terbatas untuk menangani permintaan. 

Node.js menggunakan program bergulir tunggal dan program yang sama dapat memberikan layanan ke jumlah permintaan yang jauh lebih besar daripada server tradisional seperti Apache HTTP Server.

#4. Tidak Ada Buffer 

Aplikasi Node.js tidak pernah menyangga data apa pun. Aplikasi ini hanya menghasilkan data dalam potongan.

#5. Lisensi 

Node.js dirilis di bawah lisensi MIT.

 

Instalasi Node JS.

Untuk menginstall node js silahkan ikuti step by step berikut:

#1. Download node js di website resminya nodejs.org

#2. Kemudian install seperti menginstall aplikasi pada umumnya.

#3. Untuk melihat apakah node js terinstall di computer Anda, silahkan buka terminal atau Command Line / Command Prompt.

Kemudian ketikan perintah berikut:

Maka akan terlihat hasilnya sebagai berikut:

Itu artinya saya telah menginstal node js v8.11.3.

Setelah itu cek juga npm (node package manager) dengan mengetikan perintah berikut:

Maka akan terlihat hasilnya sebagai berikut:

Itu artinya saya telah menginstal npm js v5.6.0.

Selesai.

 

Basic Webserver Node.js

Untuk membuat server pada node.js, dapat menggunakan module http.

Kenapa kita perlu membuat server?

Bagaimana cara kerjanya?

Mari kita mulai.

#1. Pertama, buat sebuah file javascript dengan nama app.js.

Kemudian buka dengan text editor.

Disini saya menggunakan ATOM sebagai text editor.

Seperti gambar berikut:

#2. Kemudian ketikan kode berikut:

const http = require('http');

http.createServer(function(req,res){
  res.writeHead(200,{
    "Content-Type" : "text/html"
  });
  res.end("Hello World");
}).listen(8000);

console.log('Server is running at port 8000');

#3. Jalankan app.js dengan perintah:

pada terminal atau command line seperti berikut:

#4. Buka browser Anda, kemudian ketikan URL berikut:

Maka akan terlihat hasilnya seperti berikut:

 

Node js dan Express Framework

Express adalah framework aplikasi web Node.js minimal dan fleksibel yang menyediakan serangkaian fitur canggih untuk aplikasi web dan seluler.

Express memiliki segudang metode utilitas HTTP dan middleware yang Anda inginkan, membuat API yang kuat cepat dan mudah.

Mungkin terdengar rumit, tapi sebenarnya tidak.

 

Instalasi Express

Sebelum menginstal express, sebaiknya kita membuat package.json pada project kita.

Untuk membuat package.json cukup dengan mengetikan perintah berikut pada terminal nodejs.

Perintah diatas akan membuat file package.json ke project Anda secara otomatis.

Selanjutnya Anda dapat menginstall express.

Untuk menginstal express cukup dengan mengetikkan perintah berikut pada terminal node js.

Perintah diatas akan menginstall express secara otomatis kedalam project Anda.

Jika instalasi selesai, maka Anda akan mendapati folder bernama node_modules pada project Anda seperti gambar berikut:

 

Basic Routing Express

Express memberikan kemudahan dalam mendefinisikan routes pada aplikasi berbasis node.js.

Contoh:

Saya ingin punya dua route yaitu home dan about.

Dimana route home akan menampilkan text “Welcome to Express” dan route about akan menampilkan text “This is about page”.

Alright, let’s get start it.

#1. Buka file app.js yang telah dibuat sebelumnya, kemudian ubah menjadi seperti berikut:

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

//route untuk halaman home
app.get('/',(req, res) => {
  res.send('Welcome To Express');
});

//route untuk halaman about
app.get('/about',(req, res) => {
  res.send('This is about page');
});

app.listen(8000, () => {
  console.log('Server is running at port 8000');
});

#2. Jalankan app.js dengan mengetikan perintah berikut pada terminal:

Seperti gambar berikut:

#3. Buka browser Anda kemudian ketikan URL berikut:

Maka, akan terlihat outputnya sebagai berikut:

Kemudian, untuk menampilkan halaman about ketikan URL berikut:

Maka, akan terlihat outputnya sebagai berikut:

Sederhana bukan?.

 

Serving Static Files

Express menyediakan middleware express.static untuk melayani file statis, seperti gambar, CSS, JavaScript, dan lain-lain.

Anda hanya perlu meneruskan nama direktori tempat Anda menyimpan file statis Anda ke middleware express.static untuk melayani file secara langsung.

Sebagai contoh, saya ingin melayani file bootstrap.

Bootstrap terdiri dari file CSS dan Javascript.

Disini, Saya telah mendownload bootstrap pada situs resminya getbootstrap.com.

Jika Anda belum memiliki bootstrap, silahkan download terlebih dahulu.

Kemudian, saya membuat sebuah directory yang saya beri nama “public”.

Didalam folder public, saya copy-kan file bootstrap yang telah di download sebelumnya.

Perhatikan gambar berikut untuk lebih jelasnya:

Kemudian, kita perlu menginstall template engine.

Express mendukung banyak template engine.

Pada kasus kali ini, saya akan menggunakan template engine handlebars.js

Untuk menginstal handlebars, cukup dengan menjalankan perintah berikut pada terminal nodejs.

Perintah diatas akan menginstal view engine handlebars secara instan pada project Anda.

Selanjutnya, buat folder views pada project directory Anda. Kemudian, buat sebuah file dengan nama index.hbs.

Perhatikan gambar berikut untuk lebih jelasnya:

Setelah itu, ikuti step by step berikut:

#1. Pertama, buka file index.hbs dengan texteditor kemudian ketikan kode html berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <!--Load bootstrap.css file-->
    <link rel="stylesheet" href="css/bootstrap.css"/>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="jumbotron">
            <h1 class="display-4">Hello, world!</h1>
            <p class="lead">This is a simple site, a simple from mfikri.com.</p>
            <hr class="my-4">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
          </div>
        </div>
      </div>
    </div>

    <!--Load bootstrap.js file-->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

#2. Kedua, buka file app.js, kemudian ubah menjadi seperti berikut:

//use path module
const path = require('path');
//use express module
const express = require('express');
//use hbs view engine
const hbs = require('hbs');
const app = express();

//set dynamic views file
app.set('views',path.join(__dirname,'views'));
//set view engine
app.set('view engine', 'hbs');
//set public folder as static folder for static file
app.use(express.static('public'));
//route untuk halaman home
app.get('/',(req, res) => {
  //render file index.hbs
  res.render('index');
});

//route untuk halaman about
app.get('/about',(req, res) => {
  res.send('This is about page');
});

app.listen(8000, () => {
  console.log('Server is running at port 8000');
});

#3. Jalankan app.js dengan mengetikan perintah berikut pada terminal node.js:

Seperti gambar berikut:

Kemudian, buka browser Anda kemudian ketikan URL berikut:

Maka, akan terlihat outputnya sebagai berikut:

Sederhana bukan?

 

Mengirim data ke view

Pada segmen ini, Anda akan belajar bagaimana mengirim data ke view.

Tidak hanya itu, anda juga akan belajar bagaimana mengambil data dari URI parameter dan mengirimnya ke view.

Mari kita mulai.

#1. Pertama, buka file app.js, kemudian ubah menjadi seperti berikut:

//use path module
const path = require('path');
//use express module
const express = require('express');
//use hbs view engine
const hbs = require('hbs');
const app = express();

//set views file
app.set('views',path.join(__dirname,'views'));
//set view engine
app.set('view engine', 'hbs');
//set public folder as static folder for static file
app.use(express.static('public'));
//route untuk halaman home
app.get('/',(req, res) => {
  //render file index.hbs
  res.render('index',{
    name : "M Fikri"
  });
});

//route untuk halaman home dengan parameter name
app.get('/:name',(req, res) => {
  //render file index.hbs
  res.render('index',{
    name : req.params.name
  });
});

app.listen(8000, () => {
  console.log('Server is running at port 8000');
});

#2. Buka file index.hbs, kemudian ubah menjadi seperti berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello {{ name }}</title>
    <!--Load bootstrap.css file-->
    <link rel="stylesheet" href="css/bootstrap.css"/>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="jumbotron">
            <h1 class="display-4">Hello, {{ name }}</h1>
            <p class="lead">This is a simple site, a simple from mfikri.com.</p>
            <hr class="my-4">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
          </div>
        </div>
      </div>
    </div>

    <!--Load bootstrap.js file-->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

#3. Jalankan app.js dengan mengetikan perintah berikut pada terminal node.js:

Seperti gambar berikut:

Kemudian, buka browser Anda kemudian ketikan URL berikut:

Maka, akan terlihat outputnya sebagai berikut:

Jika anda akses dengan url berikut:

maka akan terlihat outputnya seperti berikut:

 

Menghandle POST request Body.

Pada segmen sebelumnya Anda telah belajar bagaimana menghandle request melalui URI parameter.

Pada segmen kali ini, anda akan belajar bagaimana menghandle request melalui body.

Untuk menghandle POST request body, kita membutuhkan middleware body-parser.

Untuk menginstal body-parser, cukup dengan mengetikan perintah berikut pada terminal node.js:

Perintah diatas akan menginstall middleware body-parser secara instan ke project Anda.

Bagaimana menghandle POST request body?

Mari kita mulai.

#1. Pertama, buat sebuah view dengan nama form.hbs seperti gambar berikut:

#2. Buka file form.hbs, kemudian ketikan kode berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Add New</title>
    <!--Load bootstrap.css file-->
    <link rel="stylesheet" href="css/bootstrap.css"/>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2>Add New User</h2>
          <form action="/post" method="post">
            <div class="form-row">
              <div class="col">
                <input type="text" name="textname" class="form-control" placeholder="Name">
              </div>
              <div class="col">
                <button type="submit" class="btn btn-success">Submit</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!--Load bootstrap.js file-->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

#3. Buka file app.js, kemudian ubah menjadi seperti berikut:

//use path module
const path = require('path');
//use express module
const express = require('express');
//use hbs view engine
const hbs = require('hbs');
//use bodyParser middleware
const bodyParser = require('body-parser');
const app = express();

//set views file
app.set('views',path.join(__dirname,'views'));
//set view engine
app.set('view engine', 'hbs');

app.use(bodyParser.urlencoded({ extended: false }));
//set public folder as static folder for static file
app.use(express.static('public'));
//route untuk halaman home
app.get('/',(req, res) => {
  //render file index.hbs
  res.render('index',{
    name : "M Fikri"
  });
});

//route untuk manampilkan form
app.get('/post',(req, res) => {
  //render file form.hbs
  res.render('form');
});

//route untuk submit form
app.post('/post',(req, res) => {
  //render file form.hbs
  res.render('index',{
    //ambil value dari textname
    name : req.body.textname
  });
});

app.listen(8000, () => {
  console.log('Server is running at port 8000');
});

#4. Jalankan app.js dengan mengetikan perintah berikut pada terminal node.js:

Seperti gambar berikut:

Kemudian, buka browser Anda kemudian ketikan URL berikut:

Maka, akan terlihat outputnya sebagai berikut:

Masukan nama pada textbox, kemudian submit.

Maka akan terlihat outputnya seperti berikut:

Related: Tutorial Lengkap Express JS Untuk Pemula

Kesimpulan:

Pembahasan kali ini adalah tentang “belajar node js dari awal”.

Node.js adalah runtime Javascript yang dibangun di mesin Javascript V8 Chrome untuk memudahkan pembuatan aplikasi jaringan cepat dan skalabel.

Pada tutorial kali ini Anda telah belajar mulai dari: apa itu node.js, kenapa menggunakan node.js, instalasi node.js, basic webserver pada node.js, express framework, basic routing express, serving static files, mengirim data ke view, dan menghandle POST request body.

Jadi, tunggu apa lagi. Let’s coding!