Membuat Program Teks Acak Dengan NodeJS Express

Fajrie R Aradea
16 Jun, 2024
Contoh Program NodeJS Membuat Program Random Text

Setelah membahas tentang framework Express untuk NodeJS dan operasi file di NodeJS mari kita segarkan ingatan dengan berlatih membuat kode program sederhana untuk menampilkan tulisan (teks) acak dengan Express NodeJS, sebelum kita masuk ke materi-materi lainnya.

Membuat Kode Program Untuk Menampilkan Teks Acak

Ide program untuk latihan ini adalah bagaimana menampilkan teks kata bijak yang tidak beraturan (random) dari sekumpulan kalimat-kalimat yang sudah didefinisikan. Untuk kalimat kata-kata bijaknya sendiri bisa kita ambil dari sebarang laman/situs, dan pada contoh ini sudah kami pilihkan beberapa yang dikode mati didalam program dalam bentuk array.

Sebelum kita mulai menulis kode, selalu kami ingatkan untuk menyiapkan sebuah folder / direktori misalnya dengan nama D:\randomtext kemudian lakukan :

D:\randomtext>npm init
D:\randomtext>npm install express  atau npm install express-generator

Hal ini selalu kami ingatkan agar kita terbiasa dengan 

Membuat Kode untuk Sisi Klien

Pertama-tama buatlah satu file html untuk ditampilkan dibrowser klien pada saat pertama kali situs dibuka dengan nama katabijak.html.   

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Belajar Kata Bijak Acak</title>
</head>
<body>
   <h1>Belajar Kata Bijak Acak</h1>
   <button id="btn-katabijak">Tampilkan Kata Bijak</button>
   <p id="katabijak"></p>
   <script>
        const getBtnKatabijak = document.getElementById('btn-katabijak');
        const labelKatabijak = document.getElementById('katabijak');  
        getBtnKatabijak.addEventListener('click', () => {
            fetch('http://localhost:3000/acak')
                .then(response => response.json())
                .then(data => {
                    labelKatabijak.textContent = data.katabijak;
                })
                .catch(error => {
                    console.error('Gagal meminta data:', error);
                });
        });
   </script>
</body>
</html>

Berikut penjelasan dari kode diatas :

Keterangan program

Baris 13 adalah deklarasi variabel getBtnKatabijak dan mengisinya dengan elemen HTML yang memiliki ID btnKatabijak. Demikian pula baris 14, dia merupakan deklarasi variabel labelKatabijak dan mengisinya dengan elemen HTML yang memiliki ID katabijak dari Document Object Model (DOM) halaman web. 

Kedua hal diatas dimaksudkan agar kita dapat berinteraksi menggunakan Javascipt terhadap kedua elemen tersebut, yang dilakukan pada baris-baris selanjutnya.

Penjelasan kode program

Baris 15, menbuat sebuah event listener pada variabel getBtnKatabijak yang dipicu oleh klik mouse, yang mana bila button menerima klik akan menjalankan semua perintah dalam fungsi tanpa nama pada baris 16 sampai 23.

Perhatikan baris 16 dimana kita mencoba mengambil/meminta data dari server di alamat http://localhost:3000/acak dengan menggunakan fungsi fetch() yang sudah disediakan di Javascript klien.     

fetch() adalah fungsi yang memungkinkan kita untuk membuat permintaan HTTP ke server. Fungsi ini merupakan bagian dari Web API untuk mengambil sumber daya dari jaringan, seperti melakukan permintaan API atau memuat file. fetch() mengembalikan Promise yang diselesaikan dengan respons dari permintaan tersebut, yang memungkinkan kita untuk menangani hasilnya secara asinkron. 

Baris 17 dan 18 merupakan pengembalian promise dari fetch() yang dinotasikan dengan .then() yang mana pada baris 17, kita meminta response dari server diparsing menjadi format JSON. Kemudian data yang sudah diubah menjadi JSON tersebut dimasukan ke elemen labelKatabijak.textContent. Perhatikan elemen dengan key katabijak yang kami beri kotak kuning.

Membuat Contoh Program NodeJS untuk Server

Sekarang mari kita membuat kode program untuk sisi server. Tulislah kode Javascript berikut kemudian berinama dengan server.js 

const express = require('express');
const fs = require('fs');

//  
const app = express();

// Array berisi kumpulan kata bijak, silahkan tambahkan sendiri 
const katabijak = [
    "Bermimpilah yang besar dan selalu berani untuk gagal.",
    "Kesulitan yang sebenarnya ialah mengatasi caramu berpikir.",
    "Perjalanan akan menjadi jauh lebih muda, apabila tidak membawa masa lalu.",
    "Kebahagiaan bukanlah suatu hal yang telah siap dan tinggal dinikmati.",
    "Jangan pernah berhenti ketika lelah, berhentilah ketika telah selesai.",
    "Terkadang pilihan yang baik ialah menerima."
];
 
