📊

Tutorial Membuat Template Admin Bootstrap

Feb 24, 2025

Catatan Tutorial Pembuatan Template Halaman Admin Menggunakan Bootstrap

Pendahuluan

  • Selamat datang di channel Framework Indonesia.
  • Materi kali ini: Membuat template halaman admin dengan Bootstrap.

Persiapan File

  1. Download Bootstrap

    • Kunjungi getbootstrap.com
    • Penggunaan Bootstrap sudah dibahas di video sebelumnya.
  2. Download Font Awesome

    • Kunjungi fontawesome.com
    • Cara penggunaan telah dibahas di video yang tersedia di playlist Bootstrap.
  3. Membuat Folder

    • Buat folder bernama template admin.
    • Masukkan folder Bootstrap dan Font Awesome di dalamnya.

Memulai Pembuatan Template

  1. Copy Starter Template

    • Kunjungi menu documentation di Bootstrap.
    • Salin starter template dan simpan sebagai dashboard.html di folder template admin.
  2. Buat File CSS dan JS

    • Buat admin.css dan admin.js di dalam folder yang sama.
    • Panggil keduanya dalam file HTML.

Pembuatan Header

  1. Menggunakan Navbar Bootstrap

    • Salin komponen navbar dari dokumentasi Bootstrap.
    • Modifikasi background menjadi kuning dan ganti teks.
  2. Menambahkan Icon dengan Font Awesome

    • Tambahkan icon inbox, notifikasi, dan logout menggunakan Font Awesome.
    • Tambahkan tooltip untuk icon.

Pembuatan Sidebar dan Konten Utama

  1. Menggunakan Grid System Bootstrap

    • Buat dua kolom: col-md-2 untuk sidebar dan col-md-10 untuk konten utama.
    • Tambahkan kelas no-gutters agar tidak ada margin antara kolom.
  2. Membuat Menu di Sidebar

    • Salin template vertical nav dari Bootstrap.
    • Ganti nama menu sesuai kebutuhan: Dashboard, Daftar Mahasiswa, dll.
    • Tambahkan garis pemisah antara menu dengan menggunakan tag hr.

Pembuatan Konten Utama

  1. Judul Dashboard

    • Buat judul dengan icon dan garis di bawahnya.
  2. Menambahkan Card untuk Informasi

    • Gunakan komponen card untuk menampilkan jumlah mahasiswa, dosen, dan pegawai.
    • Tambahkan icon sesuai dengan masing-masing informasi.

Membuat Halaman Lain

  1. Daftar Mahasiswa

    • Copy file dashboard.html dan rename menjadi mahasiswa.html.
    • Tambahkan tabel untuk menampilkan daftar mahasiswa.
  2. Daftar Dosen dan Pegawai

    • Lakukan hal yang sama untuk membuat file dosen.html dan pegawai.html dengan mengganti kontennya.
  3. Jadwal Kuliah dan Nilai Mahasiswa

    • Ulangi proses untuk membuat jadwal.html dan nilai.html.

Penutup

  • Template halaman admin telah selesai dibuat.
  • Dapat dimodifikasi sesuai kreativitas masing-masing.
  • Tutorial ini dapat digunakan sebagai dasar untuk membangun aplikasi dengan backend framework seperti CodeIgniter atau Laravel.

Ajakan

  • Jangan lupa untuk like, share, dan subscribe channel untuk konten edukasi lebih lanjut.