Cara Membuat Halaman Dashboard dengan HTML dan CSS

Cara Membuat Halaman Dashboard dengan HTML dan CSS – Terkadang membuat sebuah dashboard menggunakan HTML dan CSS terlihat rumit, namun sebenarnya tidaklah terlalu sulit. Dengan pemahaman yang baik tentang HTML dan CSS, kamu dapat membuat dashboard yang interaktif dan responsif.

Dalam artikel ini, TeknoTask akan membahas cara membuat dashboard sederhana menggunakan HTML dan CSS.

Sekilas Tentang Halaman Dashboard Website

Halaman dashboard website adalah halaman khusus yang bertujuan untuk menyajikan informasi penting dan terkini secara ringkas dalam satu tampilan. Hal ini bertujuan untuk memberikan gambaran keseluruhan tentang kondisi atau performa suatu sistem, aplikasi, atau aktivitas tertentu secara cepat dan mudah dipahami oleh pengguna.

Fitur-fitur yang umumnya ditemukan di halaman dashboard website meliputi:

Ringkasan Data: Menampilkan ringkasan data yang relevan, seperti statistik pengguna, penjualan, atau aktivitas lainnya dalam bentuk grafik atau angka.
Grafik dan Diagram: Visualisasi data dalam bentuk grafik, diagram batang, diagram lingkaran, atau diagram lainnya untuk memudahkan pemahaman pola atau tren.
Widget dan Kard: Menyediakan widget atau kard-kard informasi yang memberikan informasi penting secara singkat, seperti berita terbaru, peringatan, atau pengingat.
Tautan Cepat: Menyertakan tautan cepat atau akses langsung ke bagian-bagian penting dari sistem atau aplikasi.
Notifikasi: Memberikan notifikasi tentang perubahan atau kejadian penting yang memerlukan perhatian pengguna.
Filter dan Pengaturan: Memungkinkan pengguna untuk mengatur tampilan atau filter data sesuai dengan preferensi atau kebutuhan mereka.
Kustomisasi: Memberikan opsi kustomisasi bagi pengguna untuk menyesuaikan halaman dashboard sesuai dengan preferensi atau kebutuhan mereka sendiri.

Halaman dashboard website biasanya digunakan dalam berbagai konteks, seperti aplikasi bisnis, platform e-commerce, sistem manajemen konten, dan lainnya. Desain yang efektif dan informatif dari halaman dashboard dapat membantu pengguna untuk dengan cepat memahami informasi yang diberikan, mengambil keputusan yang tepat, dan meningkatkan produktivitas mereka.

Cara Membuat Halaman Dashboard Sederhana dengan HTML dan CSS

1. Persiapkan Struktur Folder

Sobat Tekno, langkah pertama yang perlu kamu lakukan adalah membuat folder baru untuk proyek halaman dashboard, misalnya “Dashboard”. Di dalamnya buat subfolder “Gambar” untuk menyimpan elemen desain dan buat file index.html, style.css, script.js, berikut dibawah ini contoh struktur foldernya:

Dashboard

Gambar
– gambar1.jpg
– gambar2.jpeg
– gambar3.webp
index.html
style.css
script.js

Untuk contoh gambar yang terdapat pada halaman Dashboard web ini bisa kamu unduh disini.

2. Buat File HTML Utama (index.html)

Buka Sublime Text dan buat file baru bernama “index.html” dalam folder proyek, selanjutnya isi file ini dengan kode HTML dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard TeknoTask.Com</title>
</head>
<body>
    <header>
        <h1>Dashboard TeknoTask</h1>
    </header>

    <aside>
        <ul>
            <li><a href="https://teknotask.com/">Beranda</a></li>
            <li><a href="https://teknotask.com/">Produk</a></li>
            <li><a href="https://teknotask.com/">Transaksi</a></li>
            <li><a href="https://teknotask.com/">Karyawan</a></li>
            <li><a href="https://teknotask.com/">Kontak</a></li>
        </ul>
    </aside>

    <main>
        <section>
            <h2>Grafik Penjualan</h2>
            <canvas id="salesChart"></canvas>
        </section>

        <section>
            <h2>Produk Terlaris</h2>
            <div style="display: flex; justify-content: space-between;">
                <div class="product" style="width: 30%;">
                    <h3>Nama Produk 1</h3>
                    <img src="Produk/produk1.webp" alt="Produk Kiri">
                    <p>Deskripsi Produk 1...</p>
                </div>
                <div class="product" style="width: 30%;">
                    <h3>Nama Produk 2</h3>
                    <img src="Produk/produk2.webp" alt="Produk Tengah">
                    <p>Deskripsi Produk 2...</p>
                </div>
                <div class="product" style="width: 30%;">
                    <h3>Nama Produk 3</h3>
                    <img src="Produk/produk3.webp" alt="Produk Kanan">
                    <p>Deskripsi Produk 3...</p>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>© 2024 Dashboard TeknoTask. All rights reserved.</p>
    </footer>
</body>
</html>

3. Buat File CSS (style.css)

Buka Sublime Text dan buat file baru bernama “style.css” dalam folder proyek. selanjutnya isi file ini dengan kode CSS dibawah ini.

    <style type="text/css">
        /* Reset default margin and padding */
        body, h1, h2, p, ul, li {
            margin: 0;
            padding: 0;
        }

        /* Gaya header */
        header {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 1em 0;
        }

        /* Gaya sidebar */
        aside {
            background-color: #007bff; /* Warna biru pada sidebar */
            width: 200px;
            float: left;
            height: 160vh;
        }

        aside ul {
            list-style-type: none;
            padding: 0;
        }

        aside ul li {
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        aside ul li a {
            text-decoration: none;
            color: #fff; /* Warna teks putih */
            display: block;
        }

        aside ul li:hover {
            background-color: #0056b3; /* Warna biru saat hover */
        }

        /* Gaya konten utama */
        main {
            margin-left: 220px; /* Sesuaikan dengan lebar sidebar */
            padding: 20px;
            background-color: #f4f4f4; /* Latar belakang abu-abu pada konten utama */
        }

        section {
            margin-bottom: 20px;
        }

        section:last-child {
            margin-bottom: 0; /* Menghapus margin bawah terakhir */
        }

        /* Gaya footer */
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 1em 0;
            clear: both;
        }

        /* Tampilan responsif untuk layar yang lebih kecil */
        @media (max-width: 768px) {
            aside {
                width: 100%;
                float: none;
                height: auto;
            }

            main {
                margin-left: 0;
            }
        }
        /* Gaya untuk grafik */
        canvas {
            max-width: 70%; /* Maksimum lebar grafik */
            height: 1%; /* Tinggi disesuaikan agar proporsi tetap */
        }

        /* Gaya untuk gambar produk */
        .product {
            text-align: center;
        }

        .product img {
            width: 300px; /* Atur lebar gambar */
            height: auto; /* Sesuaikan tinggi agar proporsi gambar tetap */
            margin-bottom: 10px; /* Spasi bawah */
        }
    </style>

4. Buat File JavaScript (script.js)

Buka Sublime Text dan buat file baru bernama “style.css” dalam folder proyek, selanjutnya isi file ini dengan kode Javascript dibawah ini.

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script type="text/javascript">
        // Ambil elemen canvas
        var salesCanvas = document.getElementById('salesChart');

        // Buat grafik menggunakan Chart.js
        var salesData = {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun'],
            datasets: [{
                label: 'Penjualan',
                data: [100, 200, 300, 400, 500, 600],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        };

        var salesOptions = {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        };

        var salesChart = new Chart(salesCanvas, {
            type: 'bar',
            data: salesData,
            options: salesOptions
        });

    </script>

5. Tambahkan Konten Dashboard (index.html)

Buka kembali file “index.html” menggunakan Sublime Text, lalu tambahkan konten untuk bagian “Dashboard” sesuai kebutuhanmu.

6. Jalankan Kode

Simpan semua perubahan dari ketiga file kode diatas, lalu buka file “index.html” menggunakan browser default untuk melihat hasilnya.

7. Tampilkan Halaman Dashboard

Selamat! Anda telah berhasil membuat halaman dashboard sederhana dengan HTML dan CSS menggunakan Sublime Text. Sesuaikan konten dan desain sesuai dengan kebutuhan Anda, dan pastikan tampilannya responsif pada berbagai perangkat.

Akhir Kata

Sobat Tekno, dengan memahami cara membuat halaman dashboard menggunakan HTML dan CSS, kamu dapat mengembangkan dashboard yang menarik dan informatif. Terima kasih sudah mengunjungi artikel kali ini, semoga tutorial ini bermanfaat bagi kamu yang ingin mempelajari lebih lanjut tentang pengembangan web.