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