Membuat Form Input Buah dengan Array Indeks di PHP

Apa yang akan kita buat?

Dalam tutorial ini, kita akan belajar bagaimana cara membuat form input menggunakan PHP, yang datanya akan disimpan ke dalam array indeks. Form ini akan meminta pengguna untuk memasukkan 3 nama buah, lalu menampilkannya dalam bentuk tabel

Penjelasan Singkat Kode

<?php 
    // Inisialisasi array kosong
    $buah =[];

    // Jika form disubmit
    if ($_SERVER["REQUEST_METHOD"] == "POST"){
        $buah[] = $_POST["buah1"];
        $buah[] = $_POST["buah2"];
        $buah[] = $_POST["buah3"];
    }
?>

• Di awal, kita buat array kosong bernama $buah.
• Ketika tombol submit ditekan, PHP akan menangkap data dari form ($_POST) dan memasukkannya ke dalam array $buah satu per satu

 Tampilan Form HTML

<form method="POST">
    <label>Buah 1 :</label>
    <input type="text" name="buah1" required><br><br>

    <label>Buah 2 :</label>
    <input type="text" name="buah2" required><br><br>

    <label>Buah 3 :</label>
    <input type="text" name="buah3" required><br><br>

    <input type="submit" value="Simpan">
</form>

• Ini adalah form sederhana dengan tiga input teks: Buah 1, Buah 2, dan Buah 3.
• Form akan mengirim data ke server menggunakan metode POST.

Menampilkan Hasil Input ke Tabel

<?php if(!empty($buah)) : ?>
    <h2>Hasil input :</h2>
    <table>
        <tr>
            <th>No</th>
            <th>Nama buah</th>
        </tr>
    <?php 
        foreach($buah as $index => $b){
            echo"<tr>
                    <td>". ($index + 1). "</td>
                    <td>". htmlspecialchars($b) . "</td>
                </tr>";
        }
    ?>
    </table>
<?php endif; ?>

• Jika array $buah tidak kosong, maka tampilkan tabel.
• Menggunakan foreach untuk menampilkan setiap buah yang dimasukkan.
• Fungsi htmlspecialchars() digunakan untuk menghindari karakter berbahaya (penting untuk keamanan).

Sedikit Gaya dengan CSS

.container {
    margin: 80px;
    margin-left: 300px;
    padding: 30px;
    width: 500px;
    background: #dddadaff;
    border: 1px solid;
    border-radius: 10px;
}

• css diatas digunakan untuk merapihkan form agar terlihat menarik

Dengan kode ini, kita belajar:

• Cara membuat form HTML dan mengambil input menggunakan PHP.
• Menyimpan input ke dalam array indeks.
• Menampilkan data array dalam bentuk tabel.

Hasilnya:

Misalnya kamu mengisi form seperti ini:

Buah 1	Buah 2	Buah 3
Apel	Pisang	Mangga

Maka output-nya di halaman akan jadi:

No	Nama Buah
1	Apel
2	Pisang
3	Mangga