Tutorial Node js untuk pemula [Full Tutorial]

Tutorial Node js untuk pemula [Full Tutorial]

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

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

node js

#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:

node -v

Maka akan terlihat hasilnya sebagai berikut:

node-v

Itu artinya saya telah menginstal node js v8.11.3.

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

npm -v

Maka akan terlihat hasilnya sebagai berikut:

npm-v

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:

app-js

#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:

node app.js

pada terminal atau command line seperti berikut:

Server-listening

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

http://localhost:8000

Maka akan terlihat hasilnya seperti berikut:

hello-world

 

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.

npm init

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.

npm install express --save

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:

project-stucture

 

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:

node app.js

Seperti gambar berikut:

server-listening

#3. Buka browser Anda kemudian ketikan URL berikut:

http://localhost:8000/

Maka, akan terlihat outputnya sebagai berikut:

welcome-to-express

Kemudian, untuk menampilkan halaman about ketikan URL berikut:

http://localhost:8000/about

Maka, akan terlihat outputnya sebagai berikut:

About

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:

public-folder

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.

npm install hbs --save

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:

view-folder

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:

node app.js

Seperti gambar berikut:

server-listening

Kemudian, buka browser Anda kemudian ketikan URL berikut:

http://localhost:8000/

Maka, akan terlihat outputnya sebagai berikut:

hello-world

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:

node app.js

Seperti gambar berikut:

server-listening

Kemudian, buka browser Anda kemudian ketikan URL berikut:

http://localhost:8000/

Maka, akan terlihat outputnya sebagai berikut:

hello-mfikri

Jika anda akses dengan url berikut:

http://localhost:8000/From Express Js

maka akan terlihat outputnya seperti berikut:

hello-express

 

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:

npm install body-parser --save

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:

form-hbs

#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:

node app.js

Seperti gambar berikut:

server-listening

Kemudian, buka browser Anda kemudian ketikan URL berikut:

http://localhost:8000/post

Maka, akan terlihat outputnya sebagai berikut:

form-add-new

Masukan nama pada textbox, kemudian submit.

Add-new-user

Maka akan terlihat outputnya seperti berikut:

output-post-body

 

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!

Share:



Komentar (4)

Zeldianto Eka Putra, 28 August 2018 03:38 - Reply

Keren bg..Walaupun pusing karna gak ngerti, wkwkwk.. Oh yo bg, fasilitas login dihilangkan yo dari web abg?

M Fikri, 28 August 2018 07:08 - Reply

Yoi Zel.

fikar, 07 September 2018 11:36 - Reply

ini ga ada ebook nya mas?

Hasan, 09 September 2018 12:03 - Reply

Di tunggu tutorial selanjutnya bang ! Mantap !

Leave a Comment