MINI
C:
/
xampp
/
htdocs
/
all
/
Upload File:
files >> C:/xampp/htdocs/all/index.php
<!DOCTYPE html> <html> <head> <title>Card Exit Management System</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 1200px; margin: 20px auto; padding: 20px; background-color: #f5f5f5; } .dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; } .stat-card { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: center; } .stat-card h3 { margin-top: 0; color: #555; } .stat-value { font-size: 28px; font-weight: bold; margin: 10px 0; } .active { color: #28a745; } .exited { color: #dc3545; } .total { color: #007bff; } .search-container { margin-bottom: 20px; display: flex; gap: 10px; } .search-container input { padding: 10px; border: 1px solid #ddd; border-radius: 4px; flex-grow: 1; } .search-container button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } .table-container { max-height: 400px; overflow-y: auto; background-color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px; border-radius: 8px; } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f8f9fa; position: sticky; top: 0; z-index: 10; } tr:hover { background-color: #f5f5f5; } .btn { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; margin-right: 5px; } .btn-edit { background-color: #ffc107; color: black; } .btn-delete { background-color: #dc3545; color: white; } .btn-reset { background-color: #17a2b8; color: white; padding: 10px 15px; font-size: 14px; margin-right: 10px; } .btn-exit { background-color: #dc3545; color: white; padding: 10px 15px; font-size: 14px; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 50%; border-radius: 8px; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } .form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .action-buttons { margin-top: 20px; text-align: right; } #barcode-scanner { width: 100%; padding: 10px; font-size: 16px; margin-bottom: 15px; } .scan-status { padding: 10px; margin-top: 10px; border-radius: 4px; text-align: center; } .scan-success { background-color: #d4edda; color: #155724; } .scan-error { background-color: #f8d7da; color: #721c24; } </style> </head> <body> <h1>Card Exit Management System</h1> <div class="dashboard"> <div class="stat-card"> <h3>Active Cards</h3> <div class="stat-value active"><?php echo getCardCount('is_aktif = 1 AND is_keluar = 0'); ?></div> </div> <div class="stat-card"> <h3>Exited Cards</h3> <div class="stat-value exited"><?php echo getCardCount('is_keluar = 1'); ?></div> </div> <div class="stat-card"> <h3>Total Cards</h3> <div class="stat-value total"><?php echo getCardCount(); ?></div> </div> </div> <div style="margin-bottom: 20px; display: flex; gap: 10px;"> <button class="btn-reset" onclick="document.getElementById('resetModal').style.display='block'">Reset All Statuses</button> <button class="btn-reset" onclick="document.getElementById('addModal').style.display='block'">Add New Card</button> <button class="btn-exit" onclick="document.getElementById('exitModal').style.display='block'">Scan Barcode Exit</button> </div> <!-- Search Form --> <div class="search-container"> <form method="get" action=""> <input type="text" name="search" placeholder="Search by card number..." value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>"> <button type="submit">Search</button> <?php if(isset($_GET['search']) && !empty($_GET['search'])): ?> <a href="?" class="btn-reset">Clear Search</a> <?php endif; ?> </form> </div> <!-- Tabel dengan container scroll --> <div class="table-container"> <table> <thead> <tr> <th>ID</th> <th>Card Number</th> <th>Active Status</th> <th>Exit Status</th> <th>Actions</th> </tr> </thead> <tbody> <?php $search = isset($_GET['search']) ? trim($_GET['search']) : ''; $cards = getAllCards($search); if (empty($cards)) { echo "<tr><td colspan='5' style='text-align: center;'>No cards found" . ($search ? " for '".htmlspecialchars($search)."'" : "") . "</td></tr>"; } else { foreach ($cards as $card) { echo "<tr>"; echo "<td>" . htmlspecialchars($card['id_card']) . "</td>"; echo "<td>" . htmlspecialchars($card['nomor_card']) . "</td>"; echo "<td>" . ($card['is_aktif'] ? 'Active' : 'Inactive') . "</td>"; echo "<td>" . ($card['is_keluar'] ? 'Exited' : 'Not Exited') . "</td>"; echo "<td>"; echo "<button class='btn btn-edit' onclick='openEditModal(".json_encode($card).")'>Edit</button>"; echo "<button class='btn btn-delete' onclick='confirmDelete(".$card['id_card'].")'>Delete</button>"; echo "</td>"; echo "</tr>"; } } ?> </tbody> </table> </div> <!-- Exit Scan Modal --> <div id="exitModal" class="modal"> <div class="modal-content"> <span class="close" onclick="closeExitModal()">×</span> <h2>Exit Card Scanning</h2> <div class="form-group"> <label for="barcode-scanner">Scan Card Barcode:</label> <input type="text" id="barcode-scanner" autofocus placeholder="Scan card barcode to mark as exited..."> </div> <div id="scan-result" class="scan-status" style="display: none;"></div> <div class="action-buttons"> <button type="button" onclick="closeExitModal()">Close</button> </div> </div> </div> <!-- Reset Modal --> <div id="resetModal" class="modal"> <div class="modal-content"> <span class="close" onclick="document.getElementById('resetModal').style.display='none'">×</span> <h2>Confirm Reset</h2> <p>Are you sure you want to reset all card statuses?</p> <form method="post"> <input type="hidden" name="action" value="reset"> <div class="action-buttons"> <button type="button" onclick="document.getElementById('resetModal').style.display='none'">Cancel</button> <button type="submit" class="btn-reset">Confirm Reset</button> </div> </form> </div> </div> <!-- Add Modal --> <div id="addModal" class="modal"> <div class="modal-content"> <span class="close" onclick="document.getElementById('addModal').style.display='none'">×</span> <h2>Add New Card</h2> <form method="post"> <input type="hidden" name="action" value="add"> <div class="form-group"> <label for="nomor_card">Card Number:</label> <input type="text" id="nomor_card" name="nomor_card" required> </div> <div class="form-group"> <label for="is_aktif">Active Status:</label> <select id="is_aktif" name="is_aktif"> <option value="0">Inactive</option> <option value="1">Active</option> </select> </div> <div class="form-group"> <label for="is_keluar">Exit Status:</label> <select id="is_keluar" name="is_keluar"> <option value="0">Not Exited</option> <option value="1">Exited</option> </select> </div> <div class="action-buttons"> <button type="button" onclick="document.getElementById('addModal').style.display='none'">Cancel</button> <button type="submit" class="btn-reset">Add Card</button> </div> </form> </div> </div> <!-- Edit Modal --> <div id="editModal" class="modal"> <div class="modal-content"> <span class="close" onclick="document.getElementById('editModal').style.display='none'">×</span> <h2>Edit Card</h2> <form method="post"> <input type="hidden" name="action" value="update"> <input type="hidden" id="edit_id" name="id"> <div class="form-group"> <label for="edit_nomor_card">Card Number:</label> <input type="text" id="edit_nomor_card" name="nomor_card" required> </div> <div class="form-group"> <label for="edit_is_aktif">Active Status:</label> <select id="edit_is_aktif" name="is_aktif"> <option value="0">Inactive</option> <option value="1">Active</option> </select> </div> <div class="form-group"> <label for="edit_is_keluar">Exit Status:</label> <select id="edit_is_keluar" name="is_keluar"> <option value="0">Not Exited</option> <option value="1">Exited</option> </select> </div> <div class="action-buttons"> <button type="button" onclick="document.getElementById('editModal').style.display='none'">Cancel</button> <button type="submit" class="btn-reset">Update Card</button> </div> </form> </div> </div> <!-- Delete Confirmation Modal --> <div id="deleteModal" class="modal"> <div class="modal-content"> <span class="close" onclick="document.getElementById('deleteModal').style.display='none'">×</span> <h2>Confirm Delete</h2> <p>Are you sure you want to delete this card?</p> <form method="post"> <input type="hidden" name="action" value="delete"> <input type="hidden" id="delete_id" name="id"> <div class="action-buttons"> <button type="button" onclick="document.getElementById('deleteModal').style.display='none'">Cancel</button> <button type="submit" class="btn-delete">Delete</button> </div> </form> </div> </div> <script> // Barcode scanning functionality for exit process let scanTimeout; const barcodeScanner = document.getElementById('barcode-scanner'); const scanResult = document.getElementById('scan-result'); barcodeScanner.addEventListener('input', function(e) { clearTimeout(scanTimeout); scanTimeout = setTimeout(() => { const barcode = this.value.trim(); if (barcode) { processBarcodeExit(barcode); } }, 500); // Wait 500ms after last input to consider it a complete scan }); function processBarcodeExit(barcode) { fetch('', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: `action=exit_scan&barcode=${encodeURIComponent(barcode)}` }) .then(response => response.text()) .then(data => { try { const result = JSON.parse(data); if (result.success) { scanResult.textContent = result.message; scanResult.className = 'scan-status scan-success'; scanResult.style.display = 'block'; // Clear the scanner and refocus barcodeScanner.value = ''; barcodeScanner.focus(); // Reload the page after 2 seconds to show updated status setTimeout(() => { window.location.reload(); }, 2000); } else { scanResult.textContent = result.message; scanResult.className = 'scan-status scan-error'; scanResult.style.display = 'block'; } } catch (e) { scanResult.textContent = 'Error processing scan result'; scanResult.className = 'scan-status scan-error'; scanResult.style.display = 'block'; } }) .catch(error => { scanResult.textContent = 'Error: ' + error.message; scanResult.className = 'scan-status scan-error'; scanResult.style.display = 'block'; }); } function closeExitModal() { document.getElementById('exitModal').style.display = 'none'; scanResult.style.display = 'none'; barcodeScanner.value = ''; } function openEditModal(card) { document.getElementById('edit_id').value = card.id_card; document.getElementById('edit_nomor_card').value = card.nomor_card; document.getElementById('edit_is_aktif').value = card.is_aktif; document.getElementById('edit_is_keluar').value = card.is_keluar; document.getElementById('editModal').style.display = 'block'; } function confirmDelete(id) { document.getElementById('delete_id').value = id; document.getElementById('deleteModal').style.display = 'block'; } // Close modals when clicking outside window.onclick = function(event) { if (event.target.className === 'modal') { event.target.style.display = 'none'; if (event.target.id === 'exitModal') { closeExitModal(); } } } </script> <?php function getPDO() { $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); return $pdo; } catch (PDOException $e) { die("Connection failed: " . $e->getMessage()); } } function getCardCount($condition = '') { $pdo = getPDO(); $sql = "SELECT COUNT(*) FROM data_card"; if (!empty($condition)) { $sql .= " WHERE $condition"; } return $pdo->query($sql)->fetchColumn(); } function getAllCards($search = '') { $pdo = getPDO(); $sql = "SELECT * FROM data_card"; if (!empty($search)) { $sql .= " WHERE nomor_card LIKE :search"; $stmt = $pdo->prepare($sql); $stmt->execute([':search' => '%' . $search . '%']); } else { $stmt = $pdo->query($sql); } return $stmt->fetchAll(PDO::FETCH_ASSOC); } function resetAllStatuses() { $pdo = getPDO(); $pdo->beginTransaction(); try { //$stmt = $pdo->prepare("UPDATE data_card SET is_aktif = 0, is_keluar = 0"); //$stmt->execute(); //$pdo->commit(); header("Location: ".$_SERVER['PHP_SELF']); exit(); } catch (PDOException $e) { $pdo->rollBack(); echo "<div class='error'>Error: " . htmlspecialchars($e->getMessage()) . "</div>"; } } function addCard($data) { $pdo = getPDO(); $stmt = $pdo->prepare("INSERT INTO data_card (nomor_card, is_aktif, is_keluar) VALUES (:nomor_card, :is_aktif, :is_keluar)"); $stmt->execute([ ':nomor_card' => $data['nomor_card'], ':is_aktif' => $data['is_aktif'], ':is_keluar' => $data['is_keluar'] ]); header("Location: ".$_SERVER['PHP_SELF']); exit(); } function updateCard($data) { $pdo = getPDO(); $stmt = $pdo->prepare("UPDATE data_card SET nomor_card = :nomor_card, is_aktif = :is_aktif, is_keluar = :is_keluar WHERE id_card = :id"); $stmt->execute([ ':id' => $data['id'], ':nomor_card' => $data['nomor_card'], ':is_aktif' => $data['is_aktif'], ':is_keluar' => $data['is_keluar'] ]); header("Location: ".$_SERVER['PHP_SELF']); exit(); } function deleteCard($id) { $pdo = getPDO(); $stmt = $pdo->prepare("DELETE FROM data_card WHERE id_card = ?"); $stmt->execute([$id]); header("Location: ".$_SERVER['PHP_SELF']); exit(); } function processExitScan($barcode) { $pdo = getPDO(); try { // Check if card exists $stmt = $pdo->prepare("SELECT * FROM data_card WHERE nomor_card = ?"); $stmt->execute([$barcode]); $card = $stmt->fetch(PDO::FETCH_ASSOC); if (!$card) { echo json_encode([ 'success' => false, 'message' => 'Card not found in database' ]); return; } // Check if already exited if ($card['is_keluar'] == 1) { echo json_encode([ 'success' => false, 'message' => 'Card already marked as exited' ]); return; } // Mark as exited (is_keluar = 1) $updateStmt = $pdo->prepare("UPDATE data_card SET is_keluar = 1 WHERE id_card = ?"); $updateStmt->execute([$card['id_card']]); echo json_encode([ 'success' => true, 'message' => 'Card marked as EXITED: ' . htmlspecialchars($card['nomor_card']) ]); } catch (PDOException $e) { echo json_encode([ 'success' => false, 'message' => 'Database error: ' . $e->getMessage() ]); } } // Handle form submissions if ($_SERVER['REQUEST_METHOD'] === 'POST') { switch ($_POST['action']) { case 'reset': resetAllStatuses(); break; case 'add': addCard($_POST); break; case 'update': updateCard($_POST); break; case 'delete': deleteCard($_POST['id']); break; case 'exit_scan': header('Content-Type: application/json'); processExitScan($_POST['barcode']); exit; } } ?> </body> </html>
Copyright ©2021 || Defacer Indonesia