Meload data dari database dengan ajax dan datatable menggunakan codeigniter

Meload data dari database dengan ajax dan datatable menggunakan codeigniter

Sebuah website yang cepat merupakan dambaan setiap developer web.  Banyak keluhan dari developer web tentang kecepatan akses ketika mengunakan datatable.

Ya, datatable memang meload semua data dari suatu tabel pada suatu database sesuai dengan query.

Kemudian baru di rubah kedalam bentuk datatable sehingga ada filter, sort, dan pagination. Ketika data yang diload masih berjumlah ratusan record tidak ada masalah terlihat.

Akan tetapi ketika data yang diload telah mencapai puluhan ribu record akan terlihat masalah lamanya data yang diload sehingga sering mengalami not responding pada browser.

Jika dilimit datanya menggunakan pagination bawaan codeigniter. Akan membuat akses load data menjadi lebih cepat. Akan tetapi, masih kurang cepat dikarenakan pagination bawaan codeigniter harus me-reload semua page (halaman) untuk menampilkan data dan juga filter yang juga harus mereload semua page untuk mencari data tertentu.

Adakah cara agar load data dari database menjadi cepat dan tetap menggunakan datatable?

Hmm.,Ada, yaitu meload data mengunakan AJAX (Asynchronous Javascript And XML).

Sebelum masuk ke pembahasan. Ada beberapa file yang harus dipersiapkan yaitu: bootstrap dan jquery datatable. Anda bisa mendownloadnya di official websitenya. Jika anda tidak ingin downloadnya atau bingung bagaimana mendownloadnya. Jangan khawatir karena telah saya siapkan semua yang butuhkan didalam source code yang bisa anda download di akhir tutorial ini.

OK, tanpa basa-basi lagi langsung saja kita mulai!


1. Buat database dengan mengeksekusi query berikut:

CREATE DATABASE db_inventori;
USE db_inventori;

CREATE TABLE tbl_barang(
barang_kode VARCHAR(15) PRIMARY KEY,
barang_nama VARCHAR(100),
barang_harga DOUBLE
)ENGINE INNODB;

2. Insert beberapa data dengan mengeksekusi query berikut:

INSERT INTO tbl_barang(barang_kode,barang_nama,barang_harga) VALUES
('8995227501121','Panther Energy Power Red',4000),
('8992388133529','Oceana Sea Salt Lemonade',5000),
('8992761136031','Sprite 250ml',8000);

3. Install codeigniter

Extract codeigniter ke www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP). Kemudian rename project codeigniter anda sesuai dengan project Anda. Disini penulis memberi nama ci_ajax.

 

4. Konfigusai beberapa file berikut:

Buka application/config/autoload.php atur menjadi seperti berikut:

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

Buka application/config/config.php dan atur menjadi seperti berikut:

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

Terakhir buka application/config/database.php

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

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'db_inventori',
        '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
);

5. Buat controller dengan nama Barang.php dengan coding sebagai berikut:

<?php
class Barang extends CI_Controller{
        function __construct(){
                parent::__construct();
                $this->load->model('m_barang');
        }
        function index(){
                $this->load->view('v_barang');
        }

        function data_barang(){
                $data=$this->m_barang->barang_list();
                echo json_encode($data);
        }
}

6. Buat model dengan nama M_barang.php dengan coding sebagai berikut:

<?php
class M_barang extends CI_Model{

        function barang_list(){
                $hasil=$this->db->query("SELECT * FROM tbl_barang");
                return $hasil->result();
        }
        
}

7. Buat View dengan nama v_barang.php dengan coding sebagai berikut:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>List Barang</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/jquery.dataTables.css'?>">
</head>
<body>
<div class="container">
        <!-- Page Heading -->
        <div class="row">
            <h1 class="page-header">Data
                <small>Barang</small>
            </h1>
        </div>
        <div class="row">
                <table class="table table-striped" id="mydata">
                        <thead>
                                <tr>
                                        <th>Kode</th>
                                        <th>Nama Barang</th>
                                        <th>Harga</th>
                                </tr>
                        </thead>
                        <tbody id="show_data">
                                
                        </tbody>
                </table>
        </div>
</div>

<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery.js'?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery.dataTables.js'?>"></script>
<script type="text/javascript">
        $(document).ready(function(){
                tampil_data_barang();   //pemanggilan fungsi tampil barang.
                
                $('#mydata').dataTable();
                 
                //fungsi tampil barang
                function tampil_data_barang(){
                    $.ajax({
                        type  : 'ajax',
                        url   : '<?php echo base_url()?>index.php/barang/data_barang',
                        async : false,
                        dataType : 'json',
                        success : function(data){
                            var html = '';
                            var i;
                            for(i=0; i<data.length; i++){
                                html += '<tr>'+
                                                '<td>'+data[i].barang_kode+'</td>'+
                                        '<td>'+data[i].barang_nama+'</td>'+
                                        '<td>'+data[i].barang_harga+'</td>'+
                                        '</tr>';
                            }
                            $('#show_data').html(html);
                        }

                    });
                }

        });

</script>
</body>
</html>

 

Sekian tutorial tentang Meload data dari database dengan ajax dan datatable menggunakan codeigniter. Jangan lupa share siapa tahu tutorial ini bermanfaat untuk teman Anda!

Download Source

Share:




LAINNYA UNTUK ANDA


Komentar (15)

Jawaldi, 16 June 2017 14:32 - Reply

cara menampilkan format mata uang di harga nya bagaimana cara ny bang

M Fikri, 15 January 2018 20:51 - Reply

Tambahkan funtion ini pada javascripnya gan:
//format number
function numberWithCommas(x) {
return x.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
}
setelah itu panggil harganya menjadi seperti berikut:
'<td>'+numberWithCommas(data[i].barang_harga)+'</td>'+

Moh Hyang Hidayat, 18 January 2018 15:03 - Reply

Gan, ini udah masuk ke serverside gak ?

M Fikri, 18 January 2018 16:29 - Reply

Belum gan,
kalo untuk server-side processing silahkan cek di pencarian gan!

adin pai, 26 January 2018 20:11 - Reply

gan, ane berhasil gan.. tapi.. show entriesnya 0 Showing 0 to 0 of 0 entries pagination gak bisa juga page perhalaman gak bisa juga kenapa ya gan

M Fikri, 26 January 2018 23:00 - Reply

Datanya udah ada belum gan?
jika masih bermasalah, download aja source code-nya gan!

kuat supriyadin, 27 February 2018 14:56 - Reply

ngerunnya gimana

Alvian Cahyadi, 21 May 2018 14:40 - Reply

gan kalo untuk show and hide datatable nya gimana ya?

sofyan, 20 July 2018 09:35 - Reply

Jika ditambahkan link untuk ke halaman view/ detail nya bagaimana ya mas?

Akinari Kun, 12 February 2019 21:24 - Reply

Gan, kalo muncul pesan error kayak gini gimana nih .. jquery.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

M Fikri, 31 March 2019 10:21 - Reply

Ganti:

async : false,

menjadi: 

async : true,

Problem Solved.

Lingga Fernando, 10 March 2019 15:11 - Reply

datanya kok ngak tampil ya?

M Fikri, 11 March 2019 10:43 - Reply

Mas Lingga, mohon cek Jquery-nya apakah udah berjalan dengan benar?

ganteng, 14 June 2019 10:26 - Reply

mantap gan thanks

Dasep Depiyawan, 03 September 2020 16:08 - Reply

gan ko ini gue pake di jalanin di hosting bisa

Leave a Comment