Halo teman-teman semua selamat datang kembali di channel framework Indonesia dan di video kali ini kita akan belajar membuat template halaman admin dengan menggunakan framework bootstrap Intro Oke, jadi sebelum kita mulai untuk ngoding, ada beberapa file yang perlu kita siapkan terlebih dahulu. Yang pertama kita perlu untuk mendownload file bootstrap. Jadi silakan teman-teman kunjungi website getbootstrap.com Nah, untuk penggunaan bootstrap ini saya tidak jelaskan di tutorial ini, karena saya sudah membuat video khusus untuk cara penggunaan bootstrap, bagaimana cara untuk menginstal penggunaan secara offline dan online. serta bagaimana cara untuk mendownload file bootstrap ini nah kemudian yang kedua yang kita butuhkan adalah kita membutuhkan file font ausom jadi silakan kunjungi font ausom.com Nah font awesome ini nanti kita akan gunakan untuk menampilkan icon-icon yang kita butuhkan. Nah sama seperti bootstrap ya, jadi saya tidak menjelaskan bagaimana cara penggunaan font awesome.
Jadi supaya kita langsung masuk pada... tutorial untuk membuat template halaman admin jadi silakan teman-teman bagi yang belum tahu cara penggunaan font awesome Bagaimana cara downloadnya Bagaimana cara installnya dan Bagaimana cara menggunakan iconnya silakan cek di video tutorial yang juga sudah saya sediakan cara penggunaan font awesome di playlist bootstrap di channel ini oke, kalau sudah selesai teman-teman silakan simpan di dalam satu folder kebetulan disini saya sudah membuat sebuah folder yang namanya template admin, silakan kalau teman-teman mau menggunakan nama folder ini silakan buat folder template admin atau menggunakan nama folder yang lain silakan nah di dalamnya saya sudah memasukkan dua font file atau folder yang kita butuhkan tadi yaitu bootstrap dan font awesome jadi disini saya sudah download bootstrap dan font awesome nah langkah selanjutnya yang akan kita lakukan adalah kita akan copy starter template dari bootstrap jadi silakan teman-teman klik di menu documentation jadi sepanjang kita nge-loading nanti kita akan terus buka dokumentasi dari bootstrap ini oke setelah teman-teman klik di documentation kemudian silakan klik di starter template template nah kita akan copy starter template yang sudah disediakan oleh bootstrap disini silahkan klik di link copy lalu kita paste di dalam text editor kita oke kalau sudah selesai kita paste kita akan simpan kita akan simpan disini di dalam folder template admin ya satu folder dengan bootstrap dan font awesome jadi silahkan klik di file save as lalu kita cari folder yang tadi kita simpan folder uslab kebetulan saya simpan di desktop lalu kita beri nama dashboard titik html Nah, selain starter template ini, kita juga membutuhkan file CSS dan file JavaScript ke depannya. Untuk itu kita siapkan lebih dahulu di sini. Jadi kita buat file baru, lalu kita simpan. Di dalam folder template admin, kita beri nama admin.css.
Kemudian kita panggil di file HTML-nya. Kita buat di sini link. Kemudian kita masukkan namanya admin.css. Kemudian kita yang membutuhkan nanti file javascript, jadi kita buat file baru. Kita simpan di dalam folder template admin yang tadi ya.
Kita beri nama admin.js. Lalu kita panggil di file html kita, di bagian bawah. Kita buat text script di sini. Lalu panggil. kita panggil src dan kita masukkan nama filenya admin.js kalau sudah selesai silahkan di save, oke kita sudah selesai melakukan persiapan dan saat ini kita akan masuk pada pembuatan template halaman admin dengan menggunakan bootstrap Oke, tag H1 ini kita hapus saja.
Nah, langkah pertama yang akan kita lakukan adalah kita akan membuat header-nya terlebih dahulu. Jadi, silakan kembali ke dokumentasi bootstrap. Kita akan menggunakan nav pada bootstrap. Jadi, silakan klik di components. Lalu, klik di navbar.
Ya, kita gunakan yang ini, navbar. lalu kita scroll ke bawah dan kita copy yang support content ya kita gunakan yang ini yang ada button search nya jadi silakan copy source code yang ada di sini dengan cara klik di link copy kemudian kita paste di bawah take body kalau sudah selesai dipaste kita rapikan terlebih dahulu Hai coba save dan kita lihat hasilnya di browser Klik Kanan open in browser Hai nah ini tidak kita sudah muncul tapi nanti kita akan hapus menu yang ada di sini karena nanti menunya kita tidak cantumkan diatas tetapi kita akan coba cantumkan di bagian sidebar di sebelah sini jadi kita akan mod modifikasi sedikit hidup ini yang pertama kita ubah backgroundnya menjadi warna kuning jadi kita ubah jadi BG warning kemudian kita tambah kelas fix top tujuannya supaya nanti pada saat kita Scroll nafbatnya ini tetap fix ya jadi kita buat disini fix top hai hai Kemudian di bagian navbar plane ini, ini kita ganti jadi tulisan selamat datang admin. Nah ceritanya kita akan membuat halaman admin untuk sistem.
informasi akademik, jadi ini adalah sistem informasi kampus atau universitas jadi disini kita buat nama kampusnya, contohnya kita buat nama kampusnya adalah Universitas Majapahit silahkan teman-teman mau buat nama kampus yang lain silahkan disini saya mau buat nama kampusnya Universitas Majapahit nah kemudian kita akan hapus bagian menu ini karena sekali lagi menunya kita tidak buat di atas tapi kita akan buat nanti di bagian sidebar nya jadi kita hapus mulai dari button ini kita hapus sampai di bawah sampai penutup tag ul silahkan hapus musik kalau sudah selesai silahkan save dan kita lihat hasilnya di browser nah jadinya seperti ini ya kemudian button search ini kita akan pindahkan di sebelah sini caranya adalah kita tambahkan disini kelas ml auto jadi silahkan ke tag form depannya ini kita tambah ml auto lalu Save, kita lihat apakah sudah berpindah. Nah, ini sudah berpindah ya. Kemudian di depan button search ini kita membuat beberapa icon. Yang pertama nanti kita akan buat button envelope untuk inbox.
atau surat masuk kemudian kita buat icon bel untuk notifikasi dan kita buat icon logout ya jadi kita menggunakan font awesome untuk memasukkan icon icon yang kita buat di depan button search ini nah sebelum kita memasukkan icon dari font awesome kita buat dulu kelas di sini di bawah tag penutup form kita buat kelas icon Kemudian di bawahnya kita buat tag H5. Dan di dalamnya kita akan masukkan icon. Yang pertama kita memasukkan icon envelope.
Untuk icon surat masuk ya. Jadi silakan ke dokumentasi font awesome. Lalu klik di icon. Dan di search-nya silakan ketik envelope. Nah, kita gunakan yang ini.
Silakan klik di icon ini. Nah, untuk memasukkan icon ini ke dalam halaman HTML kita, catanya sangat gampang sekali. Kita tinggal klik di bagian tag i yang ada di sini. Silakan klik, maka otomatis akan terkopi. Sekali lagi bagi teman-teman yang belum tahu bagaimana cara penggunaan font awesome, saya sudah menyediakan tutorial lengkapnya di playlist bootstrap di channel ini.
Oke, kalau sudah selesai kita klik dan terkopi secara otomatis, kita akan paste di dalam tag H5 yang ada di sini. Silakan paste. Kemudian kita cari icon bell untuk icon notifikasi. Kembali. kembali ke bagian search lalu kita ketik bell silahkan search nah kita akan menggunakan yang ini Lalu silakan klik untuk mengkopi dan paste di bawah icon envelope.
Kemudian kita akan buat icon untuk logout atau site out. Jadi silakan kembali ke dokumentasi font awesome. Kita ketik di sini site out.
Nah kita gunakan yang ini. Klik. lalu klik di tag i nya maka akan terkopi secara otomatis paste di bawah icon bell oke kalau sudah selesai kita save dan kita lihat hasilnya apakah icon nya sudah muncul kembali ke browser refresh nah ternyata ternyata iconnya belum muncul kenapa? karena di tag HTML-nya kita belum panggil font awesome-nya jadi kita perlu memanggil file font awesome yang ada di sini terlebih dahulu jadi di atas kita buat lagi link kemudian kita buat nama folder-nya nama folder ini adalah font awesome free font awesome free slash lalu kita lihat nama folder di dalamnya adalah CSS lalu kita ambil yang all-min-css disini kita buat CSS slash all min css oke kalau sudah selesai kita panggil save lagi dan kita kembali ke browser kita lihat apakah sudah bisa nah ini Nah ini iconnya sudah masuk ya. Icon Envelope, Icon Bell, dan Icon Sign On atau Lock Out.
Nah ini kita perlu perbaiki. Kita perlu tambah margin di sini ya. Supaya nanti iconnya ini tidak mepet antara icon yang satu dengan icon yang lain. Yang pertama kita akan tambah margin leftnya terlebih dahulu. Jadi supaya ada jarak antara button search dengan icon envelope.
Di bagian kelas icon, di sini kita tambah kelas icon. kemudian di kelas FastFA Envelope disini juga kita tambah margin tag 3 lalu di bagian Bell kita tambah juga margin tag 3 Hai dan di bagian check out kita tambah margin tag 3 kalau sudah selesai kita save lihat apakah sudah tapi nah ini sudah lumayan tapi ya Nah Kemudian kita akan tambahkan tooltip di sini untuk mempercantik tampilan. Tooltip ini adalah untuk menampilkan informasi dari icon yang kita masukkan di sini. Jadi kita menggunakan tooltip. Silakan kembali ke dokumentasi bootstrap.
Kita cari tooltip masih di dalam bagian komponen. Cari tooltip. Nah ini tooltip. Sebelum kita menggunakan tooltip ini, kita perlu mengkopi file javascript yang ada di sini. Kita perlu mengkopi file javascript ini, silakan klik di link kopi.
Dan kita paste di dalam file admin.js kita. yang tadi sudah kita buat dan kita simpan silakan paste dan kita save lalu kita masukkan tooltipnya di dalam icon ini, catanya adalah kita tambah disini data toggle sama dengan tooltip Kemudian di depannya kita buat title. Jadi title ini adalah informasi apa nanti yang akan muncul ketika kita mengarahkan kursor kita di icon ini. Jadi karena ini envelope, ini adalah inbox.
Jadi kita masukkan. disini title nya contohnya surat masuk nah ini kita copy saja copy lalu paste di icon icon lainnya kita tinggal ubah title nya jadi ini title nya kita ubah contohnya disini notifikasi Kemudian ini kita ubah jadi contohnya site out. Oke, kalau sudah kita simpan, kita lihat apakah tooltipnya sudah muncul. Silakan tif test.
Dan kita mengatakan... kusur kita ke icon nah teman-teman lihat disini ketika saya mengarahkan kusur maka akan ada informasi bahwa ini adalah surat masuk ini adalah notifikasi dan ini adalah sign out nah sampai disini kita sudah selesai untuk membuat bagian header selanjutnya kita akan membuat bagian sidebar dan bagian utamanya Nah untuk membuat bagian sidebar dan bagian utama kita perlu membagi dua halaman website kita Bagaimana caranya? Yaitu dengan menggunakan grid system pada bootstrap. Jadi kita langsung saja kembali ke text editor kita.
Di bagian bawah tag penutup nav, kita buat di sini class row, div row. Kemudian di dalamnya kita buat class call md2. Kemudian di bawahnya lagi kita buat kelas call MD10. MD10.
Nah, call MD2 ini adalah bagian sidebar-nya yang berisi menu. Sementara call MD10 ini nanti berisi bagian utama dari halaman template website. site admin kita kita akan buat sidebar nya lebih dahulu jadi disini kita akan buat nanti menu bar nya tapi sebelumnya di bagian flow ini kita tambah sebuah kelas yang namanya no gutters Jadi nanti supaya tidak ada jarak atau margin antara call MD2 dan call MD10 Jadi nanti dia supaya antara call MD2 dan call MD10 menyatu Jadi kita tambah disini kelas no gutters Oke Kemudian kita akan buat menu disini Ya di bagian sini Kita akan kembali ke dokumentasi bootstrap Lalu kita ke bagian nav silakan klik di bagian nav masih di dalam bagian komponen lalu klik nav lalu kita cari yang nav vertikal ya silakan cari yang nav vertikal nah ini vertikal jadi kita gunakan yang ini ya silakan klik di link copy lalu kita paste di dalam colmd2 kalau sudah selesai kita rapikan lalu save dan kita lihat hasilnya di browser kita lihat apakah nav-nya sudah muncul nah ini nav-nya sudah muncul ya tapi ini tertutup oleh header-nya ya karena tadi di bagian header ini kita sudah menambah kelas fixed top jadi caranya supaya semua menu ini kelihatan di bagian row ini kita tambah margin top-nya menjadi 5 Nah, ini sudah kelihatan ya.
Kita tinggal ubah bagian menu-menu ini. Yang pertama ini kita ubah jadi dashboard. Kemudian ini kita ubah jadi daftar mahasiswa.
Ini kita ubah jadi daftar dosen. Nah ini kita hapus saja karena ini nav link disable kita tidak menggunakan yang disable. Kita copy aja dari daftar dosen ini. Lalu paste di bawahnya. Ini kita ubah jadi daftar pegawai.
Lalu di bawahnya kita paste lagi dan ini kita ubah jadi jadwal kuliah. Paste di bawahnya lagi dan ini kita jadikan nilai mahasiswa. Save. Kita lihat hasilnya apakah sudah muncul semua menunya.
Nah ini sudah muncul ya. Dashboard, daftar mahasiswa, daftar dosen, daftar pegawai, jadwal kuliah dan nilai mahasiswa. Nah ini kita tinggal perbaiki saja.
Kita menggunakan kelas-kelas pada bootstrap untuk mempercantik tampilannya. Yang pertama kita buat backgroundnya terlebih dahulu menjadi hitam. Jadi di bagian colmd2 ini kita buat disini bg dark. Kita lihat apakah sudah berubah menjadi hitam. Nah ini sudah berubah menjadi hitam ya.
Lalu kita tambah margin topnya ini supaya tidak terlalu mepet ke atas. Dan kita tambah paddingnya nanti ya. Jadi supaya bagian menu ini masuk ke dalam dan tidak terlalu mepet dengan marginnya.
Jadi di bagian colmd2 ini kita masih tambah disini margin top 2. Dan kita tambah padding right. Padding right-nya kita buat 3 saja. Save.
Kita lihat hasilnya. Nah, ini sudah bergeser ya. Kemudian kita tambah lagi di sini padding top-nya 4. kita lihat hasilnya nah ini sudah bergeser ya kemudian di tag ul nya disini kita tambah margin left nya 3 dan margin button nya 5 Kita lihat apakah ada perubahan.
Nah, ini sudah ada perubahan ya. Nah, supaya tulisannya terlihat lebih jelas, kita akan ubah warna tulisannya ini menjadi warna putih. Jadi, di setiap tag A-nya ini kita tambah text white.
Text white. Di sini kita tambah text white. Jangan lupa text white-nya ditambah di setiap tag A ya. Di depan nav link tepatnya. Kita lihat apakah ada perubahan, warnanya sudah berubah menjadi putih.
Nah, ini warnanya sudah menjadi putih ya. Lalu, kita akan tambah garis di sini untuk memisahkan antara menu satu dengan menu yang lain. Nah, cara untuk menambahkan garis... praktis di sini ada berapa cara kita bisa menggunakan teks HR atau dengan menggunakan border-bottom pada CSS nah supaya lebih praktis kita akan gunakan teks HR saja jadi silakan buat penutup tag A nya disini kita buat HR kemudian kita tambah disini kelas BG secondary jadi supaya nanti warnanya agak ke putih putihan BG secondary kita lihat dulu sebelum kita pastel nah ini garisnya sudah muncul seperti ini ini kita copy saja ya tag HR ini copy, lalu paste di setiap akhir penutup tag A-nya.
Ini kita paste, paste, sampai di bagian nilai mahasiswa. Save, kita lihat apakah gratisnya sudah muncul. Nah, ini gratisnya semua sudah muncul. Nah, kemudian untuk lebih mempercantik tampilannya, kita akan tambahkan icon di setiap bagian belakang.
menu bar ini jadi kita menggunakan font awesome yang pertama kita tambah dulu untuk dashboard ya jadi silahkan kembali ke dokumentasi font awesome kemudian di bagian search nya kita cari kita ketik disini dashboard nah kita gunakan yang ini yang tekmometer al silahkan klik dan kita copy dengan cara mengklik tag i nya Kemudian kita paste tepat di belakang tulisan dashboardnya. Kita lihat dulu apakah iconnya sudah masuk. Nah, ini icon dashboardnya sudah masuk ya. Kemudian kita buat di icon untuk mahasiswa. Di sini kita search aja student.
Nah, kita gunakan yang ini ya, User Graduate. Silakan copy dengan cara mengklik, lalu paste di belakang tulisan daftar mahasiswa. Kemudian untuk dosen, kita search icon-nya di sini, Teachers. Silakan copy yang ini, klik.
Lalu klik di tag innya dan paste di belakang daftar dosen. Lalu untuk pegawai kita gunakan user aja ya. Nah kita gunakan yang ini silahkan klik di sini.
Atau itu terlalu simple kita pilih yang lain. kita pilih yang yang mana ya cocok Untuk pegawai, icon pegawai Kita gunakan yang ini aja ya User edit Silahkan klik di tag in nya Lalu paste di belakang Tulisan daftar pegawai Lalu untuk jadwal kuliah Ini karena jadwal jadi kita gunakan aja Icon kalender Ketik aja disini kalender Nah, kita gunakan yang ini, kalender al. Lalu paste di sini.
Kemudian untuk nilai, kita gunakan apa nih? Coba kita buat paper. Nah, kita gunakan yang ini, paper plane.
Silakan klik di tag i-nya, lalu kita paste di sini. Save. Kita lihat hasilnya, apakah sudah muncul semua icon-nya. Silakan lift test. Nah, ini icon-nya sudah muncul ya.
Dashboard, mahasiswa, dosen, pegawai, jadwal kuliah, dan nilai mahasiswa. visual tapi ini kalau kita lihat iconnya ini masih terlalu mepet dengan tulisannya jadi kita perlu untuk membuat margin ya supaya ada jarak sedikit jadi di depan kelas iconnya ini kita tambah disini margin-tag nya 2 kita lihat apakah 2 cukup nah cukup ya Nah ini kita tinggal masukkan di setiap kelas iconnya m82 sini kita tambah m82 sini m82 ini MR2 dan MR2. Save. Nah, ini sudah ada margin ya. Nah, kemudian kita tambah lagi.
Lagi-lagi untuk mempercantik tampilan, kita akan buat hover ya. Efek hover di setiap menunya. Jadi nanti setiap kita...
mengatakan kursor di bagian menu ini maka warnanya akan berubah, nah kita akan buat tampilan hover ini di file CSS yang tadi kita buat disini, jadi kita panggil kelas navlink ini di CSS titik navlink lalu kita buat hovernya Kita buat hovernya itu adalah backgroundnya nanti berubah. Jadi kita buat di sini background colornya jadi warna coklat. Grey. Coba save. Kita lihat apakah sudah ada efek hovernya.
Silahkan atakan cursor kita ke sini. Nah ini ya. Warnanya menjadi berubah ketika kita mengarahkan cursor kita. di bagian menunya nah sampai disini kita sudah selesai membuat bagian sidebar nya sekarang kita akan membuat bagian utamanya jadi kita akan buat bagian utamanya di kelas call MD 10 jadi tadi bagian sidebar nya di call MD 2 sekarang bagian utamanya di call MD 10 oke jadi disini kita akan buat terlebih dahulu untuk bagian utama dari dashboard nah dashboard ini nanti akan berisi card yang mana di dalam card itu nanti terdapat informasi jumlah mahasiswa jumlah dosen jumlah pegawai Dan mungkin nanti kita akan tambahkan beberapa icon social media dari Universitas Majapahit ini.
Jadi kita buat dulu judulnya ya di sini. Nah sebelum kita buat judul, kita buat iconnya terlebih dahulu. Jadi di sini kita copy saja icon dari dashboard ya. Kita copy dari tag i ini sampai tag i penutupnya. Copy.
lalu paste disini kita buat disini tag h3 ya jadi supaya nanti tulisan judulnya ini lebih besar dari tulisan yang ada di bagian sidebar nya lalu kita paste paste icon yang tadi kita copy dari atas kemudian disini kita buat tulisan dashboard lalu kita buat disini hr supaya ada garis bawahnya save kita lihat apakah judulnya sudah muncul Nah ini judulnya sudah muncul ya, tapi ini kita perlu tambahkan margin supaya dia tidak terlalu mepet ke atas dan ke samping. Jadi di sini kita tambah padding ya. Di colmd10 kita buat di sini padding, paddingnya 5. Lalu untuk topnya, padding topnya kita buat 2. Coba kita save lalu refresh.
Nah ini sudah ada jarak ya. Kemudian di bawah dashboard ini seperti yang tadi saya katakan kita akan memasukkan jumlah mahasiswa disini, jumlah dosen dan jumlah pegawai. Nah bagaimana cara memasukkannya? Kita akan memanfaatkan komponen card pada bootstrap. Nah bagaimana cara penggunaan card ini?
Saya tidak jelaskan lebih jauh di dalam video tutorial kali ini. Karena sekali lagi bagian card ini sudah saya buat video khusus jadi silakan teman-teman cek kembali. kembali di playlist bootstrap di channel ini Nah kita akan buat lebih dahulu kelas di sini ya dibagi dibawah teka tiga kita buat kelas slow di sini hai hai Kemudian kita kembali ke dokumentasi bootstrap. Kemudian kita cari card, masih di dalam bagian komponen. Silahkan cari card.
Nah, kita klik yang ini. Kemudian kita gunakan yang ini saja ya. silakan copy lalu kita paste di sini dan kita akan merapikannya nah disini ada beberapa bagian yang tidak kita perlukan nanti kita akan hapus hai hai Yang pertama ini kita hapus dulu ya, IMG. Karena di sini kita tidak menggunakan gambar, melainkan kita menggunakan icon. Lalu di depan kelas low ini kita buat di sini text white.
Supaya nanti semua tulisannya bisa berubah menjadi putih. Kemudian di card title-nya ini kita ubah di sini jadi jumlah mahasiswa. Kemudian tag P ini kita jangan hapus, kita manfaatkan ini.
Kita buat tulisan di sini, lihat. lihat detail jadi pada saat nanti kita mengklik di bagian lihat detail ini maka akan memunculkan detail dari jumlah mahasiswa jadi tag P ini kita masukkan di dalam tag A ya cut dulu lalu kita buat tag A ini kita kosongkan dulu ya href nya lalu kita paste disini kemudian di depan lihat detail ini kita tambah icon icon untuk tanda panah Kebetulan karena saya hafal nama kelasnya, jadi langsung saja kita buat di sini. Kelas FAS FA Angel Double Taik.
Kemudian kita tambah marginnya ya. Supaya nanti nggak terlalu mepet dengan tulisannya. Kita buat di sini kelas ML2. Oke, kalau udah selesai kita save. Lalu kita lihat hasilnya.
Apakah card-nya sudah muncul? Nah, ini card-nya sudah muncul ya. Tapi tulisan jumlah mahasiswanya di sini belum muncul.
Nah, sebenarnya ada, tapi karena tadi kita buat tulisannya warna putih, makanya dia tidak muncul. Caranya adalah kita akan ubah background dari card ini terlebih dahulu. Jadi di bagian card-nya ini kita buat di sini BG info. nah ini sudah berubah ya lalu disini kita buat text white supaya nanti tulisan lihat detailnya berubah menjadi warna putih nah ini kemudian button ini kita hapus aja hai hai Lalu di bawah tag H5 ini kita buat sebuah kelas yang namanya display 4. Ini untuk menampilkan jumlah mahasiswa. Kenapa kita menggunakan display 4?
Supaya nanti angkanya lebih besar ya. Jadi contohnya disini kita buat jumlah mahasiswanya adalah 1200. Nah teman-teman untuk jumlah mahasiswa ini kita masih memasukkan secara manual. Kenapa? Karena sekali lagi saya mengingatkan bahwa ini masih tutorial front end framework. Jadi kita belum masuk pada...
ada backend framework seperti Codigniter dan Laravel yang menggunakan database jadi karena kita masih belum menggunakan database, jadi kita masukkan angkanya manual, sekali lagi yang kita buat ini adalah hanya template saja oke, silakan save dan kita lihat apakah angkanya sudah muncul nah, ini angkanya sudah muncul 1200 jumlah mahasiswanya ya nah, kita akan buat ini menjadi tebal, jadi kita kembali ke CSS kita kita panggil class display 4 ini lalu kita buat font-weight nya menjadi ball Nah, ini sudah berubah menjadi bol. Nah, kemudian kita akan tambah icon di sini untuk mempercantik. Jadi, kita gunakan saja icon mahasiswa yang ada di sini. Jadi, di sini kita buat class card. body icon di bawah kelas card body ya div card body icon nah kemudian di dalamnya kita masukkan icon yang student tadi, nah kita gunakan icon yang ini ya, yang ada di daftar mahasiswa silahkan copy dan kita paste di sini save kita lihat apakah iconnya sudah muncul nah ini iconnya sudah muncul ya tapi ini kita perlu memperbaiki karena kita ingin memperbesar icon ini dan kita jadikan dia sebagai back down jadi silakan kembali ke CSS kita panggil class card body icon ini di CSS kita hai hai Kemudian kita buat posisinya absolute.
Kemudian kita buat Z-index-nya 0. Lalu kita ubah posisinya top jadi 25px dan tag-nya 4px. Hai nah supaya dia terlihat agak transparan kita ubah opacity nya jadi dan kita perbesar ya font-sizenya menjadi Kita coba 90px. Coba save. Kita lihat apakah icon mahasiswa ini sudah berubah menjadi background. Nah, ini sudah berubah menjadi background ya.
Nah, kemudian ini mungkin kita perlu tambahkan margin left-nya. Jadi, nanti supaya sejajar dengan hr yang ada di sini. Di depan bginfo ini kita tambah ml5.
Save. Nah ini sudah bergeser tapi terlalu ke dalam ya. Kita ubah jadi 3. Nah cukup ya segini ya.
Ini kita sudah selesai membuat untuk jumlah mahasiswa. Selanjutnya kita buat untuk jumlah dosen dan jumlah pegawai. Nah ini caranya sudah gampang. Kita tinggal copy saja ini.
Kita copy. Tapi mulai dari yang ini, yang kelas kart, sampai penutup kartnya. Copy. Lalu paste dua kali.
Paste yang pertama untuk dosen, dan yang kedua untuk pegawai. Nah, ini kita tinggal ubah aja nih. Begitunya kita ubah dulu.
Ini contohnya jadi begitunya sukses. jadi warna hijau ya kemudian nah ini iconnya kita ubah nih kita gunakan iconnya dosen ya yang ini kita copy ini mulai dari tag i nya sampai tag i penutup copy lalu kita paste di bawah kita paste di sini ya sini ini kita ganti Hapus lalu paste. Ini kita ubah jadi jumlah dosen.
Dan jumlahnya kita ubah contohnya jadi 58 ya. Oke, kemudian untuk pegawai. Ini kita ubah jadi BG Danger. Warnanya menjadi meta.
Kemudian, ini jadi jumlah pegawai. Jumlah pegawai contohnya kita buat jadi 21 ya. Nah, ini kita ganti icon-nya. Kita gunakan icon dari pegawai yang ini. Kita copy icon-nya sini.
lalu kita paste di dalam class card body icon nya oke kalau sudah selesai semua save kita kembali ke browser refresh nah ini sudah muncul ya jadi sudah ada jumlah mahasiswa, jumlah dosen jumlah pegawai nah mungkin ini kita akan tambah marginnya supaya ini tidak terlalu mepet, jadi di cardnya dosen ini kita tambah disini ML ML5, ini ML5 juga. Jadi marginal left-nya jadi 5. Nah, ini ya, sudah bergeser. Atau mungkin yang jumlah masyarakat ini kita geser aja ya. Ini dari 3 ubah jadi 5. Jadi supaya jarak ini, sebelah sini tidak terlalu jauh.
Nah, ini sudah bergeser. Oke teman-teman, jadi kita sudah berhasil membuat kart jumlah mahasiswa, jumlah dosen, dan jumlah pegawai Selanjutnya kita akan buat kart untuk social media Jadi nanti disini akan kita buat kart untuk social media Instagram, Facebook, dan Twitter Nah, kita akan gunakan kart yang simple ya Nah kita akan gunakan card yang ini yang ada header dan footernya. Jadi nanti supaya di bagian header ini kita tambah iconnya. Dan di bagian buttonnya kita tambah button untuk follow. Jadi ini kita copy saja.
Kita paste di bawah. Tapi sebelumnya kita buat lebih dahulu class row ya. Di sini. Kita buat di sini class row.
Lalu kita paste, ditapikan dulu. Save. Kita lihat apakah card-nya sudah muncul. Nah, ini card-nya sudah muncul ya.
Nanti kita tinggal perbaiki saja. Yang pertama kita ubah dulu margin-nya ini. Kita buat margin top 4, jadi supaya tidak terlalu mepet di atas.
Di bagian low ini kita tambah di sini MT4. Kemudian di bagian card ini kita samakan dengan atas ML5. Lalu ukuran cardnya ini, ini terlalu besar ya, jadi kita samakan aja dengan di atas. Di sini ukurannya adalah 18 frame, jadi di sini kita buat style, atau supaya lebih cepat ini kita copy saja. kita blok lalu copy dan paste di depan class cut nya nah seperti ini ya kita lihat apakah sudah ada perubahan nah ini sudah ada perubahan ya jadi ukurannya sudah sama dengan yang ada di atas kita tinggal masukkan disini, ini kita hapus fitur ini kita ganti dengan icon instagram nah bagaimana cara memasukkan icon nya gampang saja kita tinggal gunakan icon nya font awesome jadi kita ketik disini instagram silahkan search nah kita gunakan yang ini ya Hai silakan copy dengan cara mengklik lalu paste di dalam kelas card hidupnya Nah di sini ada yang lupa tadi di sini kita buat teks sentek teks white ya jadi nanti supaya semua tulisan dan iconnya menjadi putih lalu kita buat disini text center jadi semua icon dan tulisannya nanti berada di tengah coba save kita lihat hasilnya Nah, ini sudah muncul ya.
Kalau teman-teman lihat di sini, perhatikan di sini sebenarnya ini ada icon Instagram, tapi tidak kelihatan karena iconnya warna putih. Jadi kita perlu untuk mengubah background-nya terlebih dahulu. Di card header ini kita ubah.
Warnanya jadi merah jadi BG Danger. Save. Kita lihat apakah sudah berubah. Nah ini sudah berubah ya.
Dan teman-teman lihat di sini ada icon Instagramnya. Nah tapi kalau teman-teman perhatikan di sini ini iconnya masih sangat kecil ya. Jadi kita akan ubah ukurannya menjadi display 4. Jadi di bagian kelas header-nya ini, depan BG Danger kita tambah di sini kelas display 4. Supaya ukurannya menjadi besar. Nah ini ukuran icon-nya sudah menjadi besar. Lalu kita perlu menambahkan padding di sini, padding top dan padding button.
Jadi kita buat padding top-nya 4 dan padding button-nya 4 juga. nah ini sudah ada paddingnya ya lalu di bagian teks halima ini ini kita buat tulisan Instagram Hai nah ini kita buat tulisannya omet aja ya teks danger lalu teks ini kita hapus aja hai hai Hai dan di bagian baton ini ini kita ganti jadi follow dan btn-nya kita ubah jadi danger coba save kita lihat Apakah sudah ada perubahan nah ini sudah ada perubahannya sudah ada icon sudah ada tulisan Instagram dan sudah ada button untuk follow kemudian kita akan buat icon social media untuk facebook dan twitter jadi ini kita tinggal copy saja copy mulai dari kelas kart sampai ke penutup kelas kartnya kita paste di bawah backgroundnya ini kita ubah jadi info bginfo Kemudian icon ini kita hapus dan kita ganti dengan icon Facebook. Kita kembali ke dokumentasi font awesome. Kita cati di sini Facebook. Nah ini sudah dapat, kita gunakan yang ini.
Lalu klik di tag i dan kita paste. Kemudian ini kita ganti jadi Facebook. Hai dan follow nya kita ubah jadi like ya karena kalau Facebook kan like ya bukan follow lalu teks ini kita ubah teksnya jadi info kita samakan dengan yang di atas kemudian ini juga btn-nya info Ayo kita save lalu kita lihat hasilnya hai hai Nah, ini sudah muncul ya, icon dan tulisan serta button like-nya.
Kemudian kita masukkan di sini untuk Twitter. Caranya gampang, ini tinggal copy. Lalu paste di bawahnya.
Kemudian ini kita ubah jadi primary. Yang text info ini kita ubah jadi text primary. lalu yang btn info kita ubah jadi primary juga oke kemudian ini kita ubah dulu iconnya ya hapus icon facebooknya lalu kita cari di font awesome twitter Oke, kita gunakan yang Twitter ini. Silakan klik di tag i-nya dan kita paste. Lalu ini kita ubah Facebook menjadi Twitter.
Dan like-nya menjadi follow. Save. Kita lihat hasilnya. Oke, teman-teman sudah muncul ya.
Jadi sudah ada icon social media untuk Instagram, Facebook, dan Twitter. Sekali lagi, untuk button-button ini masih belum bisa kita gunakan ya, karena ini hanya tampilan atau template. Nah sejauh ini kita sudah selesai untuk membuat dashboard. Kalau teman-teman mau menambahkan, memodifikasi silakan berdasarkan kreativitas teman-teman masing-masing. Nah selanjutnya nanti kita akan buat untuk daftar mahasiswa.
dosen, daftar pegawai, jadwal kuliah, dan nilai mahasiswa. Tapi sebelumnya kita buat lebih dahulu link di sini ya. Jadi nanti supaya link ini bisa berfungsi, ini semua bisa berfungsi, jadi kita buat link di sini, di bagian nav link-nya. Ini masing-masing kita buat link.
Nah, untuk dashboard kita buat di sini, htf-nya dashboard. seperti dashboard.html. Ya, karena ini tadi kita buat nama filenya dashboard.html.
Kemudian untuk daftar mahasiswa, nanti kita buat file dengan nama Mahasiswa.html Lalu untuk dosen Kita buat disini dosen.html Untuk pegawai Pegawai.html Kemudian untuk jadwal kuliah Jadwal.html Dan untuk nilai mahasiswa, nilai.html Nah, sehingga nanti kita akan membuat file masing-masing menu bat ini berdasarkan nama yang ada di sini. Oke, berarti selanjutnya setelah kita selesai membuat file dashboard HTML, selanjutnya kita akan membuat menu atau halaman mahasiswa.html. Nah, jadi ini sudah selesai.
Kita close saja. Kita kembali ke folder kita. ke folder template admin yang ini dashboard ini kita copy saja copy lalu paste di dalam folder yang sama Kemudian kita rename, masih ingat tadi namanya apa? Untuk mahasiswa, daftar mahasiswa, namanya adalah mahasiswa, ekstensinya tetap HTML. Oke, kalau sudah selesai, file HTML mahasiswa ini kita buka di dalam text editor kita.
Nah, ini sekarang kita sudah masuk di halaman mahasiswa. Jadi, ini bagian dashboard ini kita hapus saja. Ini kita hapus, jadi kita ganti jadi mahasiswa.
Sorry, bukan mahasiswa ya, tapi daftar mahasiswa. Kemudian ikonnya kita ambil dari ikon mahasiswa ya. Yang ini. Blok copy. Lalu paste di sini.
Ini hapus. Lalu paste. Oke. Kemudian untuk card ini tadi, karena ini kan tadi card punya dashboard, kita hapus saja.
Karena untuk daftar mahasiswa kontennya nanti berbeda. Ayo kita hapus sampai yang tadi ya yang ada Twitter sore kita cek dulu kita hapus sampai di Hai Oh kita sampai di sini ya ini hapus aja key kalau sudah kita save lalu Klik Kanan open in browser hai hai Nah kalau teman-teman perhatikan ini adalah bagian dari halaman mahasiswa. Ya teman-teman bisa lihat di sini di URL-nya template slash mahasiswa.
Nah coba kita klik di dashboard apakah halaman dashboardnya sudah muncul. silahkan klik nah ini halaman dashboardnya sudah muncul ya yang tadi kita buat silahkan lihat di url nya template admin slash dashboard nah karena ini sudah selesai ya dashboardnya tadi kita sudah selesai sekarang kan kita buat untuk bagian mainnya Jadi kita fokus di bagian mahasiswa ini. Nah untuk daftar mahasiswa ini kita akan buat table ya untuk daftar mahasiswanya.
Jadi silakan kembali ke dokumentasi bootstrap lalu kita cari table. Jadi untuk table silakan klik di bagian content lalu klik di tables. Nah ini adalah dokumentasi dari table.
Kita akan gunakan yang ini ya yang slip rows. Jadi ini. ini silakan kita copy lalu paste di bawah daftar mahasiswa kita rapikan dulu coba save lalu kita lihat hasilnya di browser hai Hai nah ini sudah muncul ya tapi ini kita tambah bot.saja di sini ya jadi di depan ini kita tambah table board.com Hai jadi supaya tetap ada board.com semuanya nah ini sudah ada buatnya ini kita ubah nya untuk di headnya kita ubah ini jadi nomor ini nama mahasiswa Hai ini nim kemudian ini alamat lalu kita tambah lagi tehnya ini kita ubah jadi Hai atau ini tempat tanggal lahir Hai tempat tanggal lahir lalu kita buat lagi di sini aksi ya jadi nanti untuk aksi ini nanti admin bisa melihat detail mahasiswa menghapus data mahasiswa ataupun mengedit data mahasiswa Hai jadi disini kita buat dulu colspan 3 ya colspan 3 karena nanti ada tiga aksi yaitu detail hapus dan edit ya kemudian untuk ini kita tambah eh kita lihat dulu hasilnya ya save dulu lalu kita aktif tes nah ini sudah muncul nomor nama siswa, nim, tempat tanggal lahir, alamat, dan aksi nah kita tinggal masukkan aja datanya disini contohnya namanya tetakmat, kemudian nimnya contohnya 1234 12341 lalu tempat lahirnya, contohnya Bekasi 317 Hai 1998 kemudian alamatnya kita buat disini teks td alamatnya contohnya Bekasi Jawa Batat lalu Nah kita buat aksi di sini ya Jadi ada tiga aksi. Aksi yang pertama adalah nanti admin bisa melihat detail dari mahasiswa.
Bagaimana caranya? Kita buat aja di sini button ya. Kita buat button di sini.
Kelas. btn btn primary kemudian disini kita tambah value-nya jadi detail kita lihat dulu apakah buttonnya sudah muncul nah ini detailnya sudah muncul ya lalu kita tambah disini icon atau button untuk menghapus dan mengedit nah kita buat dulu untuk mengedit ya Nah bagaimana caranya kita menggunakan lagi icon dari font awesome kita cari disini edit oke kita gunakan yang ini ya edit ini kita copy lalu kita paste di bawahnya sebelum kita paste kita buat dulu td lalu paste lalu kita cari icon untuk delete ya delete Hai Nah kita gunakan yang icon tong sampah ini kita pakai yang ini saja Ayo kita copy iconnya lalu kita buat dulu TD dan kita paste save kita lihat apakah icon-iconnya sudah muncul nah ini sudah muncul ya icon untuk edit dan icon untuk hai hai menghapus lalu disini kita perlu untuk membuat digitalnya supaya nanti tampilannya bisa menjadi lebih bagus untuk edit jadi kita tambah bg contohnya kita buat bg warning lah ya kemudian untuk hapus bg danger save nah ini bg tanya sudah muncul tapi kita perlu untuk menambah paddingnya contohnya kita buat paddingnya 4 padding 4 Oh kegedean ya paddingnya ya 2 coba 2 Nah ini cukup ya Nah kemudian ini kita ubah aja Iconnya menjadi putih lah ya Disini kita buat text white Dan untuk delete juga text white Hai kek gimana atau yang delete ini kita ubah jadi warna hijau ya silakan teman-teman berdasarkan selera teman-teman saja kalau saya gunakan yang hijau saja oke nah ini kita perlu untuk dia setiap sisi ini kita buat tumpul jadi nanti supaya sama seperti button ini Bagaimana caranya untuk membuat tumpul disini kita tambah aja kelas rounded ya sini ronde save kita lihat apakah ujungnya sudah tumpul nah ini sudah menjadi tumpul ya Oke ini saya hapus saja dan saya copy mulai dari sini copy lalu paste di bawahnya ini saya ubah jadi dua 3 4 save kita lihat apakah ada 4 nah ini sudah ada 4 silahkan teman-teman sendiri ubah ya nama mahasiswa nilai tempat lahir dan alamat tapi seperti ini tadi ada yang salah ya di sini ada muncul TD kita lihat kesalahannya dimana tdo ini tadi terhapus ya ini ya kita perbaiki dulu ini oke save kita lihat nah Sudah, bagus ya. Oke, kemudian di atas ini kita tambah button di sini untuk menambahkan data mahasiswa.
Jadi, di atas tablenya ini, kita buat tag A, lalu kita buat di sini kelas, BTN. Hai btn eh bukan ranger ya primary lalu kita buat filenya tambah data mahasiswa supaya lebih cantik kita tambah icon di belakangnya Hai baik ikon plus kembali ke dokumentasi bootstrap ketik aja plus Nah kita gunakan yang mana ini kita gunakan yang square atau yang bulat coba yang square ya Silakan klik. Lalu kita paste di belakang tulisan tambah data mahasiswa.
Tapi ini kita perlu buat margin ya ya. Margin type-nya 3 atau 2. Jadi nanti supaya tidak terlalu mepet dengan tulisannya. Nah ini sudah muncul tapi kayaknya terlalu jauh ya. Jadi 2 aja ini.
Hai nah seperti ini kemudian kita tambah margin button nya kita tambah di sini aja margin button nya dua atau empat ya kurang dua oke terlalu jauh ya tiga hai hai Hai nah cukup ya kemudian kita akan menambahkan tooltip di button edit dan delete ini jadi silakan kembali ke text editor Hai di kelas fastfa editnya kita buat data toggle Hai tooltip Hai kemudian depannya kita buat title edit ya kemudian di delete nya kita buat lagi data toggle kemudian titelnya kita masukkan delete kita save dulu kita lihat apakah tool tipnya sudah muncul kembali ke browser lalu refresh kita akan mengarahkan cursor kita ke button edit lebih dahulu nah ini tooltipnya sudah muncul ya dan di button delete juga tooltipnya sudah muncul nah ini kita tinggal copy saja dan paste di setiap barisnya ya copy kemudian paste di setiap barisnya Kemudian yang tooltip delete juga kita copy ya, tooltipnya. Lalu paste di setiap batisnya. Save, kita lihat apakah tooltipnya semua sudah muncul.
Clip test dulu. Nah, ini sudah muncul semua ya. Oke, jadi sekarang kita sudah selesai membuat untuk halaman mahasiswa.
Selanjutnya kita akan membuat untuk daftar dosen ya. Jadi ini kita close dulu, kemudian kita kembali ke folder template admin kita. File HTML mahasiswa ini kita copy dan kita paste di dalam folder yang sama. Kita rename dengan nama dosen.
Lalu kita buka di dalam text editor kita. Yang pertama kita akan ubah terlebih dahulu judulnya ya. Ini jadi daftar dosen.
Dan jangan lupa iconnya kita ubah. Icon ini kita hapus dulu dan kita copy dari icon daftar dosen di navbar-nya. Lalu kita paste di belakang tulisan daftar dosen.
Kemudian untuk tambah data masyarakat ini kita ganti jadi tambah data dosen. Lalu kita masuk pada... tabelnya, ini tetap nomor, kemudian ini nama dosen, ini kita ubah jadi NIDN, nomor induk dosen nasional, ini tempat tanggal lahirnya tetap, lalu mungkin ini kita ubah jadi bidang keahlian.
Nah, ini tetap ya. Nah, kita akan ubah salah satu. Contohnya ini nama dosennya Pilip.
Kemudian NIDN-nya contohnya 23143. Lalu tempat lahirnya contohnya Jakarta 18. Juli 1989 Lalu bidang keahliannya contohnya kita buat disini Informatika Save kita lihat Apakah datanya sudah masuk? Kita refresh lalu kita klik di daftar dosen. Nah ini judulnya sudah berubah, ikonnya sudah berubah. Button tambah datanya sudah berubah.
Kemudian nama dosennya ini di sini sudah berubah. Nah silakan teman-teman isi sendiri. Bagian baris berikutnya ya. Selanjutnya kita akan masuk ke daftar pegawai. Kita kembali ke folder template admin.
Kemudian. Daftar dosen ini kita copy Dan kita paste di dalam folder yang sama Lalu kita rename menjadi namanya pegawai Selanjutnya kita buka di dalam text editor kita Sama seperti tadi untuk halaman dosen ya Ini kita ganti jadi daftar pegawai Hai kemudian iconnya kita ambil dari nafbar copy dan paste ya di sini ini kita hapus dulu dan kita paste icon dari pegawai lalu untuk button tambah data ini kita ubah jadi pegawai hai hai Ini nomor tetap, nama pegawai, ini kita buat jadi ID pegawai, tempat tanggal lahir, kemudian disini kita buat departemen. Kita coba save, kita refresh dan kita klik di daftar pegawai.
Nah ini sudah berubah ikonnya, judulnya. button tambahnya ya kemudian untuk t-headnya sudah berubah, nah silahkan teman-teman sendiri yang mengganti datanya ya selanjutnya kita masuk pada jadwal kuliah template admin ini kita copy dan kita paste di dalam folder yang sama lalu kita rename kita beri nama jadwal jadwal Oke, lalu kita buka di dalam text editor kita. Sama seperti tadi, icon-nya kita ganti.
Kita copy dulu icon jadwal dari navbar. Kemudian kita paste di belakang judulnya. Judulnya kita ganti jadi jadwal kuliah.
Kemudian untuk button tambah datanya, di sini kita ubah jadi tambah data jadwal kuliah. Lalu untuk tabelnya ini tetap nomor, kemudian ini kita masukkan di sini mata kuliah, lalu kode MK, kode mata kuliah. Kemudian di sini dosen mengajar dan di sini kita buat jurusan ya. Oke, kita coba save. Kita kembali ke browser dan kita refresh.
Lalu klik di jadwal kuliah. Hai nah ini sudah masuk ya judulnya sudah berubah batangnya sudah berubah mungkin ini kita akan ubah disini satu ya nanti untuk data yang lainnya silakan teman-teman ubah sendiri contohnya kita buat mata kuliah jenis ini web bro kemudian kodenya contohnya WP031 lalu dosen mengajarnya contohnya Suhardono dan jurusannya tetap informatika kita coba cek apakah datanya sudah masuk nah ini sudah berubah ya mata kuliah web programming kodenya WP031 dosen mengajarnya suat download dan jurusannya informatika silahkan teman-teman ubah sendiri untuk data selanjutnya yang di bawah ya kemudian kita masuk ke bagian nilai mahasiswa ini kita close saja kemudian kita kembali ke folder template admin jadwal ini kita copy dan kita paste di dalam folder yang sama dan kita rename jadi ini namanya nilai lalu kita buka di dalam text editor kita Seperti tadi kita ubah dulu iconnya ya. Kita copy icon dari sidebar. Silahkan copy icon nilai mahasiswa. Kemudian kita paste di belakang tulisan judulnya.
Dan untuk judulnya ini kita ubah jadi nilai mahasiswa. Oke, kemudian di bagian button-nya kita ubah ini jadi tambah data nilai mahasiswa. Nomornya tetap, ini jadi nama mahasiswa. Kemudian ini jadi mata kuliah. kode mk dan ini kita ubah jadi nilai akhir save, kita lihat apakah data nilainya sudah masuk Nah, ini sudah berubah ya.
Kita tinggal masukkan aja di sini. Datanya. Nama mahasiswa. Contohnya saya masukin nama saya. Darmawan Lawli.
Mata kuliahnya. Web. Programming. Kodenya WP31.
031 ya. Kemudian contohnya nilai exitnya 90. Kita coba save dan kita lihat hasilnya di browser. Nah ini datanya sudah masuk ya. Silakan teman-teman tambah sendiri data untuk baris berikutnya. Nah sampai di sini teman-teman kita sudah berhasil untuk membuat template halaman admin sederhana dari sistem informasi akademik universitas.
Walaupun tampilannya ini sangat sederhana sekali. Nanti mungkin kita akan sempurnakan pada saat kita masuk pada backend framework ya. Nah nanti kita akan akan tetap menggunakan template ini ketika kita masuk pada seri tutorial atau playlist back-end framework nah sekian tutorial untuk kali ini semoga teman-teman suka dengan video ini dan semoga tutorial kali ini bermanfaat buat teman-teman semua jangan lupa like share dan subscribe channel ini supaya kita bisa sama-sama membangun channel ini menjadi channel edukasi bagi teman-teman yang mau belajar webdesign dan web programming Sampai jumpa di video selanjutnya.