Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.2.30

User:

u329947844

Directory:

/home/u329947844/domains/pennagaram.org/public_html/admin

Free Space:

10.3 TB

🔧 Quick Actions

✏️ Editing: manage-banners.php

<!doctype html>
<html lang="en">
<?php
include('includes/head.php');
include('includes/db.php');
// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['action'])) {
        if ($_POST['action'] === 'add_banner') {
            $title = mysqli_real_escape_string($conn, $_POST['title']);
            $type = 'banner';
           
            // Handle separate images for desktop and mobile
            $errors = [];
            $uploads = [];
           
            // Process desktop image
            if (isset($_FILES['desktop_image']) && $_FILES['desktop_image']['error'] === 0) {
                $uploadDir = 'uploads/banners/';
                if (!is_dir($uploadDir)) {
                    mkdir($uploadDir, 0755, true);
                }
               
                $image = $_FILES['desktop_image'];
                $imageExt = strtolower(pathinfo($image['name'], PATHINFO_EXTENSION));
                $allowedExt = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
               
                if (in_array($imageExt, $allowedExt)) {
                    $imageInfo = getimagesize($image['tmp_name']);
                    $width = $imageInfo[0];
                    $height = $imageInfo[1];
                   
                    if ($width == 1920 && $height == 1080) {
                        $imageName = 'banner_desktop_' . time() . '_' . uniqid() . '.' . $imageExt;
                        $imageTarget = $uploadDir . $imageName;
                       
                        if (move_uploaded_file($image['tmp_name'], $imageTarget)) {
                            $uploads['desktop'] = ['name' => $imageName, 'title' => $title . ' (Desktop)'];
                        }
                    } else {
                        $errors[] = "Desktop banner must be exactly 1920x1080px.";
                    }
                }
            } else {
                $errors[] = "Desktop banner image is required.";
            }
           
            // Process mobile image
            if (isset($_FILES['mobile_image']) && $_FILES['mobile_image']['error'] === 0) {
                $uploadDir = 'uploads/banners/';
                if (!is_dir($uploadDir)) {
                    mkdir($uploadDir, 0755, true);
                }
               
                $image = $_FILES['mobile_image'];
                $imageExt = strtolower(pathinfo($image['name'], PATHINFO_EXTENSION));
                $allowedExt = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
               
                if (in_array($imageExt, $allowedExt)) {
                    $imageInfo = getimagesize($image['tmp_name']);
                    $width = $imageInfo[0];
                    $height = $imageInfo[1];
                   
                    if ($width == 768 && $height == 1024) {
                        $imageName = 'banner_mobile_' . time() . '_' . uniqid() . '.' . $imageExt;
                        $imageTarget = $uploadDir . $imageName;
                       
                        if (move_uploaded_file($image['tmp_name'], $imageTarget)) {
                            $uploads['mobile'] = ['name' => $imageName, 'title' => $title . ' (Mobile)'];
                        }
                    } else {
                        $errors[] = "Mobile banner must be exactly 768x1024px.";
                    }
                }
            } else {
                $errors[] = "Mobile banner image is required.";
            }
           
            // If no errors, insert both
            if (empty($errors) && count($uploads) === 2) {
                foreach ($uploads as $upload) {
                    $insertSql = "INSERT INTO banners (title, image_path, type, created_at) VALUES (?, ?, ?, NOW())";
                    $stmt = mysqli_prepare($conn, $insertSql);
                    mysqli_stmt_bind_param($stmt, 'sss', $upload['title'], $upload['name'], $type);
                    mysqli_stmt_execute($stmt);
                    mysqli_stmt_close($stmt);
                }
                $successMsg = "Banner images added successfully!";
            } else {
                $errorMsg = implode("<br>", $errors);
            }
        } elseif ($_POST['action'] === 'delete_image') {
            $imageId = (int)$_POST['image_id'];
           
            // Get image details before deletion
            $getSql = "SELECT image_path FROM banners WHERE id = ?";
            $stmt = mysqli_prepare($conn, $getSql);
            mysqli_stmt_bind_param($stmt, 'i', $imageId);
            mysqli_stmt_execute($stmt);
            mysqli_stmt_bind_result($stmt, $imagePath);
            mysqli_stmt_fetch($stmt);
            mysqli_stmt_close($stmt);
           
            // Delete from database
            $deleteSql = "DELETE FROM banners WHERE id = ?";
            $stmt = mysqli_prepare($conn, $deleteSql);
            mysqli_stmt_bind_param($stmt, 'i', $imageId);
            mysqli_stmt_execute($stmt);
            mysqli_stmt_close($stmt);
           
            // Delete image file
            if (!empty($imagePath)) {
                $filePath = 'uploads/banners/' . $imagePath;
                if (file_exists($filePath)) {
                    unlink($filePath);
                }
            }
           
            $successMsg = "Banner deleted successfully!";
        }
    }
}
// Fetch banner images
$bannerSql = "SELECT id, title, image_path, type, created_at FROM banners WHERE type = 'banner' ORDER BY created_at DESC";
$bannerResult = mysqli_query($conn, $bannerSql);
$bannerImages = [];
if ($bannerResult && mysqli_num_rows($bannerResult) > 0) {
    while ($row = mysqli_fetch_assoc($bannerResult)) {
        $bannerImages[] = $row;
    }
}
// Count statistics
$totalBanners = count($bannerImages);
?>
<body data-sidebar="dark">

<?php include('includes/pre-loader.php')?>

<div id="layout-wrapper">
<?php include('includes/topbar.php')?>
    
    <div class="vertical-menu">
        <div data-simplebar class="h-100">
            
            <?php include('includes/sidebar.php')?>
            
        </div>
    </div>
    
    
    
    
    <div class="main-content">
        <div class="page-content">
          
            <div class="container-fluid">
                
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h4 class="mb-0">Banner Management</h4>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addBannerModal">
                                <i class="fas fa-plus me-2"></i>Add New Banner
                            </button>
                        </div>
                    </div>
                </div>
                <?php if (isset($successMsg)): ?>
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <?php echo $successMsg; ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                <?php endif; ?>
                <?php if (isset($errorMsg)): ?>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <?php echo $errorMsg; ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                <?php endif; ?>
                
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <div class="card text-center">
                            <div class="mb-2 card-body text-muted">
                                <h3 class="text-warning mt-2"><?php echo $totalBanners; ?></h3> Total Banners
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="card text-center">
                            <div class="mb-2 card-body text-muted">
                                <h3 class="text-purple mt-2"><?php echo date('M Y'); ?></h3> Current Month
                            </div>
                        </div>
                    </div>
                </div>
                
                
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <h4 class="card-title mb-0">Banner Images</h4>
                                    <span class="badge bg-warning">Mobile: 768x1024px | Desktop: 1920x1080px</span>
                                </div>
                                <?php if (empty($bannerImages)): ?>
                                    <div class="text-center py-5">
                                        <i class="fas fa-flag fa-3x text-muted mb-3"></i>
                                        <h5>No Banner Images</h5>
                                        <p class="text-muted">Add banner images for your website.</p>
                                    </div>
                                <?php else: ?>
                                    <div class="row">
                                        <?php foreach ($bannerImages as $image):
                                            $imageInfo = getimagesize('uploads/banners/' . $image['image_path']);
                                            $dimensions = $imageInfo ? $imageInfo[0] . 'x' . $imageInfo[1] . 'px' : 'Unknown';
                                        ?>
                                            <div class="col-xl-4 col-md-6 mb-4">
                                                <div class="card banner-card">
                                                    <div class="banner-image-container">
                                                        <img src="uploads/banners/<?php echo htmlspecialchars($image['image_path']); ?>"
                                                             class="card-img-top banner-img"
                                                             alt="<?php echo htmlspecialchars($image['title']); ?>"
                                                             onerror="this.src='https://via.placeholder.com/300x200?text=Image+Not+Found'">
                                                        <div class="banner-overlay">
                                                            <div class="banner-actions">
                                                                <button class="btn btn-info btn-sm view-image"
                                                                        data-image="uploads/banners/<?php echo htmlspecialchars($image['image_path']); ?>"
                                                                        data-title="<?php echo htmlspecialchars($image['title']); ?>">
                                                                    <i class="fas fa-eye"></i>
                                                                </button>
                                                                <form method="post" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this banner?')">
                                                                    <input type="hidden" name="action" value="delete_image">
                                                                    <input type="hidden" name="image_id" value="<?php echo $image['id']; ?>">
                                                                    <button type="submit" class="btn btn-danger btn-sm">
                                                                        <i class="fas fa-trash"></i>
                                                                    </button>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card-body">
                                                        <h6 class="card-title text-truncate"><?php echo htmlspecialchars($image['title']); ?></h6>
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <span class="badge bg-primary"><?php echo $dimensions; ?></span>
                                                            <small class="text-muted">
                                                                <?php echo date('M j, Y', strtotime($image['created_at'])); ?>
                                                            </small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            
        </div>
        
        <?php include('includes/footer.php')?>
    </div>
    
</div>


<div class="modal fade" id="addBannerModal" tabindex="-1" aria-labelledby="addBannerModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addBannerModalLabel">Add New Banner</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" enctype="multipart/form-data" id="addBannerForm">
                <div class="modal-body">
                    <input type="hidden" name="action" value="add_banner">
                   
                    <div class="mb-3">
                        <label for="title" class="form-label">Banner Title</label>
                        <input type="text" class="form-control" id="title" name="title" required
                               placeholder="Enter banner title" maxlength="255">
                    </div>
                   
                    <div class="mb-3">
                        <label for="desktop_image" class="form-label">Select Desktop Banner (1920x1080px)</label>
                        <input type="file" class="form-control" id="desktop_image" name="desktop_image" accept=".jpg,.jpeg,.png,.webp,.gif" required>
                    </div>
                   
                    <div class="mb-3">
                        <label for="mobile_image" class="form-label">Select Mobile Banner (768x1024px)</label>
                        <input type="file" class="form-control" id="mobile_image" name="mobile_image" accept=".jpg,.jpeg,.png,.webp,.gif" required>
                        <div class="form-text">
                            Supported formats: JPG, JPEG, PNG, WebP, GIF. Max file size: 5MB.
                        </div>
                    </div>
                   
                    <div class="image-preview mb-3" id="desktopPreview" style="display: none;">
                        <img id="desktopPreviewImage" class="img-thumbnail" style="max-height: 200px;">
                        <div id="desktopDimensionDisplay" class="mt-2 text-center small"></div>
                    </div>
                   
                    <div class="image-preview mb-3" id="mobilePreview" style="display: none;">
                        <img id="mobilePreviewImage" class="img-thumbnail" style="max-height: 200px;">
                        <div id="mobileDimensionDisplay" class="mt-2 text-center small"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Add Banner</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="viewImageModal" tabindex="-1" aria-labelledby="viewImageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewImageModalTitle">Banner Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <img id="modalImage" class="img-fluid" style="max-height: 70vh;">
            </div>
        </div>
    </div>
