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
- Buat file baru dengan nama index.php, file ini diletakan dalam folder admin
- 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
- Buat folder includes lalu buat file baru dengan nama header.php didalamnya
- 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:
Dashboard.php
- Masih dalam folder includes, buat file baru dengan nama dashboard.php
- 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.
Baca juga : Membuat Tabel Untuk Database "inv"
Footer.php
- Masih pada folder includes, buat juga footer.php
- 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>
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.
5 Komentar
Komentar ini telah dihapus oleh pengarang.
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusFatal error: Call to a member function fetch_assoc() on boolean in C:\xampp\htdocs\inv\admin\includes\dashboard.php on line 11
BalasHapusini gimana yakak? mohon bantuannya kak :)
saya sudah tidak ada kesalah tapi untuk login masuk ke dashbord gak bisa
BalasHapuspermisi kak izin bertanya , footernya kok tidak muncul yaa?
BalasHapus