Tutorial Menampilkan Data di CodeIgniter Menggunakan DataTables Server Side
Web Developer | Blogger | Creator of RubyPedia.com
30 Oktober 2017

DataTables adalah salah satu plugin dari JQuery yang sangat populer dalam penggunaanya untuk menampilkan data berupa grid table, DataTables sendiri mempunyai banyak sekali firur-fitur seperti search / pencarian tanpa load page, pagination data yang juga tanpa reload sebuah page.

CodeIgniter adalah sebuah web framework yang dikembangkan dengan bahasa pemrogramman PHP, dan framework ini biasanya dipanggil CI, CodeIgniter sendiri merupakan framework yang sangat populer sekali di indonesia, banyak developer / programmer mengembangkan aplikasi maupun websitenya menggunakan framwork ini, CodeIgniter juga dikenal sebagai framework berukuran kecil dan memiliki kecepatan yang dibilang sangat cepat.

Oke pada tutorial kali ini kita bersama-sama akan belajar bagaimana mengintegrasikan antara DataTables dan CodeIgniter, oke langsung saja.

Buatlah sebuah database baru di, http://localhost/phpmyadmin, beri nama databasenya dengan ci-datatables kemudian import script berikut ini kedalam menu SQL.

-- MySQL dump 10.13  Distrib 5.6.22, for osx10.8 (x86_64)
--
-- Host: localhost    Database: ci-ajax
-- ------------------------------------------------------
-- Server version   5.7.17

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

--
-- Table structure for table `tbl_buku`
--

DROP TABLE IF EXISTS `tbl_buku`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `tbl_buku` (
  `id_buku` int(11) NOT NULL AUTO_INCREMENT,
  `nama_buku` varchar(100) NOT NULL,
  `no_isbn` varchar(100) NOT NULL,
  `penulis` varchar(100) NOT NULL,
  PRIMARY KEY (`id_buku`)
) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=latin1;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `tbl_buku`
--

LOCK TABLES `tbl_buku` WRITE;
/*!40000 ALTER TABLE `tbl_buku` DISABLE KEYS */;
INSERT INTO `tbl_buku` VALUES (1,'Belajar CodeIgniter','110009908796','Fika Ridaul Maulayya'),(2,'Belajar Ajax Dengan Framework CodeIgniter','110009908000','Mahsun Jauhari'),(4,'Belajar Ruby Dengan Mudah','110009908730','Faisal Mahadi'),(5,'Mastering JavaScript ','110009908780','Rizqi Maulana'),(6,'Pintar Android Studio Dalam 7 Hari','110009908770','Abdul Basith'),(7,'Mudah Belajar Ruby on Rails','110009908750','Fika Ridaul Maulayya'),(8,'1 Minggu Mengusai Vue JS','110009908720','Rizqi Maulana'),(9,'Jago React Native','110009908710','Febrian Dwi Putra'),(10,'Laravel For Beginner','110009908711','Rizqi Maulana'),(11,'HTML5 & CSS3 Untuk Pemula','110009908712','Fika Ridaul Maulayya'),(12,'Mastering Photoshop','110009908715','Faisal Mahadi'),(13,'Remastering Aplikasi Android','110009908719','Abdul Basith'),(14,'Pintar Mikrotik','110009908718','Mahsun Jauhari');
/*!40000 ALTER TABLE `tbl_buku` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

-- Dump completed on 2017-10-30 16:08:38

Selanjutnya, buatlah sebuah project dengan CodeIgniter baru, dan konfiguras Codeigniternya seperti berikut ini:

Buka file autoload.php di application/config ubahlah kode berikut ini:

$autoload['libraries'] = array();

Menjadi seperti ini:

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

Selanjutnya buka file routes.php di application/config dan rubat kode berikut ini:

$route['default_controller'] = 'welcome';

Menjadi seperti berikut ini:

$route['default_controller'] = 'home';

Kemudian buka file database.php di application/config dan ubah konfigurasinya menjadi seperti berikut ini:

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

Selanjutnya buatlah sebuah model baru di application/models dan beri nama Web.php berikut kodenya:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
 /**
 * @package  : DataTables - Ruby Pedia
 * @author   : Fika Ridaul Maulayya <ridaulmaulayya@gmail.com>
 * @since    : 2017
 * @license  : https://www.rubypedia.com/
 */
class Web extends CI_Model
{
    public function get_all_buku()
    {
        $query =  $this->db->order_by('id_buku','DESC')->get('tbl_buku');
        return $query->result();
    }
}

Kemudian buatlah sebuah controller baru di application/controllers dengan nama Home.php dan berikut kodenya:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
/**
 * @package  : DataTables - Ruby Pedia
 * @author   : Fika Ridaul Maulayya <ridaulmaulayya@gmail.com>
 * @since    : 2017
 * @license  : https://www.rubypedia.com/
 */
class Home extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        //load model
        $this->load->model('web');
    }

        public function index()
        {
            //create data array
            $data = array(
                'title'     => 'Data Buku',
                'data_buku' => $this->web->get_all_buku()
            );
            //render view with data
            $this->load->view('home',$data);
        }
    }

Selanjutnya buatlah sebuah view di application/views dan beri nama home.php berikut ini kodenya:

<!DOCTYPE html>
<html>
<head>
    <title><?php echo $title ?></title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
</head>
<body>
<div class="container" style="margin-top: 20px">
    <div class="row">
        <div class="col-md-12">
            <h2 style="text-align: center;margin-bottom: 30px">Data Buku Dengan CodeIgniter & DataTables</h2>
            <table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
              <thead>
                <tr>
                    <th>ID Buku</th>
                    <th>No. ISBN</th>
                    <th>Nama Buku</th>
                    <th>Penulis</th>
               <th style="width:125px;">Action
                  </p></th>
                </tr>
              </thead>
              <tbody>
                    <?php 
                        $no = 1;
                        foreach($data_buku as $buku){
                    ?>
                        <tr>
                            <td><?php echo $no++;?></td>
                            <td><?php echo $buku->nama_buku;?></td>
                            <td><?php echo $buku->no_isbn;?></td>
                            <td><?php echo $buku->penulis;?></td>
                            <td style="text-align: center;">
                                <button class="btn btn-sm btn-primary" onclick="edit_book(<?php echo $buku->id_buku;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
                                <button class="btn btn-sm btn-danger" onclick="delete_book(<?php echo $buku->id_buku;?>)"><i class="glyphicon glyphicon-trash"></i></button>
                            </td>
                        </tr>
                    <?php }?>

              </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
  $(document).ready( function () {
      $('#table_id').DataTable();
  } );
</script>
</body>
</html>

Dan coba teman-teman jalankan projectnya dengan mengetikkan di address bar browser http://localhost/folder-project, maka jika berhasil kurang lebih tampilannya seperti berikut ini:

Blog ini telah dibaca sebanyak 5526 kali
CodeIgniter DataTables Server Side JQuery AjaX

Sekilas Tentang Penulis

Fika Ridaul Maulayya
Web Developer | Blogger | Creator of RubyPedia.com

KOMENTAR

blog comments powered by Disqus