//jika klien membuka halaman root / homepage
app.get('/', (req, res) => {
    fs.readFile('katabijak.html', 'utf8', function(err, html) {
        res.send(html);
        res.end();
    })
})

//jika klien memanggil path http://localhost:3000/acak
app.get('/acak', (req, res) => {
    const kataAcak = katabijak[Math.floor(Math.random() * katabijak.length)];
    res.json({ katabijak: kataAcak });
});

app.listen(3000, () => {
    console.log("Server aktif pada port : 3000");
});

Baiklah kami tidak akan menjelaskan baris 1-7 karena seharusnya sudah bisa dipahami pada bagian sebelumnya. Hanya saja perlu kami ingatkan pada penggunaan framework Express, kita diminta membiasakan gaya penulisa dengan penggunaan variabel objek app sebagai objek modul Express yang diekpresikan dengan const app = express();  

deklarasi array kata bijak

Baris 10 adalah perintah untuk mendeklarasikan sebuah variabel dengan tipe data array yang sekaligus diisikan elemen-elemennya berupa string pada baris 11 - 16.  

Definisi rute root / homepage tanpa path

Baris 20 adalah untuk mendefinisikan permintaan HTPP pada halaman utama atau root. Yaitu dengan membaca file katabijak.html dalam mode 'utf8' agar output hasil pembacaan yang dikirim ke variabel html berupa teks, yang kemudian hasil pembacaannya dikirim ke browser klien. 

Definisi rute ke path /acak

Sekarang kita tiba pada inti programnya, yaitu definisi rute /acak yang dipanggil oleh browser klien setiap kali button btn-katabijak diklik. Kalau lupa coba lihat lagi kode html untuk klien. 

Pada baris 25, app.get('/acak') mendefinisikan kalau ada permintaan, program akan mendeklarasikan variabel kataAcak pada baris 26 yang kemudian mengisikannya dengan 1 elemen dari array katabijak[<nomor acak elemen>]. Generator nomor elemen array secara acak dilakukan dengan cara :

Math.floor(Math.random() * katabijak.length)

Ekspresi ini akan menghasilkan bilangan bulat yang acak, antara 0 - jumlah elemen array katabijak. Math.random() menghasilkan angka 0 dan 1 secara acak, sedangkan fungsi Math.floor() adalah untuk menghasilkan bilangan yang dibulatkan kebawah. Jadi perkalian Math.random dengan jumlah elemen array akan menghasilkan angka 0 - jumlah elemen array.

Variabel kataAcak yang kini berisi salah satu elemen array katabijak[] dikirim ke browser klien dalam format objek yang mana, isi variabel randomQuote adalah nilainya dan katabijak adalah propertinya.

Sekarang mari jalankan aplikasi server yang baru saja dibuat. Jika tidak ada kesalahan penulisan maka server NodeJS Express akan aktif pada port 3000 yang bisa diakses melalui browser.

Tampilan aplikasi program teks acak di browser

Cobalah untuk mengklik button <Tampilkan kata bijak> sekali, dua kali, tiga kali. Akan ditampilkan baris kata bijak yang berbeda-beda dari array yang sebelumnya sudah didefinisikan di kode server.js.

Kesimpulan

Pada materi ini kita sudah belajar mengenai pendeklarasian variabel Javascrip di klien yang kemudian diisi dengan elemen DOM sesuai ID yang diinginkan. Kita juga sudah belajar fungsi fetch() di Javascript untuk mengambil / meminta data dari server, kemudian memasukan hasilnya ke elemen HTML yang kita inginkan. 

Pada materi ini juga kita juga mengulangi penggunaan fungsi fs.readFile() untuk membaca file dan mengirim ke browser klien. Dan juga kita belajar mendefinisikan rute dari permintaan yaitu rute untuk permintaan ke root dan ke path /acak.

Penggunaan tipe data array juga sudah diperkenalkan, selain tipe data JSON dan objek yang pada materi sebelumnya sudah dibahas. Kita juga sudah mengerti cara membuat angka acak dengan menggunakan fungsi Math.floor() dan Math.random() yang tersedia di Javascript.  

Demikian materi latihan dengan contoh program teks acak di NodeJS Express. Semoga bermanfaat. 

Materi lainnya :

  

 


  

Next Post Previous Post
No Comment
Add Comment
comment url