Membuat Dashboard Admin dan Sidebar Menggunakan Bootstrap & JavaScript

7:09:00 PM 0 Comments
Share:

Halaman admin adalah inti dari banyak aplikasi web modern, berfungsi sebagai pusat kendali untuk mengelola data, pengguna, dan pengaturan sistem. Tampilan yang rapi, responsif, dan mudah digunakan sangat krusial untuk efisiensi kerja. Salah satu fitur UI yang populer dan sangat membantu dalam hal ini adalah sidebar yang dapat di-toggle (disembunyikan/ditampilkan).

Sidebar yang dapat di-toggle memungkinkan pengguna untuk memaksimalkan ruang layar untuk konten utama saat dibutuhkan, dan menampilkannya kembali untuk navigasi. Dalam panduan ini, kita akan mempelajari cara membuat halaman admin dasar dengan fitur toggle sidebar yang interaktif, menggunakan framework CSS Bootstrap untuk styling dan JavaScript murni untuk fungsionalitasnya.


Mempersiapkan Lingkungan Pengembangan

Sebelum memulai, pastikan Anda memiliki struktur dasar HTML dan telah menyertakan Bootstrap. Kita akan menggunakan Bootstrap 5.

1. Struktur HTML Dasar

Buat file index.html dan sertakan CDN Bootstrap untuk CSS dan JavaScript. Pastikan JavaScript diletakkan di akhir <body> untuk kinerja terbaik.




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Admin Interaktif</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- Gaya kustom -->
    <style>
        body {
            display: flex;
            min-height: 100vh;
            overflow-x: hidden; /* Mencegah overflow horizontal saat sidebar disembunyikan */
        }
        #sidebar {
            width: 250px;
            min-width: 250px;
            background-color: #343a40; /* Dark background */
            color: white;
            transition: all 0.3s ease-in-out;
            flex-shrink: 0; /* Mencegah sidebar menyusut */
        }
        #sidebar.hidden {
            margin-left: -250px; /* Sembunyikan sidebar ke kiri */
        }
        #content {
            flex-grow: 1;
            padding: 20px;
            transition: margin-left 0.3s ease-in-out;
        }
        #topbar {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            padding: 1rem;
            margin-bottom: 20px;
        }
        #topbar .btn {
            color: #343a40;
        }
        /* Responsiveness for smaller screens */
        @media (max-width: 768px) {
            #sidebar {
                position: fixed;
                height: 100vh;
                z-index: 1000;
                margin-left: -250px; /* Sembunyikan secara default pada mobile */
            }
            #sidebar.hidden {
                margin-left: -250px;
            }
            #sidebar.visible {
                margin-left: 0;
            }
            #content {
                width: 100%;
                margin-left: 0 !important;
            }
            body.sidebar-visible #content {
                margin-left: 250px; /* Dorong konten saat sidebar terlihat */
            }
        }
    </style>
</head>
<body>
    <!-- Struktur utama akan ditambahkan di sini -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script>
        // Kode JavaScript akan ditambahkan di sini
    </script>
</body>
</html>


Merancang Tata Letak Halaman Admin

Kita akan menggunakan layout flexbox untuk membagi halaman menjadi sidebar dan area konten utama. Bootstrap sudah mendukung flexbox dengan baik.

2. Struktur Utama (Sidebar dan Konten)

Tambahkan kode berikut di dalam tag <body> sebelum skrip Bootstrap.




<!-- Sidebar -->
<div id="sidebar" class="d-flex flex-column p-3 text-white hidden">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
        <span class="fs-4">Admin Panel</span>
    </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
            <a href="#" class="nav-link active" aria-current="page">
                Dashboard
            </a>
        </li>
        <li>
            <a href="#" class="nav-link text-white">
                Produk
            </a>
        </li>
        <li>
            <a href="#" class="nav-link text-white">
                Pesanan
            </a>
        </li>
        <li>
            <a href="#" class="nav-link text-white">
                Pengguna
            </a>
        </li>
        <li>
            <a href="#" class="nav-link text-white">
                Pengaturan
            </a>
        </li>
    </ul>
    <hr>
    <div class="dropdown">
        <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
            <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
            <strong>Admin</strong>
        </a>
        <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
            <li><a class="dropdown-item" href="#">Pengaturan</a></li>
            <li><a class="dropdown-item" href="#">Profil</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Keluar</a></li>
        </ul>
    </div>
</div>

<!-- Konten Utama -->
<div id="content">
    <!-- Topbar (untuk tombol toggle) -->
    <div id="topbar" class="d-flex justify-content-between align-items-center">
        <button class="btn btn-primary" id="sidebarToggle">
            <span class="navbar-toggler-icon"></span>
        </button>
        <h4 class="mb-0">Dashboard</h4>
        <!-- Anda bisa menambahkan elemen lain di topbar, seperti notifikasi atau profil -->
    </div>

    <!-- Area Konten -->
    <div class="container-fluid">
        <h1 class="mt-4">Selamat Datang di Dashboard Admin!</h1>
        <p>Ini adalah area konten utama Anda. Anda dapat menambahkan berbagai widget, grafik, dan tabel di sini.</p>

        <div class="row mt-4">
            <div class="col-md-4 mb-4">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <h5 class="card-title">Total Pengguna</h5>
                        <p class="card-text fs-2">1,234</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <h5 class="card-title">Pendapatan Bulan Ini</h5>
                        <p class="card-text fs-2">Rp 50.000.000</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card bg-warning text-dark">
                    <div class="card-body">
                        <h5 class="card-title">Pesanan Baru</h5>
                        <p class="card-text fs-2">45</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                Daftar Aktivitas Terbaru
            </div>
            <div class="card-body">
                <p>Fitur-fitur dan log aktivitas akan muncul di sini.</p>
                <ul class="list-group">
                    <li class="list-group-item">Pengguna John Doe mendaftar.</li>
                    <li class="list-group-item">Pesanan #12345 diterima.</li>
                    <li class="list-group-item">Produk baru 'Laptop Gaming' ditambahkan.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Perhatikan beberapa hal di atas:

  • <body> memiliki display: flex agar sidebar dan konten berada dalam satu baris.
  • #sidebar memiliki lebar tetap (width dan min-width) dan transisi untuk animasi. Class hidden akan digunakan untuk menyembunyikannya.
  • #content menggunakan flex-grow: 1 agar mengisi sisa ruang yang tersedia.
  • #topbar berisi tombol toggle dan judul halaman.
  • Media query di CSS untuk layar kecil akan menyembunyikan sidebar secara default dan mengubah perilakunya menjadi tumpang tindih.
Ikui langkah berikutnya untuk menampilkan sidebar




Mengimplementasikan Fungsionalitas Toggle dengan JavaScript

Sekarang, saatnya menambahkan interaktivitas dengan JavaScript.

3. Kode JavaScript untuk Toggle

Tambahkan kode berikut di dalam tag <script> di bagian paling bawah <body>.




document.addEventListener('DOMContentLoaded', function() {
    const sidebarToggle = document.getElementById('sidebarToggle');
    const sidebar = document.getElementById('sidebar');
    const body = document.body; // Untuk mengontrol class pada body untuk mobile

    // Fungsi untuk meng-toggle sidebar
    function toggleSidebar() {
        sidebar.classList.toggle('hidden');
        // Untuk mobile, tambahkan/hapus class 'sidebar-visible' pada body
        if (window.innerWidth <= 768) {
            body.classList.toggle('sidebar-visible');
        }
    }

    // Event listener untuk tombol toggle
    sidebarToggle.addEventListener('click', toggleSidebar);

    // Sembunyikan sidebar secara default pada perangkat mobile saat dimuat
    if (window.innerWidth <= 768) {
        sidebar.classList.add('hidden');
        body.classList.remove('sidebar-visible'); // Pastikan tidak ada class visible saat hidden
    } else {
        // Tampilkan sidebar secara default pada desktop
        sidebar.classList.remove('hidden');
    }

    // Tangani perubahan ukuran layar
    window.addEventListener('resize', function() {
        if (window.innerWidth <= 768) {
            // Pada mobile, sembunyikan sidebar jika sebelumnya terlihat atau tidak ada class hidden
            if (!sidebar.classList.contains('hidden')) {
                sidebar.classList.add('hidden');
                body.classList.remove('sidebar-visible');
            }
        } else {
            // Pada desktop, pastikan sidebar terlihat
            sidebar.classList.remove('hidden');
            body.classList.remove('sidebar-visible'); // Hapus class visible jika ada
        }
    });
});

Penjelasan JavaScript:

  • Kita mendapatkan referensi ke elemen tombol toggle dan sidebar menggunakan ID mereka.
  • sidebar.classList.toggle('hidden') adalah inti dari fungsi ini. Ini akan menambahkan class hidden jika tidak ada, atau menghilangkannya jika sudah ada. Class hidden inilah yang akan memanipulasi posisi sidebar (menggesernya ke luar layar).
  • Kita juga menambahkan penanganan untuk ukuran layar (media query JavaScript) agar sidebar berperilaku berbeda pada desktop dan mobile. Pada mobile, sidebar akan overlay konten, sedangkan pada desktop, ia akan mendorong konten.
  • Event listener resize memastikan bahwa perilaku sidebar disesuaikan ketika ukuran jendela browser diubah.


Tags
Share:

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi

Subscribe to: Post Comments ( Atom )