Skip to content Skip to sidebar Skip to footer

Menampilkan Data Dalam Database Memakai Data Tables

Saya juga bergotong-royong gres berguru , waktu saya download sebuah rujukan source code untuk upload/download lalu melihat Saya coba melihat isi scriptnya. Dalam script Saya melihat cara menampilkan datanya yang sedikit guah, maksudnya Saya tidak melihat baris – baris script yang tertulis secara panjang, namun guahnya data ditampilkan dalam tabel yang sangat rapih, dan ternyata setelah dicek memang scriptnya menyerupai melaksanakan pemanggilan kesebuah file css, bootstrap dan jquery/javascript, dimana salah satunya file yang dipanggil tersebut yakni file jquery.dataTables.js dan DT_bootstrap.js, disini Saya jadi mengerti bahwa ternyata file – file yang dipanggil tersebut ialah file yang bertugas dari sisi tampilan tabelnya sementara untuk teknis menampilkan datanya tetap memakai script PHP.

Sebelum mempelajari ihwal bagaiman menampilkan sebuah data yang tersimpan dalam database MySQL memakai Data Tables, sebaiknya Anda pelajari terlebih lampau ihwal misal Script PHP Untuk Menampilkan Data Dalam Database, jadi Saya asumsikan bahwa bila Anda mempelajari ini berarti Anda sudah mengerti ihwal proses menampilkan data dalam database MySQL memakai script PHP. 

Menampilkan Data Dalam Database Menggunakan Data Tables dapat dengan memakai langkah - langkah diberikut :
  1. Buatlah dulu sebuah database baru. Bila belum mengerti cara membuat database menggunakn PhpMyAdmin, lihat artikel Teknik Membuat Database di PhpMyAdmin XAMPP
  2. Masukan data secara manual kedalam databse yang sudah Anda buat misal dengan data – data diberikut, id, nama, nisn, alamat, asal_sekolah, telepon
  3. Bila ingin memasukan data ke database yang sudah dibentuk memakai script PHP, silahkan pelajari artikel misal Script PHP Untuk Memasukan Data ke Dalam Database
  4. Selanjutnya siapkan file untuk koneksi ke database. misal membuat file koneksi ke database dapat Anda lihat pada artikel Teknik Membuat Koneksi ke Databse Mysql Menggunakan Script PHP
  5. Kemudian buatlah sebuah script PHP untuk menampilkan data dalam database. misal penulisan scriptnya dapat dilihat dibawah ini

    <html> <body> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen"> <link rel="stylesheet" type="text/css" href="css/DT_bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"/> </head> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/bootstrap.js" type="text/javascript"></script>  <script type="text/javascript" charset="utf-8" language="javascript" src="js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf-8" language="javascript" src="js/DT_bootstrap.js"></script> <?php include('connect.php'); ?> <style> .table tr th{    border:#eee 1px solid;    position:relative;  #font-family:"Times New Roman", Times, serif;  font-size:12px;  text-transform:uppercase;  }  table tr td{    border:#eee 1px solid;  color:#000;  position:relative;  #font-family:"Times New Roman", Times, serif;  font-size:12px;    text-transform:uppercase;  }    </style>    <div class="alert alert-info">                                                                        &nbsp;&nbsp;DATA SISWA                             </div>                 <div class="col-md-18">  <div class="container-fluid" style="margin-top:0px;">    <div class = "row">   <div class="pgual pgual-default">    <div class="pgual-body">     <div class="table-responsive">          <form method="post" action="delete.php" >                         <table cellpadding="0" cellspacing="0" border="0" class="table table-condensed" id="example">                                                          <thead>                                        <tr>                                                                          <th>ID</th>                                     <th>NAMA SISWA</th>                                      <th>NISN</th>                                    <th>ALAMAT</th>     <th>ASAL SEKOLAH</th>     <th>NO HP</th>      <th>DELETE</th>                                 </tr>                             </thead>                             <tbody>        <?php         $query=mysql_query("select * from daftar ORDER BY id DESC")or die(mysql_error());        while($row=mysql_fetch_array($query)){        $id=$row['id'];        $name=$row['nama'];        $nis=$row['nisn'];        $al=$row['alamat'];        $as=$row['asal_sekolah'];        $tel=$row['telepon'];        ?>                                          <tr>                                                     <td><?php echo $row['id'] ?></td>                                          <td><?php echo $row['nama'] ?></td>                                             <td><?php echo $row['nisn'] ?></td>                                          <td><?php echo $row['alamat'] ?></td>           <td><?php echo $row['asal_sekolah'] ?></td>           <td><?php echo $row['telepon']?>     </td>  <td><a href="delete.php?del=<?php echo $row['id']?>"><span class="glyphicon glyphicon-trash" style="font-size:20px; color:red"></span></a>     </td>                                 </tr>                                           <?php } ?>                             </tbody>                         </table>                                                                                                        </div>            </form>          </div>         </div>         </div>     </div>    </body> </html> 
  6. Terkahir siapkan file css, font-awesome, fonts dan js. Silahkan download filenya -> Download dataTables
  7. Simpan tiruana file diatas kedalam folder yang sama dan taruh di web server/folder htdocs
Bila mengikuti langkah – langkah diatas, maka nanti kurang lebih data yang ditampilkan akan terlihat menyerupai gambar dibawah ini

 waktu saya download sebuah rujukan source code untuk upload Menampilkan Data Dalam Database Menggunakan Data Tables

Menurut Saya salah satu laba menampilkan data memakai Data Tables yakni :
  1. Data yang ditampilkan lebih rapih, dan juga responsive
  2. Proses menampilkan data ataupun pencarian data lebih cepat
  3. Tidak perlu repot – repot membuat script PHP untuk pencarian data ataupun pengaturan halaman untuk setiap data yang ditampilkan, alasannya yakni duduk kasus paging otomatis dibentuk oleh plugins/javascript
Jadi dengan memakai Data Tables ini Anda dapat menampilkan data yang tersimpan di Database dalam bentuk tabel yang rapih dan responsive, lalu juga Anda tidak repot – repot membuat paging untuk mengatur halaman setiap data yang ditampilkan, selain itu juga proses pencarian data lebih cepat, bila Anda ingin mencari sebuah data maka cukup letakan kursor di form pencarian dan ketikan nama dari data yang Anda cari.

Semua yang Saya tulis menurut pengalaman, jikalau ada kekeliruan dalam penafsiran atau penejelasannya, maka mohon untuk diluruskan. Semoga ini dapat memmenolong khususnya bagi Anda yang sedang berguru menampilkan data yang tersimpan di database MySQL memakai cara yang lebih simpel yaitu menggunakn Data Tables

Post a Comment for "Menampilkan Data Dalam Database Memakai Data Tables"