Dashboard

Dashboard pada umumnya digunakan sebagai pusat control suatu aplikasi/setting program, kalau pada windows umumnya dashboard dapat dibayangkan seperti control panel, dengan membuat suatu dashboard maka aplikasi web yang dibuat akan lebih lengkap dalam mengatur setting dan aplikasi yang kita gunakan. pada praktek ini akan dijelaskan teknik dasar dengan memanfaatkan hal-hal yang sebelumnya dijelaskan

Membuat Dashboard

  • Jalankan program bracket

    • Pilih menu File, Open folder, buka folder tempat anda bekerja
    • Pilih menu View, Horizontal split
    • Klik pada window bagian bawah
    • Pilih menu File, New
    • Tekan Ctrl + S dan simpan dengan nama dashboard.css
    • Pilih menu File, New
    • Tekan Ctrl +S dan simpan dengan nama dashboard.html
  • Membuat dashboard.css

    • copykan ketikan berikut ke dashboard.css
body {
  padding-top: 50px;
}

.bg-color {
  background-color: darkcyan;
}

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.navbar-fixed-top {
  border: 0;
}

.sidebar {
  display: none;
}

@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

.main {
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.main .page-header {
  margin-top: 0;
}

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
  max-width: 150px;    
}
  • membuat dashboard.html

    • Dengan menggunakan teknik emmet ketik perintah berikut:
    • ! lalu tekan tab
    • meta:vp ,tekan tab
    • ketik link 3x ke arah bootstrap, fontawesome dan dashboard.css
    • ketik script:src 2x ke arah jquery, bootstrap
  • pada bagian setelah , copykan ketikan berikut untuk membuat menu

    • bila ingin belajar membuat navbar dapat belajar di praktek ke enam
<nav class="navbar navbar-dark navbar-fixed-top bg-color">
  <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Kelasdigital.com</a>
  <div id="navbar">
    <nav class="nav navbar-nav pull-sm-right">
      <a class="nav-item nav-link" href="#">Settings</a>
      <a class="nav-item nav-link" href="#">Help</a>
      <a class="nav-item nav-link" href="#">Profile</a>
      <a class="nav-item nav-link" href="#">Help</a>
    </nav>
    <form class="pull-sm-right">
      <input type="text" class="form-control" placeholder="Cari data">
    </form>
  </div>
</nav>
  • Membuat side bar sebelah kiri

    • Ketik div.container-fluid>div.row
    • div.col-sm-2.sidebar
    • (ul.nav.nav-sidebar>(li>a{Menu-1$})*4)*3
  • Membuat Sisi kanan

    • div.col-sm-10.col-sm-offset-2.main
    • membuat gambar sisi kanan (placeholder class)
    • h1.page-header{Dashboard}
    • div.row.placeholders
    • (div.col-sm-3.placeholder>img.img-fluid+h4{Judul $}+span.text-muted{detail $})*4
  • Membuat table di sisi kanan

    • div.col-sm-12
    • h2{section}
    • div.table-responsive>table.table.table-striped
    • (thead>tr>th{Header $}*3)+(tbody>(tr>td{Data-$}*3)*10)