Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

nginx/1.28.0

System:

Linux 6.8.0-90-generic

PHP Version:

8.4.15

User:

alqudsvolunteers

Directory:

/home/alqudsvolunteers/htdocs/www.alqudsvolunteers.id

Free Space:

81.81 GB

🔧 Quick Actions

✏️ Editing: publication-detail.php

<?php
// Koneksi ke database
include 'config.php';

// Ambil ID publication dari parameter URL
$publication_id = isset($_GET['id']) ? intval($_GET['id']) : 0;

// Query untuk mengambil data publication berdasarkan ID
$publication_query = "SELECT p.*, pg.name_group FROM publication p 
                     LEFT JOIN publication_group pg ON p.id_group = pg.id 
                     WHERE p.id = $publication_id";
$publication_result = mysqli_query($conn, $publication_query);
$publication = mysqli_fetch_assoc($publication_result);

// Jika publication tidak ditemukan, redirect ke halaman utama
if (!$publication) {
    header("Location: index.php");
    exit();
}

// Query untuk mengambil foto-foto publication
$photos_query = "SELECT * FROM publication_photo WHERE id_publication = $publication_id ORDER BY urutan";
$photos_result = mysqli_query($conn, $photos_query);
$photos = mysqli_fetch_all($photos_result, MYSQLI_ASSOC);

// Query untuk mengambil publication terkait (dalam group yang sama)
$related_query = "SELECT p.*, pg.name_group FROM publication p 
                 LEFT JOIN publication_group pg ON p.id_group = pg.id 
                 WHERE p.id_group = {$publication['id_group']} AND p.id != $publication_id
                 ORDER BY p.published_at DESC LIMIT 3";
$related_result = mysqli_query($conn, $related_query);
$related_publications = mysqli_fetch_all($related_result, MYSQLI_ASSOC);

// Query untuk mengambil semua publication_group untuk menu
$group_query = "SELECT * FROM publication_group ORDER BY name_group";
$group_result = mysqli_query($conn, $group_query);

// Siapkan data untuk Open Graph meta tags
$current_url = "https://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$site_name = "Al-Quds Volunteers Indonesia";
$page_title = $publication['title'] . " - " . $site_name;

// Bersihkan konten untuk description - hapus tag HTML dan batasi panjang
$clean_content = strip_tags($publication['isi']);
$clean_content = str_replace('"', '', $clean_content); // Hapus tanda kutip
$page_description = substr($clean_content, 0, 200);

