Source Code Aplikasi Peminjaman Barang Berbasis Web Dengan PHP dan MySQL - Part 2 : Desain Dashboard Admin dan Form Data Barang



Hai, berjumpa lagi, pada artikel kali ini kita akan melanjutkan Membuat Aplikasi Peminjaman Barang Berbasis Web Dengan PHP dan Mysql. Melanjutkan dari part sebelumnya yaitu Membuat Form Login beserta Proses Loginnya, sekarang kita akan Membuat Desain Dashboard Admin dan Form Data Barang. Yo langsung saja.

File yang akan kita buat adalah sebagai berikut:

  • admin/index.php - Berisi kode untuk menyisipkan baris kode header dan footer sehingga kita tidak perlu menyisipkan header dan footer untuk setiap file yang kita buat
  • admin/includes/header.php - Berisi baris kode untuk tampilan navbar
  • admin/includes/dashboard.php - Berisi kode untuk tampilan halaman dashboard admin
  • admin/includes/footer.php



Semua file diatas diletakan dalam folder admin, sehingga akan seperti ini:

  • admin (folder)
    • index.php
    • includes (folder)
      • header.php
      • dashboard.php
      • footer.php

Admin

  1. Buat file baru dengan nama index.php, file ini diletakan dalam folder admin
  2. Masukan kode berikut:

<?php

session_start();
require_once '../config/db.php';

// user tidak bisa langsung mengakses form Admin
// jika $_SESSION['user'] belum diset, maka diarahkan ke form login
if(!isset($_SESSION['id_user'])) {
  header('Location: ../index.php');
}

require_once 'includes/header.php';
require_once 'includes/dashboard.php';
require_once 'includes/footer.php';
Jika dijalankan, maka akan muncul pesan error karena kita belum membuat file header.php, dashboard.php dan footer.php

Header.php

  1. Buat folder includes lalu buat file baru dengan nama header.php didalamnya
  2. Berikut kode

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Administrator</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
 
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="../admin/index.php">Dashboard <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../admin/data-barang.php">Barang</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../admin/data-petugas.php">Petugas</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../admin/data-peminjaman.php">Peminjaman</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-danger btn-sm text-white" href="logout.php">Keluar</a>
        </li>
      </ul>
    </div>
  </nav>


Coba jalankan, tampilannya akan seperti gambar dibawah:

Navbar Admin

Dashboard.php

  1. Masih dalam folder includes, buat file baru dengan nama dashboard.php
  2. Berikut kodenya:

<div class="container mt-5">

  <div class="row text-center">
    <div class="col-md-4">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
 
          <?php 
          $sql = $conn->query("SELECT COUNT(*) AS jmlPinjam FROM detail_barang");
          $pinjam = $sql->fetch_assoc();
          ?>

          <h5 class="card-title">Data Peminjaman</h5>
          <p class="card-text">Data barang yang dipinjam</p>
          <h4><?= $pinjam['jmlPinjam']; ?></h4>
          <a href="data-peminjaman.php" class="card-link">Lihat Data Peminjaman</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
 
          <?php 
          $sql = $conn->query("SELECT COUNT(*) AS jmlBarang FROM barang");
          $barang = $sql->fetch_assoc();
          ?>
 
          <h5 class="card-title">Data Barang</h5>
          <p class="card-text">Jumlah barang saat ini</p>
          <h3><?= $barang['jmlBarang']; ?></h3>
          <a href="data-barang.php" class="card-link">Lihat Data Barang</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
 
          <?php 
          $sql = $conn->query("SELECT COUNT(*) AS jmlOpt FROM users WHERE id_level = 1");
          $opt = $sql->fetch_assoc();
          ?>

          <h5 class="card-title">Data Petugas</h5>
          <p class="card-text">Jumlah petugas saat ini</p>
          <h3><?= $opt['jmlOpt']; ?></h3>
          <a href="data-petugas.php" class="card-link">Lihat Data Petugas</a>
        </div>
      </div>
    </div>
  </div>

</div>

Perhatian! Akan ada beberapa pesan error, itu dikarenakan beberapa tabel database belum kita buat, silahkan baca artikel berikut untuk struktur tabelnya.


Footer.php

  1. Masih pada folder includes, buat juga footer.php
  2. Berikut baris kodenya:

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Dan jika semua file diatas dibuat, maka outputnya akan seperti digambar berikut:


Akan ada pesan error pada 3 kotak diatas dikarenakan tabel peminjaman, barang dan petugasnya belum dibuat. Kurang lebihnya akan seperti gambar diatas dan apabila ada komentar silahkan tuliskan dikolom komentar. Sekian dan terimakasih, sampai jumpa diartikel selanjutnya

Posting Komentar

5 Komentar

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. Fatal error: Call to a member function fetch_assoc() on boolean in C:\xampp\htdocs\inv\admin\includes\dashboard.php on line 11

    ini gimana yakak? mohon bantuannya kak :)

    BalasHapus
  4. saya sudah tidak ada kesalah tapi untuk login masuk ke dashbord gak bisa

    BalasHapus
  5. permisi kak izin bertanya , footernya kok tidak muncul yaa?

    BalasHapus