Pada tutorial ini Anda akan belajar tentang:

- Apa itu Express JS

- Kenapa Menggunakan Express

- Installasi Node.js dan Express

- Basic Server Syntax pada Express

- Basic Routing pada Express

- Basic MVC pada Express

Ini adalah tutorial express untuk pemula.

Jika Anda seorang pemula, maka Anda akan menyukai tutorial ini.

Saya akan menjelaskannya dengan sangat sederhana agar Anda dapat memahaminya dengan baik.

Mari kita mulai.

 

#1. Apa itu Express?

Express merupakan web framework atau kerangka kerja web yang cepat, tidak beropini, dan minimalis untuk node.js.

Express adalah “server-side” atau “backend” framework yang sangat handal dalam membangun API (Application Programming Interface).

 

#2. Kenapa Menggunakan Express?

- Express memberikan kemudahan dalam membangun aplikasi berbasis web dengan node.js

- Sangat ringan, cepat, dan gratis.

- Memberikan kemudahan dalam membangun route.

- Memberikan kontrol penuh terdapat request dan response.

- Express merupakan web framework paling populer untuk node.js

 

#3. Instalasi Node.js

Untuk menginstal express, terlebih dahulu Anda harus menginstal node.js di komputer Anda.

Anda dapat mengunjungi url berikut untuk mendownload node.js:

https://nodejs.org

Download sesuai dengan sistem operasi Anda kemudian install.

Sangat disarankan untuk mendownload versi terbaru dari node.js.

Setelah instalasi berhasil dan untuk memastikan node.js terinstal di komputer Anda, Anda dapat mengetikan perintah berikut pada Terminal atau Command Prompt:

node –v

Seperti gambar berikut:

Pada gambar diatas, dapat dilihat saya menggunakan node.js v14.14.0.

Pada saat Anda menginstal node.js, maka secara otomatis akan include NPM (Node Package Manager).

Anda dapat mengetikan perintah berikut pada terminal atau Command Prompt untuk memastikan NPM terinstal di komputer Anda:

npm –v

Seperti gambar berikut:

Pada gambar diatas, dapat dilihat saya menggunakan NPM v6.14.8.

 

#4. Install Express Menggunakan NPM

Anda dapat menginstal express dengan mudah menggunakan NPM.

Selain itu, Anda juga dapat menginstall semua dependensi yang Anda butuhkan dalam membangun aplikasi web dengan menggunakan NPM.

Buat sebuah folder di komputer Anda, disini saya beri nama “express-app”.

Jika Anda membuat dengan nama yang sama, itu lebih baik.

Anda bebas membuatnya di manapun, baik di C, D, ataupun di Desktop.

Folder ini akan menjadi folder project kita nantinya.

Kemudian buka folder tersebut menggunakan kode editor, disini saya menggunakan Visual Studio Code.

Saya juga menyarankan Anda untuk menggunakan Visual Studio Code.

Anda dapat mendownload Visual Studio Code pada link berikut dan menginstallnya di komputer Anda:

https://code.visualstudio.com/

Selanjutnya, buka terminal pada Visual Studio Code pada menubar terminal, kemudian ketikan perintah berikut:

npm init –y

Seperti gambar berikut:

Perintah tersebut akan membuat sebuah file bernama “package.json” di dalam folder “express-app”.

File ini berisi semua informasi dependensi dan package yang kita gunakan dalam membangun aplikasi.

Selanjutnya, install express dengan mengetikan perintah berikut pada terminal:

npm install express

Seperti gambar berikut:

Perintah diatas akan menginstall express framework secara otomatis pada folder “express-app”.

Jika Anda buka file “package.json”, maka akan terlihat ada penambahan dependensi yaitu “express” seperti berikut:

{
  "name": "express-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Selain itu juga terdapat penambahan folder “node_modules” didalam folder “express-app”.

Pada tahap ini, Anda telah berhasil menginstal express.

 

#5. Syntax Dasar Server pada Express

Sebelum masuk ke ke syntax dasar server pada express, terlebih dahulu tambahkan kode berikut pada file “package.json”:

"type": "module",

Sehingga file “package.json” terlihat menjadi seperti berikut:

{
  "name": "express-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Hal ini bertujuan agar kita dapat menggunakan ES6 Module Syntax.

Selanjutnya, buat sebuat file bernama “index.js” pada root project setara dengan folder node_modules dan file package.json.

Seperti gambar berikut:

Buka file “index.js”, kemudian ketikan kode berikut:

//import express
import express from "express";

// init express
const app = express();

// basic route
app.get('/', (req, res) => {
    res.send('Hello World');
});

// listen on port
app.listen(3000, () => console.log('Server Running at http://localhost:3000'));

Kode diatas adalah kode dasar server pada express.

Dimana kita mengimport express dengan kode:

import express from "express";

Menginisialisasi express dengan perintah:

const app = express();

Kemudian membuat route dasar dengan kode:

app.get('/', (req, res) => {
    res.send('Hello World');
});

Dan menjalankan server pada port 3000 dengan kode berikut:

app.listen(3000, () => console.log('Server Running at http://localhost:3000'));

Untuk menjalankan server, Anda dapat mengetikan perintah berikut pada terminal:

node index

Seperti gambar berikut:

Selanjutnya, buka browser Anda dan kunjungi url: http://localhost:3000.

Jika bejalan dengan baik, maka akan terlihat pesan “Hello World” seperti gambar berikut:

 

#6. Multiple Route pada Express

Pada segmen diatas, kita telah membuat sebuah route yaitu untuk menampilkan pesan “Hello World”.

Kita juga dapat membuatnya menjadi multiple route sebagai contoh:

Buka file “index.js”, kemudian ubah menjadi seperti berikut:

//import express
import express from "express";

// init express
const app = express();

// Home route
app.get('/', (req, res) => {
    res.send('Welcome to Home Page');
});

// About route
app.get('/about', (req, res) => {
    res.send('Welcome to About Page');
});

// Contact route
app.get('/contact', (req, res) => {
    res.send('Welcome to Contact Page');
});

// listen on port
app.listen(3000, () => console.log('Server Running at http://localhost:3000'));

Kemudian, jalankan kembali servernya dengan mengetikan perintah berikut pada terminal:

node index

Seperti gambar berikut:

Selanjutnya, buka browser Anda dan kunjungi url: http://localhost:3000.

Jika bejalan dengan baik, maka akan terlihat pesan “Welcome to Home Page” seperti gambar berikut:

Kunjungi url: http://localhost:3000/about, untuk mengakses about page:

Dan kunjungi url: http://localhost:3000/contact, untuk mengakses contact page:

 

#7. Router pada Express

Pada segmen sebelumya kita telah membahas tentang multiple route pada express.

Jika Anda perhatikan lebih detail, route dan logika program berada dalam satu file yaitu “index.js”.

Untuk permulaan itu adalah hal yang bagus, akan tetapi jika Anda membuat aplikasi yang lebih kompleks dan membutuhkan banyak route, itu bukan ide yang bagus.

Oleh sebab itu, express menyediakan fitur yaitu “Express Router”.

Dengan memanfaatkan express router, kita bisa membuat route terpisah dari “index.js”.

Dengan demikian, kita bisa membuat route yang lebih kompleks.

Untuk lebih memahami cara kerja dari express router, silahkan buat sebuah folder bernama “routes” setara dengan folder node_modules.

Kemudian buat sebuah file bernama “routes.js” didalam folder “routes” seperti gambar berikut:

Kemudian ketikan kode berikut pada “routes.js”:

// import express
import express from "express";

// init express router
const router = express.Router();

// Home route
router.get('/', (req, res) => {
    res.send('Welcome to Home Page');
});

// About route
router.get('/about', (req, res) => {
    res.send('Welcome to About Page');
});

// Contact route
router.get('/contact', (req, res) => {
    res.send('Welcome to Contact Page');
});

// export default router
export default router;

Kemudian buka file “index.js” dan ubah menjadi seperti berikut:

//import express
import express from "express";

// import router
import Router from "./routes/routes.js";

// init express
const app = express();

// Use Router
app.use(Router);

// listen on port
app.listen(3000, () => console.log('Server Running at http://localhost:3000'));

Pada kode diatas, Anda dapat melihat bahwa kita memisahkan route dengan “index.js”.

Dengan demikian, kode pada file “index.js” terlihat lebih ramping.

Hal ini dapat dilakukan karena kita mengexport file “routes.js” dengan kode:

export default router;

Kemudian kita import router pada file “index.js” dengan kode:

import Router from "./routes/routes.js";

Setelah itu, baru kita dapat menggunakan route pada file “index.js” dengan kode berikut:

app.use(Router);

Jika Anda jalankan kembali servernya dengan perintah:

node index

Maka semuanya masih berjalan seperti sebelumnya.

 

#8. Basic MVC pada Express

Pada segmen sebelumnya Anda telah belajar bagaimana memisahkan route dengan “index.js”.

Jika Anda perhatikan lagi lebih detail, maka Anda akan menemukan bahwa logika program terletak pada file “routes.js”.

Meskipun pada kasus diatas tidak ada logika program rumit, hanya menampilkan pesan berupa “Welcome to Home Page” dan sebagainya, akan tetapi ini bukanlah solusi jika Anda membuat aplikasi yang memiliki logika program yang rumit.

Oleh sebab itu, kita dapat menggunakan pola MVC (Model-View-Controller).

MVC adalah pola desain modern yang memisahkan kode program menjadi 3 bagian yaitu: Model, View, dan Controller.

Model: Berisi kode program yang menghandle struktur dan komunikasi data dengan database.

View: Berisi kode yang menghandle interaksi dengan client dan user interface.

Controller: Berisi kode program yang menangani semua logika program yang menghubungkan antara Model dan View.

Pada aplikasi web modern, pola MVC diterapkan sedikit berbeda.

Hal ini dikarenakan pada aplikasi web modern, backend dan frontend dibangun terpisah.

Hal ini berfungsi agar aplikasi yang dibangun lebih mudah dikembangkan dikemudian hari secara team.

Oleh sebab itu, pada backend hanya menerapkan konsep Model dan Controller, sedangkan View diterapkan di frontend.

Express merupakan framework untuk “Backend”, jadi kita dapat menerakan konsep Model dan Controller.

Meskipun express merupakan framework backend, bukan berarti tidak mungkin untuk menerapkan konsep MVC secara total.

Anda dapat menggunakan view engine seperti: Handlebars, EJS, ataupun pug untuk view.

Untuk aplikasi berskala kecil itu adalah praktek yang bagus, akan tetapi jika Anda membangun aplikasi berskala besar akan sulit untuk di kembangkan di kemudian hari.

Praktek terbaiknya adalah dengan memisahkan antara Backend dan Frontend.

Pada kasus kali ini, kita akan memisahkan logika program dengan route dengan cara membuat Controller.

Oleh sebab itu, buat sebuah folder bernama “controllers” setara dengan folder node_modules.

Kemudian buat sebuah file bernama “page.js” didalam folder “controllers” seperti gambar berikut:

Buka file “page.js” pada folder “controllers” kemudian ketikan kode berikut:

// Home page
export const Home = (req, res) => {
    res.send('Welcome to Home Page');
}

// About Page
export const About = (req, res) => {
    res.send('Welcome to About Page');
}

// Contact page
export const Contact = (req, res) => {
    res.send('Welcome to Contact Page');
}

Kemudian buka file “routes.js” pada folder “routes”, kemudian ubah menjadi seperti berikut:

// import express
import express from "express";

// import page controller
import { Home, About, Contact } from "../controllers/page.js";

// init express router
const router = express.Router();

// Home route
router.get('/', Home);

// About route
router.get('/about', About);

// Contact route
router.get('/contact', Contact);

// export default router
export default router;

Pada kode diatas, Anda dapat melihat bahwa kode pada file “routes.js” terlihat lebih ramping dan tidak ada logika program didalamnya.

Semua logika program dapat Anda tempatkan di dalam file controllers.

Anda juga dapat menerapkan Models jika ingin berinteraksi dengan database. Akan tetapi pada kasus ini kita tidak menggunakan database.

Ini adalah struktur aplikasi yang bagus untuk membuat aplikasi web berskala besar.

Meskipun pada contoh diatas tidak ada logika program yang menonjol pada controller, akan tetapi Anda dapat memahami dengan baik struktur dari aplikasi yang baik.

Anda dapat dengan mudah mempelajari logika program, membuat API, berinteraksi dengan database, dan sebagainya dengan struktur ini.

Jika Anda jalankan kembali servernya dengan mengetikan perintah berikut pada terminal:

node index

Maka semua akan berjalan seperti sebelumnya.

Kunjungi url: http://localhost:3000. Untuk mengakses Home page.

Kunjungi url: http://localhost:3000/about, untuk mengakses about page:

Dan kunjungi url: http://localhost:3000/contact, untuk mengakses contact page:

Related: Tutorial Node JS, Express, MySQL, dan Vue JS (Full-Stack)

Kesimpulan:

Pada tutorial ini Anda telah belajar dasar-dasar tentang express js.

Anda juga telah belajar bagaimana membuat route terpisah dengan menggunakan express router.

Tidak hanya itu, Anda juga telah belajar bagaimana membuat struktur aplikasi yang baik dengan menerapkan pola MVC pada express js.

Jadi tunggu apalagi, Let’s Coding!

Download Source Code