Tutorial Codeigniter 4 Server Side Datatables, hello Codeigniter lover’s this Codeigniter 4 tutorial will guide you how to use and implemetation server side datatables in your Codeigniter 4 project.
I hope this tutorial will help you to use server-side datatables in your Codeigniter 4 application project, so let’s scrool this tutorial below.
Halo, pada kesempatan kali ini kami ingin berbagi kepada Anda tentang cara bagaimana menggunakan server-side datatables pada project aplikasi web menggunakan framework Codeigniter 4. Sehingga dengan menemukan tutorial Codeigniter 4 Server Side Datatables ini diharapkan Anda dapat menerapkannya pada aplikasi Anda.
Adapun penggunaan server-side datatables disini saya akan memanfaatkan CodeIgniter4 DataTables Library yang dibuat oleh Hermawan Ramadhan. Dengan begitu untuk dapat menggunakan library CodeIgniter4 DataTables, maka kamu terlebih dahulu harus menginstallnya pada project Codeigniter4 Anda. Namun, sebelum jauh melangkah alangkah baiknya kita definisikan dahulu langkah-langkah nya seperti berikut.
Berikut adalah langkah-langkah menggunakan library Codeigniter 4 Server Side Datatables pada project Codeigniter 4.
Persiapan Project.
- Membuat project Codeigniter 4
- Database Configuration
- Database Migration
- Data Dummy dengan library Faker
- Installing CodeIgniter4-DataTables Library
- Membuat Model
- Membuat Controller
- Membuat Views
- Menambahkan Route
- Menjalankan project
Oke langsung saja kita eksekusi langkah-langkah diatas.
- Membuat project Codeigniter
Ya, untuk dapat menggunakan framework Codeigniter 4 pada pekerjaan kamu, maka terlebih dahulu kamu harus men-download framework Codeigniter disitus resmi Codeigniter. Oke jika sebelumnya kamu belum men-download maka downloadlah terlebih dahulu framework Codeigniter 4 tersebut melalui situs resminya.
Setelah berhasil men-download framework Codeigniter 4 maka langkah selanjutnya adalah membuat project pekerjaan pada local server. Jika kamu menggunakan Wamp sebagai web server pada lokal komputer kamu maka kamu dapat membuat project di folder “www/namaproject”, dan jika kamu menggunakan XAMPP sebagai web server di lokal komputer kamu maka kamu dapat membuat project pekerjaan di folder “htdocs/namaproject”.
Setelah berhasil membuat project, langkah selanjutnya yang perlu dilakukan adalah meng-ekstrak framework Codeigniter 4 yang telah berhasil kamu download, oke sekarang ekstrak framework Codeigniter 4 yang telah berhasil kamu download ke dalam folder pekerjaan yang telah dibuat.
Diatas adalah cara manual melakukan instalasi project Codeigniter 4 untuk memulai pekerjaan mu.
Selain menggunakan langkah diatas untuk membuat project Codeigniter 4, kamu juga dapat melakukannya dengan menginstalnya melalui jendela Terminal/ Command Prompt dengan perintah composer, oke pastikan jendela Terminal/ Command Prompt kamu telah aktif pada folder www lalu jalankan perintah composer seperti berikut:
composer create-project codeigniter4/appstarter namaproject
Perintah composer tersebut akan membuat sebuah project Codeigniter 4 pada folder lokal server komputer mu.
- Database Configuration
Langkah selanjutnya adalah melakukan konfigurasi database project. Oke terlebih dahulu buatlah sebuah database pada MySQL. Sejauh ini Codeigniter 4 telah menyediakan dua (2) cara untuk melakukan konfigurasi database, yaitu pertama dengan melakukan pengaturan file “Database.php” yang terdapat pada folder “app/Config”. Dan cara yang kedua dapat dilakukan dengan mengaturnya pada file environment “.env” yang terdapat pada root project Codeigniter 4.
Kemudian lakukan konfigurasi database sesuai kebutuhan, misalkan melalui environment file seperti berikut:
database.default.hostname = localhost
database.default.database = nama_database //nama database project
database.default.username = root //username database
database.default.password = root //password database kosongkan jika tidak ada
database.default.DBDriver = MySQLi- Database Migration
Untuk membuat sebuah tabel pada project Codeigniter4 dapat dilakukan dengan perintah-perintah database migration. Untuk menjalankan database migration dapat dilakukan melalui jendela Terminal/ Command Prompt. Oke masih aktif pada jendela Terminal/ Command Prompt dan pastikan jendela Terminal/ Command Prompt aktif pada folder project Codeigniter4, lalu jalankan perintah database migration berikut untuk membuat tabel “pegawai”.
php spark migrate:create pegawai
Perintah diatas akan meng-generate satu file migration pada folder “Database/Migrations”.
Kemudian langkah selanjutnya adalah melakukan modifikasi pada file migration, oke buka file migration yang berhasil kita buat lalu lakukan modifikasi dengan menambahkan beberapa kebutuhan code untuk membentuk kebutuhan kolom-kolom yang diperlukan pada tabel pegawai, misalnya seperti contoh berikut :
<?php namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;
class Pegawai extends Migration
{
public function up()
{
$this->forge->addField([
'id_pegawai' => [
'type' => 'INT',
'constraint' => 11,
'unsigned' => true,
'auto_increment' => true,
],
'nama' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'tanggal_lahir' => [
'type' => 'Date',
'null' => false,
],
'pekerjaan' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'email' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'alamat' => [
'type' => 'VARCHAR',
'constraint' => '150',
],
]);
$this->forge->addKey('id_pegawai', true);
$this->forge->createTable('pegawai');
}
//--------------------------------------------------------------------
public function down()
{
$this->forge->dropTable('pegawai');
}
}
Selanjutnya adalah melakukan migrate untuk menciptakan tabel pegawai pada database project, seperti berikut :
php spark migrate
Jika berjalan dengan baik, maka akan kamu jumpai sebuah tabel “pegawai” pada database project Codeigniter4. Anda dapat mengeceknya pada database MySQL.
- Data Dummy dengan library Faker
Untuk menampilkan data menggunakan library codeigniter 4 server-side datatables pada project Codeigniter4, maka kamu akan membutuhkan beberapa contoh data yang perlu kamu sertakan pada tabel “pegawai”. Untuk memudahkan kamu meng-generate beberapa contoh data pegawai, kamu dapat lakukan dengan memanfaatkan library Faker untuk menciptakan data dummy.
Jalankan perintah berikut untuk menginstall library faker pada project Codeigniter4 :
composer require fzaninotto/faker
Setelah terinstall lanjutkan dengan membuat sebuah file seeder pada folder “Database/Seeds”, lalu lakukan modifikasi seperti contoh berikut :
<?php namespace App\Database\Seeds;
use Faker\Factory as Faker;
class PegawaiSeeder extends \CodeIgniter\Database\Seeder
{
public function run()
{
$faker = Faker::create('id_ID');
for($i=1; $i <= 100; $i++){
$this->db->table('pegawai')->insert([
'nama' => $faker->name,
'tanggal_lahir' => $faker->date,
'pekerjaan' => $faker->jobTitle,
'email' => $faker->email,
'alamat' => $faker->address
]);
}
}
}
Lalu lanjutkan dengan menjalankan perintah seeder seperti berikut :
php spark db:seed PegawaiSeeder
Jika berjalan dengan baik, maka kamu akan menjumpai beberapa contoh data pegawai pada tabel “pegawai” seperti yang kamu perintahkan pada perulangan for diatas.
- Installing CodeIgniter4-DataTables Library
Langkah selanjutnya adalah melakukan instalasi library CodeIgniter4-DataTables melalui jendela Terminal/ Command Prompt, oke masih aktif pada root project Codeigniter4 lalu jalankan perintah composer berikut untuk menginstall library CodeIgniter4-DataTables.
composer require hermawan/codeigniter4-datatables
Kemudian dilanjutkan dengan melakukan integrasi library CodeIgniter4-DataTables pada file “app\Config\Autoload.php”, tambahkan kode berikut pada baris kode $classmap seperti contoh berikut :
$classmap = [
'PHPSQLParser' => APPPATH .'ThirdParty/php-sql-parser/src/PHPSQLParser', // <-- namespace for php-sql-parser
'Hermawan\DataTables' => APPPATH .'ThirdParty/codeigniter4-datatables/src', // <-- namespace for this library
];
- Membuat Model
Buatlah sebuah file model misalkan “PegawaiModel.php” pada project Codeigniter4 kamu pada folder “app\Models”, lalu lakukan modifikasi dengan menambahkan kode berikut :
<?php namespace App\Models;
use CodeIgniter\Model;
class PegawaiModel extends Model
{
protected $table = 'pegawai';
protected $primaryKey = 'id_pegawai';
protected $allowedFields = ['nama', 'tanggal_lahir','pekerjaan','email','alamat'];
}
- Membuat Controller
Selanjutnya buatlah sebuah file controller misalkan “PegawaiController.php” pada folder “app\Controllers”, kemudian dengan memanfatkan library CodeIgniter4-DataTables lakukan modifikasi seperti contoh berikut untuk untuk memanfaatkan fungsi server side dari library CodeIgniter4-DataTables :
<?php namespace App\Controllers;
use \CodeIgniter\Controller;
use \Hermawan\DataTables\DataTable;
class PegawaiController extends Controller
{
public function index()
{
$data['script'] = view('pegawai/script');
$data['content'] = view('pegawai/index');
return view('template/_template',$data);
}
public function ajaxDataTables()
{
$db = db_connect();
$pegawai = $db->table('pegawai')->select('nama, tanggal_lahir, pekerjaan, email, alamat');
return DataTable::of($pegawai)->addNumbering()->toJson();
}
}
- Membuat Views
Selanjutnya buatlah dua buah file view yaitu “index.php” dan “script.php” pada folder “app\Views\pegawai” perhatikan disini saya menambahkan juga satu buah folder dengan nama “pegawai”.
app\Views\pegawai\index.php
<div class="right_col" role="main">
<div class="">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<div class="clearfix"></div>
</div>
<div class="x_content">
<table id="table" class="table table-striped table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Tanggal Lahir</th>
<th>Pekerjaan</th>
<th>Email</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
app\Views\pegawai\script.php
<script type="text/javascript">
$(document).ready(function() {
$('#table').DataTable({
processing: true,
serverSide: true,
ajax: "<?php echo site_url('public/ajax-datatable')?>",
});
});
</script>
Dan jangan lupa pada file primary template pastikan kamu sudah memanggil plugin datatable seperti pada contoh file berikut.
app\Views\template\_template.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gentelella Alela! | </title>
<!-- Bootstrap -->
<link href="<?php echo base_url();?>/public/assets/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="<?php echo base_url();?>/public/assets/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="<?php echo base_url();?>/public/assets/vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- bootstrap-daterangepicker -->
<link href="<?php echo base_url();?>/public/assets/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<!-- Datatables -->
<link href="<?php echo base_url();?>/public/assets/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="<?php echo base_url();?>/public/assets/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="<?php echo base_url();?>/public/assets/vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
<link href="<?php echo base_url();?>/public/assets/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="<?php echo base_url();?>/public/assets/vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="<?php echo base_url();?>/public/assets/build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Jogjatech.com</span></a>
</div>
<div class="clearfix"></div>
<!-- menu profile quick info -->
<div class="profile clearfix">
<div class="profile_pic">
<img src="<?php echo base_url();?>/public/assets/images/img.jpg" alt="" class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>John Doe</h2>
</div>
</div>
<!-- /menu profile quick info -->
<br />
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a href="<?php echo base_url('pegawai');?>"><i class="fa fa-pencil"></i>CRUD</a></li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
<!-- /menu footer buttons -->
<div class="sidebar-footer hidden-small">
<a data-toggle="tooltip" data-placement="top" title="Settings">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="FullScreen">
<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="Lock">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
</a>
</div>
<!-- /menu footer buttons -->
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="<?php echo base_url();?>/public/assets/images/img.jpg" alt="">John Doe
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right">
<li><a href="javascript:;"> Profile</a></li>
<li>
<a href="javascript:;">
<span class="badge bg-red pull-right">50%</span>
<span>Settings</span>
</a>
</li>
<li><a href="javascript:;">Help</a></li>
<li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-green">6</span>
</a>
<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where<?php echo base_url();?>/public/assets.
</span>
</a>
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where<?php echo base_url();?>/public/assets.
</span>
</a>
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where<?php echo base_url();?>/public/assets.
</span>
</a>
</li>
<li>
<a>
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span>
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where<?php echo base_url();?>/public/assets.
</span>
</a>
</li>
<li>
<div class="text-center">
<a>
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<?php echo @$content;?>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="pull-right">
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
</div>
<!-- jQuery -->
<script src="<?php echo base_url();?>/public/assets/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="<?php echo base_url();?>/public/assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="<?php echo base_url();?>/public/assets/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="<?php echo base_url();?>/public/assets/vendors/nprogress/nprogress.js"></script>
<!-- Chart.js -->
<script src="<?php echo base_url();?>/public/assets/vendors/Chart.js/dist/Chart.min.js"></script>
<!-- jQuery Sparklines -->
<script src="<?php echo base_url();?>/public/assets/vendors/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- Flot -->
<script src="<?php echo base_url();?>/public/assets/vendors/Flot/jquery.flot.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/Flot/jquery.flot.pie.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/Flot/jquery.flot.time.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/Flot/jquery.flot.stack.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="<?php echo base_url();?>/public/assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/flot.curvedlines/curvedLines.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="<?php echo base_url();?>/public/assets/vendors/moment/min/moment.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/js/datepicker/daterangepicker.js"></script>
<!-- Datatables -->
<script src="<?php echo base_url();?>/public/assets/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/jszip/dist/jszip.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/vendors/pdfmake/build/vfs_fonts.js"></script>
<!-- Custom Theme Scripts -->
<?php echo @$script;?>
</body>
</html>
- Menambahkan Route
Kemudian definisikan beberapa route pada folder “app\Config\Routes.php” seperti berikut.
$routes->get('/datapegawai', 'PegawaiController::index');
$routes->get('ajax-datatable', 'PegawaiController::ajaxDataTables');
- Menjalankan project
Setelah semua tahap demi tahap diatas dilakukan maka langkah selanjutnya adalah menguji project dengan menjalankan Start Development server melalui jendela Terminal/ Command Prompt seperti berikut.
php spark serve --port 8080
Selanjutnya Anda dapat mengakses project Codeigniter 4 melalui browser dengan menjalankan url seperti berikut
http://localhost/datapegawai/
atau
http://localhost:8080/datapegawai
Selain menggunakan cara diatas, untuk menjalankan project juga dapat dilakukan dengan mengakses langsung melalui browser dengan menjalankan url seperti berikut.
localhost/namaproject/public/datapegawai
Jika semua berjalan dengan baik, maka akan ditampilkan list datapegawai dalam bentuk server side datatable seperti berikut.
Oke sampai disini pembahasan Cara Menggunakan Codeigniter 4 Server Side Datatable menggunakan library Codeigniter 4 Server Side Datatable telah berhasil kita lakukan. Semoga tutorial ini dapat memberi manfaat, terima kasih..
