Widget HTML Atas

Hosting Unlimited Indonesia

Tutorial Node JS Dasar untuk Pemula Lengkap

Tutorial Node JS Dasar untuk Pemula Lengkap - Apa itu Node JS? Node JS adalah Framework berbasis Javascript yang biasa digunakan untuk pengembangan website dan aplikasi dari segi backend, lebih mudah nya node js adalah javascript yang digunakan untuk server side

Mengapa Node JS? ada banyak sekali manfaat node js, tetapi saya rangkum jadi beberapa alasan kuat:

  1. Node JS Memiliki Peforma yang baik lebih bagus dari memakai PHP dan Python.
  2. Ringan dan banyak sekali packages yang tersedia untuk Node JS.
  3. Mampu melakukan pengembangan lebih produktif karena dari segi frontend dan backend menggunakan javascript, sehingga tidak akan kesulitan karena ada beda sintaks dari bahasa pemograman lain.
  4. Dukungan Komunitas yang Kuat dan Banyak.

Untuk Apa Node JS? Banyak tetapi saya rangkum lagi yah kebanyakan adalah untuk ini :

  • API
  • Server
  • Aplikasi Web

Walaupun sebenarnya masih banyak lagi kegunaan nya, seperti membuat microservices, membangun sistem manajemen, Scripting & Automation, Internet of Things, Rendering React Apps,dll.

Cara Install Node JS :

Windows : Tinggal download dari website resmi nya lalu install

Linux : Bisa Instal melalui PPA baru install melalui repo nya.

Mac : Tinggal download dari website resmi nya lalu install

Untuk Penjelasan Lengkapnya, Langsung ke website resmi nya disini.

Peralatan:

  • Node JS
  • Visual Studio Code
  • Atau jika anda ingin coba coba dulu langsung di browser bisa pakai REPL.IT

Sebelum Belajar Node JS, Ada baiknya ada sudah menguasai javascript dasar terlebih dahulu, seperti penggunaan let/const, manipulasi array dan object, template literal, arrow function.

Untuk Source Code nya bisa anda lihat disini.



Apa itu NPM?

Ada sistem yang disebut npm (Node Packaging Manager) yang memudahkan penggunaan paket. Dengan npm, Anda dapat membagikan dan mengunduh paket. Kita akan menggunakan ini untuk menginstal paket ke aplikasi yang akan kita kerjakan.





Di dalam Node.Js, ada banyak alat berguna yang disebut packages (paket). 

Express adalah salah satu paketnya dan yang akan kita pakai disini.


Tutorial Dasar Node JS

Mari Mulai dengan menggunakan npm di terminal kit, jadi kita akan buat package,json dengan perintah:

npm init

Lalu tinggal enter enter saja atau diisi juga bebas, atau kalau mau langsung aja ketik npm init -y

Langkah selanjutnya kita ketik "npm i express" di terminal kita.

Untuk menggunakan Express di aplikasi kita, Anda harus meng-import paket dan menambahkan beberapa code untuk memulainya, seperti yang ditampilkan di bawah ini.

const express = require('express');

const app = express();

Kode diatas dimasukan di dalam file app.js

Ini Contoh lengkapnya saya akan coba kasih contoh paling sederhana:

const express = require('express');

const app = express();

app.get('/', (req,res) => {

res.send('<h2>Belajar Node JS</h2>')

});

app.listen(3000);

Lalu jalankan dengan nama file nya, contoh: node app.js

Selamat! anda baru saja membuat app node.js pertama anda yang berjalan di port 3000, silakan akses dengan localhost:3000 atau 127.0.0.1:3000 yah :)


Cara Menampilkan Halaman HTML


Req & Res

Setiap rute dapat menangani permintaan (request) dan respons dengan function, ini disebut Route Handler dan memiliki req (singkatan untuk request ) dan res (singkatan untuk respons) sebagai parameter. Dua parameter ini akan menyimpan informasi tentang permintaan dan respons.

Membuat View Untuk Halaman Beranda



Untuk file view, kita menggunakan jenis file yang disebut EJS yang akan ditempatkan di folder views. EJS akan dijelaskan lebih jauh di pelajaran mendatang, untuk saat ini, Anda dapat menanggapinya sebagai HTML.

Menampilkan File View


Anda dapat menentukan file view mana yang akan ditampilkan di browser menggunakan function res.render.

Menerapkan CSS



Di Express, Anda harus menentukan tempat untuk meletakkan file CSS dan file gambar. Untuk latihan ini, kita akan meletakkannya di folder bernama public.\

Kita akan menambahkan file CSS ke folder public. Untuk memuat CSS, kita harus menentukan jalur file CSS yang ingin kita hubungkan dengan folder public.


Gambar dapat dimuat dengan cara yang sama seperti memuat file CSS.


Latihan membuat Halaman Belanja

Kita akan menambahkan beberapa code untuk menampilkan halaman daftar saat mendapatkan akses ke localhost:3000/index.

Berikutnya, kita akan menambahkan file tampilan (index.ejs) untuk halaman daftar.


Menggunakan EJS untuk Menampilkan Nilai



EJS adalah paket Node.js yang memungkinkan penyematan code JavaScript di file HTML.EJS dapat diinstal menggunakan npm. Sebenarnya, EJS sudah diinstal di latihan sebelumnya.

Menggunakan JavaScript dengan EJS

Untuk menyematkan code JavaScript, kita dapat menggunakan <% %> atau <%= %>. Tanda <% %> digunakan dalam kasus seperti menetapkan variable untuk tidak ditampilkan. Sebaliknya, <%= %> digunakan untuk kasus seperti mencetak variable untuk akan ditampilkan.


EJS sangat berguna saat kamu ingin mengulang code yang sama. Mari kita coba dengan menampilkan sejumlah item menggunakan EJS.

Dengan EJS, kita dapat menggunakan method forEach yang akan membuat code jauh lebih sederhana dan lebih mudah dikelola daripada HTML biasa.


Menggunakan method forEach dan element array

Untuk menampilkan element array, kita akan menggunakan method forEach

Menampilkan Array Object

Mari kita ganti code HTML untuk item daftar menggunakan EJS. Kita akan menentukan array untuk mengelola item di daftar belanjaan, lalu menampilkan element tersebut di halaman daftar belanjaan. 

Karena kita tidak ingin menampilkan method forEach, kita akan menggunakan <% %>, bukan <%= %>.


Menambahkan Tautan Antar-Halaman

URL untuk ke halaman beranda adalah /top, tapi mari kita ganti ke /. URL ini disebut Root URL. Mengatur root URL ke halaman pertama yang dikunjungi pengguna adalah hal yang umum.


Mari kita tambahkan tautan ke halaman daftar belanjaan ke tombol di halaman beranda.


Kita juga akan menambahkan tautan ke halaman beranda ke kata "LIST" di halaman daftar belanjaan.



Terima kasih, Untuk Contoh Jadi nya Bisa kalian lihat dan unduh disini.



Menyiapkan Database untuk terhubung ke Node JS

Saat nya persiapkan database, disini saya akan menggunakan mysql, untuk itu kita harus menyambungkan mysql kita ke node js kita, sebelum itu mari kita install mysql di node js kita dengan syntax : npm i mysql 




Kita akan meng-import paket mysql lalu menggunakan method createConnection. Kita akan menyimpan informasi yang diperlukan dalam constant connection. Ini akan menyelesaikan proses penyambungan MySQL. Syntax di sini tidak terlalu penting untuk diingat.

Berarti syntax yang akan kita tambahkan pertama :

const mysql = require('mysql');

Lalu buat sambungan nya kita buat const dengan nama connection seperti dibawah ini

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'list_app'
});

Ingat disesuaikan dengan db user, db pass dan database yang ada di laptop anda, jadi terlebih dahulu silakan setting dulu mysql di localhost anda, biasanya default nya root dll.

Menggunakan Database




Saatnya kita atur query nya terlebih dahulu


Untuk menjalankan kueri ke database dari Node.js, Anda dapat menulis connection.query(A, B). A adalah kueri dan B adalah function yang berjalan setelah kueri diselesaikan (callback).


Kueri callback dapat berisi dua argument. Yang pertama adalah erroryang akan berisi informasi error jika kueri gagal, dan yang kedua adalah results yang berisi hasil kueri (dalam hal ini, informasi item daftar).



Contoh Kode :

app.get('/index', (req, res) => {
  // Ketik code untuk mengakses data dari database 
connection.query(            
'SELECT * FROM items',            
 (error, results) => {            
console.log(results);            
res.render('index.ejs');            
});
  });
});

Menampilkan Nilai yang Dipilih

Meneruskan Nilai ke EJS




Dengan EJS, Anda dapat mengakses nilai melalui method render. Dengan menulis {property: NILAI} di argument ke dua method render, Anda dapat meneruskan nilai ke sisi EJS. Di sini kita akan menggunakan nilai yang kita dapatkan dari database.

Contoh:

app.get('/index', (req, res) => {
  connection.query(
    'SELECT * FROM items',
    (error, results) => {
      // Teruskan object sebagai argument kedua res.render
      res.render('index.ejs',{items:results});
    }
  );
});

Fitur Penambahan Item




Saatnya membuat fitur menambahkan item yang akan langsung muncul di form nya ketika kita sudah input data nya 

Menampilkan Halaman Penambahan Item




Pertama, kita akan mencoba menampilkan halaman penambahan item seperti yang kita sudah lakukan pada halaman beranda dan daftar belanjaan. Kita akan membuat halaman ini agar dapat di akses melalui /new.

Tautan ke Halaman Penambahan Item




Mari kita tambahkan tautan pada halaman daftar belanjaan yang akan mengarah ke halaman penambahan item yang baru saja kita ciptakan.

Memproses Fitur Penambahan Item




Ilustrasi

Mengonfigurasi Perutean untuk Penambahan Item




Kita akan menambahkan rute untuk menambahkan item ke daftar belanjaan. Sejauh ini, kita sudah menggunakan app.get, tetapi kali ini kita akan menggunakan app.post. Method ini disebut GET dan POST yang merujuk pada jenis permintaan. Kita akan mempelajari lebih detail di slide berikutnya.

Apa itu GET dan POST?




Saat Anda membuat permintaan ke server, ada aturannya untuk menentukan jenis proses yang Anda minta. Sebagaimana ditampilkan di bawah ini, Anda dapat melihat jenis proses apa yang ditentukan GET dan POST.

Menyiapkan Formulir




Untuk membuat formulir, kita akan menggunakan tag HTML <form>. Berdasarkan routing, kita akan mengatur atribut action ke URL tujuan dan method ke post atau get.

Menampilkan Daftar



Tulis code untuk menampilkan daftar belanjaan. Kita akan menggunakan code yang sama dengan code di /index untuk menampilkan daftar belanjaan.

Contoh :

app.post('/create',(req,res) => {
  connection.query(
    'SELECT * FROM items',
    (error, results) => {
      res.render('index.ejs', {items: results});
    }
  );
});

Mendapatkan Nilai Input Formulir




Sekarang kita coba mengambil nilai dari formulir, dan menambahkannya ke database.

Mendapatkan Nilai Input (1)




Dengan mengatur atribut name dari element input, Anda dapat mengirim informasi di formulir object ke server. Lalu di server-side, Anda dapat mendapatkan nilai formulir menggunakan req.body.nilaiName.

Untuk mendapatkan nilai dari formulir, Anda harus menambahkan source code seperti contoh di bawah ini ke app.js.


Contoh:


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

app.use(express.static('public'));
// Pastikan untuk mendapatkan nilai dari formulir yang di kirim
app.use(express.urlencoded({extended: false}));

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'progate',
  password: 'password',
  database: 'list_app'
});

app.get('/', (req, res) => {
  res.render('top.ejs');
});

app.get('/index', (req, res) => {
  connection.query(
    'SELECT * FROM items',
    (error, results) => {
      res.render('index.ejs', {items: results});
    }
  );
});

