Kita akan melanjutkan pembelajaran Cara Membuat Web Absensi Online Sederhana menggunakan PHP dan MySQL yang sempat tertunda beberapa hari. Setelah terakhir kita membahas Membuat Logout dengan PHP. Saat ini kita akan belajar bersama membuat halaman dashboard atau index yang nantinya akan digunakan untuk admin, yaitu untuk manajemen data dan lain sebagainya.

Baik, langsung saja dimulai,

Sebelum mulai membuat kita membutuhkan beberapa file seperti berikut:

  • jQuery
  • Bootstrap versi 4 (css,js)
  • Popper, library yang digunakan bootstrap

untuk jQuery teman-teman bisa mendownloadnya disini https://code.jquery.com/jquery-3.3.1.slim.min.js. .Caranya, buka link tersebut, setelah selesai, akan tampil semua ini

Script Jquery

Script Jquery

 

Tambah file baru bernama jquery.min.js di folder jquery/jquery.min.js. berarti filenya didalam folder jquery ya,

Setelah itu, download bootstrap versi 4, teman-teman bisa mendownload nya disini. Setelah mendownload,tambah folder baru bernama bootstrap di dalam folder assets. ekstrak file bootstrap tadi dan letakan didalam folder bootstrap yang sudah dibuat.

Yang terakhir adalah Popper, caranya seperti jQuery tadi, dengan membuka link https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js Buat folder bernama popper di folder assets dan buat file popper.min.js isikan file tersebut dengan isi dari link diatas yang sudah diberikan.

untuk hasilnya, kira kira seperti ini,  fokus didalam folder assets saja ya.

 

Struktur File

Struktur File

 

Untuk tambahan, teman-teman bisa menuju https://getbootstrap.com/docs/4.1/examples/offcanvas/offcanvas.css . dan https://getbootstrap.com/docs/4.1/examples/offcanvas/offcanvas.js Copy semua tulisan yang ada  dan buat file baru isinya semua tulisan tadi bernama offcanvas.css di folder css serta offcanvas.js di folder js. dan hasilnya seperti ini

Struktur File

Struktur File

Setelah selesai kita menuju langkah selanjutnya yaitu membuat halaman Index atau Dashboard, dengan cara membuat file home.php, struktur filenya bisa dilihat seperti diatas. isikan home.php dengan script yang sudah saya sediakan seperti ini

 

  1. <html lang=“en”>
  2. <head>
  3. <meta charset=“utf-8”>
  4. <meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>
  5. <title>Web Absensi</title>
  6. <link href=“assets/bootstrap/css/bootstrap.min.css” rel=“stylesheet”>
  7. <link href=“assets/css/offcanvas.css” rel=“stylesheet”>
  8. </head>
  9. <body class=“bg-light”>
  10. <nav class=“navbar navbar-expand-lg fixed-top navbar-dark bg-dark”>
  11. <a class=“navbar-brand mr-auto mr-lg-0” href=“#”>Absensi</a>
  12. <button class=“navbar-toggler p-0 border-0” type=“button” data-toggle=“offcanvas”>
  13. <span class=“navbar-toggler-icon”></span>
  14. </button>
  15. <div class=“navbar-collapse offcanvas-collapse” id=“navbarsExampleDefault”>
  16. <ul class=“navbar-nav mr-auto”>
  17. <li class=“nav-item active”>
  18. <a class=“nav-link” href=“#”>Dashboard <span class=“sr-only”>(current)</span></a>
  19. </li>
  20. <li class=“nav-item”>
  21. <a class=“nav-link” href=“#”>User</a>
  22. </li>
  23. <li class=“nav-item”>
  24. <a class=“nav-link” href=“#”>Absen</a>
  25. </li>
  26. </ul>
  27. <div class=“form-inline my-2 my-lg-0”>
  28. <a class=“btn btn-outline-success my-2 my-sm-0” href=“”>Logout</a>
  29. </div>
  30. </div>
  31. </nav>
  32. <main role=“main” class=“container”>
  33. <div class=“my-3 p-3 bg-white rounded shadow-sm”>
  34. <h6 class=“border-bottom border-gray pb-2 mb-0”>Dashboard</h6>
  35. <h4>Selamat Datang</h4>
  36. </div>
  37. </main>
  38. <script src=“assets/jquery/jquery.min.js” ></script>
  39. <script src=“assets/bootstrap/bootstrap.min.js”></script>
  40. <script src=“assets/popper/popper.min.js”></script>
  41. <script src=“assets/js/offcanvas.js”></script>
  42. </body>
  43. </html>

 

Jalankan di browser dengan mengakses localhost/absensi/home.php  dan hasilnya seperti ini

Hasil Halaman Dashboard

Hasil Halaman Dashboard

 

Cukup sekian pembahasan mengenai cara membuat halaman dashboard atau index menggunakan bootstrap 4 dalam aplikasi absensi sederhana, untuk selanjutnya kita akan membahas bagaimana cara memecah halaman tersebut yang nantinya menjadi halaman dinamis.