Skip to main content
menampilkan tabel dengan datatable gambar 1

Menampilkan Tabel dengan Datatable di Codeigniter

Menampilkan tabel dengan datatable di Codeigniter – sangat praktis dalam membuat sebuah tabel di halaman website. Datatable merupakan plugin dari Jquery , yang mengkhususkan dalam penampilan table. Dengan Datatable anda tidak perlu repot-repot membuat fungsi pagination atau search di tabel yang anda buat. Bahkan tabel anda pun bisa dibuat sangat responsif seperti yang tampak di gambar berikut:

menampilkan tabel dengan datatable gambar 2

Gambar. Datatable Responsif.

Yang dimaksud responsif ini adalah, saat anda mengakses tabel anda terlalu lebar dari layar pc atau handphone. Maka kolom yang tidak cukup ditampilkan, akan disembunyikan dan hanya akan ditampilkan berupa icon ” + “. Sehingga saat icon ” + ” tersebut di klik, maka akan menampilkan data di kolom yang disembunyikan tersebut.

Anda dapat mengakses dan mendownload datatable di halaman situsnya yakni https://datatables.net/. Dan pada tutorial kali ini , saya akan berbagi bagaimana menampilkan data dari database ke dalam tabel dengan datatable di codeigniter.

BACA:

Persiapan Awal Codeigniter

Seperti biasa kita harus melakukan pengaturan awal agar bisa mengakses database dengan codeigniter:

1. Edit application/config/autoload.php dan copas kode berikut:

$autoload['helper'] = array('form','url');
$autoload['libraries'] = array('database');

2. Kemudian buka application/config/config.php dan copas kode di bawah ini, saya menggunakan folder latihan:

$config['base_url'] = 'http://localhost/latihan/';

3.Selanjutnya buka application/config/routes.php dan edit file dibagian ini (yang artinya default controller nya yakni controller ‘utama‘:

$route['default_controller'] = 'utama';

4. Terakhir lakukan konfigurasi database di application/config/database.php dan edit bagian ini sesuai dengan detail database anda:


'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'latihan',

Buat Database

Buat sebuah database dengan nama latihan, kemudian copas kode berikut di sql phpmyadmin:


CREATE TABLE IF NOT EXISTS `tbuser` (
`id_user` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(20) NOT NULL,
`email` varchar(30) NOT NULL,
`no_telp` varchar(20) NOT NULL,
`nisn` varchar(10) NOT NULL,
`kelas` varchar(10) NOT NULL,
`ayah` varchar(30) NOT NULL,
`ibu` varchar(30) NOT NULL,
PRIMARY KEY (`id_user`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `tbuser` (`id_user`, `username`, `email`, `no_telp`, `nisn`, `kelas`, `ayah`, `ibu`) VALUES
(1, 'alexistdev', 'alexistdev@gmail.com', '085602013002', '1811010001', '3 IPA 1', 'thor', 'wonder women'),
(2, 'samantha', 'samantha.18@gmail.com', '085602013002', '1811010002', '3 IPA 1', 'iron man', 'pepper');

Dan hasilnya akan seperti ini:

menampilkan tabel dengan datatable gambar 3

menampilkan tabel dengan datatable gambar 4

Buat File Model

Buat file model M_user.php dan letakkan di directory application/models/M_user.php , kemudian copas kode berikut:


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class M_user extends CI_Model{
  function __construct(){
    parent::__construct();
  }
  function tampil_data(){
    $this->db->select("*");
    $this->db->from("tbuser");
    $hasil = $this->db->get();
    return $hasil;
  }
}

Buat File Controller

Buat file controller Utama.php dan letakkan di directory application/controllers/Utama.php , kemudian copas kode berikut:


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Utama extends CI_Controller {
  function __construct(){
    parent::__construct();
      $this->load->model('m_user');
  }
  public function index(){
    $b['data']=$this->m_user->tampil_data();
    $this->load->view('v_latihan',$b);
  }
}

Buat File View

Dilanjutkan dengan membuat file view v_latihan.php dan diletakkan di directory application/views/v_latihan.php , kemudian copas kode berikut:


<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!-- HEADER -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Latihan Datatable</title>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- DATATABLES -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="myTable" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Nomor</th>
      <th>Username</th>
      <th>Email</th>
      <th>No.Telp</th>
      <th>NISN</th>
      <th>Kelas</th>
      <th>Ayah</th>
      <th>Ibu</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
  <?php
    $no = 1;
    foreach($data->result_array() as $row):
      $username=$row['username'];
      $email=$row['email'];
      $telpon=$row['no_telp'];
      $nisn=$row['nisn'];
      $kelas=$row['kelas'];
      $ayah=$row['ayah'];
      $ibu=$row['ibu'];
  ?>
  <tr>
    <td><?php echo htmlentities($no++, ENT_QUOTES, 'UTF-8');?></td>
    <td><?php echo htmlentities($username, ENT_QUOTES, 'UTF-8');?></td>
    <td><?php echo htmlentities($email, ENT_QUOTES, 'UTF-8');?></td>
    <td><?php echo htmlentities($telpon, ENT_QUOTES, 'UTF-8');?></td>
    <td><?php echo htmlentities($nisn, ENT_QUOTES, 'UTF-8');?></td>
    <td><?php echo htmlentities($kelas, ENT_QUOTES, 'UTF-8');?></td>
    <td><?php echo htmlentities($ayah, ENT_QUOTES, 'UTF-8');?></td>
    <td><?php echo htmlentities($ibu, ENT_QUOTES, 'UTF-8');?></td>
    <td><button class="btn btn-danger">VIEW</button></td>
  </tr>
  <?php endforeach; ?>
  </tbody>
</table>
<script>
  $(document).ready( function () {
    $('#myTable').DataTable();
  } );
</script>
</body>
</html>

Penjelasan Singkat

Data yang ingin ditampilkan dikirimkan dari model ke controller dengan perintah berikut:

$b['data']=$this->m_user->tampil_data();

Yang kemudian, dikirimkan ke view dan di tampilkan ke dalam tabel dalam bentuk array dengan perintah:

<?php
  $no = 1;
  foreach($data->result_array() as $row):
    $username=$row['username'];
    $email=$row['email'];
    $telpon=$row['no_telp'];
    $nisn=$row['nisn'];
    $kelas=$row['kelas'];
    $ayah=$row['ayah'];
    $ibu=$row['ibu'];
?>
<tr>
  <td><?php echo htmlentities($no++, ENT_QUOTES, 'UTF-8');?></td>
  <td><?php echo htmlentities($username, ENT_QUOTES, 'UTF-8');?></td>
  <td><?php echo htmlentities($email, ENT_QUOTES, 'UTF-8');?></td>
  <td><?php echo htmlentities($telpon, ENT_QUOTES, 'UTF-8');?></td>
  <td><?php echo htmlentities($nisn, ENT_QUOTES, 'UTF-8');?></td>
  <td><?php echo htmlentities($kelas, ENT_QUOTES, 'UTF-8');?></td>
  <td><?php echo htmlentities($ayah, ENT_QUOTES, 'UTF-8');?></td>
  <td><?php echo htmlentities($ibu, ENT_QUOTES, 'UTF-8');?></td>
  <td><button class="btn btn-danger">VIEW</button></td>
</tr>
<?php endforeach; ?>

Dengan menggunakan perulangan foreach yang diletakkan setelah tag <tbody> dan sebelum </tbody>. Dengan maksud, hanya bagian isi dari tabel ini yang akan menampilkan data dalam bentuk array, kemudian ditampilkan per barisnya sesuai dengan jumlah row pada database nya.

Dengan echo htmlentities($telpon, ENT_QUOTES, ‘UTF-8’) ini adalah perintah yang digunakan dalam php untuk menampilkan data yang lebih aman,  dalam artian fungsi untuk memfilter output yang akan digunakan di html.

Tetapi sebelumnya anda harus memanggil JQUERY dan DATATABLE terlebih dahulu di header dengan syntax:


<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- DATATABLES -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

Yang kemudian dengan perintah javascript berikut untuk memanggil fungsi datatable nya:


<script>
  $(document).ready( function () {
    $('#myTable').DataTable();
  } );
</script>

Perlu dicatat bahwa , dengan perintah javascript tersebut, anda akan menerapkan efek datatable ke dalam tabel dengan id= “myTable”. Jadi id ini harus ada di attribut tabel anda sebelumnya, dan anda bebas menggunakan nama apa aja untuk id ini. Asal harus sama dengan yang ditulis di attribut id di tabel dan di syntax javascriptnya.

 

Source codenya bisa anda download disini:

download

Leave a Reply

Your email address will not be published. Required fields are marked *