Sayfa Yenilemeden Yazı Yüklemek: PHP ve HTMX ile Daha Fazla Yükle Butonu, Sonsuz Kaydırma ve Canlı Yıl Filtresi Yapmak

<!-- Tıklayınca GET atar, butonun kendisini gelen cevapla değiştirir -->
<button hx-get="/merhaba.php" hx-swap="outerHTML">Tıkla</button>

<!-- Üzerine gelince GET atar, cevabı #kutu elemanının sonuna ekler -->
<span hx-get="/urunler.php" hx-trigger="mouseenter"
      hx-target="#kutu" hx-swap="beforeend">Üstüme gel</span>

npm init -y
npm install htmx.org@2
mkdir assets
cp node_modules/htmx.org/dist/htmx.min.js assets/htmx.min.js
php -S localhost:8000

// yazilar.php - örnek veri ve sayfalama
// (dosyanın ilk satırına PHP açılış etiketini ekleyin)

function e(string $metin): string {
    return htmlspecialchars($metin, ENT_QUOTES, 'UTF-8');
}

function sayfaGetir(?int $yil, int $sayfa, int $adet = 10): array {
    $hepsi = [];
    for ($i = 1; $i <= 35; $i++) {
        $hepsi[] = ['baslik' => "Örnek Yazı $i", 'yil' => 2022 + ($i % 3)];
    }
    if ($yil !== null) {
        // yıl süzgeci
        $hepsi = array_values(array_filter($hepsi, fn($y) => $y['yil'] === $yil));
    }
    $toplam = max(1, (int) ceil(count($hepsi) / $adet));
    return [array_slice($hepsi, ($sayfa - 1) * $adet, $adet), $toplam];
}

// parcalar.php - sayfanın yenilenen kısımları
// (dosyanın ilk satırına PHP açılış etiketini ekleyin)

function kartlar(array $yazilar): void {
    foreach ($yazilar as $y) {
        echo '<div class="kart">' . e($y['baslik']) . ' (' . $y['yil'] . ')</div>';
    }
}

function dahaFazla(int $sayfa, int $toplam, ?int $yil): void {
    echo '<div class="daha-fazla">';
    if ($sayfa < $toplam) {
        $url = '/index.php?' . http_build_query([
            'sayfa' => $sayfa + 1, 'yil' => $yil, 'parca' => 'liste',
        ]);
        echo '<button hx-get="' . e($url) . '" hx-target=".daha-fazla"'
           . ' hx-swap="outerHTML">Daha fazla yükle</button>';
    }
    echo '</div>';
}

function liste(array $yazilar, int $sayfa, int $toplam, ?int $yil): void {
    kartlar($yazilar);
    dahaFazla($sayfa, $toplam, $yil);
}

function icerik(array $yazilar, int $sayfa, int $toplam, ?int $yil): void {
    liste($yazilar, $sayfa, $toplam, $yil);
}

// index.php - giriş noktası
// (dosyanın ilk satırına PHP açılış etiketini ekleyin)

require __DIR__ . '/yazilar.php';
require __DIR__ . '/parcalar.php';

$yilHam = filter_var($_GET['yil'] ?? null, FILTER_VALIDATE_INT);
$yil    = $yilHam === false ? null : $yilHam;
$sayfa  = max(1, (int) ($_GET['sayfa'] ?? 1));
[$yazilar, $toplam] = sayfaGetir($yil, $sayfa);

header('Vary: HX-Request');
$htmxMi = ($_SERVER['HTTP_HX_REQUEST'] ?? '') === 'true';

if ($htmxMi) {
    if (($_GET['parca'] ?? '') === 'liste') {
        liste($yazilar, $sayfa, $toplam, $yil);
    } else {
        icerik($yazilar, $sayfa, $toplam, $yil);
    }
    exit;
}

// tam sayfa: içeriği önce değişkene alıyoruz
ob_start();
icerik($yazilar, $sayfa, $toplam, $yil);
$icerikHtml = ob_get_clean();

echo <<<HTML
<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>Blog</title>
  <!-- htmx.min.js dosyasını burada bağlayın -->
</head>
<body>
  <h1>Blog</h1>
  <span id="yukleniyor" class="htmx-indicator">Yükleniyor</span>
  <div id="icerik">{$icerikHtml}</div>
</body>
</html>
HTML;

function kartlar(array $yazilar, int $sayfa, int $toplam, ?int $yil): void {
    $son = array_key_last($yazilar);
    foreach ($yazilar as $i => $y) {
        $ek = '';
        if ($i === $son && $sayfa < $toplam) {
            $url = '/index.php?' . http_build_query([
                'sayfa' => $sayfa + 1, 'yil' => $yil, 'parca' => 'liste',
            ]);
            // son karta tetikleyici ekle
            $ek = ' hx-get="' . e($url) . '" hx-trigger="revealed" hx-swap="afterend"';
        }
        echo '<div class="kart"' . $ek . '>' . e($y['baslik']) . '</div>';
    }
}

function liste(array $yazilar, int $sayfa, int $toplam, ?int $yil): void {
    kartlar($yazilar, $sayfa, $toplam, $yil);
}

function filtre(?int $aktif): void {
    echo '<div class="filtre">';
    foreach ([null, 2022, 2023, 2024] as $y) {
        $url = '/index.php?' . http_build_query(['yil' => $y]);
        $sinif = $y === $aktif ? 'aktif' : '';
        echo '<button class="' . $sinif . '" hx-get="' . e($url) . '"'
           . ' hx-target="#icerik" hx-swap="innerHTML"'
           . ' hx-indicator="#yukleniyor">' . ($y ?? 'Tümü') . '</button>';
    }
    echo '</div>';
}

function icerik(array $yazilar, int $sayfa, int $toplam, ?int $yil): void {
    filtre($yil);
    liste($yazilar, $sayfa, $toplam, $yil);
}

# Parça isteği: sadece kartlar gelmeli
curl -s -H "HX-Request: true" "http://localhost:8000/index.php?parca=liste&sayfa=2"
# Normal istek: tam sayfa gelmeli
curl -s "http://localhost:8000/index.php?sayfa=2"