ROUTING REQUEST NODEJS

Routing Request

Ketika menangani request, hal yang perlu kita cek selain method adalah URL atau alamat yang dituju dari request tersebut. Sebagai contoh, ketika kita mengunjungi facebook.com dan facebook.com/about, tentu hasil yang kita terima dari server akan berbeda, bukan?

source image: https://www.embedthis.com/goahead/doc/users/routing.html

Request ke facebook.com akan menampilkan homepage Facebook, sedangkan facebook.com/about akan menampilkan halaman tentang Facebook. Teknik ini dinamakan dengan routing. Routing merupakan istilah dalam menentukan respons server berdasarkan path atau url yang diminta oleh client.

Dalam http.clientRequest, untuk mendapatkan nilai url sangatlah mudah, semudah kita mendapatkan nilai request method yang digunakan.

const requestListener = (request, response) => {
    const { url } = request;
};

Properti url akan mengembalikan nilai path secara lengkap tanpa host dan port yang digunakan server. Contohnya, bila client meminta pada alamat http://localhost:5000/about atau http://localhost:5000/about/, maka url akan bernilai ‘/about’; bila meminta alamat http://localhost:5000 atau http://localhost:5000/, maka url akan bernilai ‘/’.

Dengan mendapatkan nilai url, kita dapat merespons client sesuai dengan path yang ia minta.

const requestListener = (request, response) => {
    const { url } = request;
 
    if(url === '/') {
        // curl http://localhost:5000/
    }
 
    if(url === '/about') {
        // curl http://localhost:5000/about
    }
 
    // curl http://localhost:5000/<any>
};

Kita juga bisa mengombinasikan evaluasi dengan method request. Alhasil, kita dapat menentukan respons lebih spesifik lagi.

const requestListener = (request, response) => {
    const { url, method } = request;
 
    if(url === '/') {
 
        if(method === 'GET') {
            // curl -X GET http://localhost:5000/
        }
 
        // curl -X <any> http://localhost:5000/
    }
 
    if(url === '/about') {
 
        if(method === 'GET') {
            // curl -X GET http://localhost:5000/about
        }
 
        if(method === 'POST') {
            // curl -X POST http://localhost:5000/about
        }
 
        // curl -X <any> http://localhost:5000/about
    }
 
    // curl -X <any> http://localhost:5000/<any>
};

Latihan Routing Request

Saatnya kita melakukan latihan lagi! Karena sekarang kita tahu cara menangani request berdasarkan URL yang diminta, mari kita buat web server kita agar dapat menangani request yang lebih spesifik berdasarkan URL dan method request. Berikut tugas atau ketentuan yang akan kita gunakan:

• URL: ‘/’
• Method: GET
• Mengembalikan “Ini adalah homepage”.
  
  
• Method: <any> (selain GET)
• Mengembalikan “Halaman tidak dapat diakses dengan <any> request”.
  
  
• URL: ‘/about’
• Method: GET
• Mengembalikan “Halo! Ini adalah halaman about”.
  
  
• Method: POST (dengan melampirkan data name pada body)
• Mengembalikan “Halo, <name>! Ini adalah halaman about”.
  
  
• Method: <any> (selain GET dan POST)
• Mengembalikan “Halaman tidak dapat diakses dengan <any> request”.
  
  
• URL: <any> (selain / dan /about)
• Method: <any>
• Mengembalikan “Halaman tidak ditemukan!”.

Sudah mengerti? Latihan kali ini tampaknya lebih sulit. Siapkan secangkir kopi untuk menjaga fokus dan mulai.

Pertama, untuk fokus pada routing. Beri komentar dulu kode logika di dalam fungsi request listener yang sebelumnya kita buat.

const requestListener = (request, response) => {
    response.setHeader('Content-Type', 'text/html');
    response.statusCode = 200;
 
    const { method } = request;
 
    // if(method === 'GET') {
    //     response.end('<h1>Hello!</h1>');
    // }
 
    // if(method === 'POST') {
    //     let body = [];
    
    //     request.on('data', (chunk) => {
    //         body.push(chunk);
    //     });
 
    //     request.on('end', () => {
    //         body = Buffer.concat(body).toString();
    //         const { name } = JSON.parse(body);
    //         response.end(`<h1>Hai, ${name}!</h2>`);
    //     });
    // }
};

Selanjutnya, kita ambil properti url dari request menggunakan teknik destructuring object seperti mendapatkan nilai method. Lihat kode yang ditebalkan yah.

const requestListener = (request, response) => {
    response.setHeader('Content-Type', 'text/html');
    response.statusCode = 200;
 
    const { method, url } = request;
 
    /** Kode komentar disembunyikan agar lebih ringkas */
}

Good! Sekarang kita sudah dapat nilai url dari request. Saatnya kita menentukan logika routing url sesuai dengan ketentuan menggunakan if else.

const requestListener = (request, response) => {
    response.setHeader('Content-Type', 'text/html');
    response.statusCode = 200;
 
    const { method, url } = request;
 
    if(url === '/') {
        // TODO 2: logika respons bila url bernilai '/'
    } else if(url === '/about') {
        // TODO 3: logika respons bila url bernilai '/about'
    } else {
        // TODO 1: logika respons bila url bukan '/' atau '/about'
    }
 
    /** Kode komentar disembunyikan agar lebih ringkas */
}

Nice! Coba lihat komentar TODO (yang harus dikerjakan) pada kode tersebut. Kita akan selesaikan TODO sesuai urutan yang ada yah. Urutan tersebut sengaja disusun dari yang paling mudah, lalu merangkak ke yang lebih sulit.

Blok else yang paling terakhir (TODO pertama) akan tereksekusi bila url bukan bernilai ‘/’ atau ‘/about’. Berdasarkan ketentuan yang ada di atas, kita harus merespons dengan pesan “Halaman tidak ditemukan!”. Yuk kita langsung saja tulis responsnya.

const requestListener = (request, response) => {
    response.setHeader('Content-Type', 'text/html');
    response.statusCode = 200;
 
    const { method, url } = request;
 
    if(url === '/') {
        // TODO 2: logika respons bila url bernilai '/'
    } else if(url === '/about') {
        // TODO 3: logika respons bila url bernilai '/about'
    } else {
        response.end('<h1>Halaman tidak ditemukan!</h1>');
    }
 
    /** Kode komentar disembunyikan agar lebih ringkas */
}

Good! Mari kita coba dahulu perubahan yang ada. Simpan perubahan pada berkas server.js; jalankan ulang server dengan perintah npm run start; dan silakan lakukan permintaan ke alamat selain ‘/’ atau ‘/about’. Seharusnya, server akan merespons sesuai dengan pesan yang sudah kita tetapkan.

curl -X GET http://localhost:5000/home
// output: <h1>Halaman tidak ditemukan!</h1>
curl -X GET http://localhost:5000/hello
// output: <h1>Halaman tidak ditemukan!</h1>
curl -X GET http://localhost:5000/test
// output: <h1>Halaman tidak ditemukan!</h1>

Mantap! Satu ketentuan sudah selesai.

• URL: ‘/’
• Method: GET
• Mengembalikan “Ini adalah homepage”.
  
  
• Method: <any> (selain GET)
• Mengembalikan “Halaman tidak dapat diakses dengan <any> request”.
  
  
• URL: ‘/about’
• Method: GET
• Mengembalikan “Halo! Ini adalah halaman about”.
  
  
• Method: POST (dengan melampirkan data name pada body)
• Mengembalikan “Halo, <name>! Ini adalah halaman about”.
  
  
• Method: <any> (selain GET dan POST)
• Mengembalikan “Halaman tidak dapat diakses dengan <any> request”.
  
  
• URL: <any> (selain / dan /about)
• Method: <any>
• Mengembalikan “Halaman tidak ditemukan!”.
  
  

Sekarang, kita lanjut ke ketentuan lainnya. Mari selesaikan logika untuk url ‘/’ terlebih dahulu.

Berdasarkan ketentuan yang ada, url ‘/’ hanya dapat diakses menggunakan method GET oleh client. Jika tidak, maka server akan mengembalikan pesan “Halaman tidak dapat diakses dengan <any> request”.

if(url === '/') {
        if(method === 'GET') {
            // response bila client menggunakan GET
        } else {
            // response bila client tidak menggunakan GET
        }
    }

Lanjut, kita berikan respons sesuai ketentuan pada masing-masing blok if dan else.

if(url === '/') {
        if(method === 'GET') {
            response.end('<h1>Ini adalah homepage</h1>');
        } else {
            response.end(`<h1>Halaman tidak dapat diakses dengan ${method} request</h1>`);
        }
    }

Setelah selesai, ayo coba lagi perubahan yang kita lakukan. Simpan perubahan pada berkas server.js; jalankan ulang server dengan perintah npm run start; dan lakukan permintaan ke alamat ‘/’ dengan method GET dan lainnya. Harusnya sudah berjalan sesuai dengan ketentuan yah!

curl -X GET http://localhost:5000
// output: <h1>Ini adalah homepage</h1>
curl -X POST http://localhost:5000
// output: <h1>Halaman tidak dapat diakses dengan POST request</h1>
curl -X DELETE http://localhost:5000
// output: <h1>Halaman tidak dapat diakses dengan DELETE request</h1>

Nice Work! Satu ketentuan lain sudah selesai!

• URL: ‘/’
• Method: GET
• Mengembalikan “Ini adalah homepage”.
  
  
• Method: <any> (selain GET)
• Mengembalikan “Halaman tidak dapat diakses dengan <any> request”.
  
  
• URL: ‘/about’
• Method: GET
• Mengembalikan “Halo! Ini adalah halaman about”.
  
  
• Method: POST (dengan melampirkan data name pada body)
• Mengembalikan “Halo, <name>! Ini adalah halaman about”.
  
  
• Method: <any> (selain GET dan POST)
• Mengembalikan “Halaman tidak dapat diakses dengan <any> request”.
  
  
• URL: <any> (selain / dan /about)
• Method: <any>
• Mengembalikan “Halaman tidak ditemukan!”.

Bagaimana, mudah bukan? Kita lanjut ke ketentuan terakhir yuk!

Berdasarkan ketentuan yang ada, halaman /about dapat diakses oleh client dengan menggunakan method GET dan POST. Selain kedua method tersebut, server akan mengembalikan pesan “Halaman tidak dapat diakses menggunakan <any> request”.

Jadi, tulislah logika if else seperti ini:

else if(url === '/about') {
        if(method === 'GET') {
            // respons bila client menggunakan GET
        } else if(method === 'POST') {
            // respons bila client menggunakan POST
        } else {
            // respons bila client tidak menggunakan GET ataupun POST
        }
    }

Pada blok else terakhir, berikan respons sesuai dengan ketentuan.

else if(url === '/about') {
        if(method === 'GET') {
            // respons bila client menggunakan GET
        } else if(method === 'POST') {
            // respons bila client menggunakan POST
        } else {
            response.end(`<h1>Halaman tidak dapat diakses menggunakan ${method} request</h1>`);
      }

Selanjutnya, lengkapi juga respons bila client menggunakan GET dan POST sesuai dengan ketentuan.

Tips: Agar tidak menulis ulang seluruh kode stream, salinlah kode blok POST yang diberikan komentar. Namun, sesuaikan nilai responsnya ya.

Setelah selesai kode pada blok ‘/about’ akan tampak seperti ini:

else if (url === '/about') {
       if (method === 'GET') {
         response.end('<h1>Halo! Ini adalah halaman about</h1>')
       } else if (method === 'POST') {
         let body = [];
 
         request.on('data', (chunk) => {
           body.push(chunk);
         });
 
         request.on('end', () => {
           body = Buffer.concat(body).toString();
           const {name} = JSON.parse(body);
           response.end(`<h1>Halo, ${name}! Ini adalah halaman about</h1>`);
         });
     } else {
       response.end(`<h1>Halaman tidak dapat diakses menggunakan ${method} request</h1>`);
     }
   }

Sekarang kita coba yuk! Simpan perubahan pada berkas server.js; jalankan ulang server dengan perintah npm run start; dan coba lakukan permintaan ke alamat ‘/about’ dengan method GET, POST, dan lainnya. Harusnya sudah berjalan sesuai dengan ketentuan yah!

curl -X GET http://localhost:5000/about
// output: <h1>Halo! Ini adalah halaman about</h1>
curl -X POST -H "Content-Type: application/json" http://localhost:5000/about -d "{"name": "Dicoding"}"
// output: <h1>Halo, Dicoding! Ini adalah halaman about</h1>
curl -X PUT http://localhost:5000/about
// output: <h1>Halaman tidak dapat diakses menggunakan PUT request</h1>
curl -X DELETE http://localhost:5000/about
// output: <h1>Halaman tidak dapat diakses menggunakan DELETE request</h1>

Well Done! Akhirnya seluruh ketentuan selesai kita terapkan!

• URL: ‘/’
• Method: GET
• Mengembalikan “Ini adalah homepage”.
  
  
• Method: <any> (selain GET)
• Mengembalikan “Halaman tidak dapat diakses dengan <any> request”.
  
  
• URL: ‘/about’
• Method: GET
• Mengembalikan “Halo! Ini adalah halaman about”.
  
  
• Method: POST (dengan melampirkan data name pada body)
• Mengembalikan “Halo, <name>! Ini adalah halaman about”.
  
  
• Method: <any> (selain GET dan POST)
• Mengembalikan “Halaman tidak dapat diakses dengan <any> request”.
  
  
• URL: <any> (selain / dan /about)
• Method: <any>
• Mengembalikan “Halaman tidak ditemukan!”.

Kita bisa merapikan kode saat ini dengan menghapus komentar kode yang sudah tidak digunakan lagi. Sehingga, sekarang berkas server.js tampak seperti ini:

const http = require('http');
 
const requestListener = (request, response) => {
    response.setHeader('Content-Type', 'text/html');
    response.statusCode = 200;
 
    const { method, url } = request;
 
    if(url === '/') {
        if(method === 'GET') {
            response.end('<h1>Ini adalah homepage</h1>');
        } else {
            response.end(`<h1>Halaman tidak dapat diakses dengan ${method} request</h1>`);
        }
    } else if(url === '/about') {
        if(method === 'GET') {
            response.end('<h1>Halo! Ini adalah halaman about</h1>')
        } else if(method === 'POST') {
            let body = [];
    
            request.on('data', (chunk) => {
                body.push(chunk);
            });
 
            request.on('end', () => {
                body = Buffer.concat(body).toString();
                const { name } = JSON.parse(body);
                response.end(`<h1>Halo, ${name}! Ini adalah halaman about</h1>`);
            });
        } else {
            response.end(`<h1>Halaman tidak dapat diakses menggunakan ${method} request</h1>`);
        }
    } else {
        response.end('<h1>Halaman tidak ditemukan!</h1>');
    }
};
 
const server = http.createServer(requestListener);
 
const port = 5000;
const host = 'localhost';
 
server.listen(port, host, () => {
    console.log(`Server berjalan pada http://${host}:${port}`);
});