Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-611.26.1.el9_7.x86_64

PHP Version:

8.4.15

User:

u892747680

Directory:

/home/u892747680/domains/sisteminformasic.com/public_html/absensi-kbnj

Free Space:

9.88 TB

🔧 Quick Actions

✏️ Editing: scan_guru.php

<?php
require_once 'config.php';
checkLogin();
$conn = getConnection();

// Cek apakah kolom 'jabatan' sudah ada di tabel users, jika belum tambahkan
$check_col_jabatan = $conn->query("SHOW COLUMNS FROM users LIKE 'jabatan'");
if ($check_col_jabatan->num_rows == 0) {
    $conn->query("ALTER TABLE users ADD COLUMN jabatan VARCHAR(100) DEFAULT 'Guru Kelas'");
}

// Ambil daftar guru untuk input manual
$guru_options = $conn->query("SELECT id, nama, jabatan FROM users ORDER BY nama ASC");

// Proses absensi
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $status = isset($_POST['status']) ? $_POST['status'] : 'Hadir';
    $tanggal = date('Y-m-d');
    $waktu = date('H:i:s');

// Validasi status agar hanya menerima nilai yang diizinkan
    $allowed_status = ['Hadir', 'Izin', 'Sakit', 'Alpa'];
    if (!in_array($status, $allowed_status)) $status = 'Hadir';

// --- LOGIKA INPUT MANUAL ---
    if (isset($_POST['manual_guru_id'])) {
        $guru_id = $_POST['manual_guru_id'];
        
        // Cek duplikasi
        $stmt_check = $conn->prepare("SELECT id FROM absensi_guru WHERE guru_id = ? AND tanggal = ?");
        $stmt_check->bind_param("is", $guru_id, $tanggal);
        $stmt_check->execute();
        
        if ($stmt_check->get_result()->num_rows > 0) {
            echo json_encode(['success' => false, 'message' => 'Guru ini sudah diabsen hari ini.']);
        } else {
            $stmt_insert = $conn->prepare("INSERT INTO absensi_guru (guru_id, tanggal, status) VALUES (?, ?, ?)");
            $stmt_insert->bind_param("iss", $guru_id, $tanggal, $status);
            if ($stmt_insert->execute()) {
                $guru_nama_res = $conn->query("SELECT nama FROM users WHERE id = $guru_id");
                $guru_nama = $guru_nama_res ? $guru_nama_res->fetch_assoc()['nama'] : 'Guru';
                echo json_encode(['success' => true, 'message' => "Absensi manual untuk {$guru_nama} ({$status}) berhasil disimpan."]);
            } else {
                echo json_encode(['success' => false, 'message' => 'Gagal menyimpan absensi manual.']);
            }
        }
        exit;
    }

// --- LOGIKA SCAN QR ---
    if (isset($_POST['qr_data'])) {
        $qr_data = json_decode($_POST['qr_data'], true);
        if (!$qr_data || !isset($qr_data['type']) || $qr_data['type'] != 'guru') {
            echo json_encode(['success' => false, 'message' => 'QR Code tidak valid untuk absensi guru!']);
            exit;
        }

$guru_id = $qr_data['id'];
        
        // Cek validitas guru
        $stmt_guru = $conn->prepare("SELECT id, nama FROM users WHERE id = ?");
        $stmt_guru->bind_param("i", $guru_id);
        $stmt_guru->execute();
        $guru_result = $stmt_guru->get_result();
        
        if ($guru = $guru_result->fetch_assoc()) {
            // Cek absensi hari ini
            $stmt_check = $conn->prepare("SELECT * FROM absensi_guru WHERE guru_id = ? AND tanggal = ?");
            $stmt_check->bind_param("is", $guru_id, $tanggal);
            $stmt_check->execute();
            $absensi_hari_ini = $stmt_check->get_result()->fetch_assoc();

if (!$absensi_hari_ini) {
                // Belum ada scan sama sekali -> Absen Datang
                $stmt_insert = $conn->prepare("INSERT INTO absensi_guru (guru_id, tanggal, waktu_datang, status) VALUES (?, ?, ?, 'Hadir')");
                $stmt_insert->bind_param("iss", $guru_id, $tanggal, $waktu);
                if ($stmt_insert->execute()) {
                    echo json_encode([
                        'success' => true,
                        'message' => 'Absen Datang Berhasil!',
                        'data' => ['nama' => $guru['nama'], 'kelas' => 'Guru / Pegawai', 'status' => 'Datang', 'waktu' => $waktu]
                    ]);
                } else {
                    echo json_encode(['success' => false, 'message' => 'Gagal menyimpan absen datang.']);
                }
            } else if (is_null($absensi_hari_ini['waktu_pulang'])) {
                // Sudah absen datang, belum pulang -> Absen Pulang
                
                // Batas waktu pulang minimal jam 09:30
                if ($waktu < '09:30:00') {
                    echo json_encode(['success' => false, 'message' => 'Absen pulang baru bisa dilakukan mulai jam 09:30!']);
                    exit;
                }

$stmt_update = $conn->prepare("UPDATE absensi_guru SET waktu_pulang = ? WHERE id = ?");
                $stmt_update->bind_param("si", $waktu, $absensi_hari_ini['id']);
                if ($stmt_update->execute()) {
                    echo json_encode([
                        'success' => true,
                        'message' => 'Absen Pulang Berhasil!',
                        'data' => ['nama' => $guru['nama'], 'kelas' => 'Guru / Pegawai', 'status' => 'Pulang', 'waktu' => $waktu]
                    ]);
                } else {
                    echo json_encode(['success' => false, 'message' => 'Gagal menyimpan absen pulang.']);
                }
            } else {
                // Sudah absen datang dan pulang
                echo json_encode(['success' => false, 'message' => 'Guru ' . $guru['nama'] . ' sudah absen datang dan pulang hari ini!']);
            }
        } else {
            echo json_encode(['success' => false, 'message' => 'Data Guru tidak ditemukan!']);
        }
        exit;
    }
    
    // Jika tidak ada data yang sesuai
    echo json_encode(['success' => false, 'message' => 'Data tidak valid!']);
    exit;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scan Absensi Guru</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Poppins', sans-serif;
            background: #111827; /* Dark mode for scanner */
            min-height: 100vh;
            padding: 20px;
            color: #444;
        }
        .circles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }
        .circles li {
            position: absolute;
            display: block;
            list-style: none;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.2);
            animation: bubble-animate 25s linear infinite;
            bottom: -150px;
            border-radius: 50%;
        }
        .circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
        .circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
        .circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
        .circles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
        .circles li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
        .circles li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
        .circles li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
        .circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
        .circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
        .circles li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }
        @keyframes bubble-animate {
            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(-1000px) rotate(360deg); opacity: 0; }
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        .header {
            background: rgba(255,255,255,0.1);
            padding: 25px;
            border-radius: 20px;
            backdrop-filter: blur(10px);
            margin-bottom: 30px;
            color: #fff;
            position: relative;
            text-align: center;
            border: none;
            animation: slideDown 0.5s ease-out;
        }
        .header h1 {
            color: #fff;
            margin-bottom: 10px;
            font-weight: 800;
        }
        .header p { color: #ccc; }
        .back-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.2);
            color: #fff;
            text-decoration: none;
            border-radius: 50%;
            transition: all 0.3s ease;
            font-size: 20px;
            border: none;
            backdrop-filter: blur(5px);
        }
        .back-btn:hover { 
            background: #fff;
            color: #4318FF;
            transform: scale(1.1) rotate(360deg);
        }
        .content {
            background: #1F2937;
            backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            color: #444;
            animation: fadeIn 0.8s ease-out;
        }
        .mapel-selector {
            margin-bottom: 20px;
            background: #F4F7FE;
            padding: 20px;
            border-radius: 15px;
            border: none;
        }
        #scanner-container {
            position: relative;
            width: 100%;
            max-width: 400px;
            margin: 20px auto;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 0 50px rgba(67, 24, 255, 0.3);
            border: 4px solid #4318FF;
        }
        #scanner-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: #05CD99;
            box-shadow: 0 0 10px #fff, 0 0 20px #fff;
            animation: scan 3s infinite linear;
        }
        @keyframes scan {
            0% { top: 0%; }
            100% { top: calc(100% - 5px); }
        }
        #video {
            width: 100%;
            display: block;
        }
        #canvas {
            display: none;
        }
        .result {
            margin-top: 30px;
            padding: 20px;
            border-radius: 15px;
            text-align: center;
            display: none;
            animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-weight: 700;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes bounceIn {
            0% { opacity: 0; transform: scale(0.3); }
            50% { opacity: 1; transform: scale(1.05); }
            70% { transform: scale(0.9); }
            100% { transform: scale(1); }
        }
        @keyframes slideDown {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .result.success { background: #e6fffa; color: #06d6a0; border: 2px solid #06d6a0; }
        .result.error { background: #fff5f5; color: #ef476f; border: 2px solid #ef476f; }
        .result h2 {
            color: inherit;
            border: none;
            padding: 0;
            margin-bottom: 10px;
        }
        .btn {
            padding: 10px 25px;
            background: linear-gradient(to right, #4318FF, #868CFF);
            color: white;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 700;
            margin-top: 15px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 6px 15px rgba(0,0,0,0.15);
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #9CA3AF;
        }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #e0e5f2;
            border-radius: 10px;
            font-size: 16px;
            font-family: inherit;
            background: #fff; /* Keep input white for readability */
            color: #333;
            transition: all 0.3s ease;
        }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            outline: none;
            border-color: #4318FF;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(67, 24, 255, 0.1);
        }
        .form-group option {
            background: #fff;
            color: #333;
        }
        @media (max-width: 768px) {
            body { padding: 15px; }
            .header { padding: 20px 15px; }
            .header h1 { font-size: 22px; }
            .content { padding: 20px; }
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <a href="index.php" class="back-btn" title="Kembali"><i class="fa-solid fa-arrow-left"></i></a>
            <h1><i class="fa-solid fa-qrcode"></i> Scan Absensi Guru</h1>
            <p>Arahkan kamera ke QR Code guru atau pegawai</p>
        </div>

<div class="content">
            <div class="mapel-selector" style="margin-bottom: 20px; background: #F4F7FE; padding: 20px; border-radius: 15px; border: none;">
                <div class="form-group" style="margin-bottom: 0;">
                    <label for="status_kehadiran"><i class="fa-solid fa-clipboard-user"></i> Status Kehadiran:</label>
                    <select id="status_kehadiran" class="form-control" style="width: 100%; padding: 12px; border-radius: 10px; border: 2px solid #4318FF;">
                        <option value="Hadir">Hadir</option>
                        <option value="Izin">Izin</option>
                        <option value="Sakit">Sakit</option>
                        <option value="Alpa">Alpa</option>
                    </select>
                </div>
            </div>

<div id="scanner-container">
                <video id="video" autoplay playsinline></video>
                <button type="button" id="switch-cam" class="btn" style="width: 100%; margin-top: 0; border-radius: 0 0 25px 25px; background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); color: white;"><i class="fa-solid fa-camera-rotate"></i> Ganti Kamera</button>
                <canvas id="canvas"></canvas>
            </div>

<div class="manual-input" style="margin-top: 30px; padding-top: 30px; border-top: 1px solid #374151;">
                <h3 style="color: white; margin-bottom: 15px;"><i class="fa-solid fa-keyboard"></i> Input Manual (Sakit/Izin/Alpa)</h3>
                <p style="color: #9CA3AF; font-size: 14px; margin-bottom: 15px;">Gunakan form ini jika guru tidak hadir (Sakit/Izin/Alpa) dan tidak bisa scan.</p>
                <form id="manualForm">
                    <div class="form-group">
                        <label>Pilih Guru:</label>
                        <select id="manual_guru_id" name="manual_guru_id" required>
                            <option value="">-- Cari Nama Guru --</option>
                            <?php while($g = $guru_options->fetch_assoc()): ?>
                                <option value="<?php echo $g['id']; ?>"><?php echo $g['nama'] . " (" . ($g['jabatan'] ?: 'Pegawai') . ")"; ?></option>
                            <?php endwhile; ?>
                        </select>
                    </div>
                    <button type="submit" class="btn"><i class="fa-solid fa-check"></i> Submit Absensi Manual</button>
                </form>
            </div>
        </div>
    </div>

if (currentFacingMode === 'user') {
                    video.style.transform = 'scaleX(-1)';
                } else {
                    video.style.transform = 'scaleX(1)';
                }

video.play();
                scanQR();
            })
            .catch(err => {
                resultDiv.className = 'result error';
                resultDiv.style.display = 'block';
                resultDiv.innerHTML = '<h2>❌ Error</h2><p>Tidak dapat mengakses kamera.</p>';
            });
        }

switchBtn.addEventListener('click', () => {
            currentFacingMode = currentFacingMode === 'environment' ? 'user' : 'environment';
            startCamera();
        });

startCamera();

function processAbsensi(qrData) {
            const status = document.getElementById('status_kehadiran').value;
            beepSound.play();

fetch('scan_guru.php', { // Post to self
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'qr_data=' + encodeURIComponent(qrData) + '&status=' + encodeURIComponent(status)
            })
            .then(response => response.json())
            .then(data => {
                resultDiv.style.display = 'block';
                
                if (data.success) {
                    Swal.fire({
                        title: 'Berhasil!',
                        text: `${data.message} - ${data.data.nama} (${data.data.status})`,
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => resetScan());
                } else {
                    Swal.fire('Gagal!', data.message, 'error').then(() => resetScan());
                }
            })
            .catch(error => {
                Swal.fire('Error!', error.message, 'error').then(() => resetScan());
            });
        }

function resetScan() {
            resultDiv.style.display = 'none';
            scanning = true;
            scanQR();
        }

// Manual form
        document.getElementById('manualForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const guruId = document.getElementById('manual_guru_id').value;
            const status = document.getElementById('status_kehadiran').value;

if (!guruId) {
                Swal.fire('Peringatan!', 'Silakan pilih guru terlebih dahulu.', 'warning');
                return;
            }
            if (status === 'Hadir') {
                Swal.fire('Peringatan!', 'Input manual hanya untuk status Sakit, Izin, atau Alpa.', 'warning');
                return;
            }

fetch('scan_guru.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: `manual_guru_id=${guruId}&status=${status}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    Swal.fire('Berhasil!', data.message, 'success');
                } else {
                    Swal.fire('Gagal!', data.message, 'error');
                }
                document.getElementById('manualForm').reset();
            })
            .catch(error => {
                Swal.fire('Error!', error.message, 'error');
            });
        });
    </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: scan_guru.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation