Assalamu'alaikum wr.wb.
A. Pengertian
DataTables adalah tabel meningkatkan plug-in untuk jQuery perpustakaan Javascript, menambahkan menyortir, paging dan penyaringan kemampuan untuk tabel HTML polos dengan sedikit usaha.
B. Latar Belakang
Latar belakang dari permasalahan kali ini yaitu pembuatan table yang diotomatis menggunakan DataTables jQuery dengan memadukan boostrap didalamnya.
C. Alat dan Bahan
- OS XUbuntu 16.10
- Text Editor (SublimeText)
- Web Browser
- PHP7.1
- phpMyAdmin
- File DataTables
D. Tujuan
Bertujuan untuk mengetahui dan menerapkan sintaks untuk membuat data berupa table yang otomatis.
E. Pembahasan
Langsung masuk saja ke materi codingnya. Yaitu sebagai berikut.
- Pertama kita buat terlebih dahulu database nya. Disini saya sudah memiliki database dengan nama db_perpustakaan yang tabel nya berisi anggota, kategori, buku, pengembalian dan peminjaman. Dan kali ini kita hanya akan membuat salah satu table nya dengan ditambahkan datatables dalam penerapannya yaitu table anggota. Bisa di download database nya di sini dan file DataTables nya disini. Dapat juga mendownload sendiri file nya di situs resminya di https://datatables.net.
- Setelah itu kita buka sublime text pada Menu -> ketikkan pada pencarian SublimeText.
- Berikutnya kita akan membuat sebuah koneksi terlebih dahulu untuk mengkoneksikan database. Dibawah ini merupakan coding db.php yang dibuat.
<?php
$host = "localhost";//127.0.0.1
$usrname = "root";
$pass = "...";
$db = "db_perpustakaan";
$koneksi = mysqli_connect($host, $usrname, $pass, $db);
?>
$host = "localhost";//127.0.0.1
$usrname = "root";
$pass = "...";
$db = "db_perpustakaan";
$koneksi = mysqli_connect($host, $usrname, $pass, $db);
?>
4. Langkah berikutnya kita akan membuat sebuah file dengan nama index.php dan dibawah ini codingnya.
<?php
include '../../config/db.php';//pemanggilan dari file koneksi bernama db.php didalam folder yang terpisah.
include '../../config/db.php';//pemanggilan dari file koneksi bernama db.php didalam folder yang terpisah.
?>
<!DOCTYPE html>
<html>
<head>
<title>Data Anggota</title>
<link rel="stylesheet" type="text/css" href="../datatables/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../datatbles/media/css/dataTables.bootsrap.css">
</head>
<body>
<div class="container">
<div class="btn-tambah-div">
<a href="tambah-anggota.php"><button class="btn-tambah">Tambah Data</button></a>
</div>
<br>
<table class="table table-striped table-bordered data">
<thead>
<tr>
<th>Id Anggota</th>
<th>Nama Anggota</th>
<th>Alamat Anggota</th>
<th>Jenis Kelamin</th>
<th>No.Telepon</th>
<th>Opsi</th>
</tr>
</thead>
<tbody>
<?php
$data_siswa = "SELECT * FROM anggota" ;
$eksekusi = mysqli_query($koneksi, $data_siswa);
while ($row = mysqli_fetch_assoc($eksekusi)) {
?>
<tr>
<td><?= $row['anggota_id']; ?></td>
<td><?= $row['anggota_nama']; ?></td>
<td><?= $row['anggota_alamat']; ?></td>
<td><?= $row['anggota_jk']; ?></td>
<td><?= $row['anggota_telp']; ?></td>
<td>
<a href="edit-anggota.php?id_anggota=<?= $row['anggota_id']; ?>" class="btn btn-edit">Edit</a>
<a href="delete-anggota.php?id_anggota=<?= $row['anggota_id']; ?>" class="btn btn-delete">Hapus</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<script type="text/javascript" src="../datatables/DataTables/media/js/jquery.js"></script>
<script type="text/javascript" src="../datatables/DataTables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="../datatables/DataTables/media/js/dataTables.bootstrap4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.data').DataTable();
});
</script>
</div>
</body>
</html>
F. Kesimpulan
Dari pembahasan diatas dapat ditarik kesimpulan bahwa penggunaan dari data tables itu tidaklah sulit untuk diterapkan. Sebelum kita menggunakan datatables tersebut kita harus memiliki file dari datatables tersebut. Jika kita tidak memilikinya kita tidak akan mendapatkan hasil yang kita inginan untuk membuat datatables.
G. Referensi
- https://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=search&rurl=translate.google.co.id&sl=en&sp=nmt4&u=https://github.com/DataTables/DataTables&usg=ALkJrhhnl7AIGFUoKDqNFJK-h1oLR158Bw
- https://datatables.net
- sekolahkoding.com
Sekian dan Terimakasih.
SMK Bisa!!
Wassalamu'alaikum wr.wb.
0 komentar:
Posting Komentar