🍭 NodeJS #16: Menampilkan Data API di Halaman Web (dengan EJS)
Halo, calon developer web! 👋
Di tutorial sebelumnya (NodeJS #15) kita sudah belajar cara mengambil data dari API eksternal menggunakan fetch. Sekarang saatnya kita menampilkan data tersebut di halaman web yang cantik menggunakan EJS. Kita akan menggabungkan kekuatan Express, EJS, dan fetch untuk membuat halaman dinamis yang menampilkan data dari API. Yuk, kita praktik! 🚀
🎯 Tujuan Tutorial
- Mengambil data dari API publik (JSONPlaceholder).
- Mengirim data tersebut ke file EJS.
- Menampilkan data dalam bentuk tabel dan kartu (cards).
- Menambahkan sedikit CSS agar tampilan menarik.
📁 Persiapan Proyek
Kita akan buat proyek baru atau lanjutkan dari proyek sebelumnya. Buat folder baru, inisialisasi npm, dan instal express, ejs, serta (opsional) axios.
mkdir tampil-api
cd tampil-api
npm init -y
npm install express ejs
npm install axios # opsional, bisa pakai fetchBuat struktur folder:
tampil-api/
├── node_modules/
├── views/
│ └── (file ejs akan dibuat)
├── public/
│ └── css/
│ └── style.css (opsional)
├── app.js
└── package.json📝 Membuat Server dan Route
Buat file app.js dengan kode dasar:
const express = require('express');
const app = express();
const port = 3000;
// Set EJS sebagai view engine
app.set('view engine', 'ejs');
// Middleware untuk file statis (CSS, gambar, dll)
app.use(express.static('public'));
// Route utama
app.get('/', (req, res) => {
res.send('<h1>Selamat datang</h1><p>Coba akses <a href="/users">/users</a> atau <a href="/users-card">/users-card</a></p>');
});
app.listen(port, () => {
console.log(`Server berjalan di http://localhost:${port}`);
});Jalankan dulu dengan node app.js untuk memastikan tidak error.
📦 Mengambil Data dari API
Kita akan menggunakan API JSONPlaceholder (https://jsonplaceholder.typicode.com/users) yang mengembalikan daftar pengguna palsu. Kita akan buat route /users yang mengambil data dan merender file EJS.
Tambahkan route berikut di app.js (sebelum app.listen):
app.get('/users', async (req, res) => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
res.render('users', { users });
} catch (error) {
res.status(500).send('Gagal mengambil data pengguna');
}
});Jika kamu lebih suka axios:
const axios = require('axios');
app.get('/users', async (req, res) => {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
res.render('users', { users: response.data });
} catch (error) {
res.status(500).send('Gagal mengambil data pengguna');
}
});async/await karena operasi mengambil data butuh waktu.
🎨 Membuat View EJS: Tabel
Buat folder views (jika belum ada). Di dalamnya, buat file users.ejs dengan kode:
<!DOCTYPE html>
<html>
<head>
<title>Daftar Pengguna</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>📋 Daftar Pengguna dari API</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Username</th>
<th>Email</th>
<th>Kota</th>
</tr>
</thead>
<tbody>
<% users.forEach(user => { %>
<tr>
<td><%= user.id %></td>
<td><%= user.name %></td>
<td><%= user.username %></td>
<td><%= user.email %></td>
<td><%= user.address.city %></td>
</tr>
<% }); %>
</tbody>
</table>
<p><a href="/">Kembali ke Beranda</a></p>
</body>
</html>Buat folder public/css dan file style.css untuk mempercantik tabel (opsional):
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: #2ecc71;
color: white;
padding: 10px;
}
td {
padding: 10px;
border-bottom: 1px solid #ddd;
}
tr:hover {
background: #f5f5f5;
}
a {
color: #2ecc71;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}Sekarang akses http://localhost:3000/users. Kamu akan melihat tabel berisi data pengguna dari API. Keren! 🎉
🃏 Menampilkan dalam Bentuk Kartu (Card)
Selain tabel, kita juga bisa menampilkan data dalam bentuk kartu yang lebih modern. Buat route baru /users-card di app.js:
app.get('/users-card', async (req, res) => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
res.render('users-card', { users });
} catch (error) {
res.status(500).send('Gagal mengambil data');
}
});Buat file views/users-card.ejs:
<!DOCTYPE html>
<html>
<head>
<title>Pengguna dalam Kartu</title>
<link rel="stylesheet" href="/css/style.css">
<style>
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin-top: 20px;
}
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
width: 250px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
background: white;
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.05);
}
.card h3 {
margin-top: 0;
color: #2ecc71;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.card p {
margin: 8px 0;
}
.card .label {
font-weight: bold;
color: #555;
}
</style>
</head>
<body>
<h1>🃏 Pengguna dalam Bentuk Kartu</h1>
<div class="card-container">
<% users.forEach(user => { %>
<div class="card">
<h3><%= user.name %></h3>
<p><span class="label">Username:</span> <%= user.username %></p>
<p><span class="label">Email:</span> <%= user.email %></p>
<p><span class="label">Telepon:</span> <%= user.phone %></p>
<p><span class="label">Website:</span> <%= user.website %></p>
<p><span class="label">Kota:</span> <%= user.address.city %></p>
</div>
<% }); %>
</div>
<p><a href="/">Kembali ke Beranda</a></p>
</body>
</html>Akses /users-card dan lihat hasilnya: data tampil dalam kartu-kartu yang menarik.
🌦️ Contoh Lain: Menampilkan Data Cuaca
Kita juga bisa menggabungkan dengan API cuaca. Misalnya, buat route /cuaca/:kota yang menampilkan data cuaca dalam bentuk kartu. (Ini hanya contoh, perlu API key OpenWeatherMap).
app.get('/cuaca/:kota', async (req, res) => {
const kota = req.params.kota;
const apiKey = 'API_KEY_KAMU'; // Ganti dengan key asli
const url = `https://api.openweathermap.org/data/2.5/weather?q=${kota}&appid=${apiKey}&units=metric`;
try {
const response = await fetch(url);
const data = await response.json();
res.render('cuaca', { kota, data });
} catch (error) {
res.status(500).send('Gagal mengambil data cuaca');
}
});Buat views/cuaca.ejs untuk menampilkan suhu, kelembaban, dll. (Tidak kita tulis detail di sini, bisa jadi latihan).
🧠 Tips Penting
- Selalu gunakan try-catch saat mengambil data dari API eksternal untuk menghindari server crash.
- Periksa struktur data yang dikembalikan API sebelum mencoba mengakses propertinya (misal
user.address.city). - Gunakan
res.status(500).send(...)untuk memberi tahu pengguna jika terjadi error. - Manfaatkan CSS untuk membuat tampilan lebih menarik.
🧪 Latihan Mandiri
- Buat route
/postsyang menampilkan daftar postingan dari JSONPlaceholder (/posts) dalam bentuk kartu (tampilkan title dan body). - Tambahkan form pencarian di halaman
/usersuntuk memfilter pengguna berdasarkan nama (filter dilakukan di frontend menggunakan JavaScript, atau di backend dengan memanfaatkan parameter query). - Gunakan API publik lain (misal API berita atau API film) dan tampilkan data dengan gaya card.
📚 Rangkuman
| Langkah | Deskripsi |
|---|---|
| 1. Ambil data dari API | Gunakan fetch atau axios di dalam route. |
| 2. Kirim data ke view | res.render('namaFile', { data }) |
| 3. Tampilkan di EJS | Looping dengan <% %> dan tampilkan nilai dengan <%= %> |
| 4. Styling | Gunakan CSS (file statis) untuk mempercantik tampilan. |
🏁 Penutup
Sekarang kamu sudah bisa membuat halaman web dinamis yang menampilkan data dari API eksternal. Ini adalah kemampuan yang sangat berguna untuk membangun aplikasi dunia nyata. Di tutorial selanjutnya (NodeJS #17) kita akan belajar membuat API sendiri dengan Express – langkah awal menjadi backend developer. 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.