Sebelumnya, telah dibuat sebuah sistem data siswa pendaftar sma, tepatnya pada link ini (https://enlightechtc.blogspot.com/2018/11/tugas-pweb-pendaftaran-siswa-dengan-ajax.html). Sudah dimasukkan ajax dan sistem query.
Pada jurnal kali ini, bagian list siswa pada kode tersebut akan diberikan Bootstrap. Hal ini bertujuan agar desain web lebih menarik dan Bootstrap juga mempermudah pekerjaan karena tidak perlu Membuat ulang file css atau js.
Berikut Perubahan pada file list-siswa
<?php include("config.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Siswa Baru || SMA PetaniCoding
</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body style="text-align: center;">
<header>
<h3>Siswa yang sudah mendaftar</h3>
</header>
<br>
<table align="center" class="table table-bordered table-striped table-hover">
<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);
$nomor=0;
while($siswa = mysqli_fetch_array($query)){
echo "<tr>";
$nomor++;
echo "<td>".$nomor."</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>
Tampilan tabel pada list siswa akan berubah menjadi :
Tidak ada komentar:
Posting Komentar