Modul Belajar: Bikin Web Dashboard Otomatis

1. Kenalan dengan Web Dinamis

Halo! Di materi sebelumnya kalian sudah belajar cara membuat kerangka web pakai HTML. Tapi sadar gak sih, web yang cuma pakai HTML itu sifatnya statis? Artinya, kalau mau mengubah atau menambah data, kita terpaksa bongkar dan ketik ulang kode HTML-nya satu-satu. Repot banget, kan?

Di materi ini, kita akan belajar cara menggabungkan HTML dan JavaScript supaya bisa bikin Dashboard Web yang bisa mengolah data mentah dari komputer secara otomatis dan instan tanpa diketik manual!

2. Otak di Balik Layar: JavaScript & DOM

Untuk menghubungkan data logika ke dalam tampilan HTML, kita menggunakan fitur bawaan browser bernama DOM (Document Object Model). Cara kerjanya simpel: JavaScript bertugas mencari elemen HTML berdasarkan ID-nya, lalu menembakkan data baru ke dalamnya.

Senjata Utama Kita Hari Ini:

• const data = [...] → Tempat kita menyimpan kumpulan data (disebut sebagai Array of Objects).
• document.getElementById("nama-id") → Tangan robot JavaScript untuk memegang elemen HTML yang mau diubah.
• .innerHTML += ... → Cara JavaScript menyuntikkan atau menambah tag HTML baru secara otomatis dari dalam kode script.

3. Trik Looping Otomatis (forEach)

Bayangkan jika sekolah punya 100 data nilai siswa. Apakah kita harus mengetik tag tabel <tr><td> sebanyak 100 kali? Tentu tidak! Kita cukup pakai jurus perulangan JavaScript bernama forEach.

Konsep dasarnya seperti menyuruh komputer: “Buka kotak data_siswa, lalu untuk setiap siswa yang kamu temukan di dalam, buatkan satu baris tabel baru!”

Bentuk Kodenya:

data_siswa.forEach(function(siswa) {
    // Apapun kode di sini akan diulang sebanyak jumlah data siswa
    console.log(siswa.nama); 
});

4. Membuat Browser Berpikir (If-Else)

Dashboard kita tidak cuma menampilkan data, tapi juga harus pintar menentukan siapa siswa yang LULUS atau harus REMEDIAL berdasarkan batas KKM (misalnya nilai 70).

Kita gunakan logika if-else matematika sederhana:

if (siswa.nilai >= 70) {
    statusText = "LULUS";
} else {
    statusText = "REMEDIAL";
}

5. Struktur Kode Lengkap & Teruji

Berikut adalah template utuh. Perhatikan bagaimana tag <script> di bawah memproses data dan langsung memasukkannya ke dalam <tbody id="konten-tabel"> secara otomatis.

<!DOCTYPE html>
<html>
<head>
    <title>Dashboard Nilai Mandiri</title>
    <style>
        table { border-collapse: collapse; width: 100%; text-align: left; }
        th, td { border: 1px solid #cbd5e1; padding: 12px; }
        th { background-color: #f1f5f9; }
        .lulus { color: green; font-weight: bold; }
        .remedial { color: red; font-weight: bold; }
    </style>
</head>
<body>

    <h2>DASHBOARD NILAI INFORMATIKA</h2>
    
    <table>
        <thead>
            <tr>
                <th>Nama</th>
                <th>Nilai</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody id="konten-tabel">
            <!-- JavaScript akan mengisi baris di sini secara otomatis -->
        </tbody>
    </table>

    <script>
        // 1. Kumpulan Data Mentah (Simulasi Backend)
        const data_siswa = [
            { nama: "Ahmad", nilai: 85 },
            { nama: "Budi", nilai: 62 },
            { nama: "Citra", nilai: 78 },
            { nama: "Dina", nilai: 55 }
        ];

        // 2. Ambil elemen tabel target
        const tabelBody = document.getElementById("konten-tabel");

        // 3. Jalankan Perulangan Otomatis
        data_siswa.forEach(function(siswa) {
            let statusText = "";
            let warnaKelas = "";

            // 4. Logika Penentu Kelulusan (KKM = 70)
            if (siswa.nilai >= 70) {
                statusText = "LULUS";
                warnaKelas = "lulus";
            } else {
                statusText = "REMEDIAL";
                warnaKelas = "remedial";
            }

            // 5. Cetak langsung menjadi baris tabel baru (Tanpa tanda backslash)
            tabelBody.innerHTML += `
                
                    ${siswa.nama}
                    ${siswa.nilai}
                    ${statusText}
                
            `;
        });
    </script>
</body>
</html>