Web Programming Basic
  • Pengenalan HTML
  • Pengenalan CSS
  • Tugas Pembelajaran CSS
  • Pengenalan Javascript Dan Dom
  • Membuat Halmaan Login
  • Membuat Halaman Dashboard
  • Pembelajaran Framework Bootstrap
  • Membuat tampilan login dengan framework bootstrap
  • Membuat Tampilan Dashboard Dengan Bootstrap
  • Membuat Tampilan Portofolio diri
  • Evaluasi Dan Pembuatan Akun Linkedin
  • Exam
Powered by GitBook
On this page

Membuat Tampilan Dashboard Dengan Bootstrap

Souce Dashboard Dengan Bootstrap :

<!DOCTYPE html>
<html lang="id">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard</title>
  <!-- Link ke CSS Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Link ke ikon Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 250px;
      background-color: #343a40;
    }

    .sidebar a {
      color: white;
      padding: 15px;
      text-decoration: none;
      display: block;
    }

    .sidebar a:hover {
      background-color: #495057;
    }

    .content {
      margin-left: 250px;
      padding: 20px;
    }

    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #343a40;
      color: white;
      text-align: center;
      padding: 10px;
    }

    .main-content {
      padding: 20px;
      background-color: #f8f9fa;
    }
  </style>
</head>

<body>

  <!-- Sidebar -->
  <div class="sidebar">
    <div class="p-3">
      <h3 class="text-white">Dashboard</h3>
    </div>
    <a href="#">Dashboard</a>
    <a href="#">Pengguna</a>
    <a href="#">Transaksi</a>
    <a href="#">Laporan</a>
    <a href="#">Setelan</a>
  </div>

  <!-- Main Content -->
  <div class="content">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
          aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Profil</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Keluar</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Main Content Area -->
    <div class="main-content">
      <h2>Selamat datang di Dashboard</h2>
      <p>Ini adalah contoh tampilan dashboard menggunakan Bootstrap.</p>
      
      <!-- Section Content -->
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Statistik Pengguna</h5>
              <p class="card-text">Jumlah pengguna terdaftar: 1.234</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Transaksi Terakhir</h5>
              <p class="card-text">Transaksi baru: 150</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Laporan</h5>
              <p class="card-text">Laporan terbaru: Q4 2025</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <div class="footer">
    <p>&copy; 2025 Dashboard. All rights reserved.</p>
  </div>

  <!-- Link ke JavaScript Bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Penjelasan Elemen:

1. <head> - Pengaturan Metadata dan Link CSS

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard</title>
  <!-- Link ke CSS Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Link ke ikon Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
  <style>...</style>
</head>

  • <meta charset="UTF-8">: Menentukan karakter encoding yang digunakan pada halaman, UTF-8 adalah standar pengkodean karakter modern yang mendukung berbagai bahasa.

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Mengatur tampilan responsif agar halaman bisa menyesuaikan ukuran layar perangkat (ponsel, tablet, desktop).

  • <link>: Menyertakan file CSS dari Bootstrap untuk memberikan style pada elemen-elemen HTML dan juga font ikon dari Bootstrap Icons.

  • <style>: CSS kustom untuk mengatur elemen seperti sidebar, margin konten, dan footer.

2. Sidebar - Menu Navigasi di Kiri Layar

<div class="sidebar">
  <div class="p-3">
    <h3 class="text-white">Dashboard</h3>
  </div>
  <a href="#">Dashboard</a>
  <a href="#">Pengguna</a>
  <a href="#">Transaksi</a>
  <a href="#">Laporan</a>
  <a href="#">Setelan</a>
</div>

  • .sidebar: Sidebar menggunakan position: fixed untuk memastikan tetap berada di kiri layar, serta width: 250px untuk lebar tetap. Di dalamnya, terdapat beberapa <a> sebagai tautan menu.

  • .text-white: Kelas Bootstrap untuk membuat teks berwarna putih.

  • <a>: Setiap elemen tautan yang digunakan untuk navigasi, yang bisa diubah URL-nya sesuai kebutuhan.

3. Navbar - Menu Navigasi di Atas Layar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Profil</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Keluar</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

  • <nav>: Elemen utama untuk navbar yang diatur menggunakan kelas Bootstrap.

  • navbar-toggler: Tombol yang muncul pada tampilan mobile untuk menampilkan navbar yang tersembunyi.

  • <ul> dan <li>: Daftar menu yang dapat digunakan untuk navigasi seperti "Profil" dan "Keluar".

  • ms-auto: Kelas Bootstrap untuk memberi margin kiri otomatis agar menu navigasi berada di sebelah kanan.

4. Main Content Area - Bagian Utama Dashboard

<div class="main-content">
  <h2>Selamat datang di Dashboard</h2>
  <p>Ini adalah contoh tampilan dashboard menggunakan Bootstrap.</p>
  
  <!-- Section Content -->
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Statistik Pengguna</h5>
          <p class="card-text">Jumlah pengguna terdaftar: 1.234</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Transaksi Terakhir</h5>
          <p class="card-text">Transaksi baru: 150</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Laporan</h5>
          <p class="card-text">Laporan terbaru: Q4 2025</p>
        </div>
      </div>
    </div>
  </div>
</div>

  • .main-content: Area utama untuk menampilkan informasi, seperti judul halaman dan konten lainnya.

  • <div class="row">: Grid Bootstrap digunakan untuk membuat tata letak responsif. Setiap col-md-4 berarti setiap kolom akan memiliki lebar 4 dari total 12 kolom.

  • <div class="card">: Komponen card untuk menampilkan statistik dalam bentuk kartu.

  • .card-body: Bagian dari kartu untuk menempatkan isi seperti judul dan teks.

5. Footer - Bagian Bawah Halaman

<div class="footer">
  <p>&copy; 2025 Dashboard. All rights reserved.</p>
</div>

  • .footer: Elemen footer yang posisinya tetap di bawah halaman menggunakan position: fixed.

  • &copy; 2025: Menampilkan simbol hak cipta.

6. JavaScript Bootstrap

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

  • JavaScript Bootstrap: Untuk memastikan komponen interaktif seperti navbar yang dapat diperkecil berfungsi dengan baik di perangkat kecil.

Kesimpulan

Template ini menggunakan Bootstrap untuk membuat tampilan dashboard yang responsif, dengan sidebar, navbar, main content area, dan footer. Komponen-komponen Bootstrap seperti grid system, card, navbar, dan utilitas CSS memberikan tampilan yang modern dan mudah disesuaikan.

PreviousMembuat tampilan login dengan framework bootstrapNextMembuat Tampilan Portofolio diri

Last updated 4 months ago