membuat halaman utama dashboard
Assalamualaikum wr.wb
Agung Ramadhan
Pengertian dari Dashboards adalah sebuah User Interface yang cukup unik, ia berada diantara data dan desain. Menampilkan berbagai metriks , angka ataupun visualisasi data. Tujuan utama dashboards adalah membantu user untuk membuat keputusan yang tepat dan cepat berdasarkan dari data yang ada.
Berikut Langkah-Langkah cara membuat halaman utama dari DashBoad :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="font 9/css/all.min.css">
<link rel="stylesheet" type="text/css" href="style.cs"s>
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
<div class="container-fluid">
<a class="navbar-brand" href="#">SELAMAT DATANG ADMIN SMK HASAN KAFRAWI</a>
<form class="form-inline my-2 my-lg-0 ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<div class="icon ml-4">
<h5>
<i class="fas fa-envelope mr-3" data-toggle="tooltip" title="Pesan Masuk"></i>
<i class="fas fa-bell mr-3" data-toggle="tooltip" title="Notifikasi"></i>
<i class="fas fa-sign-out-alt mr-3" data-toggle="tooltip" title="Sign Out"></i>
</h5>
</div>
</div>
</nav>
<div class="row no-gutters">
<div class="col-md-2 bg-dark pr-3 pt-3">
<ul class="nav flex-column ml-3 mb-5">
<li class="nav-item">
<a class="nav-link active" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-tachometer-alt mr-2"></i>Dashboard</a><hr class="bg-secondary"></li>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-graduation-cap mr-2"></i>Daftar Siswa</a><hr class="bg-secondary"></li>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-chalkboard-teacher mr-2"></i>Daftar Guru</a><hr class="bg-secondary"></li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-calendar-alt mr-2"></i>Jadwal Pelajaran</a><hr class="bg-secondary"></li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-paper-plane mr-2"></i>Daftar Nilai</a><hr class="bg-secondary">
</li>
</ul>
</div>
<div class="col-md-10 p-4 pt-2">
<h3><i class="fas fa-tachometer-alt mr-2"></i>DASHBOARD</h3><hr>
<div class="row text-white">
<div class="card bg-info ml-4" style="width: 18rem;">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-graduation-cap mr-2"></i>
</div>
<h5 class="card-title">Jumlah Siswa</h5>
<div class="display-4">430</div>
<a href=""><p class="card-text text-white">Lihat Detail<i class="fas fa-angle-double-right"></i></p></a>
</div>
</div>
<div class="card bg-danger ml-3" style="width: 18rem;">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-graduation-cap mr-2"></i>
</div>
<h5 class="card-title">Jumlah Guru</h5>
<div class="display-4">25</div>
<a href=""><p class="card-text text-white">Lihat Detail<i class="fas fa-angle-double-right"></i></p></a>
</div>
</div>
<div class="card bg-success ml-4" style="width: 18rem;">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-graduation-cap mr-2"></i>
</div>
<h5 class="card-title">Jumlah Pegawai</h5>
<div class="display-4">15</div>
<a href=""><p class="card-text text-white">Lihat Detail<i class="fas fa-angle-double-right"></i></p></a>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="text/javascript" src="admin.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-->
</body>
</html>
Komentar
Posting Komentar