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 #9 Tobing 2017-05-02 09:25
Quoting Karen:
First off I want to say excellent blog! I had a quick question that I'd like to ask
if you do not mind. I was curious to find out how you center yourself and clear
your thoughts before writing. I've had a tough time clearing my thoughts
in getting my ideas out there. I truly do enjoy writing however it just seems like the first 10 to 15 minutes
tend to be wasted simply just trying to figure out how to begin. Any ideas or tips?

Cheers!


Hi Karen...
Same like you, I am not a good writer. The sources of my idea were internet. I got a piece of idea and then combine them (not short time). Google said make a unique one. But too difficult find a unique one from "billion" articles that already exist from internet, so I made from my "point of view". Example my article about Point of Sales Application. You will find many Point of Sales application, but no one using DHTMLX. With DHTMLX an application more "user friendly".

And then "Who is the reader". I made this blog for beginner so my articles must "easy to understand", so I acted as a beginner. Because my blog about programming for beginner, step by step must clear.

Last, reference for me. Because our memory have limitation. So in the future if I need about something and I remember that I have published at my blog, I just came here, accessible from everywhere through internet

Sorry If I am not good when explaining all of these, and sorry for my English

Have a nice day!!
Quote
Karen
+1 #8 Karen 2017-05-02 05:40
First off I want to say excellent blog! I had a quick question that I'd like to ask
if you do not mind. I was curious to find out how you center yourself and clear
your thoughts before writing. I've had a tough time clearing my thoughts
in getting my ideas out there. I truly do enjoy writing however it just seems like the first 10 to 15 minutes
tend to be wasted simply just trying to figure out how to begin. Any ideas or tips?

Cheers!
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
Tobing
0 #2 Tobing 2017-03-30 20:03
Quoting Abizach:
kenapa saat sy mengklik salah satu row grid, muncul error :
tsi.feb.unpad.ac.id/cidhtmlx/grids/form/undefined [HTTP/1.1 500 Internal Server Error 80ms]
TypeError: A is null

Kenapa ya bos? Thx


Saat row diklik itu dia panggil ajax, coba liat output dr ajax itu bro. Kalo bisa ci nya dibikin development biar nampak errornya. Kalo error 500 itu ga ketahuan apa errornya
Quote
Abizach
0 #1 Abizach 2017-03-30 19:55
kenapa saat sy mengklik salah satu row grid, muncul error :
tsi.feb.unpad.ac.id/cidhtmlx/grids/form/undefined [HTTP/1.1 500 Internal Server Error 80ms]
TypeError: A is null

Kenapa ya bos? Thx
Quote

Add comment


Security code
Refresh

Tutorial DHTMLX

29 Agu 2015 07:33
1. Konstruksi DHTMLX
30 Agu 2015 07:33
2. CRUD sederhana
01 Sep 2015 10:08
3. Toko Online
02 Sep 2015 10:11
4. Galeri Gambar
03 Sep 2015 05:30
5. Grafik
04 Sep 2015 07:33
6. Export Grid

Visitor

Indonesia 78.0% Indonesia
United States 10.2% USA
Singapore 2.8% Singapore

Total:

53

Countries
002536
Today: 2
This Week: 32
This Month: 134