Cara Membuat Tabel dengan Jquery Bootgrid pada PHP – Hai kali ini saya akan membahas tentang cara menampilkan data pada database ke dalam tabel menggunakan plugin jquery yaitu JQuery Bootgrid. Dengan plugin ini kita tidak perlu setting ini itu karena plugin ini sudah secara otomatis akan membuat pagination searching dan lain-lain. Sebenarnya mirip dengan datatable, hanya saja beda vendornya. Masing-masing plugin tentunya mempunyai kelebihan sendiri. Dengan jquery bootgrid ini kelebihannya secara otomatis muncul pagination dan menu searching. Selain itu kita kita bisa menyembunyikan serta menampilkan kolom dengan centangan saja.
Membuat Database MySQL
1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.
2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go
CREATE TABLE `tbl_mahasiswa` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nama_mahasiswa` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `jenis_kelamin` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `tgl_masuk` date NOT NULL, `jurusan` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, PRIMARY KEY (`id`) USING BTREE )
3. Untuk mencobanya agar sobat tidak memasukkan satu persatu maka sobat eksekusi saja query sql dibawah ini
INSERT INTO `tbl_mahasiswa` VALUES (1, 'Dewan Komputer', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (2, 'Sule', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika'); INSERT INTO `tbl_mahasiswa` VALUES (3, 'Maemunah', 'Yogyakarta', 'Perempuan', '2019-01-01', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (4, 'Siti', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika'); INSERT INTO `tbl_mahasiswa` VALUES (5, 'Andre', 'Purwokerto', 'Laki-laki', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (6, 'John Smith', 'Njojog', 'Laki-laki', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (7, 'Adam Levine', 'Prapatan Ciamis', 'Laki-laki', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (10, 'Sudirman', 'Jakarta', 'Laki-laki', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (11, 'Ahmad Yani', 'Jakarta', 'Laki-laki', '2019-01-22', 'Teknik Informatika'); INSERT INTO `tbl_mahasiswa` VALUES (12, 'Suprapto', 'Jakarta', 'Laki-laki', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (13, 'Adul', 'Medan', 'Laki-laki', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (14, 'Komeng', 'Palangkaraya', 'Laki-laki', '2019-01-22', 'Teknik Informatika'); INSERT INTO `tbl_mahasiswa` VALUES (15, 'Dono', 'Riau', 'Laki-laki', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (16, 'Kasino', 'Jakarta', 'Laki-laki', '2019-01-22', 'Teknik Informatika'); INSERT INTO `tbl_mahasiswa` VALUES (17, 'Indro', 'Purbalingga', 'Laki-laki', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (18, 'Titik Puspa', 'Purwokerto', 'Perempuan', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (19, 'Meriam Belina', 'Cilacap', 'Perempuan', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (20, 'John Gundulmu', 'Jakarta', 'Laki-laki', '2019-01-22', 'Teknik Informatika'); INSERT INTO `tbl_mahasiswa` VALUES (21, 'Adele', 'Jakarta', 'Laki-laki', '2019-01-22', 'Teknik Informatika'); INSERT INTO `tbl_mahasiswa` VALUES (22, 'Jokowi', 'Jakarta', 'Laki-laki', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (23, 'Megawati', 'Medan', 'Perempuan', '2019-01-22', 'Teknik Informatika'); INSERT INTO `tbl_mahasiswa` VALUES (24, 'Prabowo', 'Palangkaraya', 'Laki-laki', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (25, 'Raisa', 'Riau', 'Perempuan', '2019-01-22', 'Teknik Informatika'); INSERT INTO `tbl_mahasiswa` VALUES (26, 'Luna Maya', 'Jakarta', 'Perempuan', '2019-01-22', 'Teknik Informatika'); INSERT INTO `tbl_mahasiswa` VALUES (27, 'Dery', 'Purbalingga', 'Laki-laki', '2019-01-22', 'Sistem Informasi'); INSERT INTO `tbl_mahasiswa` VALUES (28, 'Septian', 'Purwokerto', 'Laki-laki', '2019-01-22', 'Sistem Informasi');
Membuat Tabel dengan JQuery Bootgrid
1.Buat file koneksi.php yang berfugsi untuk menyambungkan aplikasi dengan database dan isikan dengan kode dibawah
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');
// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>
isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.
Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini
2. Buat file index.php dan masukkan librari css dan js pada tag <head> seperti dibawah ini
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
Untuk librari css dan js saya menggunakan online karena hanya untuk keperluan demo, jika sobat ingin membuatnya untuk development maka sobat perlu mendownloadnya terlebih dahulu.
3. Masih di file index.php sobat tambahkan kode dibawah pada tag <body>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand text-white" href="index.php" style="color: #fff;">
Dewan Komputer
</a>
</nav>
<div class="container">
<h3 align="center">Menampilkan Data dari Database ke Bootgrid PHP dan MySQL</h3>
<div class="table-responsive">
<table id="mahasiswa" class="table table-striped table-bordered">
<thead>
<tr>
<th data-column-id="no" data-type="numeric">No</th>
<th data-column-id="nama_mahasiswa">Nama Lengkap</th>
<th data-column-id="jenis_kelamin">Jenis Kelamin</th>
<th data-column-id="jurusan">Jurusan</th>
<th data-column-id="alamat">Alamat</th>
</tr>
</thead>
<tbody>
<?php
$no=1;
$query = "SELECT * FROM tbl_mahasiswa ORDER BY id DESC";
$dewan1 = $db1->prepare($query);
$dewan1->execute();
$res1 = $dewan1->get_result();
while($row = $res1->fetch_assoc()){
echo '
<tr>
<td>'.$no++.'</td>
<td>'.$row["nama_mahasiswa"].'</td>
<td>'.$row["jenis_kelamin"].'</td>
<td>'.$row["jurusan"].'</td>
<td>'.$row["alamat"].'</td>
</tr>
';
}
?>
</tbody>
</table>
</div>
</div>
4. Kemudian jalankan project sobat maka akan menghasilkan tampilan seperti dibawah
Jika berhasil maka tabel sobat akan muncul data dari database dan secara otomatis muncul pagination dan menu searching. Jika ada kesempatan saya akan memposting tentang datatables yang lebih beragam. Sekian postingan saya tentang Cara Membuat Tabel dengan Jquery Bootgrid pada PHP. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :