[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-belajar-nodejs-kenalan-dengan-express":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":10,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},443,"belajar-nodejs-kenalan-dengan-express","Belajar NodeJs - Kenalan dengan Express.Js","Apa itu express? Express adalah framework node.js yang minimalis dan flexibel yang memiliki fitur-fitur yang lengkap untuk membuat web dan mobile application. Express is a minimal and flexible Node.js",null,[],"2021-02-27T16:00:00Z","2026-07-14T04:39:40.059876Z","\u003Cp>Apa itu express? Express adalah framework node.js yang minimalis dan flexibel yang memiliki fitur-fitur yang lengkap untuk membuat web dan mobile application.\u003C\u002Fp>\u003Cblockquote>\u003Cp>Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>Jadi dengan Express kamu bisa lebih cepat untuk membuat rest api dengan menggunakan MySQL atau database lainnya. Itu karena Express sudah include dengan HTTP utility yang mudah dipakai dan juga module-module lainnya.\u003C\u002Fp>\u003Cp>Jika kalian baru mulai belajar Express, ikuti terus tutorial ini ya.\u003C\u002Fp>\u003Ch4>Daftar Isi:\u003C\u002Fh4>\u003Ch2>Instalasi Express\u003C\u002Fh2>\u003Cp>Express membutuhkan node.js, jadi pastikan komputer kamu sudah terinstall node.js dahulu ya.\u003C\u002Fp>\u003Cp>Jika belum bisa cek cara install node.js di tutorial ini: Belajar NodeJs - Dasar dan Persiapan Belajar NodeJs.\u003C\u002Fp>\u003Cp>Jika node.js sudah terinstall dengan baik. Selajutnya kita buat sebuah folder. Misalnya namanya \u003Ccode>express-app\u003C\u002Fcode>.\u003C\u002Fp>\u003Cpre>\u003Ccode>mkdir express-app\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Pergi ke dalam folder tersebut dan jalankan \u003Ccode>npm init\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode>cd express-app\nnpm init\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Ikuti step-stepnya sampai selesai. Contohnya seperti di bawah ini.\u003C\u002Fp>\u003Cpre>\u003Ccode>{\n  \"name\": \"express-app\",\n  \"version\": \"1.0.0\",\n  \"description\": \"express app sample\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\"\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jika sudah selesai, selanjutnya kita akan menginstall Express.\u003C\u002Fp>\u003Cp>Bagaimana caranya?\u003C\u002Fp>\u003Cp>Jalankan command dibawah ini.\u003C\u002Fp>\u003Cpre>\u003Ccode>npm install express --save\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jika sudah selesai, \u003Ccode>package.json\u003C\u002Fcode> akan berubah seperti dibawah ini.\u003C\u002Fp>\u003Cpre>\u003Ccode>{\n  \"name\": \"express-app\",\n  \"version\": \"1.0.0\",\n  \"description\": \"express app sample\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"dependencies\": {\n    \"express\": \"^4.17.1\"\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Bisa kita liat, kita sudah memiliki \u003Ccode>dependencies\u003C\u002Fcode> baru dengan nama \u003Ccode>express\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Selain itu, di dalam folder \u003Ccode>express-app\u003C\u002Fcode> juga akan ada folder baru dengan nama \u003Ccode>node_modules\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Kita sudah berhasil menginstall express di dalam project kita.\u003C\u002Fp>\u003Cp>Selanjutnya apa?\u003C\u002Fp>\u003Ch2>Membuat Hello World Dengan Express\u003C\u002Fh2>\u003Cp>Untuk mengetes apakah express berfungsi dengan baik, kita akan membuat sebuah aplikasi sederhana yang menampilan \u003Ccode>Hello World\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Buat sebuah file \u003Ccode>index.js\u003C\u002Fcode>. Lalu isi dengan kode dibawah ini.\u003C\u002Fp>\u003Cpre>\u003Ccode>const express = require('express')\nconst app = express()\nconst port = 3030\napp.get('\u002F', (req, res) => {\n  res.send('Hello World!')\n})\napp.listen(port, () => {\n  console.log(`Example app listening at http:\u002F\u002Flocalhost:${port}`)\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Coba jalankan server kita dengan command \u003Ccode>node index.js\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Jika tidak ada error akan muncul tampilan seperti ini di terminal kamu.\u003C\u002Fp>\u003Cfigure>\u003Cfigcaption>\u003Ci>Hello World Express\u003C\u002Fi>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>Buka url \u003Ccode>http:\u002F\u002Flocalhost:3030\u003C\u002Fcode> dan kamu harusnya bisa mendapatkan tampilan \u003Ccode>Hello World!\u003C\u002Fcode> di browser kamu.\u003C\u002Fp>\u003Ch2>Express Routing\u003C\u002Fh2>\u003Cp>Salah satu fitur Express adalah kita bisa dengan mudah membuat route atau url untuk aplikasi yang kita buat.\u003C\u002Fp>\u003Cp>Kita bisa menentukan path dan method dari route yang dibuat.\u003C\u002Fp>\u003Cp>Untuk membuat route di express, caranya adalah dengan mengikuti struktur ini.\u003C\u002Fp>\u003Cpre>\u003Ccode>app.METHOD(PATH, HANDlER)\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Dimana:\u003C\u002Fp>\u003Col>\u003Cli>app: ini adalah instant dari express\u003C\u002Fli>\u003Cli>METHOD: ini adalah method dari request yang kita buat, seperti get, post, put atau delete. http method ini huruf kecil semua ya.\u003C\u002Fli>\u003Cli>PATH: ini adalah path url yang di inginkan. Seperti \u002Fproduct, \u002Fhome atau yang lainnya.\u003C\u002Fli>\u003Cli>HANDLER: adalah function yang akan dieksekusi saat route itu dipanggil.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Daripada bingung, kita contohnya saja bagaimana cara membuat route di applikasi sebelumnya.\u003C\u002Fp>\u003Cp>Buka file \u003Ccode>index.js\u003C\u002Fcode> lihat di bagian ini.\u003C\u002Fp>\u003Cpre>\u003Ccode>app.get('\u002F', (req, res) => {\n  res.send('Hello World!')\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Itu adalah contoh GET route. Nah kita kamu ingin membuat POST route contohnya ada dibawah ini.\u003C\u002Fp>\u003Cpre>\u003Ccode>app.post('\u002F', function (req, res) {\n  res.send('Got a POST request')\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Atau PUT request?\u003C\u002Fp>\u003Cpre>\u003Ccode>app.put('\u002Fuser', function (req, res) {\n  res.send('Got a PUT request at \u002Fuser')\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Bagaimana kalau DELETE Requst?\u003C\u002Fp>\u003Cpre>\u003Ccode>app.delete('\u002Fuser', function (req, res) {\n  res.send('Got a DELETE request at \u002Fuser')\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Mudah bukan routing di Express. Untuk dokumentasi yang lebih lengkap, kamu bisa cek dokumentasi disini ya: \u003Ca href=\"https:\u002F\u002Fexpressjs.com\u002Fen\u002Fguide\u002Frouting.html\">https:\u002F\u002Fexpressjs.com\u002Fen\u002Fguide\u002Frouting.html\u003C\u002Fa>\u003C\u002Fp>\u003Ch2>Express Templating\u003C\u002Fh2>\u003Cp>Secara umum, Express dan nodejs digunakan di server side. Untuk membuat website sederhana di Express, kita akan memakai template engine Express yaitu \u003Ccode>Pug\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>\u003Ccode>Pug\u003C\u002Fcode> adalah template engine yang memungkinkan kita parsing data\u002Fvariable ke dalam static file.\u003C\u002Fp>\u003Cp>Selain \u003Ccode>Pug\u003C\u002Fcode>, kita juga bisa memakai template engine lainnya seperti \u003Ccode>Mustache\u003C\u002Fcode> atau \u003Ccode>EJS\u003C\u002Fcode> atau \u003Ccode>Jade\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Kita install dulu \u003Ccode>pug\u003C\u002Fcode>.\u003C\u002Fp>\u003Cpre>\u003Ccode>npm install pug --save\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jika sudah, edit file \u003Ccode>index.js\u003C\u002Fcode> dan tambahkan kode dibawah ini setelah baris \u003Ccode>const port = 3030\u003C\u002Fcode>.\u003C\u002Fp>\u003Cpre>\u003Ccode>app.set('view engine', 'pug');\napp.set('views','.\u002Fviews');\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Penjelasannya adalah:\u003C\u002Fp>\u003Col>\u003Cli>Kita memberitahu Express bahwa kita akan menggunakan \u003Ccode>view engine = pug\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Kita akan memberitahu Express untuk tempat file-file view kita akan kita taruh di directory\u002Ffolder \u003Ccode>views\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Selajutnya buat sebuah folder baru dengan nama \u003Ccode>views\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Kemudian buat sebuah file dengan nama \u003Ccode>welcome.pug\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Isi dengan kode dibawah ini.\u003C\u002Fp>\u003Cpre>\u003Ccode>doctype html\nhtml\n   head\n      title = \"Hello Pug\"\n   body\n      p.greetings#people Hello World!\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Edit dibagain get route dan ubah get route \u002F menjadi seperti dibawah ini.\u003C\u002Fp>\u003Cpre>\u003Ccode>app.get('\u002F', (req, res) => {\n    res.render('welcome');\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Penjelasan:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>Saat ada \u003Ccode>get\u003C\u002Fcode> request ke path \u003Ccode>\u002F\u003C\u002Fcode> maka, Express akan me-render file \u003Ccode>welcome\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Coba restart webserver kamu dan buka lagi url: http:\u002F\u002Flocalhost:3030\u002F\u003C\u002Fp>\u003Cp>Express akan merender file \u003Ccode>welcome.pug\u003C\u002Fcode> itu menjadi seperti dibawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode><!DOCTYPE html>\n<html>\n   <head>\n      <title>Hello Pug<\u002Ftitle>\n   <\u002Fhead>\n   \n   <body>\n      <p class = \"greetings\" id = \"people\">Hello World!<\u002Fp>\n   <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Bagaimana cara memparsing data dari route ke view template?\u003C\u002Fp>\u003Cp>Misalnya kita buat sebuah view baru dengan nama \u003Ccode>profile.pug\u003C\u002Fcode>.\u003C\u002Fp>\u003Cpre>\u003Ccode>doctype html\nhtml\n   head\n      title = \"Hello Pug\"\n   body\n      p.greetings#people Hello #{user} \n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Untuk pass variable berupa string ke template, kamu bisa menggunakan syntact \u003Ccode>#{variableName}\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Buat sebuah route baru dengan path \u003Ccode>profile\u003C\u002Fcode> yang akan me-render view \u003Ccode>profile.pug\u003C\u002Fcode>.\u003C\u002Fp>\u003Cpre>\u003Ccode>app.get('\u002Fprofile', (req, res) => {\n    res.render('profile', {user: 'Agus'});\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kamu bisa memparsing data ke view dengan menambahkan object sebagai parameter dari fungsi \u003Ccode>res.render(view_name, data_json_object)\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Jadi di route \u002Fprofile kita parsing variable user ke view dengan value = Agus.\u003C\u002Fp>\u003Cp>Cukup mudah mudah?\u003C\u002Fp>\u003Cp>Jadi itulah sedikit perkenalan kita dengan Express.JS, framework nodejs yang bisa mempercepat proses saat development sebuah website atau mobile aplikasi.\u003C\u002Fp>\u003Cp>Selanjutnya kita akan belajar bagaimana cara membuat REST api dengan menggunakan Express.\u003C\u002Fp>\u003Cp>Ikuti terus tutorial di website ini ya guys.\u003C\u002Fp>","Apa itu express? Express adalah framework node.js yang minimalis dan flexibel yang memiliki fitur-fitur yang lengkap untuk membuat web dan mobile application. E",[],[],0]