// Tentukan foto utama untuk OG image
if (count($photos) > 0) {
    $og_image = "https://" . $_SERVER['HTTP_HOST'] . "/uploads/publications/" . $photos[0]['foto'];
} else {
    $og_image = "https://" . $_SERVER['HTTP_HOST'] . "/icon_avi.png";
}
?>
<!DOCTYPE html>
<html lang="id" prefix="og: https://ogp.me/ns#">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($page_title); ?></title>
    
    
    <meta property="og:title" content="<?php echo htmlspecialchars($publication['title']); ?>">
    <meta property="og:description" content="<?php echo htmlspecialchars($page_description); ?>">
    <meta property="og:url" content="<?php echo $current_url; ?>">
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="<?php echo htmlspecialchars($site_name); ?>">
    <meta property="og:image" content="<?php echo $og_image; ?>">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:locale" content="id_ID">
    
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?php echo htmlspecialchars($publication['title']); ?>">
    <meta name="twitter:description" content="<?php echo htmlspecialchars($page_description); ?>">
    <meta name="twitter:image" content="<?php echo $og_image; ?>">
    <meta name="twitter:site" content="@alquds_id">
    
    
    <meta name="description" content="<?php echo htmlspecialchars($page_description); ?>">
    <meta name="keywords" content="alquds, volunteer, palestina, kegiatan, berita, <?php echo htmlspecialchars($publication['name_group']); ?>">
    <meta name="author" content="Al-Quds Volunteers Indonesia">
  
    <link rel="icon" href="icon_avi.png" type="image/png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        teal: {
                            light: '#22C6B9',
                            DEFAULT: '#139D93',
                            dark: '#0E726B'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .btn-donate {
            background: linear-gradient(45deg, #22C6B9, #139D93);
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .btn-donate:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            background: linear-gradient(45deg, #22C6B9, #139D93);
        }
        .publication-image-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            border-radius: 12px;
            margin-bottom: 1rem;
        }
        .publication-image {
            width: 100%;
            height: auto;
            max-height: 500px;
            object-fit: contain;
            display: block;
            margin: 0 auto;
        }
        .publication-card:hover .publication-image {
            transform: scale(1.05);
        }
        .content-wrapper {
            white-space: pre-line;
            text-align: justify;
            line-height: 1.6;
        }
        .content-wrapper img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 1rem 0;
            display: block;
        }
        .content-wrapper iframe {
            width: 100%;
            border-radius: 8px;
            margin: 1rem 0;
        }
        .gallery-slider {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            margin-bottom: 1.5rem;
        }
        .gallery-track {
            display: flex;
            transition: transform 0.5s ease;
        }
        .gallery-slide {
            min-width: 100%;
            position: relative;
        }
        .gallery-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            padding: 0 1rem;
            z-index: 10;
        }
        .gallery-nav-btn {
            background-color: rgba(255, 255, 255, 0.8);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .gallery-nav-btn:hover {
            background-color: white;
            transform: scale(1.1);
        }
        .gallery-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 1rem;
        }
        .gallery-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .gallery-dot.active {
            background-color: #139D93;
            transform: scale(1.2);
        }
        .thumbnail-container {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            overflow-x: auto;
            padding-bottom: 10px;
            justify-content: center;
        }
        .thumbnail {
            width: 80px;
            height: 60px;
            object-fit: cover;
            border-radius: 6px;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.3s ease;
        }
        .thumbnail.active {
            opacity: 1;
            border: 2px solid #139D93;
        }
        .thumbnail:hover {
            opacity: 1;
        }
        .image-counter {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 14px;
            z-index: 5;
        }
        /* Lightbox styles */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        .lightbox-content {
            max-width: 90%;
            max-height: 90%;
        }
        .lightbox-img {
            max-width: 100%;
            max-height: 90vh;
            object-fit: contain;
        }
        .close-lightbox {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 30px;
            cursor: pointer;
        }
        .lightbox-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            padding: 0 20px;
        }
        .lightbox-nav-btn {
            color: white;
            font-size: 30px;
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.5);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Single image style */
        .single-image {
            width: 100%;
            display: block;
            margin: 0 auto;
            border-radius: 12px;
            max-height: 500px;
            object-fit: contain;
        }
        /* Main image display */
        .main-image-display {
            width: 100%;
            margin-bottom: 1rem;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
        }
        .main-image {
            width: 100%;
            max-height: 500px;
            object-fit: contain;
            display: block;
            margin: 0 auto;
        }
        /* Share button styles */
        .share-buttons a {
            transition: transform 0.3s ease;
        }
        .share-buttons a:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <?php include 'navbar.php'?>

<section class="bg-white py-4 shadow-sm">
        <div class="container mx-auto px-4">
            <nav class="flex" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="index.php" class="text-gray-700 hover:text-teal text-sm">
                            <i class="fas fa-home mr-2"></i>Home
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            <a href="publication.php" class="text-gray-700 hover:text-teal text-sm ml-3">Berita & Kegiatan</a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            <span class="text-teal text-sm ml-3"><?php echo htmlspecialchars($publication['title']); ?></span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>
    </section>

<section class="py-12 bg-white">
        <div class="container mx-auto px-4">
            <article class="max-w-4xl mx-auto">
                <header class="mb-8">
                    <span class="text-teal font-semibold"><?php echo htmlspecialchars($publication['name_group']); ?></span>
                    <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-4"><?php echo htmlspecialchars($publication['title']); ?></h1>
                    
                    <div class="flex flex-wrap items-center text-gray-600 text-sm mb-6">
                        <span class="flex items-center mr-6">
                            <i class="far fa-calendar-alt mr-2"></i>
                            <?php echo date('d M Y', strtotime($publication['published_at'])); ?>
                        </span>
                        <span class="flex items-center">
                            <i class="far fa-heart mr-2"></i>
                            <?php echo $publication['likes']; ?> Suka
                        </span>
                    </div>
                    
                    
                    <?php if (count($photos) > 0): ?>
                        <?php if (count($photos) === 1): ?>
                            
                            <div class="main-image-display">
                                <img src="uploads/publications/<?php echo $photos[0]['foto']; ?>" alt="<?php echo htmlspecialchars($publication['title']); ?>" class="main-image cursor-zoom-in" onclick="openLightbox(0)">
                            </div>
                        <?php else: ?>
                            
                            <div class="main-image-display">
                                <img id="main-image" src="uploads/publications/<?php echo $photos[0]['foto']; ?>" alt="<?php echo htmlspecialchars($publication['title']); ?>" class="main-image cursor-zoom-in" onclick="openLightbox(currentImageIndex)">
                                <div class="image-counter"><span id="current-image">1</span> / <?php echo count($photos); ?></div>
                            </div>
                            
                            <div class="thumbnail-container">
                                <?php foreach ($photos as $index => $photo): ?>
                                    <img src="uploads/publications/<?php echo $photo['foto']; ?>" alt="Thumbnail <?php echo $index + 1; ?>" class="thumbnail <?php echo $index === 0 ? 'active' : ''; ?>" data-index="<?php echo $index; ?>" onclick="changeImage(<?php echo $index; ?>)">
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    <?php endif; ?>
                </header>
                
                <div class="content-wrapper">
                    <?php echo $publication['isi']; ?>
                </div>
                
                <footer class="mt-12 pt-8 border-t border-gray-200">
                    <div class="flex flex-wrap items-center justify-between">
                        <div class="flex items-center mb-4 md:mb-0">
                            <span class="text-gray-600 mr-3">Bagikan:</span>
                            <div class="flex space-x-2 share-buttons">
                                <a href="#" class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center" onclick="shareFacebook(event)">
                                    <i class="fab fa-facebook-f text-xs"></i>
                                </a>
                                <a href="#" class="w-8 h-8 rounded-full bg-blue-400 text-white flex items-center justify-center" onclick="shareTwitter(event)">
                                    <i class="fab fa-twitter text-xs"></i>
                                </a>
                                <a href="#" class="w-8 h-8 rounded-full bg-red-600 text-white flex items-center justify-center" onclick="shareInstagram(event)">
                                    <i class="fab fa-instagram text-xs"></i>
                                </a>
                                <a href="#" class="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center" onclick="shareWhatsApp(event)">
                                    <i class="fab fa-whatsapp text-xs"></i>
                                </a>
                                <a href="#" class="w-8 h-8 rounded-full bg-gray-600 text-white flex items-center justify-center" onclick="copyLink(event)">
                                    <i class="fas fa-link text-xs"></i>
                                </a>
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <button class="flex items-center text-gray-600 hover:text-red-500 transition-colors like-button">
                                <i class="far fa-heart mr-2"></i>
                                <span>Suka</span>
                            </button>
                        </div>
                    </div>
                </footer>
            </article>
        </div>
    </section>

<div class="lightbox" id="lightbox">
        <span class="close-lightbox" onclick="closeLightbox()">&times;</span>
        <div class="lightbox-content">
            <img class="lightbox-img" id="lightbox-img" src="" alt="">
        </div>
        <div class="lightbox-nav">
            <div class="lightbox-nav-btn" onclick="changeLightboxImage(-1)">
                <i class="fas fa-chevron-left"></i>
            </div>
            <div class="lightbox-nav-btn" onclick="changeLightboxImage(1)">
                <i class="fas fa-chevron-right"></i>
            </div>
        </div>
    </div>

<?php if (count($related_publications) > 0): ?>
    <section class="py-12 bg-gray-100">
        <div class="container mx-auto px-4">
            <h2 class="text-2xl font-bold text-gray-800 mb-8">Berita Terkait</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <?php foreach ($related_publications as $related): ?>
                    <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 publication-card">
                        <div class="publication-image-container">
                            <?php
                            // Query untuk mengambil foto publication terkait
                            $photo_query = "SELECT * FROM publication_photo WHERE id_publication = {$related['id']} ORDER BY urutan LIMIT 1";
                            $photo_result = mysqli_query($conn, $photo_query);
                            $photo = mysqli_fetch_assoc($photo_result);
                            
                            if ($photo) {
                                $image_url = "uploads/publications/" . $photo['foto'];
                            } else {
                                $image_url = "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80";
                            }
                            ?>
                            <img src="<?php echo $image_url; ?>" alt="<?php echo htmlspecialchars($related['title']); ?>" class="publication-image">
                        </div>
                        <div class="p-6">
                            <span class="text-sm text-teal font-semibold"><?php echo htmlspecialchars($related['name_group']); ?></span>
                            <h3 class="text-xl font-bold text-gray-800 mt-2 mb-3"><?php echo htmlspecialchars($related['title']); ?></h3>
                            <p class="text-gray-600 mb-4">
                                <?php 
                                $content = strip_tags($related['isi']);
                                $content = str_replace('"', '', $content); // Hapus tanda kutip
                                echo strlen($content) > 100 ? substr($content, 0, 100) . '...' : $content;
                                ?>
                            </p>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-500"><?php echo date('d M Y', strtotime($related['published_at'])); ?></span>
                                <div class="flex items-center">
                                    <i class="far fa-heart text-gray-500 mr-1"></i>
                                    <span class="text-gray-500"><?php echo $related['likes']; ?></span>
                                </div>
                            </div>
                            <a href="publication-detail.php?id=<?php echo $related['id']; ?>" class="inline-block mt-4 text-teal font-semibold hover:underline text-sm">
                                Baca Selengkapnya <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
    <?php endif; ?>

<?php include 'footer.php'?>
    
    <script>
        // Global variables for gallery functionality
        let currentImageIndex = 0;
        const photos = <?php echo json_encode($photos); ?>;
        
        // Function to change the main displayed image
        function changeImage(index) {
            currentImageIndex = index;
            const mainImage = document.getElementById('main-image');
            const currentImageCounter = document.getElementById('current-image');
            const thumbnails = document.querySelectorAll('.thumbnail');
            
            // Update main image
            mainImage.src = 'uploads/publications/' + photos[index].foto;
            
            // Update image counter
            currentImageCounter.textContent = index + 1;
            
            // Update active thumbnail
            thumbnails.forEach(thumb => {
                thumb.classList.remove('active');
                if (parseInt(thumb.getAttribute('data-index')) === index) {
                    thumb.classList.add('active');
                }
            });
        }
        
        // Lightbox functionality
        const lightbox = document.getElementById('lightbox');
        const lightboxImg = document.getElementById('lightbox-img');
        
        function openLightbox(index) {
            currentImageIndex = index;
            lightbox.style.display = 'flex';
            lightboxImg.src = 'uploads/publications/' + photos[index].foto;
            document.body.style.overflow = 'hidden';
        }
        
        function closeLightbox() {
            lightbox.style.display = 'none';
            document.body.style.overflow = 'auto';
        }
        
        function changeLightboxImage(direction) {
            currentImageIndex = (currentImageIndex + direction + photos.length) % photos.length;
            lightboxImg.src = 'uploads/publications/' + photos[currentImageIndex].foto;
            
            // Also update the main image and thumbnails if lightbox is open
            changeImage(currentImageIndex);
        }
        
        // Close lightbox when clicking outside the image
        lightbox.addEventListener('click', function(e) {
            if (e.target === lightbox) {
                closeLightbox();
            }
        });
        
        // Keyboard navigation for lightbox
        document.addEventListener('keydown', function(e) {
            if (lightbox.style.display === 'flex') {
                if (e.key === 'Escape') closeLightbox();
                if (e.key === 'ArrowLeft') changeLightboxImage(-1);
                if (e.key === 'ArrowRight') changeLightboxImage(1);
            }
        });
        
        // Like button functionality
        document.addEventListener('DOMContentLoaded', function() {
            const likeButton = document.querySelector('.like-button');
            if (likeButton) {
                likeButton.addEventListener('click', function() {
                    this.classList.toggle('text-red-500');
                    const icon = this.querySelector('i');
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                    
                    // Here you would typically send an AJAX request to update the like count in the database
                });
            }
        });

// Share functionality
        function shareFacebook(e) {
            e.preventDefault();
            const url = encodeURIComponent(window.location.href);
            window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'width=600,height=400');
        }

function shareInstagram(e) {
            e.preventDefault();
            // Instagram doesn't support direct sharing, so we'll copy the link
            copyLink(e);
            alert('Link berhasil disalin! Tempel link ini di Instagram untuk membagikannya.');
        }

// Add click event listeners to share buttons
        document.addEventListener('DOMContentLoaded', function() {
            // Event listeners are already attached via onclick attributes
        });
    </script>
</body>
</html>
<?php
// Tutup koneksi database
mysqli_close($conn);
?>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: publication-detail.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation