Artikel dummy ini dibuat khusus untuk menguji fitur floating Table of Contents, struktur Heading, Subheading, Minor Heading, reading progress, estimasi waktu baca, serta advanced code block pada template KumanLabs.
Dalam contoh ini kita akan membuat aplikasi sederhana bernama Server Status Dashboard. Aplikasi menggunakan HTML, CSS, JavaScript, dan data server sederhana.
Persiapan Project
Sebelum mulai membuat aplikasi, buat sebuah folder project baru. Kita akan memisahkan HTML, CSS, dan JavaScript agar struktur aplikasi lebih mudah dipahami.
Struktur Folder
Gunakan struktur folder berikut:
:::code text filename="project-structure.txt"
server-dashboard/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── app.js
└── data/
└── servers.json
:::
Komponen Aplikasi
Dashboard akan mempunyai beberapa komponen seperti header, summary status, daftar server, latency, dan status online atau offline.
Header
Header digunakan untuk menampilkan nama aplikasi dan deskripsi singkat.
Server Card
Server Card akan menampilkan hostname, IP address, role server, latency, dan status server.
Membuat Struktur HTML
File utama aplikasi adalah index.html. File ini menjadi entry point yang akan dibuka oleh browser.
Membuat HTML Dasar
Tambahkan kode berikut ke file index.html:
:::code html filename="index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server Status Dashboard</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Server Status Dashboard</h1>
<p>Simple Infrastructure Monitoring</p>
</header>
<main>
<section class="summary">
<div>
<span>Total Server</span>
<strong id="total-server">0</strong>
</div>
<div>
<span>Online</span>
<strong id="online-server">0</strong>
</div>
<div>
<span>Offline</span>
<strong id="offline-server">0</strong>
</div>
</section>
<section>
<h2>Infrastructure Status</h2>
<button id="refresh-button">Refresh</button>
<div id="server-list"></div>
</section>
</main>
<script src="js/app.js"></script>
</body>
</html>
:::
Semantic HTML
Pada contoh tersebut kita menggunakan elemen seperti header, main, dan section. Semantic HTML membuat struktur halaman lebih mudah dipahami oleh developer maupun browser.
Membuat Tampilan Dashboard
Setelah struktur HTML selesai, langkah berikutnya adalah menambahkan CSS agar dashboard terlihat lebih rapi.
Styling Layout Utama
Buat file css/style.css kemudian tambahkan kode berikut:
:::code css filename="style.css"
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f4f6f8;
color: #263238;
}
main {
width: min(1100px, calc(100% - 40px));
margin: 30px auto;
}
.summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 30px;
}
.server-card {
background: #ffffff;
padding: 20px;
margin-bottom: 16px;
border-radius: 8px;
}
@media (max-width: 700px) {
.summary {
grid-template-columns: 1fr;
}
}
:::
Styling Status Server
Selanjutnya tambahkan indikator visual untuk membedakan server online dan offline.
:::code css filename="style.css"
.server-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: bold;
}
.server-status::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
}
.server-status.online::before {
background: green;
}
.server-status.offline::before {
background: red;
}
:::
Responsive Layout
Minor Heading ini menggunakan elemen h4. Bagian ini sengaja dibuat untuk memastikan bahwa H4 tidak muncul pada floating TOC.
Menyiapkan Dummy Data
Dashboard memerlukan data server. Karena aplikasi ini hanya digunakan sebagai dummy, kita akan menggunakan file JSON statis.
Membuat File JSON
Buat file bernama servers.json.
:::code json filename="servers.json"
[
{
"hostname": "DC01",
"ip": "192.168.10.10",
"role": "Domain Controller",
"status": "online",
"latency": 2
},
{
"hostname": "MECM01",
"ip": "192.168.10.20",
"role": "MECM Primary Site",
"status": "online",
"latency": 4
},
{
"hostname": "SQL01",
"ip": "192.168.10.30",
"role": "SQL Server",
"status": "online",
"latency": 3
},
{
"hostname": "NAS01",
"ip": "192.168.10.40",
"role": "File Server",
"status": "offline",
"latency": 0
}
]
:::
Informasi Server
Setiap object mempunyai hostname, IP address, role, status, dan latency.
Hostname dan IP Address
Hostname digunakan sebagai identifier server yang mudah dibaca, sedangkan IP address menunjukkan alamat server pada jaringan.
Status dan Latency
Status menunjukkan apakah server online atau offline, sedangkan latency digunakan untuk mensimulasikan response time.
Membaca Data dengan JavaScript
JavaScript akan membaca data dari file JSON kemudian membuat daftar server secara dinamis.
Membuat Fungsi Load Server
:::code javascript filename="app.js"
async function loadServers() {
const response = await fetch("data/servers.json");
if (!response.ok) {
throw new Error("Failed to load server data");
}
const servers = await response.json();
renderServers(servers);
updateSummary(servers);
}
:::
Fungsi fetch() mengambil file JSON kemudian mengubah response menjadi JavaScript object.
Menampilkan Server Card
:::code javascript filename="app.js"
function renderServers(servers) {
const container = document.getElementById("server-list");
container.innerHTML = "";
servers.forEach(function(server) {
const card = document.createElement("article");
card.className = "server-card";
card.innerHTML =
"<h3>" + server.hostname + "</h3>" +
"<p><strong>IP:</strong> " + server.ip + "</p>" +
"<p><strong>Role:</strong> " + server.role + "</p>" +
"<p><strong>Latency:</strong> " + server.latency + " ms</p>" +
"<span class='server-status " + server.status + "'>" +
server.status +
"</span>";
container.appendChild(card);
});
}
:::
Menghitung Summary
:::code javascript filename="app.js"
function updateSummary(servers) {
const online = servers.filter(function(server) {
return server.status === "online";
}).length;
const offline = servers.filter(function(server) {
return server.status === "offline";
}).length;
document.getElementById("total-server").textContent = servers.length;
document.getElementById("online-server").textContent = online;
document.getElementById("offline-server").textContent = offline;
}
:::
Menambahkan Tombol Refresh
Dashboard monitoring biasanya memiliki mekanisme refresh. Kita dapat mensimulasikannya menggunakan tombol sederhana.
Menambahkan Event Listener
:::code javascript filename="app.js"
const refreshButton = document.getElementById("refresh-button");
refreshButton.addEventListener("click", async function() {
refreshButton.disabled = true;
refreshButton.textContent = "Refreshing...";
try {
await loadServers();
}
catch (error) {
console.error(error);
}
finally {
refreshButton.disabled = false;
refreshButton.textContent = "Refresh";
}
});
loadServers();
:::
Menangani Error
Pada aplikasi production, error sebaiknya tidak hanya ditampilkan melalui browser console.
:::code javascript filename="app.js"
function showError(message) {
const container = document.getElementById("server-list");
container.innerHTML =
"<div class='error-message'>" +
"<strong>Unable to load data.</strong>" +
"<p>" + message + "</p>" +
"</div>";
}
:::
Menguji Aplikasi
Karena aplikasi menggunakan fetch(), project sebaiknya dijalankan melalui local web server.
Menjalankan dengan Python
Jika Python sudah terinstal, buka terminal pada directory project dan jalankan:
:::code bash filename="terminal"
python -m http.server 8080
:::
Kemudian buka browser dan akses http://localhost:8080.
Memeriksa Port dengan PowerShell
Pada Windows, kita dapat mengecek apakah port 8080 sudah digunakan dengan PowerShell.
:::code powershell filename="Check-Port.ps1"
$Port = 8080
$Connection = Get-NetTCPConnection `
-LocalPort $Port `
-ErrorAction SilentlyContinue
if ($Connection) {
Write-Host "Port $Port is already in use"
}
else {
Write-Host "Port $Port is available"
}
:::
Troubleshooting
Bagian troubleshooting ini juga berguna untuk menguji floating TOC ketika artikel memiliki banyak section.
JSON Tidak Bisa Dimuat
Jika browser tidak dapat mengambil file servers.json, pastikan path file benar dan aplikasi dijalankan melalui HTTP server.
CSS Tidak Terload
Periksa kembali struktur directory.
:::code text filename="required-paths.txt"
css/style.css
js/app.js
data/servers.json
:::
Dashboard Kosong
Buka Developer Tools kemudian periksa tab Console dan Network.
Contoh Error
:::code text filename="browser-console.txt"
GET http://localhost:8080/data/servers.json 404 (Not Found)
Uncaught Error: Failed to load server data
:::
Pengujian Table of Contents
Section ini sengaja ditambahkan untuk memastikan floating TOC bekerja sesuai struktur heading yang telah kita standarkan.
Heading H2
Semua elemen h2 merupakan bagian utama artikel dan harus tampil sebagai item utama dalam Table of Contents.
Subheading H3
Semua elemen h3 merupakan child dari H2 sebelumnya dan harus tampil sebagai nested item.
Minor Heading H4
Heading ini adalah H4 dan tidak boleh muncul pada Table of Contents.
Scrollspy
Ketika halaman di-scroll, item TOC yang sesuai dengan section yang sedang dibaca seharusnya berubah menjadi status aktif.
Kesimpulan
Artikel dummy ini memiliki struktur H2, H3, dan H4 yang cukup panjang untuk menguji floating Table of Contents pada template KumanLabs.
H2 dan H3 seharusnya muncul pada TOC, sedangkan H4 tetap menjadi bagian struktur artikel tetapi tidak ditampilkan pada TOC.
Artikel ini juga berisi beberapa jenis blok kode sehingga dapat digunakan sekaligus untuk menguji syntax highlighting, line number, Copy, Download, Wrap, Collapse, reading time, dan reading progress.
:::toc enable
Post a Comment for "Artikel Dummy: Membangun Aplikasi Web Sederhana dengan HTML, CSS, dan JavaScript"
Post a Comment