Tulisan ini akan membahas bagaimana menggunakan DHTMLX dengan salah satu PHP Framework yaitu CodeIgniter (Fremwork ini yang rame dipake di Indo selain Larapel, di tempat kerja malah makenya Yii2. Padahal waktu masih muda dulu adanya PHP tok). Pada tulisan-tulisan lainnya banyak menggunakan cara procedural, tetapi karena CodeIgniter sudah menggunakan cara OOP dan MVC, maka kita juga akan menulis DHTMLX dengan cara OOP juga. Oleh karena itu dasar OOP dan MVC paling tidak harus dikuasai (walaupun saya baru juga mempelajari makhluk yang namanya OOP dan MVC, apalagi CodeIgniter – 2 hari sebelum menulis tulisan ini cari-cari referensi mengenai CodeIgniter).

Pada saat tulisan ini dibuat, saya menggunakan:

  • ·         DHTMLX Suite versi 4.6
  • ·         CodeIgniter versi 3.0.6
  • ·         MySQL 5.6
  • ·         PHP 5.5

 

1.       Pertama download DHTMLX Suite library dari http://www.dhtmlx.com dan DHTMLX PHP Connector dari https://github.com/DHTMLX/connector-php lalu Codeigniter dari http://www.codeigniter.com

2.       Lalu extract Codeigniter ke dalam web root misalnya C:\xampp\htdocs\ci. Dan kemudian create folder public di dalam C:\xampp\htdocs\ci dimana akan kita tempatkan seluruh isi folder codebase DHTMLX Suite. Kemudian folder codebase dari DHTMLX PHP Connector kita tempatkan pada C:\xampp\htdocs\ci\system\libraries dan kita rename menjadi connector

 

3.       Database

CREATE TABLE IF NOT EXISTS `address` (
  `id` int(4) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) DEFAULT NULL,
  `phone` varchar(30) DEFAULT NULL,
  `email` varchar(30) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

 

4.       Pada Codeigniter kita akan menggunakan

·         Default view : welcome_message.php

·         Default controller : Welcome.php

·         Database Native PDO, bukan bawaan CodeIgniter yang biasa dipanggil $this->load->database, tetapi apabila ingin menggabungkan keduanya tidak masalah.

·         Configurasi default Codeigniter (tanpa Rewrite mod Apache, jadi semua URL menggunakan index.php/nama_controller/nama_action)

 

5.       Edit config\autoload.php , tambahkan helper url

 

$autoload['helper'] = array('url');

 

 Edit config\config.php,  enable_query_string ubah ke TRUE

$config['enable_query_strings'] = TRUE;

 
 url helper digunakan untuk include DHTMLX library

<script type="text/javascript" src="/<?php echo base_url()?>public/codebase/dhtmlx.js"></script> 

 

 enable_query_string untuk mengubah address

index.php/controller/action -> index.php?c=controller&m=action

 

$config['allow_get_array'] = TRUE;
$config['enable_query_strings'] = TRUE;
$config['controller_trigger'] = 'c';
$config['function_trigger'] = 'm';
$config['directory_trigger'] = 'd';

 

6.       Edit system\core\Controller.php,

Sesudah defined('BASEPATH') OR exit('No direct script access allowed'); tambahkan DHTMLX PHP Connector library

 

defined('BASEPATH') OR exit('No direct script access allowed');

	//Load DHTMLX connector
    require BASEPATH . '/libraries/connector/grid_connector.php';
    require BASEPATH . '/libraries/connector/form_connector.php';
    require BASEPATH . '/libraries/connector/combo_connector.php';
    require BASEPATH . '/libraries/connector/db_pdo.php';

 

Pada class CI_Controller tambahkan public $pdo;  ini merupakan variable database yang akan kita gunakan untuk DHTMLX

 

class CI_Controller {
	public $pdo;

 

Dan pada baris terakhir public function __construct() tambahkan database info dengan menggunakan PDO

public function __construct()
	{
		self::$instance =& $this;

		// Assign all the class objects that were instantiated by the
		// bootstrap file (CodeIgniter.php) to local class variables
		// so that CI can run as one big super object.
		foreach (is_loaded() as $var => $class)
		{
			$this->$var =& load_class($class);
		}

		$this->load =& load_class('Loader', 'core');
		$this->load->initialize();
		log_message('info', 'Controller Class Initialized');
		
		try {
			$option = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET SESSION sql_mode="TRADITIONAL"'); 
			$this->pdo = new PDO("mysql:host=localhost;dbname=test", 'root', '', $option);
		} catch (PDOException $ex) {
			print "Error! :" . $ex->getMessage() . "<br/>";
			die();
		}
	}

 

7.       Edit controller Welcome.php menjadi seperti di bawah ini

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

class Welcome extends CI_Controller {

	public function index()
	{
		//var_dump($this->pdo);die();
		$this->load->view('welcome_message');
	}

	public function grid() {
		$griddata = new GridConnector($this->pdo, "PDO");
		$griddata->render_sql('SELECT id,name,phone,email FROM address', 'id', 'name,phone,email');
	}

	public function form() {
		$formdata = new FormConnector($this->pdo, "PDO");
		$formdata->render_table('address', 'id', 'name,phone,email');
	}
}

 

8.       Edit view welcome_message.php, tambahkan DHTMLX Suite library pada bagian head (base_url() sesuaikan dengan domain anda pada config.php -  misalnya $config['base_url'] = 'http://www.dhxapps.web.id/ci')

<link rel="stylesheet" type="text/css" href="/<?php echo base_url()?>/public/codebase/dhtmlx.css">
<script type="text/javascript" src="/<?php echo base_url()?>/public/codebase/dhtmlx.js"></script>

 

9.       Hapus seluruh baris dibawahnya, edit sehingga menjadi

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

?>
<link rel="stylesheet" type="text/css" href="/<?php echo base_url()?>/public/codebase/dhtmlx.css">
<script type="text/javascript" src="/<?php echo base_url()?>/public/codebase/dhtmlx.js"></script>

<!DOCTYPE html>
<head>
	<style type="text/css">
		html,body {
			width: 100%;
			height: 100%;
			margin: 0px;
			overflow: hidden;
		}	
	</style>
</head>
<body>
	
</body>
</html>

 

10.       Tambahkan di tag body view welcome_message.php, script berikut ini untuk membentuk layout pada document.body dengan 2 cell, cell kiri dan cell kanan

<script>
		var myLayout = new dhtmlXLayoutObject({
			parent: document.body,
			pattern: '2U',
			cells: [
				{id: 'a', text: 'Table'},
				{id: 'b', text: 'Form'}

			]
		})
		
	</script>

 

 

11.   Akan diperoleh tampilan seperti gambar di bawah ini

 

12.       Setelah komponen Layout tambahkan di view welcome_message.php script di bawah ini untuk membentuk table/grid pada Layout cell A, dan memuat data dari table address

var myGrid = myLayout.cells('a').attachGrid();
		myGrid.setHeader('Name,Phone,Email');
		myGrid.setColSorting('str,str,str');
		myGrid.attachHeader("#connector_text_filter,#connector_text_filter,#connector_text_filter");
		myGrid.setEditable(false);
		myGrid.init();
		myGrid.load("index.php?c=welcome&m=grid"); 

 

 

 

13.       Akan diperoleh tampilan seperti gambar di bawah ini

 

 

14.       Setelah komponen Grid, tambahkan di view welcome_message.php script di bawah ini untuk membentuk Form input pada Layout cell B

var myForm = myLayout.cells('b').attachForm([
			{type: 'block', offsetLeft: 30, offsetTop: 30, list: [
				{type: 'input', name: 'name', label: 'Name', labelWidth: 120, inputWidth: 200, validate: 'NotEmpty'},
				{type: 'input', name: 'phone', label: 'Phone', labelWidth: 120, inputWidth: 200, validate: 'NotEmpty'},
				{type: 'input', name: 'email', label: 'Email', labelWidth: 120, inputWidth: 200, validate: 'ValidEmail'}
			]},
			{type: 'block', offsetLeft: 50, offsetTop: 30, list: [
				{type: 'button', name: 'tambah', value: 'Tambah'},
				{type: 'newcolumn'},
				{type: 'button', name: 'hapus', value: 'Hapus'},
				{type: 'newcolumn'},
				{type: 'button', name: 'simpan', value: 'Simpan'},
			]}

		]);
		myForm.enableLiveValidation(true);

 

15.       Akan diperoleh tampilan

 

 

16.       Setelah komponen Form di view welcome_message.php tambahkan script ini. Gunanya agar saat baris pada Grid dipilih (onRowSelect) datanya akan dimuat ke Form (sebelah kanan)

myGrid.attachEvent('onRowSelect', function() {
			myForm.load('index.php?c=welcome&m=form&id='+myGrid.getSelectedRowId());
		});

 

 

Sampai pada tahap ini, semua UI dan code untuk menampilkan data sudah selesai.

 

INSERT, UPDATE, DELETE serta PROSES-nya Berhasil atau Gagal

 

17.       Pada controller Welcome.php kita tambahkan satu class FormEvent untuk menampilkan Apa yang Terjadi saat/setelah Insert, Update, Delete, Error. Dan oleh karena proses dilakukan oleh Form maka class ini hanya akan dipakai oleh Form bukan Grid( grid hanya menampilkan – select)

public function form() {
		$formdata = new FormConnector($this->pdo, "PDO");
		$formdata->event->attach(new FormEvent());
		$formdata->render_table('address', 'id', 'name,phone,email');
	}
}

class FormEvent
{	
	public function afterInsert($action) {
		$name= $action->get_value("name");
		$action->set_response_text($name);
	}

	public function afterUpdate($action) {
        $name= $action->get_value("name");
		$action->set_response_text($name);
    }

    public function afterDelete($action) {
		$name= $action->get_value("name");
		$action->set_response_text($name);
	}

	public function onDBError($action, $ex) {
		$error_message = $ex->getMessage();		
		$action->set_response_text($error_message);
	}
}

 

18.       Selanjutnya pada view welcome_message.php kita tulis script untuk memproses data pada myForm (Form DataProcessor)

var FormDP = new dataProcessor('index.php?c=welcome&m=form');
		FormDP.init(myForm);

		FormDP.attachEvent('onAfterUpdate', function(id,action,tid,response) {
			var msg = response.firstChild.data;
	        switch (action) {            
	            case 'inserted':       
	                dhtmlx.message("Berhasil menambah <br />"+msg);
					myGrid.clearAndLoad("index.php?c=welcome&m=grid");
					myForm.clear();
	                break;
	            case 'updated':
	                dhtmlx.message("Berhasil mengubah <br />"+msg);
					myGrid.clearAndLoad("index.php?c=welcome&m=grid");
					myForm.clear();
	                break;
	            case 'deleted':
	                dhtmlx.message("Berhasil menghapus <br />"+msg);
	                myGrid.clearAndLoad("index.php?c=welcome&m=grid");
	                myForm.clear();
	                break;
	            case 'error':
	                dhtmlx.message({type: "error", text:"Error <br />"+msg, expire: -1});
	                myGrid.clearAndLoad("index.php?c=welcome&m=grid");
	                myForm.clear();
	                break;
	        } 
		});

 

19.       Script Terakhir pada view welcome_message.php adalah script untuk Event myForm saat Tombol Tambah, Hapus, Simpan di tekan

myForm.attachEvent('onButtonClick', function(name) {
			if (myForm.validate()) {
				switch(name) {
					case 'tambah':
						myForm.resetDataProcessor("inserted");
						myForm.save();
						break;
					case 'hapus':
						myForm.resetDataProcessor("deleted");
						myForm.save();
						break;
					case 'simpan':
						myForm.resetDataProcessor("updated");
						myForm.save();
						break;
				}
			}
		});

 

20.       Tampilan Akhir saat berhasil menambah record adalah seperti gambar berikut

 

Demikianlah tulisan mengenai cara Menampilkan, Menambah, Menghapus dan Mengubah Data (CRUD) menggunakan DHTMLX Javascript Framework dan CodeIgniter PHP Framework

 

DEMO 

 

SOURCE CODE

 

 

 

Comments  
Tobing
0 #12 Tobing 2018-10-26 15:01
Quoting Alex:
Admin, ada konteknya ga ya mas?

email aja bang,
Quote
Alex
0 #11 Alex 2018-10-26 14:56
Admin, ada konteknya ga ya mas?
Quote
ryan
+1 #10 ryan 2018-04-11 10:19
Quoting Tobing:
Quoting ryan:
link download source codenya salah tuh gan


Ok gan link diperbaiki, thanks
Untuk lebih lengkap silahkan lihat Rumah Sakit CodeIgniter walaupun tidak selesai seluruhnya


siap , thanks ya gan
Quote
Tobing
+1 #9 Tobing 2018-04-10 16:36
Quoting ryan:
link download source codenya salah tuh gan


Ok gan link diperbaiki, thanks
Untuk lebih lengkap silahkan lihat Rumah Sakit CodeIgniter walaupun tidak selesai seluruhnya
Quote
ryan
0 #8 ryan 2018-04-10 15:18
link download source codenya salah tuh gan
Quote
Tobing
0 #7 Tobing 2017-03-30 21:00
Quoting Abizach:
Oh ya bos, sudah ketemu masalahnya ... ternyata DHTMLX dengan CI harus menggunakan metode :
$config['allow_get_array'] = TRUE;
saya kiran tidak menggunakan metode ini bisa di CI
$config['allow_get_array'] = FALSE;

Thx


Kan itu dah disebutkan langkah2nya bro, berarti emang terlewati :-)

Di contoh ini saya masih menggunakan database PDO dan connector php biasa pasti agak rumit gabungkan sama database CI,


require_once(APPPATH.'libraries/connector/db_pdo.php');
require_once(APPPATH.'libraries/connector/grid_connector.php');
new FormConnector($this->pdo, "PDO");


Di bagian Rumah Sakit CodeIgniter saya mencoba menggunakan database dari CodeIgniter, Composer untuk install dhtmlx connector, jadi nanti sedikit menggunakan namespace


use Dhtmlx\Connector\GridConnector;
use Dhtmlx\Connector\FormConnector;
new FormConnector($this->db, "PHPCI");


Dengan cara kedua ini saya bisa pakai query CI spt di bwh ini apabila render_table & render_sql ga sanggup jalankan query yg complex

$this->db->query("SELECT * FROM table WHERE id=".$this->db->escape($id));

render_table & render_sql itu ibarat Active Record yg mempunyai keterbatasan untuk query2 simple
Quote
Abizach
0 #6 Abizach 2017-03-30 20:53
Oh ya bos, sudah ketemu masalahnya ... ternyata DHTMLX dengan CI harus menggunakan metode :
$config['allow_get_array'] = TRUE;
saya kiran tidak menggunakan metode ini bisa di CI
$config['allow_get_array'] = FALSE;

Thx
Quote
Tobing
0 #5 Tobing 2017-03-30 20:37
Quoting Abizach:
ini beberapa errornya :

A PHP Error was encountered

Severity: Notice
Message: Undefined index: ids
Filename: connector/form_connector.php
Line Number: 51
.....
File: D:\FebArsip\cidhtmlx\application\controllers\Grids.php
Line: 76
Function: render_table



Ini kayaknya "id" missing untuk form.

Kalo grid kan utk data yg banyak jd ga perlu tambah parameter id, kalo form kan untuk 1 data aja, jadi butuh..

Misal utk grid
myGrid.load("/lala/grid.php")

untuk form
myForm.load("/lala/form.php?id=xxx")

xxx disini kan id unique setiap record

jd pas di grid klik row, maka querynya ibarat
SELECT * FROM table WHERE id=xxx

Kalo id missing otomatis ga tau id mana yg mau diubah

O iya kalo ci kan "index.php?c=lala&m=lolo&id=xxx" (kalo ga salah)
Quote
Abizach
0 #4 Abizach 2017-03-30 20:26
ini lokasi error line 76
public function form() {
$formdata = new FormConnector($this->pdo, "PDO");
$formdata->event->attach(new FormEvent());
$formdata->render_table(
'tb_profits',
'id',
'year,quarter,profit,loser,person'
);
}
Quote
Abizach
0 #3 Abizach 2017-03-30 20:25
ini beberapa errornya :

A PHP Error was encountered

Severity: Notice
Message: Undefined index: ids
Filename: connector/form_connector.php
Line Number: 51
.....
File: D:\FebArsip\cidhtmlx\application\controllers\Grids.php
Line: 76
Function: render_table
Quote
Add comment

Tutorial DHTMLX

15 Mar 2019 13:05
1. Konstruksi DHTMLX
22 Mar 2019 13:54
2. CRUD sederhana
15 Mar 2019 13:03
3. Toko Online
15 Mar 2019 13:02
4. Galeri Gambar
22 Mar 2019 13:53
5. Grafik
22 Mar 2019 13:52
6. Export Grid

Komponen DHTMLX - Javascript UI