Home Coding Cara Membuat Dashboard HTML CSS & JavaScript (Tutorial Lengkap + Kode)

Cara Membuat Dashboard HTML CSS & JavaScript (Tutorial Lengkap + Kode)

Farhan Hidayat 14 Februari 2025 10 min read

Banyak developer pemula ingin membuat dashboard web sendiri, tetapi sering bingung harus mulai dari mana. Apakah cukup dengan HTML dan CSS saja, atau harus pakai JavaScript juga?

Tenang, di artikel ini kamu akan belajar cara membuat dashboard HTML CSS dari nol dengan langkah yang sederhana. Selain itu, kamu juga akan melihat contoh struktur kode serta cara menambahkan sedikit JavaScript agar dashboard terlihat lebih interaktif.

Kenapa Dashboard Web Penting untuk Website atau Aplikasi?

Sebelum masuk ke tutorial, penting untuk memahami dulu kenapa dashboard sering digunakan dalam berbagai aplikasi.

Apa Itu Dashboard Web?

Dashboard adalah halaman utama yang menampilkan informasi penting dalam satu tempat. Biasanya dashboard berisi statistik, menu navigasi, dan ringkasan data.

Also Read: Roadmap Web Developer dari Nol hingga Bisa Ngoding dalam 3 Bulan

Misalnya, dashboard admin website sering menampilkan:

jumlah pengguna
statistik pengunjung
laporan aktivitas terbaru

Karena itu, dashboard membantu pengguna melihat informasi penting dengan cepat.

Contoh Penggunaan Dashboard

Saat ini dashboard digunakan di banyak sistem, seperti:

Also Read: Cara Membuat Strongest Password Generator Python Sederhana

dashboard admin website
dashboard aplikasi SaaS
dashboard analitik data
dashboard manajemen bisnis

Dengan kata lain, dashboard berfungsi sebagai pusat kontrol sebuah aplikasi.

Teknologi yang Digunakan

Untuk membuat dashboard sederhana, biasanya developer menggunakan:

HTML untuk struktur halaman
CSS untuk tampilan dan desain
JavaScript untuk interaksi

Kombinasi ini sudah cukup untuk membuat dashboard web yang rapi dan modern.

Also Read: Cara Membuat Program Kasir Sederhana dengan Fitur Hitung Diskon

Persiapan Sebelum Membuat Dashboard HTML CSS

Sebelum mulai coding, ada beberapa hal yang perlu disiapkan terlebih dahulu.

Tools yang Dibutuhkan

Pertama, siapkan editor kode seperti VS Code atau editor lain yang kamu sukai. Selain itu, kamu juga membutuhkan browser seperti Chrome atau Firefox untuk melihat hasilnya.

Namun yang paling penting adalah memahami dasar HTML dan CSS.

Also Read: Baru Tahu? Ternyata Kalkulator Sederhana Python Bisa Dibuat dalam 5 Menit!

Struktur Folder Project

Supaya project lebih rapi, gunakan struktur sederhana seperti ini:

project-dashboard
│
├── index.html
├── style.css
└── script.js

Dengan struktur ini, kode akan lebih mudah dikelola saat project mulai berkembang.

Sebelum masuk ke tahap coding, kamu bisa melihat dulu demo tampilan dashboard yang akan kita buat. Jalankan kodenya di laptop agar pengalaman melihat tampilannya lebih maksimal, sekaligus melihat bagaimana desain responsifnya bekerja.

Also Read: Contoh Program Python Web yang Menggunakan Input dan Output Data

Live Priview

Langkah Membuat Struktur Dashboard HTML (Kode Lengkap)

1. Membuat Struktur HTML

Buka text editor dan buat file index.html lalu tambahkan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script defer src="script.js"></script>
</head>
<body>
    <div class="sidebar">
        <h2>Dashboard</h2>
        <ul>
            <li><a href="#">🏠 Home</a></li>
            <li><a href="#">📊 Analytics</a></li>
            <li><a href="#">⚙️ Settings</a></li>
        </ul>
    </div>

    <div class="main-content">
        <header>
            <input type="text" id="search" placeholder="Search...">
            <div class="profile">
                👤
                <div class="dropdown-menu">
                    <a href="#">Settings</a>
                    <a href="#">Logout</a>
                </div>
            </div>

               <div class="activity-log">
    <div class="activity-item">
        <span class="activity-icon">👤</span> User A signed in
    </div>
    <div class="activity-item">
        <span class="activity-icon">📦</span> New order placed
    </div>
</div>


            <button id="dark-mode-toggle">🌙</button>
            <button id="toggle-sidebar">☰</button>
        </header>

        <section class="stats">
            <div class="card">Total Users: <span id="users">1200</span> <span class="badge">+5%</span></div>
            <div class="card">Sales: <span id="sales">$50K</span></div>
        </section>

        <section class="chart">
            <canvas id="chart"></canvas>
        </section>

        <section class="table-container">
            <table id="data-table">
                <thead>
                    <tr>
                        <th onclick="sortTable(0)">Name</th>
                        <th onclick="sortTable(1)">Sales</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>John</td><td>$5000</td></tr>
                    <tr><td>Jane</td><td>$7000</td></tr>
                </tbody>
            </table>
        </section>
    </div>

    <div class="notifications">
        🔔 <span class="badge">3</span>
    </div>
</body>
</html>

2. Styling Dashboard dengan CSS

Buat file style.css dan tambahkan kode berikut agar tampilan dashboard lebih menarik:

body {
    display: flex;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    height: 100vh;
}

.sidebar {
    width: 250px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    padding: 20px;
}

.sidebar h2 {
    text-align: center;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    padding: 10px;
}

.sidebar ul li a {
    color: white;
    text-decoration: none;
}

.sidebar ul li:hover {
    background-color: #2980b9;
    transition: background-color 0.3s ease;
    border-radius: 4px;
}

.main-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
}


header {
    display: flex;
    justify-content: space-between;  /* Mengatur jarak antar elemen secara merata */
    align-items: center;
    background: linear-gradient(135deg, #ecf0f1, #bdc3c7);
    padding: 10px 20px; /* Menambah padding agar lebih lebar */
    border-radius: 5px;
    margin-bottom: 20px;
    
}

header #dark-mode-toggle, header #toggle-sidebar {
    margin: 0 5px; /* Mengatur jarak antar elemen */
    background: #ffffff;
    border-radius: 3px;
}

header #dark-mode-toggle {
    margin-left: 10px; /* Memberikan sedikit jarak antara dark mode dan toggle */
}

header input[type="text"] {
    padding: 10px;
    width: 250px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-right: 10px; /* Memberikan jarak antara search dan elemen lainnya */
}

header button {
    background-color: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #333;
}

header button:hover {
    color: #3498db; /* Memberikan efek hover */
}


input[type="text"] {
    padding: 10px;
    width: 250px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.stats {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.card {
    background: #3498db;
    color: white;
    padding: 20px;
    border-radius: 5px;
    flex: 1;
    text-align: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
}

.badge {
    background: #27ae60;
    color: white;
    padding: 5px;
    border-radius: 15px;
    font-size: 10px;
    margin-left: 10px;
}

.chart {
    margin-top: 20px;
    width: 100%;
    height: 300px; /* Memberikan batasan tinggi pada grafik */
}


.table-container {
    margin-top: 30px;
    overflow-x: auto;
}

.table-container {
    margin-top: 30px;
    max-width: 100%;
    overflow-x: auto; /* Agar tabel bisa digulir secara horizontal */
    margin-bottom: 30px; /* Memberikan jarak agar tidak terlalu rapat dengan elemen lain */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px; /* Menambahkan jarak antara grafik dan tabel */
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

th {
    background: #3498db;
    color: white;
}

table tr:hover {
    background-color: #f0f0f0; /* Memberikan efek hover pada baris tabel */
}



.notifications {
    position: absolute; /* Posisi diatur dengan absolute */
    left: 20px; /* Jarak dari kiri */
    right: 98%; /* Menyejajarkan dengan tengah */
    bottom: 90px;
    transform: translateY(-50%); /* Memastikan elemen tetap berada di tengah vertikal */
}

.notifications .badge {
    background: red;
    color: white;
    border-radius: 50%;
    padding: 3px;
    font-size: 12px;
    position: absolute;
    top: -5px;
    right: -5px;
}

.activity-log {
    position: absolute;
    bottom: 20px; /* Jarak dari bawah */
    left: 10px; /* Jarak dari kiri */
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 100%; /* Agar tidak tumpang tindih */
    max-width: 250px; /* Sesuaikan dengan lebar sidebar */
}

.activity-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
}

.activity-icon {
    margin-right: 10px; /* Memberikan jarak antara ikon dan teks */
}


/***************************************** dark mode ****************************************/

.dark-mode {
    background-color: #1e1e1e;
    color: white;
}

.dark-mode .sidebar {
    background: #141414;
}

.dark-mode .card {
    background: #333;
}

.dark-mode #chart {
    color: #ffffff;
}



/***************************************** Dropdown ****************************************/

.profile {
    position: relative;
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    background: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px;
}

.dropdown-menu a {
    display: block;
    padding: 5px;
    text-decoration: none;
    color: black;
}

.profile:hover .dropdown-menu {
    display: block;
}

/*****************************************  Sembunyikan Sidebar ****************************************/

.hidden {
    display: none;
}

@media (max-width: 768px) {
    .stats {
        flex-direction: column; /* Menjadikan statistik tampil vertikal pada perangkat kecil */
    }

    .card {
        width: 100%;
        margin-bottom: 10px; /* Menambah jarak antar card */
    }

    .table-container {
        margin-top: 20px;
        overflow-x: auto; /* Menambahkan kemampuan scroll pada tabel */
    }

    table {
        font-size: 12px; /* Menurunkan ukuran font tabel untuk layar kecil */
    }

    .chart {
        width: 100%;
        height: 250px; /* Menyesuaikan tinggi grafik pada layar kecil */
    }
}

3. Membuat Grafis Interaktif dengan JavaScript & Chart.js

Buat file script.js dan tambahkan kode berikut untuk memberikan efek interaktif:

document.addEventListener("DOMContentLoaded", function() {
    const usersElement = document.getElementById("users");
    const salesElement = document.getElementById("sales");
    
    // Simulasi update data setiap 3 detik
    setInterval(() => {
        let newUsers = Math.floor(Math.random() * 2000); // Menghasilkan angka acak untuk jumlah pengguna
        let newSales = `$${(Math.random() * 100).toFixed(2)}K`; // Menghasilkan angka acak untuk sales
        usersElement.textContent = newUsers;
        salesElement.textContent = newSales;
    }, 3000);
    
    // Grafik dengan Chart.js
    const ctx = document.getElementById("chart").getContext("2d"); // Mendapatkan konteks dari canvas dengan id chart
    new Chart(ctx, {
        type: "line",
        data: {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], // Label untuk grafik
            datasets: [{
                label: "Sales Trend",
                data: [10, 25, 40, 30, 50, 70], // Data untuk grafik
                borderColor: "#3498db", // Warna garis grafik
                fill: false // Tidak mengisi area di bawah grafik
            }]
        },
        options: {
            responsive: true // Membuat grafik responsif pada ukuran layar
        }
    });

    // Dark Mode Toggle
    document.getElementById("dark-mode-toggle").addEventListener("click", function() {
        document.body.classList.toggle("dark-mode"); // Menambahkan atau menghapus kelas dark-mode pada body
    });

    // Sidebar Toggle
    document.getElementById("toggle-sidebar").addEventListener("click", function() {
        document.querySelector(".sidebar").classList.toggle("hidden"); // Menyembunyikan atau menampilkan sidebar
    });

    // Notifications
    const notifications = document.querySelector(".notifications");
    if (notifications) {
        notifications.addEventListener("click", function() {
            alert("3 New Notifications!"); // Menampilkan alert ketika notifikasi diklik
        });
    }

    // Sort Table (Mengurutkan tabel berdasarkan kolom yang dipilih)
    function sortTable(column) {
        let table = document.getElementById("data-table");
        let rows = Array.from(table.rows).slice(1); // Mengambil semua baris kecuali header
        rows.sort((a, b) => {
            let cellA = a.cells[column].innerText.trim(); // Mengambil teks dari cell di kolom yang dipilih
            let cellB = b.cells[column].innerText.trim(); 
            // Mengecek jika data berupa angka atau teks
            return isNaN(cellA) ? cellA.localeCompare(cellB) : parseFloat(cellA) - parseFloat(cellB);
        });
        rows.forEach(row => table.appendChild(row)); // Menyusun ulang baris di tabel berdasarkan hasil sorting
    }

    // Search Filter (Filter pencarian untuk tabel)
    const searchInput = document.getElementById("search");
    if (searchInput) {
        searchInput.addEventListener("keyup", function() {
            let filter = this.value.toLowerCase(); // Mengambil nilai input pencarian
            let rows = document.querySelectorAll("#data-table tbody tr"); // Mengambil semua baris tabel
            rows.forEach(row => {
                row.style.display = row.textContent.toLowerCase().includes(filter) ? "" : "none"; // Menyembunyikan atau menampilkan baris berdasarkan filter
            });
        });
    }
});

Kesalahan yang Sering Terjadi Saat Membuat Dashboard

Banyak pemula melakukan beberapa kesalahan berikut:

Struktur HTML tidak rapi
Semua kode ditaruh dalam satu file
CSS terlalu rumit
Layout tidak responsif

Karena itu, usahakan selalu memisahkan file HTML, CSS, dan JavaScript agar project lebih mudah dikelola.

Tips Biar Dashboard Terlihat Lebih Profesional

Jika ingin membuat dashboard terlihat lebih modern, kamu bisa mencoba beberapa tips berikut.

Pertama, gunakan icon library seperti Font Awesome untuk menu navigasi.

Kedua, tambahkan grafik menggunakan Chart.js agar dashboard terlihat lebih informatif.

Ketiga, gunakan warna yang konsisten supaya desain terlihat lebih profesional.

Terakhir, buat layout yang responsif agar dashboard tetap nyaman digunakan di berbagai ukuran layar.

Kesimpulan

Mempelajari cara membuat dashboard HTML CSS sebenarnya tidak terlalu sulit. Dengan memahami struktur HTML, desain menggunakan CSS, serta sedikit interaksi JavaScript, kamu sudah bisa membuat dashboard web sederhana.

Selain itu, kamu juga bisa mengembangkan dashboard ini lebih jauh dengan menambahkan grafik, API data, atau framework modern.

Sudah capek nulis artikel tapi tidak muncul di Google?

Mungkin bukan usahanya yang kurang…
tapi strategi SEO-nya yang belum tepat.

Pesan Artikel SEO Sekarang

Tagged with: