Menampilkan data database menggunakan codeigniter + datatable

Menampilkan data database menggunakan codeigniter + datatable

Hello sahabat programmers, gimana kabarnya? Mudah-mudahan tetap sehat selalu dan tetap semangat terus ngoding-nya hehe.

Oh ya, sebelumnya penulis mohon maaf nich udah lama gak posting. Maklum belakangan ini lagi ada project minimarket jadi gak sempat posting.

Oh ya sekedar informasi. Project minimarket yang penulis kerjakan kemaren, merupakan pengembangan dari project “point of sale” yang pernah penulis bagikan sebelumnya.

Jika Anda belum memilikinya silahkan download pada menu SOURCECODE diatas!.

Hmm..,kali ini penulis ingin membagikan sesuatu yang sangat penting nich. Yaitu menampilkan data dari database menggunakan codeigniter dan databale.

Nah, bagi teman-teman yang baru mendengar istilah datatable mari penulis jelaskan sedikit tentang 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.

Contoh:

http://localhost/ci_datatable/index.php/barang/

Ok sahabat programmers, sekian dulu tutorial kali, semoga bermanfaat!

Download Source

Share:



Komentar (6)

Novian, 13 December 2017 13:38 - Reply

mas buat link edit sama delete nya gimana pas di foreach ?

M Fikri, 14 February 2018 11:12 - Reply

Tepat sekali mas.!

syams, 19 February 2018 20:53 - Reply

kalau ingin men select/menampilkan data tertentu gmna? misalkan say hanya ingin menmpilkan data kode barang 0051?

M Fikri, 20 February 2018 08:08 - Reply

Tinggal ganti query di Model-nya gan menjadi:
SELECT * FROM tbl_barang WHERE kode_barang='0051'

Suryana, 16 May 2018 21:58 - Reply

Gan ane mnta kontak ente gan ane masih bingung kemaren ane download website travel di sini tapi kok database tidak muncul

hafeez, 23 July 2018 13:06 - Reply

Kang, pencerahan yang nampilin link download file dari database, ?

Leave a Comment