Codeigniter PHP

Meload data dari database dengan ajax dan datatable menggunakan codeigniter
2022-01-07 02:29:53
Admin
Author :Admin

Author Content Creator
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:

1
2
3
4
5
6
7
8
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:

1
2
3
4
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:

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

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

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

Terakhir buka application/config/database.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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:

1
2
3
4
5
6
7
8
9
<?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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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!