0Pricing
PHP Academy · Pelajaran

HTML Dinamis dengan Perulangan PHP

Hasilkan tabel dan daftar HTML dari array PHP di dalam templat.

HTML Dinamis dengan Perulangan PHP adalah pelajaran PHP Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar PHP Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus PHP Academy mencakup 4 pelajaran total.

Pembuatan HTML Berbasis PHP

Salah satu penggunaan PHP yang paling kuat adalah menghasilkan HTML secara dinamis dari array data—daftar, tabel, daftar pilihan, menu navigasi, dan banyak lagi.

Membuat Daftar

Render daftar HTML tidak berurutan dari array PHP:

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

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

Membuat Tabel HTML

Buat tabel dinamis dari array dua dimensi:

<?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>

Membuat Daftar Pilihan

Buat elemen pilihan HTML dari sebuah array:

<?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>

Memberi Pola Belang pada Baris

Terapkan gaya baris bergantian agar lebih mudah dibaca:

<?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>

Kelas CSS Kondisional

Terapkan kelas CSS berdasarkan kondisi data:

<?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>

Tautan Paginasi

Hasilkan antarmuka paginasi dari perulangan 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>

Perulangan Bersarang untuk HTML Bersarang

Hasilkan struktur HTML bersarang dengan perulangan bersarang:

<?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>

Penanganan Keadaan Kosong

Selalu tangani kasus array kosong dalam templat:

<?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; ?>

Membuat Atribut Data

Kirim data ke JavaScript melalui atribut data 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 dan JSON untuk JavaScript

Kirim array PHP ke JavaScript dengan aman menggunakan 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>

Pemeriksaan Singkat

Fungsi apa yang harus digunakan saat menampilkan string yang dikendalikan pengguna di dalam HTML untuk mencegah XSS?

Rangkuman: HTML Dinamis dengan Perulangan

Teknik utama:

  • Gunakan sintaks alternatif foreach/for dengan titik dua dalam templat
  • Selalu lakukan escape pada output dengan htmlspecialchars()
  • Gunakan kelas CSS kondisional dengan ternary dalam atribut
  • Tangani array kosong dengan if/else di sekitar perulangan
  • Kirim data PHP ke JavaScript melalui json_encode()

Pertanyaan yang Sering Diajukan

Apakah pelajaran “HTML Dinamis dengan Perulangan PHP” gratis?

Ya — teks lengkap “HTML Dinamis dengan Perulangan PHP” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus PHP Academy, upgrade ke CoddyKit PRO. Kursus PHP Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “HTML Dinamis dengan Perulangan PHP”?

Hasilkan tabel dan daftar HTML dari array PHP di dalam templat. Kamu berlatih PHP Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai PHP Academy?

Tidak diperlukan pengalaman sebelumnya. PHP Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “HTML Dinamis dengan Perulangan PHP” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran PHP Academy ini?

Ya. Setiap pelajaran PHP Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Tag PHP dan Sintaks Penyematan
  2. HTML Dinamis dengan Perulangan PHP
  3. Menyertakan dan Memerlukan File
  4. Pola Templat: Memisahkan Logika dari Tampilan
← Kembali ke PHP Academy