Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 3

Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 3
10 Juli 2021 09:38 Fauzan (Codekop) 14,965x
PHP jQuery Bootstrap CodeIgniter

Halo Semua sahabat codekop.com, kali ini saya ingin membagi pengalaman cara membuat DataTables Serverside dengan CodeIgniter, dari kalian yang suka ngulik-ngulik website, khususnya pada backend development, kalian pasti cukup tau dengan DataTables, Ya Datatables merupakan library untuk menampilkan data dengan mengubah bentuk table, ke dalam fitur-fitur seperti search, filter, pagination, show perpage, sort by dan sebagainya.

Membuat tabel dengan library dataTables secara biasa tentu sudah sering kalian lakukan. Namun berbeda caranya jika dilakukan secara ServerSide dan pada framework codeigniter.

 

Mengapa Harus Serverside ?

Karena jika data kalian masih sedikit yang harus load, maka biasanya gak ada masalah, tetapi jika data kalian yang sudah banyak, misal sudah ribuan, ratusan ribu atau jutaan, sering sekali mengalami kendala seperti tidak terload nya data, atau not responding pada browser karena banyak loop data yang di sajikan dalam 1 halaman. Hal ini membebankan server karena meload data terlalu lama, dan biasanya kadang data tersebut tidak terproses dengan baik.

Jadi solusi terbaik adalah datatables serverside processing.

Dengan melibatkan semua pemrosesan pada sisi server akan membuat sisi client menjadi ringan dan cepat. hal ini disebabkan data tidak diload secara keseluruhan dari database. Melainkan dilimit oleh sisi server sesuai dengan request yang dilkukan clientside. Dengan begitu, berapun jumlah record yang akan ditampilkan tidak ada lagi masalah terlihat, mengikuti request yang dilakukan clientside.

 

Nah langsung saya kita praktekan :

Pertama-tama anda harus punya dulu file CodeIgniter, langsung aja download codeigniter di www.codeigniter.com , saya memakai versi 3.1.11 atau yang stabilnya.

1. Selanjutnya anda buat databasenya  saya beri namanya dbnya lab_serverside atau copykan saya code dibawah ini simpan dengan nama dengan akhiran .sql lalu buat database pada phpmyadmin dan import :

-- phpMyAdmin SQL Dump
-- version 4.9.1
-- https://www.phpmyadmin.net/
--
-- Host: localhost
-- Generation Time: Jan 18, 2020 at 07:37 AM
-- Server version: 10.4.8-MariaDB
-- PHP Version: 7.3.10

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `lab_serverside`
--

-- --------------------------------------------------------

--
-- Table structure for table `artikel`
--

