Template Admin Responsif dengan Bootstrap 5 Sidebar Collapse Dinamis (Dark/Light Mode)

By | 15 October 2025
0 Comment

Tampilan dashboard admin adalah wajah utama dari sistem manajemen web. Desain yang modern, ringan, dan mudah digunakan bukan hanya membuat nyaman admin, tapi juga meningkatkan efisiensi kerja. Kali ini, kita akan membuat template admin responsif dengan Bootstrap 5, dilengkapi:

✅ Sidebar collapsible (bisa disembunyikan),

Dark/Light mode toggle (disimpan di localStorage),

Struktur modular (header, sidebar, footer terpisah),

⚙️ Layout dinamis yang mudah dikembangkan.

Struktur Folder Proyek

Kita mulai dari struktur folder dasar:

/admin-template/
│
├── index.php
│
├── includes/
│   ├── header.php
│   ├── sidebar.php
│   └── footer.php
│
├── assets/
│   ├── css/
│   │   └── custom.css
│   └── js/
│       └── script.js
│
└── vendor/
    ├── bootstrap/
    │   ├── css/bootstrap.min.css
    │   └── js/bootstrap.bundle.min.js

Kamu bisa mengambil Bootstrap 5 dari CDN atau folder vendor/bootstrap seperti di atas.

Langkah 1: File Header (header.php)

File: includes/header.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'Admin Dashboard'; ?></title>
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/custom.css" rel="stylesheet">
</head>
<body class="bg-light" id="pageBody">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
        <button class="btn btn-outline-light me-3" id="toggleSidebar">
            <i class="bi bi-list"></i>
        </button>
        <a class="navbar-brand" href="#">AdminPanel</a>
        <div class="d-flex">
            <button class="btn btn-outline-light" id="themeToggle">
                 / 
            </button>
        </div>
    </div>
</nav>
<div class="d-flex">

Langkah 2: File Sidebar (sidebar.php)

File: includes/sidebar.php

<aside id="sidebar" class="bg-dark text-white p-3 vh-100">
    <h5 class="text-center">Menu</h5>
    <ul class="nav flex-column mt-4">
        <li class="nav-item"><a href="index.php" class="nav-link text-white">Dashboard</a></li>
        <li class="nav-item"><a href="#" class="nav-link text-white">Produk</a></li>
        <li class="nav-item"><a href="#" class="nav-link text-white">Pesanan</a></li>
        <li class="nav-item"><a href="#" class="nav-link text-white">Pengguna</a></li>
    </ul>
</aside>
<main class="flex-fill p-4" id="mainContent">

Langkah 3: File Footer (footer.php)

File: includes/footer.php

</main>
</div>

<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

Langkah 4: Halaman Utama (index.php)

File: index.php

<?php
$title = "Dashboard - Admin Panel";
include 'includes/header.php';
include 'includes/sidebar.php';
?>

<div class="container-fluid">
    <h1 class="mb-4">Dashboard Admin</h1>
    <div class="row">
        <div class="col-md-4 mb-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">Total Pengguna</h5>
                    <p class="card-text fs-3">1,234</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">Total Produk</h5>
                    <p class="card-text fs-3">320</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">Total Pesanan</h5>
                    <p class="card-text fs-3">98</p>
                </div>
            </div>
        </div>
    </div>
</div>

<?php include 'includes/footer.php'; ?>

Langkah 5: File CSS Kustom

File: assets/css/custom.css

#sidebar {
    width: 220px;
    transition: width 0.3s ease;
}

#sidebar.collapsed {
    width: 70px;
}

#sidebar.collapsed .nav-link {
    text-align: center;
}

#mainContent {
    transition: margin-left 0.3s ease;
    margin-left: 220px;
}

#mainContent.expanded {
    margin-left: 70px;
}

body.dark-mode {
    background-color: #121212 !important;
    color: #e5e5e5 !important;
}

body.dark-mode .navbar {
    background-color: #333 !important;
}

body.dark-mode #sidebar {
    background-color: #222 !important;
}

Langkah 6: File JavaScript (script.js)

File: assets/js/script.js

// Sidebar Collapse
const sidebar = document.getElementById("sidebar");
const toggleSidebar = document.getElementById("toggleSidebar");
const mainContent = document.getElementById("mainContent");

toggleSidebar.addEventListener("click", () => {
    sidebar.classList.toggle("collapsed");
    mainContent.classList.toggle("expanded");
    localStorage.setItem("sidebarCollapsed", sidebar.classList.contains("collapsed"));
});

// Simpan status sidebar di localStorage
if (localStorage.getItem("sidebarCollapsed") === "true") {
    sidebar.classList.add("collapsed");
    mainContent.classList.add("expanded");
}

// Dark / Light Mode
const themeToggle = document.getElementById("themeToggle");
const pageBody = document.getElementById("pageBody");

if (localStorage.getItem("theme") === "dark") {
    pageBody.classList.add("dark-mode");
}

themeToggle.addEventListener("click", () => {
    pageBody.classList.toggle("dark-mode");
    const mode = pageBody.classList.contains("dark-mode") ? "dark" : "light";
    localStorage.setItem("theme", mode);
});

Penjelasan Fitur

  1. Sidebar Collapse

    • Menggunakan classList.toggle() untuk menambah/kurangi class .collapsed.

    • Lebarnya berubah dari 220px menjadi 70px.

    • Statusnya disimpan di localStorage agar tetap sama setelah refresh.

  2. Dark/Light Mode

    • Saat tombol / diklik, body diberi class dark-mode.

    • Mode ini juga disimpan di localStorage.

  3. Struktur Modular PHP

    • Header, sidebar, dan footer dibuat terpisah agar mudah dikembangkan di halaman lain (produk, pesanan, dll).

Hasil Akhir

Tampilan akhir akan terlihat seperti dashboard admin profesional:

  • Sidebar di kiri yang bisa diperkecil.

  • Navbar dengan tombol dark/light mode.

  • Konten utama responsif Bootstrap.

  • Semua perubahan disimpan secara otomatis di browser pengguna.

Tips Pengembangan Lanjut

  • Gunakan Bootstrap Icons untuk menu sidebar agar tetap jelas saat collapse.

  • Tambahkan session login check sebelum halaman admin diakses.

  • Gunakan framework CSS seperti Tailwind jika ingin desain custom.

  • Tambahkan animation smooth transition agar UX lebih halus.

Kesimpulan

Dengan Bootstrap 5 + JavaScript sederhana, kamu bisa membangun template admin modern:

  • Responsif di semua perangkat,

  • Sidebar dinamis,

  • Dark mode kekinian,

  • Modular & scalable untuk sistem besar.

Struktur ini bisa jadi pondasi awal sebelum membangun dashboard nyata seperti e-commerce admin, CMS, atau panel manajemen.

Tambahan: Cara Menggunakan Bootstrap 5

Sebelum mulai membuat template admin, pastikan Bootstrap sudah terpasang. Ada dua cara yang bisa kamu pilih: 1) Download manual (vendor lokal) atau 2) Menggunakan CDN (lebih praktis).

1. Menggunakan Bootstrap 5 via CDN (Cara Termudah)

Cara ini tidak perlu download file apapun, cukup tambahkan link CSS dan JS Bootstrap langsung dari server resmi Bootstrap. Di dalam file HTML (misalnya index.php), tambahkan di bagian <head> dan sebelum </body>:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS Bundle (dengan Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

✅ Kelebihan:

  • Cepat dan praktis

  • Tidak membebani server kamu

⚠️ Kekurangan:

  • Butuh koneksi internet aktif saat loading halaman

2. Download Vendor Bootstrap (Offline / Lokal)

Kalau kamu ingin file Bootstrap ada di server kamu sendiri (misalnya agar tetap bisa diakses tanpa internet), gunakan cara ini:

Langkah 1 – Unduh Bootstrap

Kunjungi situs resmi Bootstrap:
https://getbootstrap.com

Klik tombol Download lalu pilih versi Compiled CSS and JS.
Hasilnya berupa file .zip — misalnya: bootstrap-5.3.3-dist.zip.

Langkah 2 – Ekstrak dan Simpan

Ekstrak file ZIP tersebut, lalu pindahkan folder bootstrap-5.3.3-dist ke dalam folder project kamu, misalnya:

project/
 ├─ css/
 ├─ js/
 ├─ vendor/
 │   └─ bootstrap/
 └─ index.php

Langkah 3 – Hubungkan ke File HTML

Tambahkan link ke file CSS dan JS Bootstrap di file index.php:

<!-- Bootstrap CSS Lokal -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">

<!-- Bootstrap JS Lokal -->
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

✅ Kelebihan:

  • Bisa digunakan tanpa koneksi internet

  • Lebih cepat diakses (karena file di server sendiri)

⚠️ Kekurangan:

  • Perlu update manual jika versi Bootstrap baru keluar

Tips:

Kamu juga bisa menambahkan custom file CSS sendiri setelah Bootstrap agar mudah mengganti warna, font, atau tema:

<link rel="stylesheet" href="assets/css/style.css"

 

Related posts:

  1. Membuat Dark Mode Toggle dengan JavaScript
  2. Membuat Sistem Template dengan Layout Dinamis di PHP
  3. Membuat Interaksi Dinamis dengan JavaScript (Show/Hide & Toggle Class)
  4. Mengenal Bootstrap
  5. Membuat Sistem Register dan Login Lengkap dengan Validasi dan Redirect Berdasarkan Role (Admin/User) di PHP MySQL
  6. Menampilkan Pesan Sukses / Error dengan Alert Bootstrap dan SweetAlert di PHP
  7. Membuat Template Website Modular dengan Include & Require di PHP
  8. Membuat Tab Navigasi dan Konten Dinamis dengan JavaScript