NodeJS #21: Menampilkan Data dari File JSON di Halaman Web

byFerdian Rahabista -
0

🍭 NodeJS #21: Menampilkan Data dari File JSON di Halaman Web

Halo, calon full-stack developer! 👋

Di tutorial sebelumnya (NodeJS #20) kita sudah belajar menyimpan data ke file JSON melalui API POST. Sekarang saatnya kita menampilkan data tersebut di halaman web yang cantik menggunakan EJS. Kita akan membaca file JSON, mengirim datanya ke template EJS, lalu merender-nya menjadi HTML. Dengan ini, kita bisa membuat website dinamis yang datanya tersimpan permanen di file. Yuk, kita praktik! 🚀

🎯 Apa yang Akan Kita Buat?

  • Membaca file buah.json yang berisi daftar buah.
  • Membuat route /buah yang membaca file tersebut.
  • Mengirim data buah ke template EJS.
  • Menampilkan data dalam bentuk tabel atau kartu (cards) di halaman web.
  • Menambahkan styling sederhana dengan CSS.

📁 Persiapan Proyek

Buat folder baru, misal tampil-json. Inisialisasi npm dan instal express serta ejs:

npm init -y
npm install express ejs

Buat struktur folder seperti berikut:

tampil-json/
├── data/
│   └── buah.json
├── views/
│   └── buah.ejs
├── public/
│   └── css/
│       └── style.css (opsional)
├── app.js
└── package.json

Isi file data/buah.json dengan data contoh (atau biarkan kosong, nanti kita isi manual):

[
  { "id": 1, "nama": "Apel", "warna": "Merah", "harga": 5000 },
  { "id": 2, "nama": "Jeruk", "warna": "Oranye", "harga": 7000 },
  { "id": 3, "nama": "Mangga", "warna": "Kuning", "harga": 10000 }
]

📝 Membuat Server dan Konfigurasi EJS

Buka app.js dan tulis kode dasar:

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 3000;

// Set EJS sebagai view engine
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Middleware untuk file statis (CSS, gambar)
app.use(express.static(path.join(__dirname, 'public')));

// Path ke file data
const dataFile = path.join(__dirname, 'data', 'buah.json');

// Fungsi untuk membaca data (dengan error handling)
function bacaData() {
  try {
    const data = fs.readFileSync(dataFile, 'utf8');
    return JSON.parse(data);
  } catch (err) {
    console.error('Gagal membaca file:', err);
    return []; // Kembalikan array kosong jika error
  }
}

// Route untuk menampilkan data buah
app.get('/buah', (req, res) => {
  const buah = bacaData();
  res.render('buah', { buah });
});

app.listen(port, () => {
  console.log(`Server berjalan di http://localhost:${port}`);
});

Penjelasan:

  • app.set('view engine', 'ejs') – memberitahu Express bahwa kita menggunakan EJS.
  • app.set('views', ...) – menentukan folder tempat menyimpan file EJS (defaultnya sudah views, tapi kita tulis eksplisit).
  • express.static – melayani file statis seperti CSS.
  • Fungsi bacaData() membaca file JSON dan mengembalikan array. Jika gagal (file belum ada), kembalikan array kosong.
  • Route /buah membaca data, lalu memanggil res.render('buah', { buah }) untuk merender file buah.ejs dengan mengirim variabel buah.

🎨 Membuat Template EJS

Buat file views/buah.ejs. Kita akan buat dua versi: tabel dan kartu. Pilih salah satu atau keduanya. Kita mulai dengan tabel yang sederhana.

<!DOCTYPE html>
<html>
<head>
    <title>Daftar Buah</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>🍎 Daftar Buah dari File JSON</h1>

    <% if (buah.length === 0) { %>
        <p>Belum ada data buah. Silakan tambah data terlebih dahulu.</p>
    <% } else { %>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nama</th>
                    <th>Warna</th>
                    <th>Harga</th>
                </tr>
            </thead>
            <tbody>
                <% buah.forEach(b => { %>
                <tr>
                    <td><%= b.id %></td>
                    <td><%= b.nama %></td>
                    <td><%= b.warna %></td>
                    <td>Rp <%= b.harga.toLocaleString() %></td>
                </tr>
                <% }); %>
            </tbody>
        </table>
    <% } %>

    <p><a href="/">Kembali ke Beranda</a></p>
</body>
</html>

Penjelasan kode EJS:

  • <% if (buah.length === 0) { %> – mengecek apakah array kosong.
  • <% buah.forEach(b => { %> – melakukan looping untuk setiap buah.
  • <%= b.nama %> – menampilkan nilai variabel.
  • b.harga.toLocaleString() – memformat angka dengan pemisah ribuan.

Buat file CSS sederhana di public/css/style.css untuk mempercantik tabel:

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background: #f4f4f4;
}
h1 {
    color: #333;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
th {
    background: #3498db;
    color: white;
    padding: 10px;
}
td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}
tr:hover {
    background: #f5f5f5;
}
a {
    color: #3498db;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

Jalankan server dengan node app.js dan buka http://localhost:3000/buah. Kamu akan melihat tabel berisi data buah dari file JSON.

🃏 Menampilkan dalam Bentuk Kartu (Cards)

Jika ingin tampilan lebih modern, kita bisa buat versi kartu. Buat file baru views/buah-card.ejs (atau ganti yang lama). Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Daftar Buah (Card)</title>
    <link rel="stylesheet" href="/css/style-card.css">
</head>
<body>
    <h1>🍇 Daftar Buah dalam Kartu</h1>

    <% if (buah.length === 0) { %>
        <p>Belum ada data buah.</p>
    <% } else { %>
        <div class="card-container">
            <% buah.forEach(b => { %>
            <div class="card">
                <h3><%= b.nama %></h3>
                <p><strong>Warna:</strong> <%= b.warna %></p>
                <p><strong>Harga:</strong> Rp <%= b.harga.toLocaleString() %></p>
            </div>
            <% }); %>
        </div>
    <% } %>
</body>
</html>

Buat file CSS public/css/style-card.css:

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background: #f4f4f4;
}
h1 {
    text-align: center;
    color: #333;
}
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 15px;
    width: 200px;
    text-align: center;
    transition: transform 0.2s;
}
.card:hover {
    transform: scale(1.05);
}
.card h3 {
    margin-top: 0;
    color: #3498db;
}
.card p {
    margin: 8px 0;
}

Jangan lupa buat route baru di app.js untuk menampilkan halaman kartu, misal:

app.get('/buah-card', (req, res) => {
  const buah = bacaData();
  res.render('buah-card', { buah });
});

📂 Menangani File Tidak Ada atau Rusak

Pada fungsi bacaData() kita sudah menambahkan try-catch. Jika file belum ada, kita kembalikan array kosong. Ini akan menampilkan pesan "Belum ada data". Kamu juga bisa membuat file JSON otomatis jika belum ada dengan menulis array kosong ke file.

function bacaData() {
  try {
    const data = fs.readFileSync(dataFile, 'utf8');
    return JSON.parse(data);
  } catch (err) {
    // Jika file tidak ada, buat file dengan array kosong
    if (err.code === 'ENOENT') {
      fs.writeFileSync(dataFile, '[]');
      return [];
    }
    console.error(err);
    return [];
  }
}

🧪 Latihan Mandiri

  1. Buat file data/siswa.json berisi data siswa (id, nama, kelas, nilai).
  2. Buat route /siswa yang menampilkan data dalam tabel.
  3. Buat route /siswa-card yang menampilkan dalam bentuk kartu.
  4. Tambahkan styling dengan CSS agar lebih menarik.
  5. Jika file belum ada, tampilkan pesan bahwa data kosong.

📚 Rangkuman

Langkah Deskripsi
1. Baca file JSON Gunakan fs.readFileSync atau fs.readFile (async) dengan error handling.
2. Parse JSON JSON.parse(data) mengubah string menjadi array/objek JavaScript.
3. Kirim ke view res.render('namaFile', { data })
4. Tampilkan di EJS Gunakan <% %> untuk logika dan <%= %> untuk output.

🏁 Penutup

Sekarang kamu sudah bisa menampilkan data dari file JSON di halaman web menggunakan EJS. Dengan ini, kamu bisa membuat aplikasi web sederhana yang datanya tersimpan permanen. Di tutorial selanjutnya (NodeJS #22) kita akan belajar koneksi ke database (opsional) – pengenalan MongoDB atau MySQL. Sampai jumpa!

Jangan lupa untuk mencoba latihan dan bereksperimen sendiri. Kalau ada pertanyaan, tulis di komentar. Selamat coding! 💻😊

Ditulis dengan ❤️ untuk para pemula yang ingin menjadi programmer handal.

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال