Halo sobat koding apa kabar? semoga baik baik saja ya. Oke jadi kali ini admin bakal share ke temen-temen bagaimana cara menginstall atau memasang Datatables server-side pada Codeigniter 4 dengan mudah. Tapi sebelum itu, mungkin masih ada temen-temen yang belum tahu apa itu Datatables server-side. Baik, saya selaku penulis disini bakal menjelaskan sedikit tentang datatables dan server-side.
DataTables?
Adalah sebuah plugin jquery yang dapat digunakan untuk menampilkan data dalam bentuk table/grid. Tidak hanya menampilkan data seperti table biasa, plugin ini tersedia banyak fitur yang bisa kita pasang seperti pencarian/filter (filtering), penyortiran (sorting), menampilkan data dalam jumlah tertentu (pagination). Plugin ini dapat digunakan secara gratis.
Serverside?
Jika teman-teman mempunyai data yang besar atau banyak, maka fitur ini sangatlah dibutuhkan agar dapat memuat ribuan data secara cepat dan efektif. Pada datatables jika fitur ini sudah diaktifkan, maka fitur seperti filter, sorting, paging akan dilakukan peraksinya.
Jadi begini… jika fitur serverside belum diaktifkan, ketika sebuah halaman yang berisi datatable akan diload terlebih dahulu semua datanya, semisal data tersebut ada ribuan lebih, maka kita akan load data tersebut terlebih dahulu. Tetapi jika serverside ini sudah diaktifkan, proses loading datanya akan dicicil.
Contohnya jika kalian hanya menampilkan data 10 perhalaman, maka data lainnya akan diproses setelah kalian berpindah halaman. Contoh lain adalah ketika kalian mencari data, maka proses loading datanya akan dilakukan pada saat itu juga. Sehingga akan meringankan beban load data, dan menjadikan website kita lebih ringan.
Tutorial Cara Menggunakan Datatables Serverside pada CodeIgniter 4
Baiklah langsung kita mulai saja untuk memasang datatables server side pada codigniter 4. Sebelum itu ada beberapa hal yang harus disiapkan teman-teman.
Persiapan Database
Untuk databasenya sudah admin siapkan seperti ini, jika teman-teman menggunakan table lain tinggal disesuaikan ya untuk pemasangannya nanti.
CREATE TABLE `mata_uang` ( `id` int(11) NOT NULL AUTO_INCREMENT, `kode` char(3) NOT NULL, `nama_uang` varchar(128) NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=309 DEFAULT CHARSET=utf8Jika ingin sekalian datanya, bisa download file .sql table tersebut disini.
Persiapan CodeIgniter 4
Pada tutorial kali ini kita akan menggunakan codeigniter versi 4 ya guys. Untuk codeigniter 4 nya bisa didownload lewat sini.
Silahkan di download dan simpan pada folder local server kita, jika teman-teman menggunakan Xampp simpan pada folder htdocs. Saat ini saya menggunakan laragon, jadi saya menyimpannya pada folder www.
Memasang Library Codeigniter Datatables Server Side
Jika kalian sudah pernah memasang datatables serverside pada codeigniter 3, kalian bisa menggunakan Ignited-datatables. Namun untuk codeigniter 4 kali ini berbeda, kita akan menggunakan library ini.
Silahkan didownload atau diclone terlebih dahulu repositori ini :
Silahkan ekstrak lalu pindahkan ke dalam folder app/Libraries/. Perhatikan nama foldernya.
Jika sudah mari kita coba tampilkan webnya lewat browser. Karena ini adalah Codeigniter versi 4, maka cara untuk menampilkannya sedikit berbeda.
Cara paling mudah untuk membukanya adalah dengan menggunakan text editor yang sudah tersedia fitur terminal didalamnya seperti Visual Studio Code, Atom, dan lain sebagainya.
Jika sudah terbuka silahkan buka terminal. Lalu ketikkan perintah berikut.
Maka ketika kita membuka alamat http://localhost:8080 pada browser, akan muncul halaman codeigniter 4 nya.
Memasang JQuery dan Datatables
Silahkan download JQuery dan Datatables terlebih dahulu, atau anda bisa mendownloadnya disini. Lalu ekstrak kemudian pindahkan ke folder public/plugin/.
Konfigurasi Awal Codeigniter
1. Rename file env menjadi .env. Kemudian buka file tersebut.
2. Lalu cari database, lalu atur user, password dan databasenya. Dan hapus tanda (#) didepannya.
database.default.hostname = localhostdatabase.default.database = ci4_tutorialdatabase.default.username = rootdatabase.default.password = Kemudian simpan.
3. Buka file app/Config/Autoload.php untuk menambahkan library yang barusan kita install. Lalu tambahkan namespace berikut ke dalam $psr4.
'Irsyadulibad\DataTables' => APPPATH .'Libraries/codeigniter4-datatables/src',Sehingga hasilnya akan mirip seperti ini.
public $psr4 = [ 'Config' => APPPATH . 'Config', APP_NAMESPACE => APPPATH, 'Irsyadulibad\DataTables' => APPPATH .'Libraries/codeigniter4-datatables/src',];Membuat Controller
Silahkan buat controller baru pada folder app/Controllers/ dengan nama Matauang.php. Isi filenya dengan kode berikut ini.
<?phpnamespace AppControllers;use Irsyadulibad\DataTables\DataTables;class Matauang extends BaseController{ public function json() { return DataTables::use('mata_uang') ->make(true); } public function index() { return view('uang-list'); }}Silahkan buka localhost:8080/matauang/json pada browser, jika datanya tampil bisa langsung kita lanjutkan.
Membuat View
Setelah selesai kita membuat controller, barulah kita menampilkannya pada view. Silahkan buat file bernama uang-list.php didalam folder app/Views/. Kemudian isi filenya dengan kode berikut.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Datatables Server-side</title> <link rel="stylesheet" href="https://www.alamkoding.web.id/2021/05/<?=base_url();?>/plugin/datatables.min.css"></head><body> <table id="matauang" class="display" style="width:100%"> <thead> <tr> <th>No</th> <th>Kode</th> <th>Mata Uang</th> </tr> </thead> </table> <script src="<?=base_url();?>/plugin/datatables.min.js"></script> <script type="text/javascript"> $('#matauang').DataTable({ processing: true, serverSide: true, ajax:{ url: '<?=base_url()?>/matauang/json' }, columns: [ {data: 'id', name: 'id'}, {data: 'kode', name: 'kode'}, {data: 'nama_uang', name: 'nama_uang'} ] }); </script></body></html>Lalu simpan. Setelah itu teman-teman bisa buka localhost:8080/matauang untuk melihat hasilnya.
Bisa dilihat oleh teman-teman ketika kita berpindah halaman, seperti ada tulisan processing ditengahnya, itu artinya data yang kita load itu tidak langsung sekaligus, melainkan hanya 10 perhalaman saja.
Akhir Kata
Seperti itulah untuk cara memasang datatables server-side pada codeigniter 4, mudah bukan? Lalu bagaimana jika ada 2 tabel atau join tabel? Tunggu artikel selanjutnya ya sobat.
Bantu share ke teman-teman kalian ya 😀 Terima kasih.
Datatables Server-Side Codeigniter 4.zip
2MB
Komentar
Posting Komentar