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/upzisprnumliwang

Free Space:

9.77 TB

🔧 Quick Actions

✏️ Editing: galeri_admin.php

<?php
require_once 'includes/config.php';
$pageTitle = 'Galeri Kegiatan';
$pageDesc  = 'Manajemen foto dan album kegiatan';

$msg   = '';
$error = '';

$category_options = [
    'Penyaluran', 'Pendidikan', 'Kesehatan', 'Ekonomi', 'Sosial', 'Infrastruktur', 'Rapat'
];

// ══════════════════════════════════════════
//  HANDLE POST
// ══════════════════════════════════════════
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

$action = $_POST['action'] ?? '';

if ($action === 'tambah' || $action === 'edit') {

$album_id         = ($action === 'edit' && !empty($_POST['id'])) ? (int)$_POST['id'] : 0;
        $title            = trim($_POST['title']            ?? '');
        $category         = trim($_POST['category']         ?? '');
        $description      = trim($_POST['description']      ?? '');
        $tanggal_kegiatan = trim($_POST['tanggal_kegiatan'] ?? date('Y-m-d'));

if ($action === 'edit' && $album_id <= 0) {
            $error = "ID album tidak valid.";
        } elseif (empty($title) || empty($category) || empty($tanggal_kegiatan)) {
            $error = "Judul, Kategori, dan Tanggal wajib diisi.";
        } else {
            $inTx = false;
            try {
                $pdo->beginTransaction();
                $inTx = true;

// 1) Simpan / update album
                if ($action === 'tambah') {
                    $pdo->prepare(
                        "INSERT INTO galeri (title, category, description, tanggal_kegiatan) VALUES (?, ?, ?, ?)"
                    )->execute([$title, $category, $description, $tanggal_kegiatan]);
                    $album_id = (int)$pdo->lastInsertId();
                    $msg = 'Album baru berhasil ditambahkan.';
                } else {
                    $pdo->prepare(
                        "UPDATE galeri SET title=?, category=?, description=?, tanggal_kegiatan=? WHERE id=?"
                    )->execute([$title, $category, $description, $tanggal_kegiatan, $album_id]);
                    $msg = 'Album berhasil diperbarui.';
                }

// 2) Hapus foto yang ditandai — dibaca dari hidden input delete_ids (JSON)
                $paths_to_delete = [];
                $delete_ids_raw  = trim($_POST['delete_ids'] ?? '');

if ($delete_ids_raw !== '' && $album_id > 0) {
                    $delete_ids = json_decode($delete_ids_raw, true);

if (is_array($delete_ids) && count($delete_ids) > 0) {
                        $delete_ids = array_values(array_filter(
                            array_map('intval', $delete_ids),
                            fn($v) => $v > 0
                        ));

if (!empty($delete_ids)) {
                            $ph      = implode(',', array_fill(0, count($delete_ids), '?'));
                            $selStmt = $pdo->prepare(
                                "SELECT id, image_path FROM galeri_images
                                 WHERE galeri_id = ? AND id IN ({$ph})"
                            );
                            $selStmt->execute(array_merge([$album_id], $delete_ids));
                            $rows = $selStmt->fetchAll(PDO::FETCH_ASSOC);

if (!empty($rows)) {
                                $confirmed_ids   = array_column($rows, 'id');
                                $paths_to_delete = array_column($rows, 'image_path');

$ph2 = implode(',', array_fill(0, count($confirmed_ids), '?'));
                                $pdo->prepare(
                                    "DELETE FROM galeri_images WHERE galeri_id = ? AND id IN ({$ph2})"
                                )->execute(array_merge([$album_id], $confirmed_ids));

$msg .= ' ' . count($confirmed_ids) . ' foto berhasil dihapus.';
                            }
                        }
                    }
                }

// 3) Upload foto baru
                $uploaded = 0;
                if (!empty($_FILES['images']['name'][0])) {
                    $uploadDir    = 'uploads/galeri/';
                    $allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
                    if (!is_dir($uploadDir)) mkdir($uploadDir, 0755, true);

$total = count($_FILES['images']['name']);
                    for ($i = 0; $i < $total; $i++) {
                        if ($_FILES['images']['error'][$i] === UPLOAD_ERR_NO_FILE) continue;
                        if ($_FILES['images']['error'][$i] !== UPLOAD_ERR_OK) {
                            throw new Exception("Error upload file ke-" . ($i + 1) . " (kode: " . $_FILES['images']['error'][$i] . ").");
                        }

$finfo = finfo_open(FILEINFO_MIME_TYPE);
                        $mime  = finfo_file($finfo, $_FILES['images']['tmp_name'][$i]);
                        finfo_close($finfo);

if (!in_array($mime, $allowedTypes, true)) {
                            throw new Exception("Format '{$_FILES['images']['name'][$i]}' tidak diizinkan. Gunakan JPG, PNG, GIF, atau WebP.");
                        }

$ext     = strtolower(pathinfo($_FILES['images']['name'][$i], PATHINFO_EXTENSION));
                        $safeExt = in_array($ext, ['jpg','jpeg','png','gif','webp'], true) ? $ext : 'jpg';
                        $fname   = 'galeri_' . $album_id . '_' . time() . '_' . uniqid('', true) . '.' . $safeExt;
                        $target  = $uploadDir . $fname;

if (!move_uploaded_file($_FILES['images']['tmp_name'][$i], $target)) {
                            throw new Exception("Gagal menyimpan '{$_FILES['images']['name'][$i]}'. Periksa izin folder uploads/galeri/.");
                        }

$pdo->prepare(
                            "INSERT INTO galeri_images (galeri_id, image_path) VALUES (?, ?)"
                        )->execute([$album_id, $target]);
                        $uploaded++;
                    }
                    if ($uploaded > 0) $msg .= " {$uploaded} foto diupload.";
                }

$pdo->commit();
                $inTx = false;

// Hapus file fisik SETELAH commit berhasil
                foreach ($paths_to_delete as $p) {
                    if (!empty($p) && file_exists($p)) @unlink($p);
                }

header("Location: galeri_admin.php?msg=" . urlencode(trim($msg)));
                exit;

} catch (Exception $e) {
                if ($inTx) $pdo->rollBack();
                $error = 'Terjadi kesalahan: ' . $e->getMessage();
            }
        }

} elseif ($action === 'hapus') {
        $album_id = (int)($_POST['id'] ?? 0);
        if ($album_id > 0) {
            $inTx = false;
            try {
                $imgStmt = $pdo->prepare("SELECT image_path FROM galeri_images WHERE galeri_id = ?");
                $imgStmt->execute([$album_id]);
                $paths = $imgStmt->fetchAll(PDO::FETCH_COLUMN);

$pdo->beginTransaction();
                $inTx = true;
                $pdo->prepare("DELETE FROM galeri WHERE id = ?")->execute([$album_id]);
                $pdo->commit();
                $inTx = false;

foreach ($paths as $p) {
                    if ($p && file_exists($p)) @unlink($p);
                }

header("Location: galeri_admin.php?msg=" . urlencode('Album dan semua fotonya berhasil dihapus.'));
                exit;

} catch (Exception $e) {
                if ($inTx) $pdo->rollBack();
                $error = 'Gagal menghapus album: ' . $e->getMessage();
            }
        }
    }
}

