Mari Kita Kenalan dulu APAsih FRAMEWORK
Framework adalah struktur yang tersusun dari serangkaian kode generik dan berfungsi untuk mengembangkan sistem dan aplikasi. Kerangka kerja ini berperan sebagai template atau model yang menyediakan fungsi cerdas dan elemen struktur standar untuk memudahkan pekerjaan developer.
Kenapa Pake Bootstrap 5 karena menurut lebih mudah, banyak referensi dan dapat diimplementasikan dengan coding backend PHP dan Javascript dalam pembelajaran dikelas.
Berikut Link saya download: Download · Bootstrap v5.0
Jangan Lupa Buat Databasenya
Mari Kita Buat Laman Admin
admin/dasboard.php
<?php
session_start();
if (!isset($_SESSION['login']) || $_SESSION['role'] != 'admin') {
header("Location: ../index.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Dashboard Admin</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/
dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/
font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<span class="navbar-brand">
<i class="bi bi-speedometer2"></i> Admin Panel
</span>
<a href="../auth/logout.php" class="btn btn-danger btn-sm">
<i class="bi bi-box-arrow-right"></i> Logout
</a>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!-- SIDEBAR -->
<div class="col-md-3 col-lg-2 sidebar p-0">
<div class="list-group list-group-flush">
<a href="dashboard.php" class="list-group-item
list-group-item-action active">
<i class="bi bi-house"></i> Dashboard
</a>
<a href="users.php" class="list-group-item list-group-item-action">
<i class="bi bi-people"></i> CRUD User
</a>
<a href="kategori.php" class="list-group-item list-group-item-action">
<i class="bi bi-tags"></i> Kategori
</a>
<a href="alat.php" class="list-group-item list-group-item-action">
<i class="bi bi-box-seam"></i> Data Alat
</a>
<a href="peminjam.php" class="list-group-item
list-group-item-action">
<i class="bi bi-people-fill"></i> Data Peminjam
</a>
<a href="peminjaman.php" class="list-group-item list-group-item-action">
<i class="bi bi-journal-arrow-up"></i> Transaksi Pinjam Alat
</a>
<a href="log.php" class="list-group-item list-group-item-action">
<i class="bi bi-clock-history"></i> Log Aktivitas
</a>
</div>
</div>
<!-- CONTENT -->
<div class="col-md-9 col-lg-10 content">
<h4>Dashboard Admin</h4>
<hr>
<p>Selamat datang, <strong>Admin</strong>.</p>
<p>
Silakan gunakan menu di samping untuk mengelola sistem peminjaman alat.
</p>
</div>
</div>
</div>
</body>
</html>
admin/alat.php
<?php
session_start();
require "../config/database.php";
// proteksi halaman (khusus admin)
if (!isset($_SESSION['login']) || $_SESSION['role'] != 'admin') {
header("Location: ../index.php");
exit;
}
// LOGIKA PENCARIAN
$keyword = "";
if (isset($_GET['search'])) {
$keyword = trim($_GET['search']);
// query cari
$sql = "SELECT alat.*, kategori.nama_kategori
FROM alat
LEFT JOIN kategori ON alat.id_kategori = kategori.id_kategori
WHERE nama_alat LIKE :keyword
OR kategori.nama_kategori LIKE :keyword
ORDER BY id_alat DESC";
$stmt = $pdo->prepare($sql);
$stmt->execute(['keyword' => "%$keyword%"]);
$data = $stmt->fetchAll();
} else {
// query default (semua data)
$data = $pdo->query("
SELECT alat.*, kategori.nama_kategori
FROM alat
LEFT JOIN kategori ON alat.id_kategori = kategori.id_kategori
ORDER BY id_alat DESC
")->fetchAll();
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Data Alat</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/
dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/
font/bootstrap-icons.css" rel="stylesheet">
<!-- CSS Admin -->
<link href="../assets/css/boostrap.css" rel="stylesheet">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<span class="navbar-brand">
<i class="bi bi-speedometer2"></i> Admin Panel
</span>
<a href="../auth/logout.php" class="btn btn-danger btn-sm">
<i class="bi bi-box-arrow-right"></i> Logout
</a>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!-- SIDEBAR -->
<div class="col-md-3 col-lg-2 sidebar p-0">
<div class="list-group list-group-flush">
<a href="dashboard.php" class="list-group-item list-group-item-action">
<i class="bi bi-house"></i> Dashboard
</a>
<a href="users.php" class="list-group-item list-group-item-action">
<i class="bi bi-people"></i> CRUD User
</a>
<a href="kategori.php" class="list-group-item list-group-item-action">
<i class="bi bi-tags"></i> Kategori
</a>
<a href="alat.php" class="list-group-item list-group-item-action active">
<i class="bi bi-box-seam"></i> Data Alat
</a>
<a href="peminjam.php" class="list-group-item list-group-item-action">
<i class="bi bi-people-fill"></i> Data Peminjam
</a>
<a href="peminjaman.php" class="list-group-item list-group-item-action">
<i class="bi bi-journal-arrow-up"></i> Transaksi Pinjam Alat
</a>
<a href="log.php" class="list-group-item list-group-item-action">
<i class="bi bi-clock-history"></i> Log Aktivitas</a>
</div>
</div>
<!-- CONTENT -->
<div class="col-md-9 col-lg-10 content">
<h4 class="mt-3">Data Alat</h4>
<div class="d-flex justify-content-between mb-3">
<a href="tambah_alat.php" class="btn btn-primary">
<i class="bi bi-plus-lg"></i> Tambah Alat
</a>
<!-- FORM PENCARIAN -->
<form method="GET" class="d-flex" role="search">
<input class="form-control me-2" type="search" name="search"
placeholder="Cari alat / kategori..."
value="<?= htmlspecialchars($keyword) ?>"
aria-label="Search">
<button class="btn btn-outline-success" type="submit">
<i class="bi bi-search"></i>
</button>
<?php if ($keyword): ?>
<a href="alat.php" class="btn btn-outline-secondary ms-1"
title="Reset">
<i class="bi bi-x-lg"></i>
</a>
<?php endif; ?>
</form>
</div>
<table class="table table-bordered table-striped">
<thead class="table-dark">
<tr>
<th>No</th>
<th>Kategori</th>
<th>Nama Alat</th>
<th>Gambar</th>
<th>Stok</th>
<th>Kondisi</th>
<th width="150">Aksi</th>
</tr>
</thead>
<tbody>
<?php if (count($data) > 0): ?>
<?php $no = 1; foreach ($data as $row): ?>
<tr>
<td><?= $no++ ?></td>
<td><?= $row['nama_kategori'] ?? '-' ?></td>
<td><?= htmlspecialchars($row['nama_alat']) ?></td>
<td class="text-center">
<?php if (!empty($row['gambar'])): ?>
<img src="../assets/image/<?=
$row['gambar'] ?>" alt="gambar" width="60" class="img-thumbnail">
<?php else: ?>
<span class="text-muted">-</span>
<?php endif; ?>
</td>
<td><?= $row['stok'] ?></td>
<td>
<!-- Kondisi Badge -->
<?php
$badgeClass = 'bg-secondary';
if ($row['kondisi'] == 'Baik') $badgeClass =
'bg-success';
elseif ($row['kondisi'] == 'Rusak')
$badgeClass = 'bg-danger';
?>
<span class="badge <?= $badgeClass ?>">
<?= htmlspecialchars($row['kondisi']) ?></span>
</td>
<td>
<a href="edit_alat.php?id=<?= $row['id_alat'] ?>"
class="btn btn-warning btn-sm">
<i class="bi bi-pencil-square"></i> Edit
</a>
<a href="hapus_alat.php?id=<?= $row['id_alat'] ?>"
class="btn btn-danger btn-sm"
onclick="return confirm
('Yakin ingin menghapus alat ini?')">
<i class="bi bi-trash"></i> Hapus
</a>
</td>
</tr>
<?php endforeach; ?>
<?php else: ?>
<tr>
<td colspan="7" class="text-center">
Data alat tidak ditemukan
</td>
</tr>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
admin/tambahalat.php
<?php
session_start();
require "../config/database.php";
// proteksi halaman (khusus admin)
if (!isset($_SESSION['login']) || $_SESSION['role'] != 'admin') {
header("Location: ../index.php");
exit;
}
// ambil data kategori
$kategori = $pdo->query("SELECT * FROM kategori")->fetchAll();
// proses simpan
if (isset($_POST['simpan'])) {
$nama = trim($_POST['nama_alat']);
$kategori_id = $_POST['id_kategori'];
$stok = $_POST['stok'];
$kondisi = trim($_POST['kondisi']);
$gambar = null;
// validasi sederhana
if ($nama == "" || $stok == "") {
$error = "Nama alat dan stok wajib diisi!";
} else {
// Upload Gambar
if (!empty($_FILES['gambar']['name'])) {
$target_dir = "../assets/image/";
if (!is_dir($target_dir)) mkdir($target_dir, 0777, true);
$file_name = time() . "_" . basename($_FILES["gambar"]["name"]);
$target_file = $target_dir . $file_name;
$imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
// Validasi tipe file
$allowed_types = ['jpg', 'jpeg', 'png', 'gif'];
if (in_array($imageFileType, $allowed_types)) {
if (move_uploaded_file($_FILES["gambar"]["tmp_name"], $target_file)) {
$gambar = $file_name;
} else {
$error = "Gagal mengupload gambar.";
}
} else {
$error = "Format file tidak didukung! Gunakan JPG, JPEG, PNG, atau GIF.";
}
}
if (!isset($error)) {
$sql = $pdo->prepare("
INSERT INTO alat (nama_alat, id_kategori, stok, kondisi, gambar)
VALUES (?, ?, ?, ?, ?)
");
$sql->execute([$nama, $kategori_id, $stok, $kondisi, $gambar]);
header("Location: alat.php");
exit;
}
}
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Tambah Alat</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container">
<span class="navbar-brand">Tambah Data Alat</span>
<a href="alat.php" class="btn btn-secondary btn-sm">Kembali</a>
</div>
</nav>
<div class="container mt-4">
<div class="card shadow">
<div class="card-body">
<h5 class="mb-3">Form Tambah Alat</h5>
<?php if (isset($error)): ?>
<div class="alert alert-danger">
<?= $error ?>
</div>
<?php endif; ?>
<form method="POST" enctype="multipart/form-data">
<div class="mb-3">
<label class="form-label">Nama Alat</label>
<input type="text" name="nama_alat" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Kategori</label>
<select name="id_kategori" class="form-select">
<option value="">-- Pilih Kategori --</option>
<?php foreach ($kategori as $k): ?>
<option value="<?= $k['id_kategori'] ?>">
<?= htmlspecialchars($k['nama_kategori']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="mb-3">
<label class="form-label">Gambar Alat</label>
<input type="file" name="gambar" class="form-control" accept="image/*">
<small class="text-muted">Format: JPG, JPEG, PNG, GIF</small>
</div>
<div class="mb-3">
<label class="form-label">Stok</label>
<input type="number" name="stok" class="form-control" min="0" required>
</div>
<div class="mb-3">
<label class="form-label">Kondisi</label>
<select name="kondisi" class="form-select" required>
<option value="Baik">Baik</option>
<option value="Rusak">Rusak</option>
</select>
</div>
<button type="submit" name="simpan" class="btn btn-primary">
Simpan
</button>
<a href="alat.php" class="btn btn-secondary">
Batal
</a>
</form>
</div>
</div>
</div>
</body>
</html>
