Node.js semakin besar dan semakin populer saat ini. Show 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: MFIKRIOrder 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 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: node -v 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: npm -v Maka akan terlihat hasilnya sebagai berikut: Itu artinya saya telah menginstal npm js v5.6.0. Selesai.
Basic Webserver Node.jsUntuk 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: node app.js pada terminal atau command line seperti berikut: #4. Buka browser Anda, kemudian ketikan URL berikut: http://localhost:8000 Maka akan terlihat hasilnya seperti berikut:
Node js dan Express FrameworkExpress 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 ExpressSebelum 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:
Basic Routing ExpressExpress 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: #3. Buka browser Anda kemudian ketikan URL berikut: http://localhost:8000/ Maka, akan terlihat outputnya sebagai berikut: Kemudian, untuk menampilkan halaman about ketikan URL berikut: http://localhost:8000/about Maka, akan terlihat outputnya sebagai berikut: Sederhana bukan?.
Serving Static FilesExpress 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 . Express mendukung banyak 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: 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: Kemudian, buka browser Anda kemudian ketikan URL berikut: http://localhost:8000/ Maka, akan terlihat outputnya sebagai berikut: Sederhana bukan?
Mengirim data ke viewPada 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: Kemudian, buka browser Anda kemudian ketikan URL berikut: http://localhost:8000/ Maka, akan terlihat outputnya sebagai berikut: Jika anda akses dengan url berikut: http://localhost:8000/From Express Js 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: 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: #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: Kemudian, buka browser Anda kemudian ketikan URL berikut: http://localhost:8000/post 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. |