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
email aja bang, lumban.tobing.m
siap , thanks ya gan
Ok gan link diperbaiki, thanks
Untuk lebih lengkap silahkan lihat Rumah Sakit CodeIgniter walaupun tidak selesai seluruhnya
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
$config['allow_get_array'] = TRUE;
saya kiran tidak menggunakan metode ini bisa di CI
$config['allow_get_array'] = FALSE;
Thx
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)
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'
);
}