ExpressJS

Pendahuluan

ExpressJS merupakan framework NodeJS minimal yang sangat fleksibel . Anda bisa membuat web server HTML, server file statik, aplikasi chat, search engine, sosial media, layanan web dengan akses melalui REST API atau aplikasi hybrid yaitu selain pengguna mempunyai akses melalui REST API juga mempunyai akses ke halaman HTML.

Instalasi

Sebelum menginstal express, kita membuat package.json terlebih dahulu dengan cara, jalankan perintah:

npm init

Selanjutnya kita dapat menginstall express

npm install express --save

Perintah diatas akan menginstall express secara otomatis kedalam project dan menyimpan ke dalam dependencies.

Jika instalasi selesai, maka ada folder bernama node_modules pada project seperti gambar berikut:

Berikut update terbaru dari file package.json setelah instalasi express

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

Pada bagian dependencies terdapat express yang baru diinstal

Basic Routing

Express memberikan kemudahan dalam mendefinisikan routes pada aplikasi berbasis node.js. Misalnya kita ingin membuat 2 route, yaitu home dan about.

Route home akan menampilkan teks Selamat datang di ExpressJS, sedangkan route about akan menampilkan teks Ini halaman tentang saya.

Buat file index.js

const express = require('express');
const app = express();
 
//route untuk halaman home
app.get('/',(req, res) => {
  res.send('Selamat datang di ExpressJS');
});
 
//route untuk halaman about
app.get('/about',(req, res) => {
  res.send('Ini halaman tentang saya');
});
 
app.listen(8000, () => {
  console.log('Server is running at port 8000');
});

Jalankan index.js pada terminal dengan cara mengetikkan perintah

node index.js

Buka browser, lalu buka http://localhost:8000

Lalu tambahkan /about, menjadi http://localhost:8000/about

Serving Static File

Express menyediakan middleware express.static untuk melayani file statis, seperti gambar, CSS, JavaScript, dll. Kita perlu meneruskan nama direktori tempat menyimpan file statis ke middleware express.static untuk melayani file secara langsung.

Misalnya kita ingin menambahkan file CSS dan Javascript bootstrap ke dalam project. Lalu kita buat folder dengan nama public untuk menyimpan file CSS dan Javascript.

Template Engine

Selanjutnya kita perlu menginstal template engine. Banyak sekali template engine yang dapat digunakan di expressJS. Kali ini kita akan coba gunakan Handlebars.js.

Untuk menginstal Handlebars.js, jalankan perintah berikut pada terminal

npm install hbs --save

Perintah diatas akan menginstal view engine handlebars ke dalam project. Selanjutnya, buat folder views pada direktori project . Kemudian, buat sebuah file dengan nama index.hbs.

Selanjutnya, kita akan isi file index.hbs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--Load bootstrap.css file-->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <h2>Selamat datang di ExpressJS</h2>
            </div>
        </div>
    </div>
    
    <!--Load bootstrap.js file-->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Selanjutnya modifikasi file index.js, menambahkan modul path, hbs dan set public folder sebagai static folder

//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) => {
  //res.send('Ini halaman tentang saya');
  //render file index.hbs
  res.render('index');
});
 
//route untuk halaman about
app.get('/about',(req, res) => {
  res.send('Ini halaman tentang saya');
});
 
app.listen(8000, () => {
  console.log('Server is running at port 8000');
});

Jalankan index.js dengan mengetikan perintah berikut pada terminal:

node index.js

Kemudian buka browser http://localhost:8000

Mengirim Data Ke View

Buka file index.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 : "Ahmad"
  });
});
 
//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');
});

Buka file index.hbs, kemudian tambahkan {{ name }} pada teks selamat datang

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--Load bootstrap.css file-->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <h2>Selamat datang {{ name }} di ExpressJS</h2>
            </div>
        </div>
    </div>
    
    <!--Load bootstrap.js file-->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Jalankan index.js

node index.js

Referensi

https://expressjs.com/

https://idjs.github.io/belajar-nodejs/expressjs/index.html

https://www.codepolitan.com/memulai-pembuatan-aplikasi-web-dengan-express-js-1-instalasi-dan-pengenalan

http://mfikri.com/artikel/tutorial-nodejs

PreviousNode.js NextAPI Express dengan MySQL + Deploy

Last updated 1 year ago

Was this helpful?