0Pricing
PHP Academy · Lekcja

Dynamiczny kod HTML z pętlami PHP

Generuj tabele i listy HTML z tablic PHP w szablonach

Dynamiczny kod HTML z pętlami PHP to bezpłatna lekcja PHP Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej PHP Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs PHP Academy zawiera 4 lekcji w sumie.

Generowanie kodu HTML za pomocą PHP

Jednym z najbardziej praktycznych zastosowań PHP jest dynamiczne generowanie kodu HTML na podstawie tablic danych — list, tabel, list rozwijanych, menu nawigacyjnych i nie tylko.

Generowanie listy

Wygeneruj nieuporządkowaną listę HTML na podstawie tablicy PHP:

<?php
$fruits = ['Apple', 'Banana', 'Cherry', 'Durian'];
?>

<ul>
<?php foreach ($fruits as $fruit): ?>
    <li><?= htmlspecialchars($fruit) ?></li>
<?php endforeach; ?>
</ul>

Generowanie tabeli HTML

Zbuduj dynamiczną tabelę na podstawie tablicy dwuwymiarowej:

<?php
$users = [
    ['Alice', 'alice@test.com', 'Admin'],
    ['Bob',   'bob@test.com',   'User'],
];
?>
<table>
    <thead><tr><th>Name</th><th>Email</th><th>Role</th></tr></thead>
    <tbody>
    <?php foreach ($users as [$name, $email, $role]): ?>
        <tr>
            <td><?= htmlspecialchars($name) ?></td>
            <td><?= htmlspecialchars($email) ?></td>
            <td><?= htmlspecialchars($role) ?></td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>

Generowanie listy rozwijanej

Zbuduj element select HTML na podstawie tablicy:

<?php
$countries = ['TR' => 'Turkey', 'US' => 'United States', 'DE' => 'Germany'];
$selected  = 'TR';
?>

<select name="country">
<?php foreach ($countries as $code => $name): ?>
    <option value="<?= htmlspecialchars($code) ?>"
        <?= $code === $selected ? 'selected' : '' ?>>
        <?= htmlspecialchars($name) ?>
    </option>
<?php endforeach; ?>
</select>

Naprzemienne style wierszy

Zastosuj naprzemienne style wierszy, aby poprawić czytelność:

<?php
$rows = range(1, 8);
?>

<table>
<?php foreach ($rows as $i => $row): ?>
    <tr class="<?= $i % 2 === 0 ? 'even' : 'odd' ?>">
        <td>Row <?= $row ?></td>
    </tr>
<?php endforeach; ?>
</table>

Warunkowe klasy CSS

Zastosuj klasy CSS na podstawie warunków dotyczących danych:

<?php
$tasks = [
    ['title' => 'Write tests',  'done' => true],
    ['title' => 'Deploy app',   'done' => false],
];
?>

<ul class="task-list">
<?php foreach ($tasks as $task): ?>
    <li class="task <?= $task['done'] ? 'done' : 'pending' ?>">
        <?= htmlspecialchars($task['title']) ?>
    </li>
<?php endforeach; ?>
</ul>

Odnośniki paginacji

Wygeneruj interfejs paginacji za pomocą pętli for:

<?php
$totalPages  = 10;
$currentPage = 3;
?>

<nav class="pagination">
<?php for ($p = 1; $p <= $totalPages; $p++): ?>
    <a href="?page=<?= $p ?>"
       class="<?= $p === $currentPage ? 'active' : '' ?>">
        <?= $p ?>
    </a>
<?php endfor; ?>
</nav>

Zagnieżdżone pętle dla zagnieżdżonego kodu HTML

Wygeneruj zagnieżdżone struktury HTML za pomocą zagnieżdżonych pętli:

<?php
$menu = [
    ['Home', '/', []],
    ['Products', '/products', ['Widgets', 'Gadgets']],
    ['About', '/about', []],
];
?>

<ul>
<?php foreach ($menu as [$label, $href, $sub]): ?>
    <li><a href="<?= $href ?>"><?= htmlspecialchars($label) ?></a>
    <?php if ($sub): ?>
        <ul>
        <?php foreach ($sub as $child): ?>
            <li><?= htmlspecialchars($child) ?></li>
        <?php endforeach; ?>
        </ul>
    <?php endif; ?>
    </li>
<?php endforeach; ?>
</ul>

Obsługa pustego stanu

W szablonach zawsze obsługuj przypadek pustej tablicy:

<?php
$posts = [];
?>

<?php if (!empty($posts)): ?>
    <ul>
    <?php foreach ($posts as $post): ?>
        <li><?= htmlspecialchars($post['title']) ?></li>
    <?php endforeach; ?>
    </ul>
<?php else: ?>
    <p class="empty-state">No posts found. <a href="/new">Create one!</a></p>
<?php endif; ?>

Generowanie atrybutów danych

Przekazuj dane do JavaScriptu za pomocą atrybutów danych HTML:

<?php
$products = [
    ['id' => 1, 'name' => 'Widget', 'price' => 9.99],
    ['id' => 2, 'name' => 'Gadget', 'price' => 24.99],
];
?>

<div class="product-grid">
<?php foreach ($products as $p): ?>
    <div class="product-card"
         data-id="<?= $p['id'] ?>"
         data-price="<?= $p['price'] ?>">
        <?= htmlspecialchars($p['name']) ?>
    </div>
<?php endforeach; ?>
</div>

PHP i JSON dla JavaScriptu

Bezpiecznie przekazuj tablice PHP do JavaScriptu za pomocą json_encode:

<?php
$config = [
    'apiUrl'  => '/api/v1',
    'userId'  => $user['id'] ?? 0,
    'locale'  => 'en-US',
];
?>

<script>
const APP_CONFIG = <?= json_encode($config, JSON_HEX_TAG | JSON_HEX_APOS) ?>;
console.log(APP_CONFIG.apiUrl);
</script>

Szybkie sprawdzenie

Jakiej funkcji należy użyć podczas wyświetlania ciągów znaków kontrolowanych przez użytkownika w kodzie HTML, aby zapobiec atakom XSS?

Podsumowanie: dynamiczny HTML z pętlami

Najważniejsze techniki:

  • Używaj alternatywnej składni foreach/for z dwukropkiem w szablonach
  • Zawsze zabezpieczaj dane wyjściowe za pomocą htmlspecialchars()
  • Stosuj warunkowe klasy CSS z operatorem trójargumentowym w atrybutach
  • Obsługuj puste tablice za pomocą if/else wokół pętli
  • Przekazuj dane PHP do JavaScriptu za pomocą json_encode()

Często zadawane pytania

Czy lekcja „Dynamiczny kod HTML z pętlami PHP” jest bezpłatna?

Tak — pełny tekst „Dynamiczny kod HTML z pętlami PHP” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu PHP Academy, przejdź na CoddyKit PRO. Kurs PHP Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Dynamiczny kod HTML z pętlami PHP”?

Generuj tabele i listy HTML z tablic PHP w szablonach Ćwiczysz PHP Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć PHP Academy?

Nie wymagamy żadnego doświadczenia. PHP Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Dynamiczny kod HTML z pętlami PHP”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji PHP Academy?

Tak. Każda lekcja PHP Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Znaczniki PHP i składnia osadzania
  2. Dynamiczny kod HTML z pętlami PHP
  3. Dołączanie i wymaganie plików
  4. Wzorzec szablonu: oddzielanie logiki od widoku
← Powrót do PHP Academy