MINI
C:
/
xampp
/
htdocs
/
reset
/
Upload File:
files >> C:/xampp/htdocs/reset/index - Copy (7).php
<?php // koneksi_database.php $host = 'localhost'; $dbname = 'bobby_koperasi'; $username = 'root'; $password = ''; try { $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // Query data statistik $stats = $pdo->query("SELECT SUM(is_aktif = 1) as total_aktif, SUM(is_aktif = 0) as total_nonaktif, SUM(is_keluar = 1) as total_keluar, SUM(is_keluar = 0) as total_masuk, COUNT(*) as total_kartu FROM data_card")->fetch(PDO::FETCH_ASSOC); // Query data kartu $cards = $pdo->query("SELECT nomor_card, is_aktif, is_keluar, keterangan FROM data_card ORDER BY nomor_card") ->fetchAll(PDO::FETCH_ASSOC); // Query aktivitas terbaru $logs = $pdo->query("SELECT * FROM log_aktivitas ORDER BY waktu DESC LIMIT 5") ->fetchAll(PDO::FETCH_ASSOC); } catch (PDOException $e) { die("Koneksi database gagal: " . $e->getMessage()); } ?> <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard Manajemen Kartu</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"> <style> :root { --primary-color: #4e73df; --success-color: #1cc88a; --info-color: #36b9cc; --warning-color: #f6c23e; --danger-color: #e74a3b; --dark-color: #5a5c69; } body { background-color: #f8f9fc; font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .sidebar { background: linear-gradient(180deg, var(--primary-color) 0%, #224abe 100%); min-height: 100vh; width: 14rem; transition: all 0.3s; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); position: fixed; z-index: 100; } .main-content { margin-left: 14rem; width: calc(100% - 14rem); min-height: 100vh; } .topbar { height: 4.375rem; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); background: white; } .card { border: none; border-radius: 0.35rem; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1); margin-bottom: 1.5rem; transition: transform 0.3s; } .card:hover { transform: translateY(-5px); } .card-header { background-color: #f8f9fc; border-bottom: 1px solid #e3e6f0; } .stat-card { color: white; border-left: 0.25rem solid !important; border-left-color: inherit !important; } .stat-card i { font-size: 2rem; opacity: 0.7; } .bg-primary { background-color: var(--primary-color) !important; } .bg-success { background-color: var(--success-color) !important; } .bg-info { background-color: var(--info-color) !important; } .bg-warning { background-color: var(--warning-color) !important; } .text-primary { color: var(--primary-color) !important; } .text-success { color: var(--success-color) !important; } .text-info { color: var(--info-color) !important; } .text-warning { color: var(--warning-color) !important; } .chart-area { position: relative; height: 10rem; width: 100%; } .status-badge { display: inline-block; padding: 0.35em 0.65em; font-size: 0.75em; font-weight: 700; line-height: 1; color: white; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; } .badge-aktif { background-color: var(--success-color); } .badge-nonaktif { background-color: var(--danger-color); } .badge-masuk { background-color: var(--info-color); } .badge-keluar { background-color: var(--warning-color); } .table-responsive { margin-bottom: 0; overflow: hidden; border-radius: 0.35rem; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1); } .table thead th { background-color: var(--primary-color); color: white; border-bottom: none; } .activity-item { position: relative; padding-left: 1.5rem; border-left: 1px solid #e3e6f0; margin-bottom: 1rem; } .activity-item:before { content: ""; position: absolute; left: -0.5rem; width: 1rem; height: 1rem; border-radius: 100%; background-color: var(--primary-color); top: 0; } .avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; } </style> </head> <body> <!-- Sidebar --> <div class="sidebar"> <div class="text-center py-4"> <h4 class="text-white fw-bold">bobbytgs</h4> </div> <hr class="bg-white opacity-50 mx-3"> <div class="nav flex-column px-3"> <a href="#" class="nav-link active text-white py-3"> <i class="bi bi-speedometer2 me-2"></i> Dashboard </a> <a href="#" class="nav-link text-white py-3"> <i class="bi bi-credit-card me-2"></i> Manajemen Kartu </a> <a href="#" class="nav-link text-white py-3"> <i class="bi bi-people me-2"></i> Anggota </a> <a href="#" class="nav-link text-white py-3"> <i class="bi bi-graph-up me-2"></i> Laporan </a> <a href="#" class="nav-link text-white py-3"> <i class="bi bi-gear me-2"></i> Pengaturan </a> </div> </div> <!-- Main Content --> <div class="main-content"> <!-- Topbar --> <nav class="topbar navbar navbar-expand navbar-light bg-white shadow mb-4"> <div class="container-fluid px-4"> <button class="btn btn-link d-md-none rounded-circle me-3"> <i class="bi bi-list"></i> </button> <div class="d-flex align-items-center ms-auto"> <div class="position-relative me-3"> <i class="bi bi-bell fs-4 text-gray-500"></i> <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3+</span> </div> <div class="d-flex align-items-center"> <div class="avatar me-2">BY</div> <span class="d-none d-lg-inline">Bobby</span> </div> </div> </div> </nav> <!-- Begin Page Content --> <div class="container-fluid px-4"> <!-- Page Heading --> <div class="d-sm-flex align-items-center justify-content-between mb-4"> <h1 class="h3 mb-0 text-gray-800">Dashboard</h1> <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"> <i class="bi bi-download me-2"></i> Generate Report </a> </div> <!-- Statistik Cards --> <div class="row"> <div class="col-xl-3 col-md-6 mb-4"> <div class="card stat-card border-left-primary bg-primary h-100 py-2"> <div class="card-body"> <div class="row no-gutters align-items-center"> <div class="col me-2"> <div class="text-xs fw-bold text-white text-uppercase mb-1"> Total Kartu</div> <div class="h5 mb-0 fw-bold text-white"><?= $stats['total_kartu'] ?></div> </div> <div class="col-auto"> <i class="bi bi-credit-card-2-front"></i> </div> </div> </div> </div> </div> <div class="col-xl-3 col-md-6 mb-4"> <div class="card stat-card border-left-success bg-success h-100 py-2"> <div class="card-body"> <div class="row no-gutters align-items-center"> <div class="col me-2"> <div class="text-xs fw-bold text-white text-uppercase mb-1"> Kartu Aktif</div> <div class="h5 mb-0 fw-bold text-white"><?= $stats['total_aktif'] ?></div> </div> <div class="col-auto"> <i class="bi bi-check-circle"></i> </div> </div> </div> </div> </div> <div class="col-xl-3 col-md-6 mb-4"> <div class="card stat-card border-left-danger bg-danger h-100 py-2"> <div class="card-body"> <div class="row no-gutters align-items-center"> <div class="col me-2"> <div class="text-xs fw-bold text-white text-uppercase mb-1"> Kartu Non-Aktif</div> <div class="h5 mb-0 fw-bold text-white"><?= $stats['total_nonaktif'] ?></div> </div> <div class="col-auto"> <i class="bi bi-x-circle"></i> </div> </div> </div> </div> </div> <div class="col-xl-3 col-md-6 mb-4"> <div class="card stat-card border-left-warning bg-warning h-100 py-2"> <div class="card-body"> <div class="row no-gutters align-items-center"> <div class="col me-2"> <div class="text-xs fw-bold text-dark text-uppercase mb-1"> Kartu Keluar</div> <div class="h5 mb-0 fw-bold text-dark"><?= $stats['total_keluar'] ?></div> </div> <div class="col-auto"> <i class="bi bi-box-arrow-right text-dark"></i> </div> </div> </div> </div> </div> </div> <!-- Charts & Tables --> <div class="row"> <!-- Chart --> <div class="col-xl-8"> <div class="card"> <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"> <h6 class="m-0 fw-bold text-primary">Statistik Kartu</h6> </div> <div class="card-body"> <div class="chart-area"> <canvas id="myAreaChart"></canvas> </div> </div> </div> </div> <!-- Aktivitas --> <div class="col-xl-4"> <div class="card mb-4"> <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"> <h6 class="m-0 fw-bold text-primary">Aktivitas Terbaru</h6> </div> <div class="card-body"> <?php if (!empty($logs)): ?> <?php foreach ($logs as $log): ?> <div class="activity-item"> <div class="small text-gray-500"><?= $log['waktu'] ?></div> <p class="mb-1"><?= $log['aktivitas'] ?></p> </div> <?php endforeach; ?> <?php else: ?> <p>Tidak ada aktivitas terakhir</p> <?php endif; ?> </div> </div> </div> </div> <!-- Data Kartu --> <div class="card shadow mb-4"> <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between"> <h6 class="m-0 fw-bold text-primary">Daftar Kartu</h6> <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addCardModal"> <i class="bi bi-plus-lg me-1"></i> Tambah Kartu </button> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> <thead> <tr> <th>No. Kartu</th> <th>Status</th> <th>Status Keluar</th> <th>Keterangan</th> <th>Aksi</th> </tr> </thead> <tbody> <?php foreach ($cards as $card): ?> <tr> <td><?= htmlspecialchars($card['nomor_card']) ?></td> <td> <span class="status-badge <?= $card['is_aktif'] ? 'badge-aktif' : 'badge-nonaktif' ?>"> <?= $card['is_aktif'] ? 'AKTIF' : 'NON-AKTIF' ?> </span> </td> <td> <span class="status-badge <?= $card['is_keluar'] ? 'badge-keluar' : 'badge-masuk' ?>"> <?= $card['is_keluar'] ? 'KELUAR' : 'MASUK' ?> </span> </td> <td><?= htmlspecialchars($card['keterangan'] ?? '-') ?></td> <td> <button class="btn btn-sm btn-primary"> <i class="bi bi-pencil"></i> </button> <button class="btn btn-sm btn-danger"> <i class="bi bi-trash"></i> </button> </td> </tr> <?php endforeach; ?> </tbody> </table> </div> </div> </div> </div> <!-- /.container-fluid --> <!-- Footer --> <footer class="sticky-footer bg-white"> <div class="container my-auto"> <div class="copyright text-center my-auto"> <span>Copyright © tosiba_888 <?= date('Y') ?></span> </div> </div> </footer> </div> <!-- End of Main Content --> <!-- Add Card Modal --> <div class="modal fade" id="addCardModal" tabindex="-1" aria-labelledby="addCardModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="addCardModalLabel">Tambah Kartu Baru</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form> <div class="mb-3"> <label for="cardNumber" class="form-label">Nomor Kartu</label> <input type="text" class="form-control" id="cardNumber"> </div> <div class="mb-3"> <label for="cardNote" class="form-label">Keterangan</label> <textarea class="form-control" id="cardNote" rows="3"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button> <button type="button" class="btn btn-primary">Simpan</button> </div> </div> </div> </div> <!-- JavaScript Libraries --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> // Datatable initialization $(document).ready(function() { $('#dataTable').DataTable({ language: { url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' } }); }); // Chart initialization var ctx = document.getElementById("myAreaChart").getContext('2d'); var myLineChart = new Chart(ctx, { type: 'line', data: { labels: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"], datasets: [{ label: "Kartu Aktif", lineTension: 0.3, backgroundColor: "rgba(78, 115, 223, 0.05)", borderColor: "rgba(78, 115, 223, 1)", pointRadius: 3, pointBackgroundColor: "rgba(78, 115, 223, 1)", pointBorderColor: "rgba(78, 115, 223, 1)", pointHoverRadius: 3, pointHoverBackgroundColor: "rgba(78, 115, 223, 1)", pointHoverBorderColor: "rgba(78, 115, 223, 1)", pointHitRadius: 10, pointBorderWidth: 2, data: [0, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, <?= $stats['total_aktif'] ?>], }], }, options: { maintainAspectRatio: false, layout: { padding: { left: 10, right: 25, top: 25, bottom: 0 } }, scales: { x: { grid: { display: false, drawBorder: false } }, y: { ticks: { maxTicksLimit: 5, padding: 10, }, grid: { color: "rgb(234, 236, 244)", zeroLineColor: "rgb(234, 236, 244)", drawBorder: false, borderDash: [2], zeroLineBorderDash: [2] } } }, plugins: { legend: { display: false } } } }); </script> </body> </html>
Copyright ©2021 || Defacer Indonesia