// Pesan dari redirect
if (isset($_GET['msg']) && empty($msg) && empty($error)) {
    $msg = urldecode($_GET['msg']);
}

// FETCH DATA EDIT
$editData   = null;
$editImages = [];
if (isset($_GET['edit'])) {
    $editId = (int)$_GET['edit'];
    if ($editId > 0) {
        try {
            $stmt = $pdo->prepare("SELECT * FROM galeri WHERE id = ?");
            $stmt->execute([$editId]);
            $editData = $stmt->fetch();
            if ($editData) {
                $imgStmt = $pdo->prepare("SELECT * FROM galeri_images WHERE galeri_id = ? ORDER BY id ASC");
                $imgStmt->execute([$editData['id']]);
                $editImages = $imgStmt->fetchAll();
            } else {
                $error = "Album tidak ditemukan.";
            }
        } catch (Exception $e) {
            $error = "Gagal memuat data: " . $e->getMessage();
        }
    }
}

// FETCH SEMUA ALBUM
try {
    $stmt = $pdo->query("
        SELECT g.*,
               (SELECT image_path FROM galeri_images WHERE galeri_id = g.id ORDER BY id ASC LIMIT 1) AS thumbnail,
               (SELECT COUNT(*) FROM galeri_images WHERE galeri_id = g.id) AS image_count
        FROM galeri g
        ORDER BY g.tanggal_kegiatan DESC
    ");
    $gallery_items = $stmt->fetchAll();
} catch (Exception $e) {
    $gallery_items = [];
    $error = "Gagal memuat daftar galeri: " . $e->getMessage();
}

include 'includes/header.php';
?>

/* --- Wrapper foto: div biasa, toggle via JS --- */
.img-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid transparent;
    transition: border-color .2s, box-shadow .2s;
    cursor: pointer;
    background: #f3f4f6;
    display: block;
    user-select: none;
    -webkit-user-select: none;
}
.img-item:hover {
    box-shadow: 0 0 0 3px rgba(239,68,68,.3);
}
.img-item img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
    transition: opacity .2s;
    /* pointer-events: none WAJIB agar klik tidak diserap gambar */
    pointer-events: none;
}

