Template Halaman Admin dengan Bootstrap

Pengantar

• Pembelajaran membuat template halaman admin menggunakan framework Bootstrap.

Persiapan File

1. Bootstrap
   • Download dari getbootstrap.com.
   • Penjelasan penggunaan Bootstrap sudah disediakan di video sebelumnya.
2. Font Awesome
   • Download dari fontawesome.com.
   • Tutorial penggunaan Font Awesome sudah ada di playlist Bootstrap.
3. Folder Struktur
   • Buat folder bernama template admin dan simpan file Bootstrap dan Font Awesome di dalamnya.

Memulai Pembuatan Template

1. Copy Starter Template
   • Dari dokumentasi Bootstrap, copy starter template dan simpan sebagai dashboard.html.
2. Buat File CSS dan JS
   • Buat file admin.css dan admin.js di dalam folder yang sama.
   • Link file CSS dan JS di dalam dashboard.html.

Membuat Header

• Gunakan navbar dari Bootstrap.
• Ubah background menjadi kuning dengan kelas bg-warning dan tambahkan kelas fixed-top.
• Judul navbar: "Selamat Datang Admin".
• Hapus menu di navbar dan pindahkan ke sidebar.

Menambahkan Icon

• Gunakan Font Awesome untuk icon surat masuk, notifikasi, dan logout.
• Tambahkan tooltip untuk icon dengan informasi yang sesuai.

Membuat Sidebar

1. Menggunakan Grid System
   • Buat dua kolom: col-md-2 untuk sidebar dan col-md-10 untuk konten utama.
2. Buat Menu Sidebar
   • Tambahkan menu: Dashboard, Daftar Mahasiswa, Daftar Dosen, Daftar Pegawai, Jadwal Kuliah, dan Nilai Mahasiswa.
   • Tambahkan garis pemisah menggunakan <hr>.

Konten Utama Dashboard

1. Judul Dashboard
   • Buat judul dengan icon dashboard dan garis di bawahnya.
2. Membuat Card
   • Tampilkan jumlah mahasiswa, dosen, dan pegawai menggunakan komponen card dari Bootstrap.
   • Gunakan icon sesuai, ubah background, dan tambahkan link untuk detail.

Membuat Card untuk Media Sosial

1. Social Media Cards
   • Buat card untuk Instagram, Facebook, dan Twitter.
   • Tambahkan button follow/like.

Menyiapkan Halaman Lain

1. Daftar Mahasiswa
   • Copy dashboard.html menjadi mahasiswa.html dan ubah konten menjadi tabel daftar mahasiswa.
   • Tambahkan button untuk aksi seperti edit dan delete dengan icon.
2. Daftar Dosen dan Pegawai
   • Copy halaman mahasiswa untuk membuat halaman dosen dan pegawai dengan perubahan yang sesuai.
3. Jadwal Kuliah
   • Buat halaman jadwal kuliah dengan tabel mata kuliah, kode MK, dosen mengajar, dan jurusan.
4. Nilai Mahasiswa
   • Buat halaman nilai mahasiswa dengan tabel berisi nama mahasiswa, mata kuliah, kode MK, dan nilai akhir.

Kesimpulan

• Telah berhasil membuat template halaman admin sederhana untuk sistem informasi akademik.
• Template ini akan digunakan dalam pembelajaran backend framework di video selanjutnya.