app.get('/new', (req, res) => {
  res.render('new.ejs');
});

app.post('/create', (req, res) => {
  // Cetakkan nilai yang dikirimkan dari formulir
  console.log(req.body.itemName);
  
  connection.query(
    'SELECT * FROM items',
    (error, results) => {
      res.render('index.ejs', {items: results});
    }
  );
});

app.listen(3000);

Menambahkan Nilai ke Database
Gunakan statement INSERT yang dipelajari di SQL Study IV, mari kita lakukan ini supaya nilai tersebut dapat ditambahkan ke database.

Menambahkan Data




Kita bisa menggunakan method query seperti yang kita lakukan dengan SELECT untuk menjalankan INSERT. id dari tabel items diatur ke AUTO INCREMENT, jadi kita tidak perlu repot mengatur id.

Menambahkan Item Daftar Belanjaan




Untuk menggunakan nilai yang di kirim dari formulir di kueri, kita harus menambahkan tanda ? setelah VALUES. Berikutnya, kita harus meneruskan array berisi nilai yang kita inginkan ke argument kedua di connection.query(). Element array ini akan masuk ke ? dan kueri akan dijalankan.

Contoh:

app.post('/create', (req, res) => {
  // Ketik kueri untuk menambahkan data ke database
  connection.query(
    'INSERT INTO items (name) VALUES(?)',
    [req.body.itemName],
    (error,results) => {
      connection.query(
        'SELECT * FROM items',
        (error, results) => {
          res.render('index.ejs', {items: results});
        }
      );
    };
  );

Menggunakan Redirect (Pengalihan)




Server dapat menghasilkan respons yang berbunyi "berikutnya, buat permintaan ke URL ini." Saat browser menerima pesan ini, browser akan secara otomatis membuat permintaan ke URL yang ditentukan. Proses membuat permintaan lain ke URL yang berbeda ini disebut redirect.

Me-reload Setelah Proses Redirect




Dengan menggunakan redirect, kita dapat membuat permintaan ke /index setelah item dibuat dan halaman daftar belanjaan di tampilkan. Dengan begitu, me-reload halaman setelah membuat item baru di dafter belanjaan tidak akan memulai ulang proses pembuatan item tersebut, sehingga daftar item tidak akan di tambahkan terus menerus.

Cara Menggunakan Redirect

Setelah menambahkan item di daftar belanjaan, mari kita redirect user ke halaman daftar (/index). Untuk membuat proses ini, gunakan method res.redirect dan teruskan URL sebagai argument.

Menggunakan Redirect

Ada sejumlah situasi di mana proses redirect akan berguna, khususnya seperti saat membuat permintaan menggunakan method post. Dalam kasus seperti ini, ketimbang menggunakan res.render, kita menggunakan res.redirect dan mengalihkan ke rute get.

Contoh:

app.post('/create', (req, res) => {
  connection.query(
    'INSERT INTO items (name) VALUES (?)',
    [req.body.itemName],
    (error, results) => {
      // Redirect ke halaman daftar belanjaan
      res.redirect('/index');
      
    }
  );
});

Preview





Source Code : https://github.com/ihsandroid1/nodejs-mysql-satu

Membuat Fitur Update & Delete





Saat nya kita menggunakan database untuk menghapus atau memperbarui data

Menyiapkan Rute


Kita perlu menyiapkan rute untuk menghapus item. Karena tindakan ini membuat perubahan pada database, kita akan menggunakan post.

Menambahkan Tombol Hapus



Mari buat tombol hapus untuk setiap item. Kita akan menggunakan formulir untuk membuatnya. Berdasarkan perutean, kita akan menambahkan atribut action dan method.

Menggunakan Formulir



Seperti yang dijelaskan di slide sebelumnya, tombol hapus tidak akan dibuat menggunakan tautan, tapi menggunakan formulir. Ingat, Anda masih menggunakan formulir untuk membuat permintaan POST meskipun tidak ada nilai untuk dikirim.

Redirect (Pengalihan)



Setelah mengirimkan formulir, kita akan menampilkan halaman daftar belanjaan. Karena fitur hapus membuat perubahan pada database, kita akan menggunakan redirect untuk menampilkan halaman daftar belanjaan.

Menentukan id Item


Untuk menghapus item, kita perlu menggunakan kueri DELETE. Namun, dalam kasus ini, jika item tidak ditentukan menggunakan WHERE, server tidak akan mengetahui item mana yang akan dihapus. 

Seperti yang ditampilkan di kanan, server dapat menghapus item jika mendapatkan id item yang akan dihapus.

Meneruskan Nilai melalui URL




Untuk memindahkanid dari item daftar, kita akan menggunakan URL. URL permintaan akan berisi id seperti /delete/3 dan rute akan ditentukan sebagai /delete/:id. 

Dengan menggunakan URL seperti ini, kita bisa mendapatkan id. Bagian /:id rute dikenal sebagai route parameter.

Menggunakan Route Parameter


Mari gunakan route parameter. Selain itu, kita akan menyertakan id di URL tujuan formulir berdasarkan rute tersebut.

Mengambil Nilai Route Parameter



Anda bisa mendapatkan nilai route parameter melalui req.params.routeParamaterName. Kita akan menguji ini dengan mencetaknya menggunakan console.log.

Menghapus Item


Dengan menggunakan id item dari route parameter, jalankan kueri DELETE.

Membuat Fitur Edit




Pada halaman edit, kita perlu membuat formulir untuk mengedit konten item. Kita akan memiliki formulir yang berisi nilai yang awalnya dimasukkan untuk item.

Proses


Membuat Rute


Kita akan membuat tombol edit pada halaman daftar belanjaan, dan menyertakan id item di URL tautan-nya. Selanjutnya, kita akan menggunakan route parameter dan meneruskan id item daftar. Terakhir, kita akan menggunakan id ketika kita mendapat informasi dari item daftar.

Membuat Halaman Edit ke dalam folder views dengan nama edit.ejs

Proses untuk Menampilkan Nilai Item


Mengambil Nilai


Dengan menggunakan id item yang diteruskan, ayo dapatkan item yang ingin kita edit.

Meneruskan Hasil ke EJS


Hasil kueri akan berupa array, berapa pun jumlah hasilnya. Kita akan mengambil element pertama array results dan meneruskannya sebagai property item ke edit.ejs.

Menampilkan Nilai dalam Formulir


Dengan menentukan atribut value, Anda dapat menampilkan nilai awal dari formulir. Mari tentukan nilai item untuk atribut value milik formulir.

Proses Pembaruan

Informasi yang Diperlukan untuk Memperbarui Item



Untuk memperbarui, kita akan menggunakan kueri UPDATE. Untuk memperbarui item daftar, kita memerlukan nilai dari formulir dan item id. Kita akan berusaha meneruskan keduanya.

Mari Gunakan Route Parameter


Pertama, kita akan meneruskan id menggunakan route parameter. Mari atur rute untuk pembaruan. URL destinasi akan berisi id item yang sudah kita teruskan ke edit.ejs. 

Selain itu, kita akan me-redirect pengguna ke halaman daftar setelah mengirimkan formulir.

Mengirimkan Nilai Formulir


Berikutnya, kita akan mengirim nilai formulir menggunakan atribut name.

Mengirim Data


Nilai route parameter dapat diakses melalui object params dan nilai formulir dapat diakses melalui object body. Pastikan untuk meninjaunya secara cermat.

Memperbarui Item



Kita akan memperbarui item menggunakan id yang sudah diteruskan. Jika menggunakan beberapa nilai dalam satu kueri, tambahkan element tersebut ke array. Element di array harus cocok dengan urutan ? dalam kueri.

Source Code : https://github.com/ihsandroid1/nodejs-mysql-dua

Demikian lah belajar node js dasar berakhir, semoga bermanfaat dan dapat membantu anda :)
Hosting Unlimited Indonesia

IDCloudHost | SSD Cloud Hosting Indonesia