/*
 * PERBAIKAN UTAMA:
 * Overlay "Akan dihapus" dibuat sebagai div nyata di dalam HTML (bukan ::after)
 * sehingga tidak pernah menghalangi event klik pada parent .img-item
 */
.img-item .overlay {
    display: none;              /* tersembunyi saat belum ditandai */
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
    background: rgba(220,38,38,.55);
    pointer-events: none;       /* TIDAK boleh menyerap klik — teruskan ke .img-item */
    border-radius: 7px;
}

/* Badge X pojok kanan atas */
.img-item .del-badge {
    position: absolute;
    top: 6px; right: 6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,.4);
    color: #fff;
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;       /* jangan serap klik */
    transition: background .2s;
}

/* --- State: ditandai hapus --- */
.img-item.marked {
    border-color: #ef4444;
}
.img-item.marked img {
    opacity: .2;
}
.img-item.marked .del-badge {
    background: #ef4444;
}
.img-item.marked .overlay {
    display: flex;              /* tampilkan overlay saat marked */
}

/* --- Counter & hint --- */
.delete-hint {
    font-size: 12px; color: #6b7280;
    margin-top: 6px;
    display: flex; align-items: center; gap: 6px;
}
.delete-hint i { color: #ef4444; }

#delete-counter {
    display: none;
    margin-top: 8px; padding: 6px 12px;
    background: #fef2f2; border: 1px solid #fca5a5;
    border-radius: 6px; font-size: 13px; font-weight: 600; color: #dc2626;
}
#delete-counter.visible { display: block; }
</style>

<?php if ($msg): ?>
<div class="alert alert-success">
    <i class="fas fa-check-circle"></i> <?= htmlspecialchars($msg) ?>
</div>
<?php endif; ?>
<?php if ($error): ?>
<div class="alert alert-danger">
    <i class="fas fa-exclamation-circle"></i> <?= htmlspecialchars($error) ?>
</div>
<?php endif; ?>

<div class="form-card" id="form-galeri">
    <h3>
        <i class="fas fa-edit" style="color:var(--g-main)"></i>
        <?= $editData ? 'Edit Album Kegiatan' : 'Tambah Album Baru' ?>
    </h3>

<input type="hidden" name="delete_ids" id="delete_ids" value="">

<div class="form-grid">
            <div class="form-group">
                <label class="form-label">Judul Album *</label>
                <input type="text" name="title" class="form-control" required
                       value="<?= htmlspecialchars($editData['title'] ?? '') ?>"
                       placeholder="Contoh: Penyaluran Zakat Fitrah 2025">
            </div>
            <div class="form-group">
                <label class="form-label">Tanggal Kegiatan *</label>
                <input type="date" name="tanggal_kegiatan" class="form-control" required
                       value="<?= htmlspecialchars($editData['tanggal_kegiatan'] ?? date('Y-m-d')) ?>">
            </div>
        </div>

