Codeigniter PHP

Menampilkan data database menggunakan codeigniter + datatable
2022-01-06 10:44:34
Admin
Author :Admin

Author Content Creator
Menampilkan data database menggunakan codeigniter + datatable

Datatable merupakan sebuat framework (kerangka kerja) yang berfungsi untuk menampilkan data dari database dalam bentuk tabel lengkap lengan show record, filter, dan pagination.

Dalam arti kata kita hanya perlu menampilkan data dari database kemudian memanggil datatable dan datatable akan memberikan fitur pencarian, tampil data per record (baris), dan juga pagination. Hmmm.., keren bukan?

Ok, agar lebih mudah dimengerti mari langsung saja kita praktekkan.!

Pertama-tama buat sebuat database. Disini penulis membuat sebuah database dengan nama db_inventori.

 

CREATE DATABASE db_inventori;

Pada database db_inventori buat juga tabel. Disini penulis membuat tabel barang.

CREATE TABLE tbl_barang(

barang_id VARCHAR(10) PRIMARY KEY,

barang_nama VARCHAR(100),

barang_satuan VARCHAR(20),

barang_harga DOUBLE

);

Inputkan beberapa data pada table barang dengan mengeksekusi table berikut:

INSERT INTO tbl_barang (barang_id,barang_nama,barang_satuan,barang_harga) VALUES

('B001','Sampo Clear Men 100ml','Pcs',12000),

('B002','Mie Goreng','Pcs',1900),

('B003','Kratindaeng','Botol',5000);

Kemudian install codeigniter pada webserver Anda. Jika Anda menggunakan XAMPP letakkan file codeigniter Anda pada direktori c://xampp/htdocs. Jika Anda mengunakan WAMPSERVER letakkan file codeigniter Anda pada c://wamp/www.

Jika Anda bingung silahkan baca tentang Installasi Codeigniter pada post penulis sebelumnya.!

Setelah installasi, selanjutnya konfigurasi codeigniter anda dengan meload helper (url) dan library (database), base_url, dan konfigusasi database pada folder aplication/config.

Jika anda bingung, silahkan baca post penulis sebelumnya tentang konfigurasi codeigniter. 

Sekarang penulis anggap Anda telah melakukan instalasi dan konfigurasi yang diperlukan.

Mari kita mulai. Check It Out!

Untuk menampilkan data dari database dengan datatable. Kita membutuhkan file jquery.dataTables.css dan  jquery.dataTables.js. disini penulis juga mengunakan bootstrap untuk mempercantik tampilan.

Jika Anda belum punya jquery.dataTables.css dan  jquery.dataTables.js. Anda bisa mendownload di situs resminya, Atau anda dapat memanfaatkan jquery.dataTables.css dan  jquery.dataTables.js yang penulis sertakan pada sourcode yang bisa anda download di bawah.

 

1. Buat model degan nama M_barang. Adapun isi dari model barang adalah sebagai berikut:

<?php

class M_barang extends CI_Model{

      function show_barang(){

            $hasil=$this->db->query("SELECT * FROM tbl_barang");

            return $hasil;

      }    

}

 

2. Buat Controller dengan nama Barang. Adapun isi dari controller barang adalah sebagai berikut:

<?php

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

class Barang extends CI_Controller {

      function __construct(){

            parent::__construct();

            $this->load->model('m_barang');

      }

     

      public function index(){

            $x['data']=$this->m_barang->show_barang();

            $this->load->view('v_barang',$x);

      }

}

 

3. Buat view dengan nama v_barang. Adapun isi dari view barang adalah sebagai berikut:

<!DOCTYPE html>

<html lang="id">

<head>

      <meta charset="utf-8">

      <title>Data Barang</title>

      <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet">

    <link href="<?php echo base_url().'assets/css/jquery.dataTables.min.css'?>" rel="stylesheet">

</head>

<body>

 

<div class="container">

      <h1>Data <small>Barang! </small></h1>

      <table class="table table-bordered table-striped" id="mydata">

            <thead>

                  <tr>

                        <td>Kode Barang</td>

                        <td>Nama Barang</td>

                        <td>Satuan</td>

                        <td>Harga</td>

                  </tr>

            </thead>

            <tbody>

                  <?php

                        foreach($data->result_array() as $i):

                              $barang_id=$i['barang_id'];

                              $barang_nama=$i['barang_nama'];

                              $barang_satuan=$i['barang_satuan'];

                              $barang_harga=$i['barang_harga'];

                  ?>

                  <tr>

                        <td><?php echo $barang_id;?> </td>

                        <td><?php echo $barang_nama;?> </td>

                        <td><?php echo $barang_satuan;?> </td>

                        <td><?php echo $barang_harga;?> </td>

                  </tr>

                  <?php endforeach;?>

            </tbody>

      </table>

     

</div>

 

<script src="<?php echo base_url().'assets/js/jquery-2.2.4.min.js'?>"> </script>

<script src="<?php echo base_url().'assets/js/bootstrap.js'?>"> </script>

<script src="<?php echo base_url().'assets/js/jquery.dataTables.min.js'?>"> </script>

<script src="<?php echo base_url().'assets/js/moment.js'?>"> </script>

<script>

      $(document).ready(function(){

            $('#mydata').DataTable();

      });

</script>

</body>

</html>

 

Silahkan jalankan project anda dengan memanggil controller barang pada url.