CREATE TABLE `artikel` (
  `id_artikel` int(11) NOT NULL,
  `judul` varchar(255) NOT NULL,
  `kategori` varchar(255) NOT NULL,
  `penulis` varchar(255) NOT NULL,
  `tgl_posting` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `artikel`
--

INSERT INTO `artikel` (`id_artikel`, `judul`, `kategori`, `penulis`, `tgl_posting`) VALUES
(1, 'Pengenalan HTML', 'HTML', 'Joe Doe', '2020-01-11 02:06:12'),
(2, 'Pengenalan CSS', 'CSS', 'Joe Doe', '2020-01-11 00:00:00'),
(3, 'Pengenalan PHP', 'PHP', 'Joe Doe', '2020-01-11 02:06:12'),
(4, 'Pengenalan JavaScript', 'JS', 'Joe Doe', '2020-01-11 00:00:00'),
(5, 'Pengenalan MySQL', 'mysql', 'Joe Doe', '2020-01-11 00:00:00'),
(6, 'Advanced PHP', 'PHP', 'Joe Doe', '2020-01-11 00:00:00'),
(7, 'Pengenalan Vue JS', 'JS', 'Joe Doe', '2020-01-11 00:00:00'),
(8, 'Framework PHP', 'PHP', 'Joe Doe', '2020-01-11 00:00:00'),
(9, 'Basic CodeIgniter', 'PHP', 'Joe Doe', '2020-01-11 00:00:00');

-- --------------------------------------------------------

--
-- Table structure for table `kategori`
--

CREATE TABLE `kategori` (
  `id_kategori` int(11) NOT NULL,
  `nama_kategori` varchar(255) NOT NULL,
  `tgl_buat` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `kategori`
--

INSERT INTO `kategori` (`id_kategori`, `nama_kategori`, `tgl_buat`) VALUES
(1, 'Tutorial', '2020-01-12 00:00:00'),
(2, 'Teknologi', '2020-01-12 00:00:00'),
(3, 'Database', '2020-01-12 00:00:00'),
(4, 'Pemrograman', '2020-01-12 00:00:00'),
(5, 'JavaScript', '2020-01-12 00:00:00'),
(6, 'Framework', '2020-01-12 00:00:00');

-- --------------------------------------------------------

--
-- Table structure for table `subkat`
--

CREATE TABLE `subkat` (
  `id_subkat` int(11) NOT NULL,
  `subkat` varchar(255) NOT NULL,
  `id_kategori` int(11) NOT NULL,
  `tgl_add` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `subkat`
--

INSERT INTO `subkat` (`id_subkat`, `subkat`, `id_kategori`, `tgl_add`) VALUES
(1, 'HTML', 1, '2020-01-12 00:00:00'),
(2, 'CSS', 1, '2020-01-12 00:00:00'),
(3, 'PHP', 1, '2020-01-12 00:00:00'),
(4, 'JavaScript', 1, '2020-01-12 00:00:00'),
(5, 'Gojek', 2, '2020-01-12 00:00:00'),
(6, 'Grab', 2, '2020-01-12 00:00:00'),
(7, 'MySQL', 3, '2020-01-12 00:00:00'),
(8, 'MongoDB', 3, '2020-01-12 00:00:00'),
(9, 'PHP', 4, '2020-01-12 00:00:00'),
(10, 'Golang', 4, '2020-01-12 00:00:00'),
(11, 'Node JS', 4, '2020-01-12 00:00:00'),
(12, 'Phyton', 4, '2020-01-12 00:00:00'),
(13, 'Ruby', 4, '2020-01-12 00:00:00'),
(14, 'ASP', 4, '2020-01-12 00:00:00'),
(15, 'Vue JS', 5, '2020-01-12 00:00:00'),
(16, 'React JS', 5, '2020-01-12 00:00:00'),
(17, 'Angular JS', 5, '2020-01-12 00:00:00'),
(18, 'jQuery', 5, '2020-01-12 00:00:00'),
(19, 'CodeIgniter', 6, '2020-01-12 00:00:00'),
(20, 'Laravel', 6, '2020-01-12 00:00:00'),
(21, 'Symfony', 6, '2020-01-12 00:00:00'),
(22, 'Ruby On Rails', 6, '2020-01-12 00:00:00');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `artikel`
--
ALTER TABLE `artikel`
  ADD PRIMARY KEY (`id_artikel`);

--
-- Indexes for table `kategori`
--
ALTER TABLE `kategori`
  ADD PRIMARY KEY (`id_kategori`);

--
-- Indexes for table `subkat`
--
ALTER TABLE `subkat`
  ADD PRIMARY KEY (`id_subkat`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `artikel`
--
ALTER TABLE `artikel`
  MODIFY `id_artikel` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;

--
-- AUTO_INCREMENT for table `kategori`
--
ALTER TABLE `kategori`
  MODIFY `id_kategori` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

--
-- AUTO_INCREMENT for table `subkat`
--
ALTER TABLE `subkat`
  MODIFY `id_subkat` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=23;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

 

2. Install CodeIgniter

Langkah berikut nya install CodeIgniternya ke htdocs jika menggunakan XAMPP lalu rename folder tersebut dengan nama serverside

3. Konfigurasi CodeIgniter

  1. setting file autoload.php pada folder application/config/autoload.php
     
    $autoload['libraries'] = array('database');
$autoload['helper'] = array('url');
  2. lalu setting file config.php pada folder application/config/config.php

     
    $config['base_url'] = "http://".$_SERVER['HTTP_HOST'];
$config['base_url'] .= preg_replace('@/+$@','',dirname($_SERVER['SCRIPT_NAME'])).'/';


$config['index_page'] = '';

     

  3. lalu connect kan database anda ke CodeIgniter, setting file datatabase.php pada folder application/config/database.php

     
    $active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'lab_serverside',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);


  4. dan terakhir buat file .htaccess untuk menghilangkan penggunaan index.php pada tangkapan url :

    RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

     

4. Langkah selanjutnya buatlah Model dengan nama M_Datatables.php taruh di folder application/models dengan kode berikut :

<?php
/**
 * Models     : Datatables serverside based php
 * Modified   : Fauzan Falah
 * Website    : https://www.codekop.com/
 * 
 * 
 * 
 * 
 */
    class M_Datatables extends CI_Model
    {
        function __construct()
        {
            parent::__construct();
        }
 
        function get_tables($tables,$cari,$iswhere)
        {
            // Ambil data yang di ketik user pada textbox pencarian
            $search = htmlspecialchars($_POST['search']['value']);
            // Ambil data limit per page
            $limit = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['length']}");
            // Ambil data start
            $start =preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['start']}"); 
            
            $query = $tables;
            
            if(!empty($iswhere)){
                $sql = $this->db->query("SELECT * FROM ".$query." WHERE ".$iswhere);
            }else{
                $sql = $this->db->query("SELECT * FROM ".$query);
            }

            $sql_count = $sql->num_rows();

            $cari = implode(" LIKE '%".$search."%' OR ", $cari)." LIKE '%".$search."%'";

            
            // Untuk mengambil nama field yg menjadi acuan untuk sorting
            $order_field = $_POST['order'][0]['column']; 

            // Untuk menentukan order by "ASC" atau "DESC"
            $order_ascdesc = $_POST['order'][0]['dir']; 
            $order = " ORDER BY ".$_POST['columns'][$order_field]['data']." ".$order_ascdesc;

            if(!empty($iswhere)){
                $sql_data = $this->db->query("SELECT * FROM ".$query." WHERE $iswhere AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
            }else{
                $sql_data = $this->db->query("SELECT * FROM ".$query." WHERE (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
            }

            if(isset($search))
            {
                if(!empty($iswhere)){
                    $sql_cari =  $this->db->query("SELECT * FROM ".$query." WHERE $iswhere (".$cari.")");
                }else{
                    $sql_cari =  $this->db->query("SELECT * FROM ".$query." WHERE (".$cari.")");
                }
                $sql_filter_count = $sql_cari->num_rows();
            }else{
                if(!empty($iswhere)){
                    $sql_filter = $this->db->query("SELECT * FROM ".$query."WHERE ".$iswhere);
                }else{
                    $sql_filter = $this->db->query("SELECT * FROM ".$query);
                }
                $sql_filter_count = $sql_filter->num_rows();
            }
            $data = $sql_data->result_array();

            $callback = array(    
                'draw' => $_POST['draw'], // Ini dari datatablenya    
                'recordsTotal' => $sql_count,    
                'recordsFiltered'=>$sql_filter_count,    
                'data'=>$data
            );
            return json_encode($callback); // Convert array $callback ke json
        }

        function get_tables_where($tables,$cari,$where,$iswhere)
        {
            // Ambil data yang di ketik user pada textbox pencarian
            $search = htmlspecialchars($_POST['search']['value']);
            // Ambil data limit per page
            $limit = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['length']}");
            // Ambil data start
            $start =preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['start']}"); 

            $setWhere = array();
            foreach ($where as $key => $value)
            {
                $setWhere[] = $key."='".$value."'";
            }

            $fwhere = implode(' AND ', $setWhere);

            if(!empty($iswhere)){
                $sql = $this->db->query("SELECT * FROM ".$tables." WHERE $iswhere AND ".$fwhere);
            }else{
                $sql = $this->db->query("SELECT * FROM ".$tables." WHERE ".$fwhere);
            }
            $sql_count = $sql->num_rows();

            $query = $tables;
            $cari = implode(" LIKE '%".$search."%' OR ", $cari)." LIKE '%".$search."%'";
            
            // Untuk mengambil nama field yg menjadi acuan untuk sorting
            $order_field = $_POST['order'][0]['column']; 

            // Untuk menentukan order by "ASC" atau "DESC"
            $order_ascdesc = $_POST['order'][0]['dir']; 
            $order = " ORDER BY ".$_POST['columns'][$order_field]['data']." ".$order_ascdesc;

            if(!empty($iswhere)){
                $sql_data = $this->db->query("SELECT * FROM ".$query." WHERE $iswhere AND ".$fwhere." AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
            }else{
                $sql_data = $this->db->query("SELECT * FROM ".$query." WHERE ".$fwhere." AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
            }

            if(isset($search))
            {
                if(!empty($iswhere)){
                    $sql_cari =  $this->db->query("SELECT * FROM ".$query." WHERE $iswhere AND ".$fwhere." AND (".$cari.")");
                }else{
                    $sql_cari =  $this->db->query("SELECT * FROM ".$query." WHERE ".$fwhere." AND (".$cari.")");
                }
                $sql_filter_count = $sql_cari->num_rows();
            }else{
                if(!empty($iswhere)){
                    $sql_filter = $this->db->query("SELECT * FROM ".$tables." WHERE $iswhere AND ".$fwhere);
                }else{
                    $sql_filter = $this->db->query("SELECT * FROM ".$tables." WHERE ".$fwhere);
                }
                $sql_filter_count = $sql_filter->num_rows();
            }

            $data = $sql_data->result_array();
            
            $callback = array(    
                'draw' => $_POST['draw'], // Ini dari datatablenya    
                'recordsTotal' => $sql_count,    
                'recordsFiltered'=>$sql_filter_count,    
                'data'=>$data
            );
            return json_encode($callback); // Convert array $callback ke json
        }

        function get_tables_query($query,$cari,$where,$iswhere)
        {
            // Ambil data yang di ketik user pada textbox pencarian
            $search = htmlspecialchars($_POST['search']['value']);
            // Ambil data limit per page
            $limit = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['length']}");
            // Ambil data start
            $start =preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['start']}"); 

            if($where != null)
            {
                $setWhere = array();
                foreach ($where as $key => $value)
                {
                    $setWhere[] = $key."='".$value."'";
                }
                $fwhere = implode(' AND ', $setWhere);

                if(!empty($iswhere))
                {
                    $sql = $this->db->query($query." WHERE  $iswhere AND ".$fwhere);
                    
                }else{
                    $sql = $this->db->query($query." WHERE ".$fwhere);
                }
                $sql_count = $sql->num_rows();
    
                $cari = implode(" LIKE '%".$search."%' OR ", $cari)." LIKE '%".$search."%'";
                
                // Untuk mengambil nama field yg menjadi acuan untuk sorting
                $order_field = $_POST['order'][0]['column']; 
    
                // Untuk menentukan order by "ASC" atau "DESC"
                $order_ascdesc = $_POST['order'][0]['dir']; 
                $order = " ORDER BY ".$_POST['columns'][$order_field]['data']." ".$order_ascdesc;
    
                if(!empty($iswhere))
                {
                    $sql_data = $this->db->query($query." WHERE $iswhere AND ".$fwhere." AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
                }else{
                    $sql_data = $this->db->query($query." WHERE ".$fwhere." AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
                }
                
                if(isset($search))
                {
                    if(!empty($iswhere))
                    {
                        $sql_cari =  $this->db->query($query." WHERE $iswhere AND ".$fwhere." AND (".$cari.")");
                    }else{
                        $sql_cari =  $this->db->query($query." WHERE ".$fwhere." AND (".$cari.")");
                    }
                    $sql_filter_count = $sql_cari->num_rows();
                }else{
                    if(!empty($iswhere))
                    {
                        $sql_filter = $this->db->query($query." WHERE $iswhere AND ".$fwhere);
                    }else{
                        $sql_filter = $this->db->query($query." WHERE ".$fwhere);
                    }
                    $sql_filter_count = $sql_filter->num_rows();
                }
                $data = $sql_data->result_array();

            }else{
                if(!empty($iswhere))
                {
                    $sql = $this->db->query($query." WHERE  $iswhere ");
                }else{
                    $sql = $this->db->query($query);
                }
                $sql_count = $sql->num_rows();
    
                $cari = implode(" LIKE '%".$search."%' OR ", $cari)." LIKE '%".$search."%'";
                
                // Untuk mengambil nama field yg menjadi acuan untuk sorting
                $order_field = $_POST['order'][0]['column']; 
    
                // Untuk menentukan order by "ASC" atau "DESC"
                $order_ascdesc = $_POST['order'][0]['dir']; 
                $order = " ORDER BY ".$_POST['columns'][$order_field]['data']." ".$order_ascdesc;
    
                if(!empty($iswhere))
                {                
                    $sql_data = $this->db->query($query." WHERE $iswhere AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
                }else{
                    $sql_data = $this->db->query($query." WHERE (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
                }

                if(isset($search))
                {
                    if(!empty($iswhere))
                    {     
                        $sql_cari =  $this->db->query($query." WHERE $iswhere AND (".$cari.")");
                    }else{
                        $sql_cari =  $this->db->query($query." WHERE (".$cari.")");
                    }
                    $sql_filter_count = $sql_cari->num_rows();
                }else{
                    if(!empty($iswhere))
                    {
                        $sql_filter = $this->db->query($query." WHERE $iswhere");
                    }else{
                        $sql_filter = $this->db->query($query);
                    }
                    $sql_filter_count = $sql_filter->num_rows();
                }
                $data = $sql_data->result_array();
            }
            
            $callback = array(    
                'draw' => $_POST['draw'], // Ini dari datatablenya    
                'recordsTotal' => $sql_count,    
                'recordsFiltered'=>$sql_filter_count,    
                'data'=>$data
            );
            return json_encode($callback); // Convert array $callback ke json
        }

        function get_tables_query_csrf($query,$cari, $where,$csrf_name, $csrf_hash)
        {
            // Ambil data yang di ketik user pada textbox pencarian
            $search = htmlspecialchars($_POST['search']['value']);
            // Ambil data limit per page
            $limit = preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['length']}");
            // Ambil data start
            $start =preg_replace("/[^a-zA-Z0-9.]/", '', "{$_POST['start']}"); 

            if($where != null)
            {
                $setWhere = array();
                foreach ($where as $key => $value)
                {
                    $setWhere[] = $key."='".$value."'";
                }
    
                $fwhere = implode(' AND ', $setWhere);

                $sql = $this->db->query($query." WHERE ".$fwhere);
                $sql_count = $sql->num_rows();
    
                $cari = implode(" LIKE '%".$search."%' OR ", $cari)." LIKE '%".$search."%'";
                
                // Untuk mengambil nama field yg menjadi acuan untuk sorting
                $order_field = $_POST['order'][0]['column']; 
    
                // Untuk menentukan order by "ASC" atau "DESC"
                $order_ascdesc = $_POST['order'][0]['dir']; 
                $order = " ORDER BY ".$_POST['columns'][$order_field]['data']." ".$order_ascdesc;
    
                $sql_data = $this->db->query($query." WHERE ".$fwhere." AND (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
                $sql_filter = $this->db->query($query." WHERE ".$fwhere);

                if(isset($search))
                {
                    $sql_cari =  $this->db->query($query." WHERE ".$fwhere." AND (".$cari.")");
                    $sql_filter_count = $sql_cari->num_rows();
                }else{
                    $sql_filter_count = $sql_filter->num_rows();
                }

                $data = $sql_data->result_array();

            }else{

                $sql = $this->db->query($query);
                $sql_count = $sql->num_rows();
    
                $cari = implode(" LIKE '%".$search."%' OR ", $cari)." LIKE '%".$search."%'";
                
                // Untuk mengambil nama field yg menjadi acuan untuk sorting
                $order_field = $_POST['order'][0]['column']; 
    
                // Untuk menentukan order by "ASC" atau "DESC"
                $order_ascdesc = $_POST['order'][0]['dir']; 
                $order = " ORDER BY ".$_POST['columns'][$order_field]['data']." ".$order_ascdesc;
    
                $sql_data = $this->db->query($query." WHERE (".$cari.")".$order." LIMIT ".$limit." OFFSET ".$start);
                $sql_filter = $this->db->query($query);
                
                if(isset($search))
                {
                    $sql_cari =  $this->db->query($query." WHERE (".$cari.")");
                    $sql_filter_count = $sql_cari->num_rows();
                }else{
                    $sql_filter_count = $sql_filter->num_rows();
                }

                $data = $sql_data->result_array();

            }
            
            $callback = array(    
                'draw' => $_POST['draw'], // Ini dari datatablenya    
                'recordsTotal' => $sql_count,    
                'recordsFiltered'=>$sql_filter_count,    
                'data'=>$data
            );
            $callback[$csrf_name] = $csrf_hash; 

            return json_encode($callback); // Convert array $callback ke json
        }

    }

5. lalu buat file controller dengan nama Datatables.php

<?php

    class Datatables extends CI_Controller
    {
        public function __construct()
        {  
            parent::__construct();
            $this->load->model('M_Datatables');
        }

        public function index()
        {
            $this->load->view('home');
        }

        public function onetable()
        {
            $this->load->view('onetable');

        }

        public function tablewhere()
        {
            $this->load->view('tablewhere');

        }

        public function tablequery()
        {
            $this->load->view('tablequery');

        }

        function view_data()
        {
            $tables = "artikel";
            $search = array('judul','kategori','penulis','tgl_posting');
            // jika memakai IS NULL pada where sql
            $isWhere = null;
            // $isWhere = 'artikel.deleted_at IS NULL';
            header('Content-Type: application/json');
            echo $this->M_Datatables->get_tables($tables,$search,$isWhere);
        }

        function view_data_where()
        {
            $tables = "artikel";
            $search = array('judul','kategori','penulis','tgl_posting');
            $where  = array('kategori' => 'php');
            // jika memakai IS NULL pada where sql
            $isWhere = null;
            // $isWhere = 'artikel.deleted_at IS NULL';
            header('Content-Type: application/json');
            echo $this->M_Datatables->get_tables_where($tables,$search,$where,$isWhere);
        }

        function view_data_query()
        {
            $query  = "SELECT kategori.nama_kategori AS nama_kategori, subkat.* FROM subkat 
                       JOIN kategori ON subkat.id_kategori = kategori.id_kategori";
            $search = array('nama_kategori','subkat','tgl_add');
            $where  = null; 
            // $where  = array('nama_kategori' => 'Tutorial');
            
            // jika memakai IS NULL pada where sql
            $isWhere = null;
            // $isWhere = 'artikel.deleted_at IS NULL';
            header('Content-Type: application/json');
            echo $this->M_Datatables->get_tables_query($query,$search,$where,$isWhere);
        }
    }
?>

 

dalam controller disini kita buat 3 kondisi untuk keluaran json untuk datatablesnya, yaitu :

  1. fungsi view_data() : menampilkan data berdasarkan paramater nama table, kolom apa aja yang bisa dicari ($tables, $search,$isWhere) untuk $isWhere digunakan pada kasus table yang ingin memakai parameter where IS NULL 
  2. fungsi view_data_where() : menampilkan data berdasarkan paramater nama table, kolom apa aja yang bisa dicari, dan dengan paramater where untuk kondisi data yang ingin ditampilkan ($tables, $search, $where,$isWhere) dan $isWhere digunakan pada kasus table yang ingin memakai parameter where IS NULL 
  3. fungsi view_data_query() : menampilkan data dengan membuat query sql nya pada paramater $query, kolom apa aja yang bisa dicari ($search), dan dengan paramater where untuk kondisi data yang ingin ditampilkan ($where) pada view_data_query anda bisa tidak membuat kondisi where, hanya tinggal di null bagian variabel $where, atau ingin membuat kondisi where dengan mengisi data array variabel $where  dan  $isWhere digunakan pada kasus table yang ingin memakai parameter where IS NULL 

6. buat view data nya pada folder application/views buat 4 File :

  1. file home.php : disini file utama pada home.php yang merupakan halaman utama nya :

    <!doctype html>
<html lang="en">
    <head>
        <title>Datatables Server Side Tutorial</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS --><!-- BOOTSTRAP 4-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <!-- DATATABLES BS 4-->
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css" />
        <!-- jQuery -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-expand-sm navbar-dark bg-info">
            <div class="container">
                <a class="navbar-brand" href="#">DS CodeIgniter <?php echo CI_VERSION; ?></a>
                <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fa fa-bars text-white"></i>
                </button>
                <div class="collapse navbar-collapse" id="collapsibleNavId">
                    <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
                        <li class="nav-item active">
                            <a class="nav-link" href="javascript:void(0)" onclick="mytable()">One Table </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0)" onclick="mytablewhere()">Table Where</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="javascript:void(0)" onclick="mytablequery()">Tables With SQL JOIN Query</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container mt-5 mb-5">
        <div id="tampil"></div>
        </div>
        <hr/>
            <center>
                Dibuat dengan <i class="fa fa-heart" style="color:red;"></i> Oleh 
                <a href="https://www.codekop.com/" target="_blank">Codekop</a> © <?= date('Y');?>
            </center>
        <br/>

        <!-- DATATABLES BS 4-->
        <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap4.min.js"></script>

        <script>
            function mytable() {
                $('#tampil').load('<?= base_url("datatables/onetable");?>');
            }

            function mytablewhere() {
                $('#tampil').load('<?= base_url("datatables/tablewhere");?>');
            }

            function mytablequery() {
                $('#tampil').load('<?= base_url("datatables/tablequery");?>');
            }

            $('li > a').click(function() {
                $('li').removeClass();
                $('li').parent().addClass('nav-item');
                $(this).parent().addClass('nav-item active');
            });
            // root 
            $('#tampil').load('<?= base_url("datatables/onetable");?>');
        </script>
    </body>
</html>


  2. buat onetable.php

    
<div class="card">
    <div class="card-header"> 
        <h4> Select One Table</h4>
    </div>
    <div class="card-body">
        <table class="table table-striped table-bordered" id="table-artikel">
            <thead>
                <tr>
                    <th> No. </th>
                    <th> Judul Artikel</th>
                    <th> Kategori </th>
                    <th> Penulis </th>
                    <th> Tanggal Posting </th>
                    <th> Aksi </th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<!-- Optional JavaScript -->
<script>
    var tabel = null;
    $(document).ready(function() {
        tabel = $('#table-artikel').DataTable({
            "processing": true,
            "responsive":true,
            "serverSide": true,
            "ordering": true, // Set true agar bisa di sorting
            "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
            "ajax":
            {
                "url": "<?= base_url('datatables/view_data');?>", // URL file untuk proses select datanya
                "type": "POST"
            },
            "deferRender": true,
            "aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
            "columns": [
                {"data": 'id_artikel',"sortable": false, 
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }  
                },
                { "data": "judul" }, // Tampilkan judul
                { "data": "kategori" },  // Tampilkan kategori
                { "data": "penulis" },  // Tampilkan penulis
                { "data": "tgl_posting" },  // Tampilkan tgl posting
                { "data": "id_artikel",
                    "render": 
                    function( data, type, row, meta ) {
                        return '<a href="show/'+data+'">Show</a>';
                    }
                },
            ],
        });
    });
</script>

     

  3. buat tablewhere.php

    <div class="card">
    <div class="card-header">
        <h4> SQL Query With Join</h4>
    </div>
    <div class="card-body">
        <table class="table table-striped table-bordered" id="table-artikel-where">
            <thead>
                <tr>
                    <th> No. </th>
                    <th> Judul Artikel</th>
                    <th> Kategori </th>
                    <th> Penulis </th>
                    <th> Tanggal Posting </th>
                    <th> Aksi </th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
    <!-- Optional JavaScript -->
     <!-- Optional JavaScript -->
<script>
    var tabel = null;
    $(document).ready(function() {
        tabel = $('#table-artikel-where').DataTable({
            "processing": true,
            "responsive":true,
            "serverSide": true,
            "ordering": true, // Set true agar bisa di sorting
            "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
            "ajax":
            {
                "url": "<?= base_url('datatables/view_data_where');?>", // URL file untuk proses select datanya
                "type": "POST"
            },
            "deferRender": true,
            "aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
            "columns": [
                {"data": 'id_artikel',"sortable": false, 
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }  
                },
                { "data": "judul" }, // Tampilkan judul
                { "data": "kategori" },  // Tampilkan kategori
                { "data": "penulis" },  // Tampilkan penulis
                { "data": "tgl_posting" },  // Tampilkan tgl posting
                { "data": "id_artikel",
                "render": 
                function( data, type, row, meta ) {
                    return '<a href="show/'+data+'">Show</a>';
                }
                },
            ],
        });
    });
</script>

     

  4. buat tablequery.php

    
<div class="card">
    <div class="card-header">
        <h4> SQL Query With Join</h4>
    </div>
    <div class="card-body">
        <table class="table table-striped table-bordered" id="table-artikel-query">
            <thead>
                <tr>
                    <th> No. </th>
                    <th> Kategori </th>
                    <th> Sub Kategori </th>
                    <th> Aksi </th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
    <!-- Optional JavaScript -->
     <!-- Optional JavaScript -->
<script>
    var tabel = null;
    $(document).ready(function() {
        tabel = $('#table-artikel-query').DataTable({
            "processing": true,
            "responsive":true,
            "serverSide": true,
            "ordering": true, // Set true agar bisa di sorting
            "order": [[ 0, 'asc' ]], // Default sortingnya berdasarkan kolom / field ke 0 (paling pertama)
            "ajax":
            {
                "url": "<?= base_url('datatables/view_data_query');?>", // URL file untuk proses select datanya
                "type": "POST"
            },
            "deferRender": true,
            "aLengthMenu": [[5, 10, 50],[ 5, 10, 50]], // Combobox Limit
            "columns": [
                {"data": 'id_kategori',"sortable": false, 
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }  
                },
                { "data": "nama_kategori" },  // Tampilkan kategori
                { "data": "subkat" },  // Tampilkan nama sub kategori
                { "data": "id_kategori",
                "render": 
                function( data, type, row, meta ) {
                    return '<a href="show/'+data+'">Show</a>';
                }
                },
            ],
        });
    });
</script>

Ket : Untuk Installasi Boostrap, jQuery dan Datatables nya kita menggunakan CDN yaitu mengambil library tersebut dengan internet, jadi sediakan Internet sebelum mencoba, dan pada kolom Aksi ada link Show, itu belum dibuat silahkan untuk dimodifikasi :)

 

sekarang silahkan masukan http://localhost/serverside/datatables pada address web browser anda, jika semua langkah yang anda lakukan sudah benar maka akan muncul tampilan seperti ini :

   

    

 

Oke, sekian dulu tutuorial kali ini, semoga bermanfaat dan salam Coding !

Source Code : https://github.com/fauzan1892/datatables-serverside-ci3

 

Komentar
Postingan Terkait
Membuat Laporan PDF dengan Dompdf pada CodeIgniter 4 composer
21 Nov 2022 09:09 1.245x
Membuat Laporan PDF dengan Dompdf pada CodeIgniter 4 composer
Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 4
31 Okt 2022 09:34 1.924x
Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 4
Tutorial Membuat Login menggunakan Password Hash dan Password Verify pada CodeIgniter 3
27 Feb 2022 04:29 15.009x
Tutorial Membuat Login menggunakan Password Hash dan Password Verify pada CodeIgniter 3
Membuat Laporan PDF dengan Dompdf di Codeigniter 3 tanpa Composer
18 Agu 2022 24.129x
Membuat Laporan PDF dengan Dompdf di Codeigniter 3 tanpa Composer
Membuat Laporan PDF dengan Dompdf di Codeigniter 3 lewat composer
05 Feb 2021 22:24 4.370x
Membuat Laporan PDF dengan Dompdf di Codeigniter 3 lewat composer
Postingan Terpopuler
Tutorial PHP : Cara Membuat Login dan CRUD OOP dengan PHP PDO dan MySQL
19 Jan 2021 23:16 26.120x
Tutorial PHP : Cara Membuat Login dan CRUD OOP dengan PHP PDO dan MySQL
Membuat Laporan PDF dengan Dompdf di Codeigniter 3 tanpa Composer
18 Agu 2022 24.129x
Membuat Laporan PDF dengan Dompdf di Codeigniter 3 tanpa Composer
CI : Cara Mengatasi Error 404 Page Not Found CodeIgniter pada Server Hosting
16 Mar 2020 17:25 20.426x
CI : Cara Mengatasi Error 404 Page Not Found CodeIgniter pada Server Hosting
Tutorial CRUD CodeIgniter 4 Lengkap Untuk Pemula
04 Jun 2020 07:30 16.830x
Tutorial CRUD CodeIgniter 4 Lengkap Untuk Pemula
Tutorial Membuat Login menggunakan Password Hash dan Password Verify pada CodeIgniter 3
27 Feb 2022 04:29 15.009x
Tutorial Membuat Login menggunakan Password Hash dan Password Verify pada CodeIgniter 3
Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 3
10 Jul 2021 09:38 14.966x
Tutorial Cara membuat Datatables Serverside dengan CodeIgniter 3
Tutorial HTML Part 19 : Membuat Layout Website Sederhana dengan HTML dan CSS
01 Mar 2021 06:58 8.265x
Tutorial HTML Part 19 : Membuat Layout Website Sederhana dengan HTML dan CSS
Tutorial Cara Membuat dan Menjalankan File PHP dengan XAMPP
09 Nov 2019 15:13 8.235x
Tutorial Cara Membuat dan Menjalankan File PHP dengan XAMPP
Iklan
diskon 20%