Карточки в PHP: подробное руководство для веб-разработчика

Расширенные примеры создания карточек

Пример 1: Пагинация и поиск с использованием PDO

Код (index.php):

$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$perPage = 6;
$offset = ($page - 1) * $perPage;
$search = isset($_GET['search']) ? trim($_GET['search']) : '';

$pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'pass');
$where = '';
$params = [];
if ($search) {
    $where = 'WHERE title LIKE :search';
    $params[':search'] = '%' . $search . '%';
}

// Общее количество для пагинации
$countStmt = $pdo->prepare("SELECT COUNT(*) FROM cards $where");
$countStmt->execute($params);
$total = $countStmt->fetchColumn();
$totalPages = ceil($total / $perPage);

// Карточки для текущей страницы
$stmt = $pdo->prepare("SELECT * FROM cards $where LIMIT :limit OFFSET :offset");
$stmt->bindValue(':limit', $perPage, PDO::PARAM_INT);
$stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
foreach ($params as $key => $val) {
    $stmt->bindValue($key, $val);
}
$stmt->execute();
$cards = $stmt->fetchAll(PDO::FETCH_ASSOC);

foreach ($cards as $card) {
    echo '<div class="card">';
    echo '<h3>' . htmlspecialchars($card['title']) . '</h3>';
    echo '<p>' . htmlspecialchars($card['content']) . '</p>';
    echo '</div>';
}
// Вывод ссылок пагинации
for ($i = 1; $i <= $totalPages; $i++) {
    $link = "?page=$i&search=" . urlencode($search);
    echo "<a href='$link'>$i</a> ";
}

Результат (пример вывода):

<div class="card"><h3>Карточка 1</h3><p>Описание 1</p></div>
<div class="card"><h3>Карточка 2</h3><p>Описание 2</p></div>
<a href='?page=1&search='>1</a> <a href='?page=2&search='>2</a>

Пояснение: Используются подготовленные запросы с именованными параметрами. Пагинация вычисляется через LIMIT и OFFSET. Поиск реализован с помощью LIKE. Важно экранировать URL в ссылках.

Пример 2: Кэширование готового HTML карточек

Цель: снизить нагрузку на базу данных и ускорить загрузку.

Код с использованием кэша:

$cacheFile = 'cache/cards.html';
$cacheTime = 3600; // 1 час

if (file_exists($cacheFile) && (time() - filemtime($cacheFile) < $cacheTime)) {
    echo file_get_contents($cacheFile);
    exit;
}

ob_start();
$pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'pass');
$cards = $pdo->query('SELECT * FROM cards')->fetchAll(PDO::FETCH_ASSOC);
foreach ($cards as $card) {
    echo '<div class="card">';
    echo '<h3>' . htmlspecialchars($card['title']) . '</h3>';
    echo '<p>' . htmlspecialchars($card['content']) . '</p>';
    echo '</div>';
}
$html = ob_get_clean();
file_put_contents($cacheFile, $html);
echo $html;

Результат:

Сгенерированный HTML выводится мгновенно при повторном запросе в течение часа. Файл cache/cards.html обновляется только после истечения времени или при ручной очистке.

Пояснение: ob_start() и ob_get_clean() захватывают вывод. file_put_contents() сохраняет в файл. При следующем запросе, если кэш актуален, файл читается напрямую.

Пример 3: ООП с абстрактным классом Card

Цель: переиспользовать код для разных типов карточек (товары, пользователи, статьи).

Код:

abstract class Card {
    protected $data;
    public function __construct(array $data) {
        $this->data = $data;
    }
    abstract public function render(): string;
}

class ProductCard extends Card {
    public function render(): string {
        return sprintf(
            '<div class="card product"><h3>%s</h3><p>Цена: %s руб.</p></div>',
            htmlspecialchars($this->data['name']),
            htmlspecialchars($this->data['price'])
        );
    }
}

class UserCard extends Card {
    public function render(): string {
        return sprintf(
            '<div class="card user"><h3>%s</h3><p>Email: %s</p></div>',
            htmlspecialchars($this->data['username']),
            htmlspecialchars($this->data['email'])
        );
    }
}

// Использование
$products = [['name' => 'Ноутбук', 'price' => 50000], ['name' => 'Мышь', 'price' => 1500]];
$users = [['username' => 'ivan', 'email' => 'ivan@ex.ru']];

foreach ($products as $p) {
    $card = new ProductCard($p);
    echo $card->render();
}
foreach ($users as $u) {
    $card = new UserCard($u);
    echo $card->render();
}

Результат:

<div class="card product"><h3>Ноутбук</h3><p>Цена: 50000 руб.</p></div>
<div class="card product"><h3>Мышь</h3><p>Цена: 1500 руб.</p></div>
<div class="card user"><h3>ivan</h3><p>Email: ivan@ex.ru</p></div>

Пояснение: Абстрактный класс определяет интерфейс. Каждый конкретный класс реализует свою верстку. Такой подход упрощает добавление новых типов карточек.

Пример 4: Бесконечная прокрутка (infinite scroll) с PHP API

Цель: загружать дополнительные карточки по мере прокрутки страницы.

PHP endpoint (api/load.php):

$page = (int)($_GET['page'] ?? 1);
$perPage = 4;
$offset = ($page - 1) * $perPage;

$pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'pass');
$stmt = $pdo->prepare('SELECT * FROM cards LIMIT :limit OFFSET :offset');
$stmt->bindValue(':limit', $perPage, PDO::PARAM_INT);
$stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
$stmt->execute();
$cards = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($cards);

Клиентская часть (JavaScript):

let page = 1;
let loading = false;

window.addEventListener('scroll', () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100 && !loading) {
        loading = true;
        page++;
        fetch(`api/load.php?page=${page}`)
            .then(response => response.json())
            .then(cards => {
                cards.forEach(card => {
                    const div = document.createElement('div');
                    div.className = 'card';
                    div.innerHTML = `
${card.title}
${card.content}
`;
                    document.getElementById('cards').appendChild(div);
                });
                loading = false;
            });
    }
});

Результат:

При прокрутке вниз автоматически подгружаются следующие 4 карточки, добавляясь в конец списка. Страница не перезагружается.

Пояснение: Клиент отслеживает положение скролла и отправляет запрос с номером страницы. PHP возвращает следующую порцию данных в JSON. Важно установить флаг loading для предотвращения одновременных запросов.