Widodo

Menampilkan Data Tabel mahasiswa di Jquery Datatables Bootstrap

Datatables

Selamat siang agan2, udah lama kami s-widodo.com sudah tidak aktif lagi memberikan tutorial-tutorial mengenai web design maupun web programing untuk kali ini kami akan memberikan tutorial cara integrasiin tabel mahasiswa ke dalam datatable bootstrap,emmm agak sedikit lupa saya ini tutorial udah pernah apa belum tapi sudahlah, sebelumnya beberapa bulan lalu kita sudah belajar membuat datatales nah sekarang kita akan integrasiin database dengan datatables bootstrap untuk menampilkan tabel mahasiswa dan kemarin udah kami jelaskan datatables adalah plugin yang di sediakan Oleh Jquery Datatables dan ini mempunyai fiut-fitur seperti pencarian otomastis berdasarkan disemua row table ,pagination otomatis dan kita bisa sorting data, jadi kita tidak direpotkan lagi untuk membuat fitur pencarian maupun paginationya itu sendiri.  untuk sampelnya kami gunakan data contoh tabel data mahasiswa yang nantinya kita akan integrasiin ke Jquery Datatables Bootstrap tentunya kita butuh koneksi untuk menjalankan databasenya munngkin langsung aja kita  pelajarin bersama-sama :

Tata cara menampilkan tabel mahasiswa di jquery Datatables
1. Sebelum kita masuk ke editor kita masing-masing silahkan  download Plugin Datatablesnya website resminya disini atau punya kami Download
2. Jika sudah kalian download lalu extract sekarang buatlah folder datatables-mahasiswa di localhost kalian masing-masing setelah itu buat folder lagi dengan nama asset dan datatables lalu simpan Jquery dan cssnya dalam folder asset dan datatables lebih jelasnya bisa liat struktur direktorinya dibwah ini

<link rel="stylesheet" href="./asset/bootstrap.min.css">
<script src="asset/jquery-1.7.2.min.js"></script>
<script src="asset/bootstrap.min.js"></script>
<script src="asset/datatables/jquery.dataTables.min.js"></script>
<script src="asset/datatables/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="asset/datatables/dataTables.bootstrap.css">

3. Setelah itu buka editor kalian dan buatlah file index.php simpan di folder datatables-mahasiswa pada localhost kalian

4. Sebelum kita masuk ke dalam MYSQL/PHP kita buat dulu struktur databasenya sepeti dibawah ini

Buatlah Database dengan nama tutorial dan buatlah satu tabel dengan nama mahasiswa yang terdiri dari :

in int (8)
nama varchar(30)
jenis_kelamin varchar(10)
jurusan varchar(30)
alamat text
Primary Key  (id)

*tambah data mahasiswa secara manual lewat phpmyadminya


4. Sekarang  kita buat Koneksi database seperti dibwah ini dan simpan di paling atas kode <html>

$User = "root";
$Pass = "";
$Db_name = "tutorial";
$conn = new mysqli( $Host, $User, $Pass, $Db_name );
if ($conn->connect_error){
echo 'Gagal koneksi ke database';
} else {
//koneksi berhsil
}?>

5. Sekarang kita panggil code HTML datatablesnya seperti dibawah ini

<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nama Mahasiswa</th>
<th>Jenis Kelamin</th>
<th>Jurusan</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</tbody>
</table>

6. belum samapi disini sekarang kuta sisipkan script  MYSQLI/PHPnya dalam HTMLnya makan akan seperti dibwah ini :

<?PHP $query = "SELECT * FROM mahasiswa";
$result = $conn->query($query) or die($conn->error.__LINE__);
 if($result->num_rows > 0){
echo'
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>NAMA</th>
<th>JENIS kELAMIN</th>
<th>JURUSAN</th>
<th>ALAMAT</th>
</tr>
</thead>
<tbody>';
while($rows = $result->fetch_assoc()){
	extract($rows);
	echo'
<tr>
<td>'.$id.'</td>
<td>'.$nama.'</td>
<td>'.$jenis_kelamin.'</td>
<td>'.$jurusan.'</td>
<td>'.$alamat.'</td>
</tr>';}
echo'
</tbody>';} else {echo'Data tidak ditemukan atau kosong';}?>
</table>

Yang terakhir jangan lupa jquery datatablesnya

<script type="text/javascript">
  $(function () {
    $("#example1").DataTable();
  });
  </script>

Buat kalian yang ingin mencoba dirumah anda bisa menggunakan database sendiri atau ikuti tutoriaal kami jika belum mengerti

Oke sampai disini dulu tutorial kali ini buat temen-temen anda bisa download sample dari kamu yang sudah jadi dibawah ini :

Download



0 Komentar