Tutorial Filtering Data Using Javascript and PHP Codeigniter 3

Filter Data Di PHP CodeIgniter

Tutorial CodeIgniter kali ini kita akan membuat Filter data dengan PHP Codeigniter. Silahkan Ikuti langkah-langkah tutorial dibawah ini.

1. Buat Database / Table
Langkah 1. Anda buat dulu database dan table nya silahkan anda jalangkan kode sql dibawah ini

  
CREATE DATABASE ci-tutorial;

  -- Dumping structure for table ci-tutorial.tb_mahasiswa
CREATE TABLE IF NOT EXISTS `tb_mahasiswa` (
  `id` int(20) NOT NULL AUTO_INCREMENT,
  `nim` varchar(50) NOT NULL,
  `nama` varchar(100) NOT NULL,
  `alamat` text NOT NULL,
  `status` enum('Aktif','Tidak Aktif') NOT NULL,
  `angkatan_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=latin1;

-- Dumping data for table ci-tutorial.tb_mahasiswa: ~6 rows (approximately)
/*!40000 ALTER TABLE `tb_mahasiswa` DISABLE KEYS */;
INSERT INTO `tb_mahasiswa` (`id`, `nim`, `nama`, `alamat`, `status`, `angkatan_id`) VALUES
  (7, '14.1401.027', 'tasrin adiputra', 'makassar', 'Aktif', 1),
  (9, '14.1401.024', 'tasrin adiputra', 'makassar', 'Aktif', 2),
  (10, '141401001', 'fia', 'makassar', 'Tidak Aktif', 2),
  (11, '141401001', 'yusuf', 'makassar', 'Aktif', 3),
  (12, '141401003', 'lut', 'makassar', 'Aktif', 3),
  (13, '141401004', 'adi', 'makassar', 'Aktif', 3);
/*!40000 ALTER TABLE `tb_mahasiswa` ENABLE KEYS */;

2. File View
Langkah 2. Silahkan anda buat folder mahasiswa dan buat file didalamnya dengan nama file filter.php

  
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Filter Data Di PHP CodeIgniter</title>
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1 align="center">Belajar Membuat Filter Data dengan Javascript dan PHP CodeIgniter</h1>
    <br>
    <div class="row">     
      <div class="col-md-3">
        <table class="table">
          <tr>
            <td>
              <label><b>Fliter Data</b></label>
              <select name="" class="form-control" id="angkatan">
              <option value="0">Show All</option>
              <option value="1">2017</option>
              <option value="2">2018</option>
              <option value="3">2019</option>
            </select>
            </td>
          </tr>
        </table>
      </div>

      <div class="col-md-9">
        <table class="table table-hover table-striped" id="mahasiswa">
          <thead>
            <tr>
              <td>#</td>
              <td>Nim</td>
              <td>Nama</td>
              <td>Alamat</td>
            </tr>
          </thead>
          <tbody></tbody> 
        </table>      
      </div>
    </div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      //jika data sudah siap maka akan dijalangkan
      mahasiswa();
      $("#angkatan").change(function(){
        // ini dijalankan ketika ada event dari combo box
        mahasiswa();
      });
    });

    function mahasiswa() {
      var angkatan = $("#angkatan").val();
      $.ajax({
        url : "<?= base_url('Filter/load_mahasiswa') ?>",
        data: "angkatan=" + angkatan,
        success:function(data) {
          $("#mahasiswa tbody").html(data);
        }
      });
    }
  </script>
</body>
</html>

3. File Controller
Langkah 3. Anda buat file controllernya dengan nama file Filter.php

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

class Filter extends CI_Controller {

  public function index()
  {
    $data['data']=$this->db->get('tb_mahasiswa')->result();
    $this->load->view('mahasiswa/filter', $data, FALSE);    
  }

  public function load_mahasiswa()
  {
    $angkatan = $_GET['angkatan'];
    if ($angkatan == 0) {
      $data = $this->db->get('tb_mahasiswa')->result();
    }
    else
    {
      $data = $this->db->get_where('tb_mahasiswa', ['angkatan_id'=>$angkatan])->result();
    }
    if (!empty($data)) 
    {
      $no=1; foreach ($data as $row): ?>
      <tr>
        <td><?php echo $no++ ?></td>
        <td><?php echo $row->nim ?></td>
        <td><?php echo $row->nama ?></td>
        <td><?php echo $row->alamat ?></td>
      </tr>
      <?php endforeach ?> <?php
    }
    else
    {
      ?>
        <tr><td align="center">Tidak ada data</td></tr>
      <?php
    }
    
  }

}

/* End of file Filter.php */
/* Location: ./application/controllers/Filter.php */