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

);

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!

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

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

Order Sekarang.!

Komentar (12)

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'

hafeez, 23 July 2018 13:06 - Reply

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

Naufal, 20 February 2019 09:48 - Reply

Thanks mas.

M Fikri, 28 February 2019 16:49 - Reply

Sama-samamas Naufal.

wisnu, 27 April 2019 06:26 - Reply

mas gimana kalo mau nampilin satu data yang baru kita insert

M Fikri, 29 April 2019 09:10 - Reply

Sederhana, disaat insert ambil id yang baru di insert dengan perintah:

$id = $this->db->insert_id();

kemudian select data berdasarkan id tersebut dan tampilkan di view.!

Dapatkan diskon 75% paket hosting + gratis domain + gratis SSL + extra diskon 5% dengan kupon: MFIKRI