Source Code Aplikasi Peminjaman Barang Berbasis Web dengan PHP dan MySQL Part 9 - Menampilkan Data Peminjaman dan Cetak Data Peminjaman

Aplikasi Peminjaman Barang - Hai, berjumpa kembali dalam pembuatan Aplikasi Peminjaman Barang Berbasis Web dengan PHP dan MySQL.

Pada artikel kali ini kita akan menampilkan data barang yang dipinjam, kita akan menampilkan data barang yang dipinjam pada level Admin dan juga Operator. Dan untuk data peminjaman pada level Admin ada sebuah tombol untuk mencetak data peminjaman.

Baiklah.. langsung saja, Berikut adalah file yang akan dibuat didalam folder operator:
  • data-peminjaman.php
  • includes/detail-peminjaman.php

Dan pada folder admin ada beberapa file yang akan ditambahkan, yaitu sebagai berikut:
  • data-peminjaman.php
  • includes/detail-peminjaman.php
  • includes/cetak-data-peminjaman.php

Perama, buka file header.php yang ada didalam folder operator/includes dan tambahkan menu untuk menuju ke halaman data peminjaman. Tambahkan kode berikut setelah menu Peminjaman:
<li class="nav-item">
     <a class="nav-link" href="../operator/data-peminjaman.php">Data Peminjaman</a>
    </li>

Maka lengkapnya akan seperti berikut:
<ul class="navbar-nav">
    <li class="nav navbar">
     <b>Aplikasi Inventaris</b>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="../operator/data-barang.php">Barang</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="../operator/index.php">Peminjaman</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="../operator/data-peminjaman.php">Data 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>

Kita sudah berhasil menambahkan menu untuk pergi ke halaman Data Peminjaman, sekarang kita akan buat file data-peminjaman.php dalam folder operator.

data-peminjaman.php

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

if (!isset($_SESSION['id_user'])) {
 header('Location: ../index.php');
}

// ambil data
$sql = "SELECT b.nama_barang, b.jenis, d.jumlah, d.peminjam, p.tgl_pinjam, p.tgl_kembali, u.nama FROM detail_pinjam AS d INNER JOIN barang AS b ON d.id_barang = b.id_barang INNER JOIN peminjaman AS p ON d.id_peminjaman = p.id_peminjaman INNER JOIN users AS u ON p.id_user = u.id_user";
$query = $conn->query($sql);
$data_peminjaman = $query->fetch_all(MYSQLI_ASSOC);

// Nomor untuk increment baris tabel
$no = 1;

require_once 'includes/header.php';
require_once 'includes/detail-peminjaman.php';
require_once 'includes/footer.php';

Untuk saat ini jika menu Data Peminjaman diklik akan memunculkan pesan kesalahan karena kita belum membuat file detail-peminjaman yang ada didalam folder includes, mari kita buat gengs.

detail-peminjaman.php

<div class="container mt-5">
 
 <h2>Data Peminjaman</h2>

 <div class="clearfix"></div>

 <table class="table table-sm mt-3">
  <thead>
   <tr>
    <th>No</th>
    <th>Nama Barang</th>
    <th>Jenis</th>
    <th>Jumlah Pinjam</th>
    <th>Tgl. Pinjam</th>
    <th>Tgl. Kembali</th>
    <th>Peminjam</th>
    <th>Petugas</th>
   </tr>
  </thead>
  <tbody>

   <?php foreach ($data_peminjaman as $data) :
   ?>

   <tr>
    <td><?= $no++; ?></td>
    <td><?= $data['nama_barang']; ?></td>
    <td><?= $data['jenis']; ?></td>
    <td><?= $data['jumlah']; ?></td>
    <td><?= $data['tgl_pinjam']; ?></td>
    <td><?= $data['tgl_kembali']; ?></td>
    <td><?= $data['peminjam']; ?></td>
    <td><?= $data['nama']; ?></td>
   </tr>

   <?php endforeach; ?>

  </tbody>
 </table>
</div>

Sekarang refresh halaman dan klik menu Data Peminjaman, jika berhasil maka tampilanya akan seperti ini:

Tampilan halaman data peminjaman

Kita sudah membuat halaman Data Peminjaman pada level Operator, dan kita akan melanjutkan membuat menu dan halaman Data Peminjaman pada level Admin yang bisa melakukan cetak Data Peminjaman.

Kita buka file header.php yang ada pada folder admin/includes lalu tambahkan kode berikut setelah menu Petugas:
<li class="nav-item">
     <a class="nav-link" href="../admin/data-peminjaman.php">Data Peminjaman</a>
    </li>

Sehingga akan nampak seperti kode berikut:
<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">Data 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>

Lalu buat file baru didalam folder admin dengan nama data-peminjaman.php

data-peminjaman.php

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

if (!isset($_SESSION['id_user'])) {
 header('Location: ../index.php');
}

// ambil data
$sql = "SELECT b.nama_barang, b.jenis, d.jumlah, d.peminjam, p.tgl_pinjam, p.tgl_kembali, u.nama FROM detail_pinjam AS d INNER JOIN barang AS b ON d.id_barang = b.id_barang INNER JOIN peminjaman AS p ON d.id_peminjaman = p.id_peminjaman INNER JOIN users AS u ON p.id_user = u.id_user";
$query = $conn->query($sql);
$data_peminjaman = $query->fetch_all(MYSQLI_ASSOC);

// Nomor untuk increment baris tabel
$no = 1;


require_once 'includes/header.php';

if(!isset($_GET['act'])) {
 require_once 'includes/detail-peminjaman.php';
} else {
 if($_GET['act'] == 'cetak') {
  require_once 'includes/cetak-data-peminjaman.php';
 } else {
  require_once 'includes/detail-peminjaman.php';
 }
}

require_once 'includes/footer.php';

Lalu buat file baru lagi didalam folder admin/includes dengan nama detail-peminjaman.php

detail-peminjaman.php

<div class="container mt-5">

 <div class="row">
  <div class="col">
   <h2>Data Peminjaman</h2>
  </div>
  <div class="col">
   <a href="data-peminjaman.php?act=cetak" target="_blank"><button class="btn btn-primary float-right">Cetak</button></a>
  </div>
 </div> 

 <div class="clearfix"></div>

 <table class="table table-sm mt-3">
  <thead>
   <tr>
    <th>No</th>
    <th>Nama Barang</th>
    <th>Jenis</th>
    <th>Jumlah Pinjam</th>
    <th>Tgl. Pinjam</th>
    <th>Tgl. Kembali</th>
    <th>Peminjam</th>
    <th>Petugas</th>
   </tr>
  </thead>
  <tbody>

   <?php foreach ($data_peminjaman as $data) :
   ?>

   <tr>
    <td><?= $no++; ?></td>
    <td><?= $data['nama_barang']; ?></td>
    <td><?= $data['jenis']; ?></td>
    <td><?= $data['jumlah']; ?></td>
    <td><?= $data['tgl_pinjam']; ?></td>
    <td><?= $data['tgl_kembali']; ?></td>
    <td><?= $data['peminjam']; ?></td>
    <td><?= $data['nama']; ?></td>
   </tr>

   <?php endforeach; ?>

  </tbody>
 </table>
</div>

Jika selesai maka tampilan untuk halaman Data Peminjaman akan seperti gambar dibawah ini:

Admin - Data Peminjaman Barang


Kita sudah membuat halaman Data Peminjaman pada level Admin, secara tampilan mungkin mirip dengan Data Peminjaman pada level Operator, tapi dilevel Admin ini ada tombol untuk melakukan Cetak Data Peminjaman.

Satu file terakhir yang dibuat didalam folder admin/includes yaitu file cetak-data-peminjaman.php

cetak-data-peminjaman.php

<div class="container mt-5">

 <h2>Data Peminjaman</h2>

 <div class="clearfix"></div>

 <table class="table table-sm mt-3">
  <thead>
   <tr>
    <th>No</th>
    <th>Nama Barang</th>
    <th>Jenis</th>
    <th>Jumlah Pinjam</th>
    <th>Tgl. Pinjam</th>
    <th>Tgl. Kembali</th>
    <th>Peminjam</th>
    <th>Petugas</th>
   </tr>
  </thead>
  <tbody>

   <?php foreach ($data_peminjaman as $data) :
   ?>

   <tr>
    <td><?= $no++; ?></td>
    <td><?= $data['nama_barang']; ?></td>
    <td><?= $data['jenis']; ?></td>
    <td><?= $data['jumlah']; ?></td>
    <td><?= $data['tgl_pinjam']; ?></td>
    <td><?= $data['tgl_kembali']; ?></td>
    <td><?= $data['peminjam']; ?></td>
    <td><?= $data['nama']; ?></td>
   </tr>

   <?php endforeach; ?>

  </tbody>
 </table>
</div>

<script type="text/javascript">
 window.print();
</script>

Dan ketika tombol Cetak diklik maka akan membuka tab baru sekaligus dengan kotak dialog print bawaan browser. Kira-kira seperti ini:

Admin - Cetak data peminjaman barang

Nah..Kita sudah menyelesaikan pembuatan Aplikasi Peminjaman Barang. Tentunya ini masih jauh dari kata sempurna, silahkan kembangkan lagi sesuai kebutuhan kalian gengs.

Sampai sini saja untuk artikel kali ini, sampai jumpa dipembuatan aplikasi lainnya dan terimakasih.

Tutorial yang mungkin kamu suka:


Posting Komentar

2 Komentar

  1. Saya ucapkan terima kasih saya sudah menyelesaikan tugas membuat aplikasi peminjaman barang yang diberikan kepada saya sebagai sarana agar registrasi peminjaman barang yang sebelumnya ditulis manual dan kadang tidak diisi.

    Sekali lagi saya ucapkan terima kasih

    salam hormat
    bejonugroho.mahmud@gmail.com

    BalasHapus