Dapatkan diskon 75% paket hosting + gratis domain + gratis SSL + extra diskon 5% dengan kupon: MFIKRI

Order Sekarang.!

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.

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!

 

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

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!

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!
Niagahoster Niagahoster

Komentar (24)

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 !

M Fikri, 28 February 2019 16:53 - Reply

Ini tutorial selanjutnya mas Hasan:
1. Membuat CRUD dengan Node.js, Bootstrap, dan MySQL

2. 5 Langkah Membuat RESTful API menggunakan Node.js dan MySQL

Fharhan Amrin, 16 February 2019 16:18 - Reply

update terus om yang keren" soal node.js dan lebih detail penjelasannya,makasih pak,tutorial terbaik node.js no error

M Fikri, 28 February 2019 17:00 - Reply

Siap mas Fharhan.

Ahmad Mardiana, 19 February 2019 16:49 - Reply

Bagus, cukup lengkap

M Fikri, 28 February 2019 17:01 - Reply

Terima kasih mas Ahmad.

Saefulloh Maslul, 01 March 2019 21:40 - Reply

Keren bang, ternyata pusing juga ya node js :D kalo react digabungin node js bisa kali ya bang?

M Fikri, 08 March 2019 09:22 - Reply

Bisa aja mas, node.js (backend), react (frontend)

Nuwas, 05 March 2019 08:08 - Reply

Mas tanya install node js complate. Environment variabel juga udah di set. Tapi ketika dijalankan node -v dari cmd not recognized kenapa ya mas? Terima kasih

M Fikri, 08 March 2019 09:02 - Reply

Saya belum pernah ketemu kasus seperti itu mas, biasanya saya udah install node.js langsung bisa npm -v.
kemungkinan npm-nya corrupt saat installasi mas.

Bayu Seno Arifyanto, 14 March 2019 15:51 - Reply

Terima kasih mas

M Fikri, 25 May 2019 21:37 - Reply

sama-sama mas

Gilang, 16 March 2019 00:29 - Reply

Bang mau tanya kalau nyimpen foldernya ini dimana?

M Fikri, 31 March 2019 10:07 - Reply

Mas Gilang, kalo untuk node.js bisa nyimpen dimana aja mas.
bolh di C, D, dan sebagainya.
Pada tutorial ini saya nyimpannya di D: ode js

Iqbal, 18 May 2019 03:56 - Reply

Kalau yg name : Mfikri itu bg bisa diganti sama data dari json gak?

M Fikri, 25 May 2019 21:37 - Reply

Bisa mas.

Firman, 08 July 2019 10:33 - Reply

Wah makasih banyak bang. kebetulan lagi belajar Node JS, dan mendapatkan ilmu yang lumayan di tempat abang. Sukses untuk Bang Fikri.aamiin

iskandar zulkarnain , 16 September 2020 13:33 - Reply

bang untuk templating ada tutorialnya kah?

ekotete, 02 October 2020 08:58 - Reply

terima kasih share tutorialnya mas .. pas sy butuh pencerahkan awal ttg node js ...

Rahma , 16 October 2020 15:58 - Reply

Bang mau tanya dong, sebelumnya terimakasih ilmunya membantu bgt???? tp masih gangerti instal package.json sama instal express itu di terminal nodejs atau terminal project ya?

Surya, 17 October 2020 13:54 - Reply

Mantap bang saya menikmati

Leave a Comment