Di artikel sebelumnya kita sudah belajar cara membuat tabel statis menggunakan boostrap , pada artikel ini kita akan melanjutkannya agar data dalam tabel menjadi dinamis. Sebelum anda mengikuti tutorial ini, ada baiknya anda membaca tutorial cara membuat tabel statis menggunakan boostrap terlebih dahulu atau pastikan anda sudah mendownload bootstrap versi 4 dan menaruhnya pada folder template.
Berikut cara menampilkan data MySQL dengan PHP.
Pertama
Buat file koneksi.php terlebih dahulu, ketikkan kode nya sebagai berikut :
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'db_test');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>
Kedua
Buat Database baru dengan nama db_test, lalu buat tabel dengan nama t_pegawai
Ketiga
Masukkan beberapa data kedalam tabel t_pegawai . Isi data bebas sesuai keinginan :))
Contoh :
Terakhir
Buat file dengan nama data_pegawai.php, ketikkan kode sebagai berikut (jika anda mengikuti tutorial sebelumnya, kode html nya sama seperti file coba.html hanya ditambah kode PHP dan kolom posisi) :
<?php
require "koneksi.php";
?>
<html>
<head>
<title>Belajar Bootstrap</title>
<link href="template/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>Filter</h1>
Nama
<input type="text" name="nama" class="form-control" value=""/><hr>
<input type="submit" name="filter" class="btn btn-primary" value="Filter"/>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<table width="100%" class="table table-bordered table-striped table-hover">
<tr>
<th>No</th>
<th>NIP</th>
<th>Nama</th>
<th>Alamat</th>
<th>Posisi</th>
</tr>
<?php
$no = 1;
$query = "SELECT * FROM t_pegawai";
$result = mysqli_query($db, $query);
foreach($result as $data) {
?>
<tr>
<td><?php echo $no;?></td>
<td><?php echo $data['nip']; ?></td>
<td><?php echo $data['nama']; ?></td>
<td><?php echo $data['alamat']; ?></td>
<td><?php echo $data['posisi']; ?></td>
</tr>
<?php
$no++;
}
?>
</table>
</div>
</div>
</div>
</body>
<script src="template/js/bootstrap.min.js"></script>
</html>
Hasil
Penjelasan Kode
Perhatikan kode PHP nya,
pada baris ke 2, kita memasukkan file koneksi.php yang berada satu folder dengan file data_pegawai.php ke dalam kode data_pegawai.php. Kenapa tidak menggunakan fungsi include dan malah menggunakan fungsi require? nanti saya bahas di artikel selanjutnya ya, sementara anda bisa membaca di referensi yang saya sertakan di akhir artikel ;) .
Kita membuat variabel dengan nama $no dengan nilai awal 1, variabel $no ini digunakan untuk numbering pada kolom No pada tabel. Nilai variabel $no selalu bertambah 1 (lihat baris kode ke 44).
Kemudian, kita menjalankan fungsi mysqli_query pada baris kode 33 dimana querynya ditampung pada variabel bernama $query. Jika diperhatikan, terdapat variabel $db .Lalu darimana variabel $db ini berasal? variabel $db sudah didefinisikan pada file koneksi.php (ingat kita sudah menambahkan baris kode require "koneksi.php" sebelumnya).
Selanjutnya, lakukan looping menggunakan foreach berdasarkan data yang didapat dari hasil query pada variabel $result lalu ditampung pada variabel $data. Terakhir, tampilkan setiap isi dari $data dengan fungsi echo. Teks berupa nip, nama, alamat dan posisi pada variabel $data adalah nama kolom pada tabel t_pegawai.
Tambahan:
kita juga bisa menggunakan looping dengan while dengan kode berikut :
while($data = mysqli_fetch_array($result)) {
Semoga Bermanfaat
.jpg)
makasih min
BalasHapusterimakasih kak atas artikelnya saya mau tanya tentang fungsi include dan malah menggunakan fungsi require? itu bagaimana ya kak?? artikel kelanjutanya dimana ya?? saya mahasiswa Siti Mainah dari kampus STMIK ATMA LUHUR https://www.atmaluhur.ac.id/
BalasHapus