</div>

<?php include('includes/rightbar.php')?>


<?php include('includes/scripts.php')?>
<style>
.banner-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid #e9ecef;
}
.banner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.banner-image-container {
    position: relative;
    overflow: hidden;
}
.banner-img {
    height: 150px;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.banner-image-container:hover .banner-overlay {
    opacity: 1;
}
.banner-image-container:hover .banner-img {
    transform: scale(1.05);
}
.banner-actions {
    display: flex;
    gap: 10px;
}
.banner-actions .btn {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-title {
    font-size: 0.9rem;
    font-weight: 600;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const desktopImageInput = document.getElementById('desktop_image');
    const mobileImageInput = document.getElementById('mobile_image');
    const desktopPreview = document.getElementById('desktopPreview');
    const mobilePreview = document.getElementById('mobilePreview');
    const desktopPreviewImage = document.getElementById('desktopPreviewImage');
    const mobilePreviewImage = document.getElementById('mobilePreviewImage');
    const desktopDimensionDisplay = document.getElementById('desktopDimensionDisplay');
    const mobileDimensionDisplay = document.getElementById('mobileDimensionDisplay');
   
    // Desktop banner preview with validation
    desktopImageInput.addEventListener('change', function(e) {
        handlePreview(e, desktopPreviewImage, desktopDimensionDisplay, desktopPreview, {width: 1920, height: 1080});
    });
   
    // Mobile banner preview with validation
    mobileImageInput.addEventListener('change', function(e) {
        handlePreview(e, mobilePreviewImage, mobileDimensionDisplay, mobilePreview, {width: 768, height: 1024});
    });
   
    function handlePreview(e, previewImg, dimensionDisplay, previewContainer, requiredDimensions = null) {
        if (e.target.files.length) {
            const file = e.target.files[0];
            const reader = new FileReader();
           
            reader.onload = function(e) {
                previewImg.src = e.target.result;
               
                // Get image dimensions
                const img = new Image();
                img.onload = function() {
                    const width = this.width;
                    const height = this.height;
                   
                    let displayText = `Dimensions: ${width}x${height}px`;
                   
                    if (requiredDimensions) {
                        const isValid = (width === requiredDimensions.width && height === requiredDimensions.height);
                        displayText += isValid ? ` <span class="text-success">✅ Valid size</span>` : ` <span class="text-danger">❌ Invalid size (required: ${requiredDimensions.width}x${requiredDimensions.height}px)</span>`;
                    }
                   
                    dimensionDisplay.innerHTML = displayText;
                    previewContainer.style.display = 'block';
                };
                img.src = e.target.result;
            };
           
            reader.readAsDataURL(file);
        } else {
            previewContainer.style.display = 'none';
        }
    }
   
    // View image modal
    const viewImageModal = new bootstrap.Modal(document.getElementById('viewImageModal'));
    const modalImage = document.getElementById('modalImage');
    const modalTitle = document.getElementById('viewImageModalTitle');
   
    document.querySelectorAll('.view-image').forEach(button => {
        button.addEventListener('click', function() {
            const imageSrc = this.getAttribute('data-image');
            const imageTitle = this.getAttribute('data-title');
           
            modalImage.src = imageSrc;
            modalTitle.textContent = imageTitle;
            viewImageModal.show();
        });
    });
   
    // Form validation
    document.getElementById('addBannerForm').addEventListener('submit', function(e) {
        const title = document.getElementById('title').value.trim();
        const desktopImage = desktopImageInput.files[0];
        const mobileImage = mobileImageInput.files[0];
       
        if (!title) {
            e.preventDefault();
            alert('Please enter a banner title');
            return;
        }
       
        if (!desktopImage || !mobileImage) {
            e.preventDefault();
            alert('Please select both desktop and mobile banner images');
            return;
        }
       
        if (desktopImage.size > 5 * 1024 * 1024 || mobileImage.size > 5 * 1024 * 1024) {
            e.preventDefault();
            alert('File sizes must be less than 5MB');
            return;
        }
       
        // Show loading state
        const submitBtn = this.querySelector('button[type="submit"]');
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Adding...';
        submitBtn.disabled = true;
    });
});
</script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: manage-banners.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation