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.