StudyKuy – Di tulisan saya sebelumnya sudah membahas untuk membuat form login php dengan CSS dan Bootstrap. Pada kesempatan kali ini saya akan membagikan ilmu ngoding lagi dengan membuat dashboard responsive hanya dengan CSS dan Fontawesome.

Bagi kalian yang belum tau apa sih itu Fontawesome ? Font Awesome adalah kumpulan font dan ikon yang berbasis pada CSS dan Less.

Font Awesome dibuat oleh Dave Gandy untuk digunakan dengan Bootstrap, dan kemudian dibundel ke BootstrapCDN kata wikipedia sih itu bro.

Fontawesome itu sama seperti plugin font dan icon untuk kalian membuat sebuah font dan icon untuk keperluan website kalian.

Baca juga

Cara Mudah Membuat Daftar Isi di Microsoft Word
Tutorial PHP Dan MYSQL Membuat Dashboard PHP
Cara Menggabungkan Beberapa File Menjadi Satu Sheet

Kali ini kita kan membahas satu persatu yahh, budayakan membaca yah jangan sampe malas untuk membaca.

Karena jika kalian tidak membaca satu persatu maka nanti kalian tidak akan mengerti kalian hanya bisa copas saja dan tidak mengerti maksud dari masing-masing perintah.

Oke langsung masuk kedalam pokok pembahasan yah.

Sebelumnya kita sudah membuat sebuah dashboard seperti ini untuk layoutnya.

dashboard php

Ini kan kita buat hanya sebagai kerangka awal pada tutorial sebelumnya saya hanya membuat kerangka awalnya belum di hias dengan CSS ya toh, okee baiknya kita bersua dan berkopi dulu agar tak setres dikala pandemi ini.

Oke kita akan membuat tampilan dashboardnya seperti ini

Dashboard PhP

Nah kurang lebih seperti itu tampilan dashboard php yang akan kita buat kali ini. Oke kita mulai mengoding…

Buka file dashboard php yang di pertemuan sebelumnya sudah kita buat, lalu buat kan file style css jangan lupa formatnya harus css yah teman. gimana sudah kalian buka.

Baca Juga :10 Pekerjaan Dengan Gaji Tinggi

lalu kalian tambahkan pada file dashboard responsive dengan link plugin seperti ini

Seperti diatas yah, jangan sampai ketinggalan koma, titik, kutip dan yang lainnya. Sudah kalian tambahkan semua. Pada body kita buat seperti dibawah ini.

Dashboard Responsive Header

Membuat Dashboard PHP Responsive dengan CSS

buatkan class header

Apa fungsi class untuk memisahkan atau untuk pembatas pada element-element agar memudahkan untuk menggunakan CSS nya

Nah itu diatas adalah bagian header pada halaman dashboard yang kita buat dan pada file style css kalian bisa tambahkan seperti dibawah.

Ini adalah CSS untuk bagian header disana ada hover dan lain lain yahh, mari kita bahas satu persatu ;

Baca Juga : Cara menghubungkan website PHP dengan database PHPMySQL

Penjelasan CSS header

  • position: fixed; ini untuk membuat header kalian dengan posisi fixed atau tidak kemana mana dan tidak berubah atau bisa di bilang terkunci.
  • width: 100%; fungsi dari ini agar lebar dari header kalian bisa full layar, hanya lebarnya saja.
  • background-color: #2F4F4F; jika yang ini untuk menentukan warna background header.
  • color: white; untuk warna dari font pada header.
  • height: 70px; untuk menentukan tinggi header.

Penjelasan CSS tombol header

  • float: right; untuk membuat element berada di sebelah kanan.
  • background-color: #00FFFF ; untuk menentukan warna dari tombol/button pada header.
  • display: flex; Agar tombol dapat lebih dinamis atau flexible.
  • padding: 5px; pading menentukan jarak didalam border.
  • margin-right: 15px; menentukan jarak sebelah kanan dari border.
  • border-radius: 5px; membuat sudut pada border yang tidak tajam.
  • color: black; warna font pada button/tombol.
  • text-decoration: none; menghilangkan garis bawah pada perintah ahref.

Itulah penjelasan yang singkat untuk dibagian header pada dashboard php yang kita buat ini, lalu selanjutnya kita akan buat sidebar dan section pada dashboard php.

Dashboard responsive bagian sidebar

Dashboard PHP Responsive dengan CSS

buatkan class sidebar dan section

Oke ini pokok atau inti dari dashboard responsive ini sistem nagivasi atau page on page, atau bagian ke bagian atau apalah itu namanya.

Jadi disini kita membuat sistem navigasi antara page, oke langung aja kalian tambahkan class pada file dashboard php kalian dengan kodingnya ini;

nah itu diatas adalah cara membuat dashboard responsive bagian user interface nya oke navigasi nya nah sekarang kita akan menghiasnya dengan CSS supaya enak dipandang yaa kan…

Baiklah berikut untuk code CSS dari sidebar nya.

Nahh gimana kalian pasti cuma copi paste yaa kann yaa kaann,,, dari pada kalian copas mending kalian baca keterangan berikut supaya ga bingung-bingung amat kalo ditanya fungsi.

kita ga akan bahas satu persatu lagi karena sebagian saya sudah jelaskan di atas kali lupa scroll lagi ke atas oke

  1. transition ini itu pelengkap atau pemanis hover untuk mengatur time animasi pada hover.
  2. line-height: 65px; ini untuk mengatur jarak tinggi pada ul li kita .
  3. pointer-events: none; lalu berikutnya ini untuk
  4. .tombol:hover; nah sedangkan ini berfungsi untuk membuat efek pada suatu element disini kalian nanti bisa coba, disini saya membuat hover pada tombol ketika kursor berada di tombol maka tombol akan menjadi putih.

Itulah point-point css pada dashboard php bagaimana kalian sudah membuatnya atau belum? jika kalian ada kesulitan bisa tinggalkan jejak di kolom komentar yah.

Oke sekian tutorial kali ini kita akan bahas pembahasan berikutnya di Tutorial PHP dan MYSQL part VI apa yang akan kita bahas ?? ikuti terus blog ini

Terimakasih


1 Komentar

Warkssa · 28/12/2020 pada 12:52 am

Ikut menyimak

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *