Tutorial DataTables Database CodeIgniter

Tutorial DataTables Database CodeIgniter

Diperbaharui 7 Agustus 2020 12:23 AM

Pada artikel sebelumnya kita telah belajar cara menggunakan datatables dimana datanya masih statis, maka sekarang kita kembangkan menjadi data yang dinamis menggunakan database dan sedikit modifikasi tampilannya menggunakan semantic ui. Berikut adalah tutorial datatables database codeigniter semantic ui.

1. Download project awal codeigniter [ codeigniter ] → ekstrak → ganti nama menjadi ci-datatables → buka di text editor (jika sebelumnya mengikuti tutorial cara menggunakan datatables cukup lanjutkan saja)

2. Konfigurasi awal codeigniter dan base_url dinamis, kamu bisa baca kedua tutorial tersebut atau lewati jika sudah dilakukan.

3. Buat database dengan nama susantokun_ci_datatables dan masukkan code sql berikut :

/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!50503 SET character_set_client = utf8mb4 */;
CREATE TABLE `tbl_articles` (
  `id` int NOT NULL AUTO_INCREMENT,
  `title` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `description` text CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
/*!40101 SET character_set_client = @saved_cs_client */;
INSERT INTO `tbl_articles` VALUES (1,'CodeIgniter','CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications.'),(2,'Laravel','Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.'),(3,'React JS','A JavaScript library for building user interfaces.'),(4,'Vue JS','The Progressive JavaScript Framework.');

Keterangan :

  • Code sql di atas akan membuat tabel dengan nama tbl_articles (id, title, description)
  • Tambahkan juga nama databasenya pada application/config/database.php

4. Buat controller application/controllers/Article.php dan masukkan code berikut :

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Article extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('Article_model');
    }

    public function index()
    {
        $data['articles'] = $this->Article_model->get_all();
        $this->load->view('article/article_list', $data);
    }
}

/* End of file Article.php */

Keterangan :

  • Pada controller Article memanggil model Article_model
  • Pada function index memanggil function get_all dari Article_model kemudian ditampilkan pada views article/article_list.php

5. Buat model application/models/Article_model.php dan masukkan code berikut :

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Article_model extends CI_Model
{
    private $table = 'tbl_articles';
    private $id = 'tbl_articles.id';

    public function get_all()
    {
        $this->db->select('*');
        $this->db->from($this->table);
        $this->db->order_by($this->id, 'desc');
        $query = $this->db->get();
        return $query->result();
    }
}

/* End of file Article_model.php */

Keterangan :

  • Function get_all memanggil data dari tbl_articles
  • Urutan yang ditampilan berdasarkan id yang descending (urutannya id terbesar akan berada paling atas)

6. Buat views application/views/article/article_list.php dan masukkan code berikut :

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Tutorial DataTables CodeIgniter | SUSANTOKUN</title>
  <link rel="stylesheet" type="text/css" href="<?=base_url('assets')?>/vendor/semantic/dist/semantic.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.semanticui.min.css">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<style media="screen">
  .ui.center.header {
    padding-top: 50px;
  }

</style>

<body>
  <h1 class="ui center aligned header">Tutorial DataTables CodeIgniter | SUSANTOKUN</h1>

  <div class="ui container">
    <table class="ui celled table" style="width:100%" id="table_id">
      <thead>
        <tr>
          <th colspan="3">
            <h4>Data Articles</h4>
          </th>
        </tr>
        <tr>
          <th style="text-align:center">No</th>
          <th>Title</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <?php
        $no=1;
        foreach ($articles as $row): ?>
        <tr>
          <td style="text-align:center">
            <?=$no++?>
          </td>
          <td>
            <?=$row->title?>
          </td>
          <td>
            <?=$row->description?>
          </td>
        </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>
  <script type="text/javascript" src="<?=base_url('assets')?>/vendor/semantic/dist/semantic.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.semanticui.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $('#table_id').DataTable({
        "order": []
      });
    });

  </script>
</body>

</html>

7. Untuk file assets bisa diunduh pada link di bawah kemudian pindahkan ke folder project.

8. Sekarang coba akses http://ci-datatables.test/ maka hasilnya akan seperti gambar berikut :

Tutorial DataTables Database

Jika halaman yang ditampilkan masih halaman datatables yang statis, apa yang harus dilakukan? Kamu hanya perlu mengganti route yang awalnya welcome menjadi article atau kamu bisa akses dengan tambahan article sehingga ci-datatables.test/article.

Itulah tutorial datatables database codeigniter semantic-ui yang dapat saya sampaikan, semoga bermanfaat.

susantokun avatar
susantokun
Lahir di Bumi ini atas perjuangan Ayah dan Ibu yang senantiasa membuat dan mengeluarkan sehingga lahirlah Susanto pada tanggal 27 Maret 1996 di Cianjur - Jawa Barat.
Kebijakan Berkomentar :
  • Dilarang berkomentar yang mengandung SPAM, SARA, HOAX, PORNO.
  • Mohon sertakan informasi detail saat terjadi error (pesan error, sreenshoot, code, logs, dsb.).
Silakan baca terlebih dahulu kebijakan berkomentar sebelum berkomentar.
KOMENTAR TERBARU