Studi Kasus Pendaftaran Siswa Baru

3. Read - index

Membuat Halaman Indeks

Rencananya kita akan menaruh dua link di halaman indeks. Link pertama untuk menuju ke formulir pendaftaran dan link yang kedua untuk menuju ke halaman data siswa yang sudah mendaftar.

Gamabarannya seperti ini…

rancangan halaman sistem pendaftaran siswa

Sekarang, silahkan isi file index.php dengan kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Pendaftaran Siswa Baru | SMK Coding</title>
</head>

<body>
    <header>
        <h3>Pendaftaran Siswa Baru</h3>
        <h1>SMK Coding</h1>
    </header>

    <h4>Menu</h4>
    <nav>
        <ul>
            <li><a href="form-daftar.php">Daftar Baru</a></li>
            <li><a href="list-siswa.php">Pendaftar</a></li>
        </ul>
    </nav>

    </body>
</html>

Tampilannya awalnya akan menjadi seperti ini:

Tampilan halaman utama pendaftaran siswa

Cara Menampilkan Data Tabel MySQL

Silahkan buka list-siswa.php dan isi dengan kode berikut:

<?php include("config.php"); ?>

<!DOCTYPE html>
<html>
<head>
    <title>Pendaftaran Siswa Baru | SMK Coding</title>
</head>

<body>
    <header>
        <h3>Siswa yang sudah mendaftar</h3>
    </header>

    <nav>
        <a href="form-daftar.php">[+] Tambah Baru</a>
    </nav>

    <br>

    <table border="1">
    <thead>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Alamat</th>
            <th>Jenis Kelamin</th>
            <th>Agama</th>
            <th>Sekolah Asal</th>
            <th>Tindakan</th>
        </tr>
    </thead>
    <tbody>

        <?php
        $sql = "SELECT * FROM calon_siswa";
        $query = mysqli_query($db, $sql);

        while($siswa = mysqli_fetch_array($query)){
            echo "<tr>";

            echo "<td>".$siswa['id']."</td>";
            echo "<td>".$siswa['nama']."</td>";
            echo "<td>".$siswa['alamat']."</td>";
            echo "<td>".$siswa['jenis_kelamin']."</td>";
            echo "<td>".$siswa['agama']."</td>";
            echo "<td>".$siswa['sekolah_asal']."</td>";

            echo "<td>";
            echo "<a href='form-edit.php?id=".$siswa['id']."'>Edit</a> | ";
            echo "<a href='hapus.php?id=".$siswa['id']."'>Hapus</a>";
            echo "</td>";

            echo "</tr>";
        }
        ?>

    </tbody>
    </table>

    <p>Total: <?php echo mysqli_num_rows($query) ?></p>

    </body>
</html>

Pertama kita membutuhkan koneksi ke database, maka kita harus mengimpor file config.php agar variabel $db dapat dibaca.

<?php include("config.php"); ?>

Setelah itu, kita melakukan query untuk mengambil data siswa pada tabel calon_siswa.

$sql = "SELECT * FROM calon_siswa";
$query = mysqli_query($db, $sql);

Hasil dari query tersetbut, kemudian kita ubah menjadi array dengan fungsi mysqli_fetch_array() dan hasilnya disimpan dalam variabel $siswa.

$siswa = mysqli_fetch_array($query)

Perulangan while akan mengulang selama masih ada isi dalam tabel. Kemudain, selama perulangan…kita tampilkan datanya.

while($siswa = mysqli_fetch_array($query)){
    echo "<tr>";

    echo "<td>".$siswa['id']."</td>";
    echo "<td>".$siswa['nama']."</td>";
    echo "<td>".$siswa['alamat']."</td>";
    echo "<td>".$siswa['jenis_kelamin']."</td>";
    echo "<td>".$siswa['agama']."</td>";
    echo "<td>".$siswa['sekolah_asal']."</td>";

    echo "<td>";
    echo "<a href='form-edit.php?id=".$siswa['id']."'>Edit</a> | ";
    echo "<a href='hapus.php?id=".$siswa['id']."'>Hapus</a>";
    echo "</td>";

    echo "</tr>";
}

Perhatikan array $siswa, indeksnya sesuai dengan nama kolom pada database dan bersifat case sensitive.

Terakhir, kita menampilkan total data yang ada di dalam tabel dengan fungsi mysqli_num_rows().

echo mysqli_num_rows($query);

Maka hasilnya:

Gampang kaaan…! 😄