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>