CRUD PHP & MySQLi Dengan Bootstrap : Menampilkan Data Dari Database - Selamat datang teman-teman semuanya di artikel lanjutan dari seri membuat CRUD PHP & MySQLi Dengan Bootstrap di Part 3 yaitu menampilkan data dari database.
Jika diartikel sebelumnya kita sudah membahas tentang bagaimana cara memaukkan data atau input data dari From ke Database, maka di artikel kali ini kita semua akan belajar bagaimana cara menampilkan data yang sudah berhasil diinputkan ke database.
Pada artikel kali ini kita akan menampilkan data dari database menggunakan Library yang bernama Datatables. Kenapa menggunakan Datatables ? dengan Datatables kita tidak harus membuat pencarian dan paginasi data secara manual, semuanya sudah disediakan secara otomatis.
Penasaran? mari kita mulai materinya, diartikel sebelumnya kita sudah membuat file yang bernama index.php dan file tersebut masuh kosong. Maka ditutorial kali ini kita akan menuliskan beberapa kode di file index.php tersebut.
Karena file index.php inilah yang bertugas untuk menampilkan data dari database ke layar browser kita. Oke sekarang silahkan kalian copy dan paste kode dibawah ini dikedalam file index.php :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<title>Data Siswa</title>
</head>
<body>
<div class="container" style="margin-top: 80px">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
DATA SISWA
</div>
<div class="card-body">
<a href="tambah-siswa.php" class="btn btn-md btn-success" style="margin-bottom: 10px">TAMBAH DATA</a>
<table class="table table-bordered" id="myTable">
<thead>
<tr>
<th scope="col">NO.</th>
<th scope="col">NISN</th>
<th scope="col">NAMA LENGKAP</th>
<th scope="col">ALAMAT</th>
<th scope="col">AKSI</th>
</tr>
</thead>
<tbody>
<?php
include('koneksi.php');
$no = 1;
$query = mysqli_query($connection,"SELECT * FROM tbl_siswa");
while($row = mysqli_fetch_array($query)){
?>
<tr>
<td><?php echo $no++ ?></td>
<td><?php echo $row['nisn'] ?></td>
<td><?php echo $row['nama_lengkap'] ?></td>
<td><?php echo $row['alamat'] ?></td>
<td class="text-center">
<a href="edit-siswa.php?id=<?php echo $row['id_siswa'] ?>" class="btn btn-sm btn-primary">EDIT</a>
<a href="hapus-siswa.php?id=<?php echo $row['id_siswa'] ?>" class="btn btn-sm btn-danger">HAPUS</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
Oke kita bahas kodenya step by step, perhatikan untuk kode berikut ini :
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
Kode diatas adalah kode bagaimana Datatable diapply ke sebuah table dengan id myTable, jika teman-teman perhatikan di tag table, teman-teman pasti melihat id dengan isi myTable.
Oke, jika kalian jalankan dengan mengetikkan di browser http://localhost/sekolah, maka kurang lebih tampilannya seperti berikut ini :
Selanjutnya, untuk edit dan sekaligus update data siswa akan kita bahas pada atikel selanjutnya.