<div class="form-group" style="margin-top:16px">
            <label class="form-label">Kategori *</label>
            <select name="category" class="form-control form-select" required>
                <option value="">-- Pilih Kategori --</option>
                <?php foreach ($category_options as $cat): ?>
                <option value="<?= $cat ?>"
                    <?= ($editData['category'] ?? '') === $cat ? 'selected' : '' ?>>
                    <?= $cat ?>
                </option>
                <?php endforeach; ?>
            </select>
        </div>

<div class="form-group" style="margin-top:16px">
            <label class="form-label">Deskripsi</label>
            <textarea name="description" class="form-control" rows="3"
                      placeholder="Deskripsi singkat kegiatan (opsional)"
            ><?= htmlspecialchars($editData['description'] ?? '') ?></textarea>
        </div>

<div class="form-group" style="margin-top:16px">
            <label class="form-label">
                Upload Foto <?= $editData ? 'Tambahan' : 'Kegiatan' ?>
                <span style="font-weight:400;color:#6b7280">(boleh pilih banyak sekaligus)</span>
            </label>
            <input type="file" name="images[]" class="form-control"
                   multiple accept="image/*" id="file-input">
            <small style="font-size:11px;color:#6b7280;margin-top:4px;display:block;">
                Format: JPG, PNG, GIF, WebP. Tidak ada batas jumlah file.
            </small>
            <div id="new-preview" style="display:none;margin-top:14px">
                <p style="font-size:12px;color:#374151;font-weight:600;margin-bottom:8px">
                    <i class="fas fa-eye" style="color:var(--g-main)"></i>
                    Pratinjau foto yang akan diupload:
                </p>
                <div id="new-preview-grid" class="image-preview-grid"></div>
            </div>
        </div>

<?php if ($editData && !empty($editImages)): ?>
        <div class="form-group" style="margin-top:22px">
            <label class="form-label">
                Foto Saat Ini
                <span style="font-weight:400;color:#6b7280">(<?= count($editImages) ?> foto)</span>
            </label>
            <p class="delete-hint">
                <i class="fas fa-hand-pointer"></i>
                Klik foto untuk menandai hapus &mdash; klik lagi untuk membatalkan.
            </p>
            <div id="delete-counter"></div>

<div class="image-preview-grid" id="existing-photos">
                <?php foreach ($editImages as $img): ?>
                <div class="img-item"
                     data-id="<?= (int)$img['id'] ?>"
                     onclick="toggleDelete(this)">
                    <img src="<?= htmlspecialchars($img['image_path']) ?>"
                         alt="Foto album"
                         onerror="this.src='assets/images/placeholder.png'">
                    
                    <span class="del-badge">✕</span>
                    
                    <div class="overlay">✕&nbsp; Akan dihapus</div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>

<div style="display:flex;gap:10px;margin-top:22px;flex-wrap:wrap">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i>
                <?= $editData ? 'Simpan Perubahan' : 'Simpan Album' ?>
            </button>
            <?php if ($editData): ?>
            <a href="galeri_admin.php" class="btn btn-outline">
                <i class="fas fa-times"></i> Batal
            </a>
            <?php endif; ?>
        </div>
    </form>
</div>

<div class="table-card">
    <div class="table-header">
        <h3>
            <i class="fas fa-images" style="color:var(--g-main)"></i>
            Daftar Album Kegiatan
        </h3>
    </div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Thumbnail</th>
                    <th>Judul Album</th>
                    <th>Kategori</th>
                    <th>Tanggal</th>
                    <th>Jumlah Foto</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($gallery_items)): ?>
                <tr>
                    <td colspan="6" style="text-align:center;padding:40px;color:#9ca3af">
                        <i class="fas fa-photo-video"
                           style="font-size:36px;display:block;margin-bottom:10px"></i>
                        Belum ada album kegiatan.
                    </td>
                </tr>
                <?php else: foreach ($gallery_items as $item): ?>
                <tr>
                    <td>
                        <?php if ($item['thumbnail']): ?>
                        <img src="<?= htmlspecialchars($item['thumbnail']) ?>"
                             alt="thumb"
                             style="width:80px;height:54px;object-fit:cover;border-radius:6px;"
                             onerror="this.style.display='none'">
                        <?php else: ?>
                        <div style="width:80px;height:54px;background:#f3f4f6;display:flex;
                                    align-items:center;justify-content:center;
                                    color:#d1d5db;border-radius:6px;">
                            <i class="fas fa-image" style="font-size:20px"></i>
                        </div>
                        <?php endif; ?>
                    </td>
                    <td><strong><?= htmlspecialchars($item['title']) ?></strong></td>
                    <td>
                        <span class="badge badge-blue"><?= htmlspecialchars($item['category']) ?></span>
                    </td>
                    <td><?= date('d M Y', strtotime($item['tanggal_kegiatan'])) ?></td>
                    <td>
                        <span class="badge badge-gray"><?= $item['image_count'] ?> foto</span>
                    </td>
                    <td>
                        <div style="display:flex;gap:6px">
                            <a href="galeri_admin.php?edit=<?= $item['id'] ?>#form-galeri"
                               class="btn btn-sm btn-outline" title="Edit album">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form method="POST"
                                  onsubmit="return confirm('Hapus album «<?= htmlspecialchars(addslashes($item['title'])) ?>» beserta <?= $item['image_count'] ?> foto?\nTindakan ini tidak bisa dibatalkan.')"
                                  style="display:inline">
                                <input type="hidden" name="action" value="hapus">
                                <input type="hidden" name="id"     value="<?= $item['id'] ?>">
                                <button type="submit" class="btn btn-sm btn-danger">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                <?php endforeach; endif; ?>
            </tbody>
        </table>
    </div>
</div>

function toggleDelete(el) {
    // Pastikan kita selalu dapat .img-item meski yang diklik child-nya
    var item = el.closest ? el.closest('.img-item') : el;
    if (!item) return;

var id = parseInt(item.getAttribute('data-id'), 10);
    if (isNaN(id) || id <= 0) return;

if (markedIds.has(id)) {
        markedIds.delete(id);
        item.classList.remove('marked');
    } else {
        markedIds.add(id);
        item.classList.add('marked');
    }

// Update counter
    var counter = document.getElementById('delete-counter');
    if (counter) {
        var n = markedIds.size;
        if (n === 0) {
            counter.textContent = '';
            counter.classList.remove('visible');
        } else {
            counter.textContent = '⚠️ ' + n + ' foto ditandai untuk dihapus saat Simpan ditekan.';
            counter.classList.add('visible');
        }
    }
}

// Isi hidden input delete_ids (JSON) tepat sebelum form dikirim
document.getElementById('main-form').addEventListener('submit', function (e) {
    var hiddenInput = document.getElementById('delete_ids');
    var n = markedIds.size;

hiddenInput.value = n > 0 ? JSON.stringify(Array.from(markedIds)) : '';

if (n > 0 && !confirm(n + ' foto akan dihapus permanen. Yakin melanjutkan?')) {
        e.preventDefault();
        return false;
    }
});

// Pratinjau foto baru sebelum upload
document.getElementById('file-input').addEventListener('change', function () {
    var grid    = document.getElementById('new-preview-grid');
    var wrapper = document.getElementById('new-preview');
    grid.innerHTML = '';

if (!this.files || this.files.length === 0) {
        wrapper.style.display = 'none';
        return;
    }

wrapper.style.display = 'block';
    Array.from(this.files).forEach(function (file) {
        if (!file.type.startsWith('image/')) return;
        var reader = new FileReader();
        reader.onload = function (ev) {
            var wrap = document.createElement('div');
            wrap.style.cssText = 'border-radius:10px;overflow:hidden;background:#f3f4f6;';
            var img = document.createElement('img');
            img.src = ev.target.result;
            img.style.cssText = 'width:100%;height:110px;object-fit:cover;display:block;';
            wrap.appendChild(img);
            grid.appendChild(wrap);
        };
        reader.readAsDataURL(file);
    });
});
</script>

<?php include 'includes/footer.php'; ?>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: galeri_admin.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation