CRUD disini melibatkan komponen Grid dan Form. Komponen Grid diset READ ONLY (ro). Jadi Grid hanya untuk menampilkan data saja (SELECT). Sedangkan proses INSERT, UPDATE dan DELETE tidak dilakukan pada komponen Grid, tetapi pada komponen Form. Sebelum UPDATE atau DELETE kita memilih terlebih dahulu record yang mau di-UPDATE/DELETE pada Grid (onRowSelect), karena Form tidak bisa melakukan UPDATE /DELETE jika tidak ada record yang dipilih, berbeda dengan INSERT yang menambah record baru. Setelah proses INSERT, UPDATE dan DELETE, komponen dhtmlxMessage akan menampilkan pesan apakah proses tersebut berhasil atau gagal
KODE PROGRAM Kode program/script ditulis dalam 3 file terpisah, yaitu:
- index.php (tampilan utama -View)
- grid.php (interaksi komponen Grid dengan database)
- form.php (interaksi komponen Form dengan database)
Akan kita bahas satu persatu, untuk index.php ada di bagian paling bawah tulisan ini. Database sangat sederhana, satu tabel alamat dengan field id,nama, alamat (PERHATIAN: DHTMLX sangat menganjurkan primary key AUTOINCREMENT, dalam hal ini id)
grid.php
<?php include ("codebase/connector/grid_connector.php"); include ("codebase/connector/db_pdo.php"); $dbtype = "mysql"; // mysql or pgsql $dbhost = "127.0.0.1"; // database server $dbname = "test"; // database name $dbuser = "root"; // database user $dbpassword = ""; // database password $dbcharset = "utf8"; // database charset $dsn = "mysql:host=$dbhost;dbname=$dbname;charset=$dbcharset"; try { $dbconn = new PDO($dsn, $dbuser, $dbpassword); } catch (PDOException $ex) { print_r($ex->getMessage()); } ConnectorSecurity::$security_key = true; //Inisialisasi Grid Connector $data = new GridConnector($dbconn, "PDO"); $sql = "SELECT id,nama,alamat FROM alamat"; //render_sql untuk query SELECT $data->render_sql($sql, "id", "nama,alamat"); ?>
Adapun tampilan dari grid.php saat dibuka langsung oleh browser kira-kira seperti ini:
<rows dhx_security="66006bd26635f096957bdf30a8f9b5b5"> <row id="2"> <cell>ASRI</cell> <cell>Jalan Merdeka Utara</cell></row> <row id="3"> <cell>RARA</cell> <cell>Jalan Kebangsaan</cell></row> <row id="4"> <cell>RADIT</cell> <cell>Jalan Dewantoro satu</cell> </row> <row id="5"> <cell>ISLAN</cell> <cell>Jalan St. Syahrir</cell> </row> <row id="6"> <cell>SANTI</cell> <cell>Jalan Barat</cell> </row> <row id="27"> <cell>Barun</cell> <cell>Jl Kemayoran</cell> </row> </rows>
form.php
<?php //include DHTMLX PHP Connector include ("codebase/connector/form_connector.php"); include ("codebase/connector/db_pdo.php"); $dbtype = "mysql"; // mysql or pgsql $dbhost = "127.0.0.1"; // database server $dbname = "test"; // database name $dbuser = "root"; // database user $dbpassword = ""; // database password $dbcharset = "utf8"; // database charset $dsn = "mysql:host=$dbhost;dbname=$dbname;charset=$dbcharset"; try { $dbconn = new PDO($dsn, $dbuser, $dbpassword); } catch (PDOException $ex) { print_r($ex->getMessage()); } //Inisialisasi Form Connector $data = new FormConnector($dbconn, "PDO"); //security xss & csrf ConnectorSecurity::$security_key = true; //Jika ada error saat operasi terhadap database function doOnDBError($action, $ex) { $error_message = $ex->getMessage(); $action->set_response_text($error_message); } $data->event->attach("OnDBError", doOnDBError); //render_table query SELECT,INSERT,UPDATE,DELETE satu tabel $data->render_table("alamat", "id", "nama,alamat"); ?>
Untuk melihat hasil dari form.php (SELECT) anda harus menyertakan id salah satu record seperti ini form.php?id=2
<data dhx_security="66006bd26635f096957bdf30a8f9b5b5"> <nama>ASRI</nama> <alamat>Jalan Merdeka Utara</alamat> </data>
Jadi saat salah satu record pada Grid dipilih, maka Form akan memuat data sesuai id dari record Grid yang dipilih
//Event saat salah satu baris pada grid diklik myGrid.attachEvent("onRowSelect", function(id) { myForm.load("../tutorial/form.php?id="+myGrid.getSelectedRowId()); })
Test Drive DHTMLX
Copy kode dibawah ini lalu paste ke Text Area kemudian klik Run
//Buat Layout untuk menempatkan Grid dan Form var myLayout = new dhtmlXLayoutObject({ parent: "output2", pattern: "2U", //pola kiri kanan cells: [ {id: "a", text: "Grid"}, //kiri {id: "b", text: "Form"} //kanan ] }); //Tempatkan Grid pada myLayout a var myGrid = myLayout.cells("a").attachGrid(); myGrid.setHeader("Nama,Alamat"); myGrid.setColTypes("ro,ro"); myGrid.attachHeader("#text_filter,#text_filter"); myGrid.init(); myGrid.load("../tutorial/grid.php"); //memuat data dari database ke dalam Grid //Event saat salah satu baris pada grid diklik myGrid.attachEvent("onRowSelect", function(id) { myForm.load("../tutorial/form.php?id="+myGrid.getSelectedRowId()); }) //Tempatkan Form pada myLayout b var myForm = myLayout.cells("b").attachForm([ {type: "fieldset", offsetLeft: 30, offsetTop: 30, label: "Form", list: [ {type: "input", name: "nama", label: "Nama", labelWidth: 80, inputWidth: 180}, {type: "input", name: "alamat", label: "Alamat", labelWidth: 80, inputWidth: 180}, {type: "block", offsetTop: 20, list: [ {type: "button", name: "tambah", value: "Tambah"}, {type: "newcolumn"}, {type: "button", name: "hapus", value: "Hapus"}, {type: "newcolumn"}, {type: "button", name: "simpan", value: "Simpan"} ]} ]} ]); var myFormDP = new dataProcessor("../tutorial/form.php"); myFormDP.init(myForm); myForm.attachEvent("onButtonClick", function(name) { switch (name) { case "tambah": myForm.resetDataProcessor("inserted"); myForm.save(); break; case "hapus": //myGrid.deleteSelectedRows(); myForm.resetDataProcessor("deleted"); myForm.save(); break; case "simpan": myForm.resetDataProcessor("updated"); myForm.save(); break; } }); //Sesudah memproses myFormDP.attachEvent("onAfterUpdate", function(id,action,tid,tag) { switch (action) { case "deleted": dhtmlx.message("Berhasil menghapus data"); myGrid.clearAndLoad("../tutorial/grid.php"); break; case "inserted": dhtmlx.message("Berhasil menambah data"); myGrid.clearAndLoad("../tutorial/grid.php"); break; case "updated": dhtmlx.message("Berhasil mengubah data"); myGrid.clearAndLoad("../tutorial/grid.php"); break; case "error": var message = tag.firstChild.data; dhtmlx.message({type: "error", text: "Gagal memproses data<br>"+message, expire: 10000}); myGrid.clearAndLoad("../tutorial/grid.php"); break; } });
Text Area
Output
<!DOCTYPE html> <html> <head> <title>DHTMLX Web Apps</title> <style> html,body { width: 100%; height: 100%; margin: 0px; overflow: hidden; } </style> <link rel="stylesheet" href="/../codebase/dhtmlx.css"> <script src="/../codebase/dhtmlx.js"></script> </head> <body> <div id="output2" style="width: 800px; height: 400px"></div> <script> //Buat Layout untuk menempatkan Grid dan Form var myLayout = new dhtmlXLayoutObject({ parent: "output2", pattern: "2U", //pola kiri kanan cells: [ {id: "a", text: "Grid"}, //kiri {id: "b", text: "Form"} //kanan ] }); //Tempatkan Grid pada myLayout a var myGrid = myLayout.cells("a").attachGrid(); myGrid.setHeader("Nama,Alamat"); myGrid.setColTypes("ro,ro"); myGrid.attachHeader("#text_filter,#text_filter"); myGrid.init(); myGrid.load("../tutorial/grid.php"); //memuat data dari database ke dalam Grid //Event saat salah satu baris pada grid diklik myGrid.attachEvent("onRowSelect", function(id) { myForm.load("../tutorial/form.php?id="+myGrid.getSelectedRowId()); }) //Tempatkan Form pada myLayout b var myForm = myLayout.cells("b").attachForm([ {type: "fieldset", offsetLeft: 30, offsetTop: 30, label: "Form", list: [ {type: "input", name: "nama", label: "Nama", labelWidth: 80, inputWidth: 180}, {type: "input", name: "alamat", label: "Alamat", labelWidth: 80, inputWidth: 180}, {type: "block", offsetTop: 20, list: [ {type: "button", name: "tambah", value: "Tambah"}, {type: "newcolumn"}, {type: "button", name: "hapus", value: "Hapus"}, {type: "newcolumn"}, {type: "button", name: "simpan", value: "Simpan"} ]} ]} ]); //myForm.load("form.php?id=2"); var myFormDP = new dataProcessor("form_no_connector.php"); myFormDP.init(myForm); myForm.attachEvent("onButtonClick", function(name) { switch (name) { case "tambah": myForm.resetDataProcessor("inserted"); myForm.save(); break; case "hapus": //myGrid.deleteSelectedRows(); myForm.resetDataProcessor("deleted"); myForm.save(); break; case "simpan": myForm.resetDataProcessor("updated"); myForm.save(); break; } }); //Sesudah memproses myFormDP.attachEvent("onAfterUpdate", function(id,action,tid,tag) { switch (action) { case "deleted": dhtmlx.message("Berhasil menghapus data"); myGrid.clearAndLoad("../tutorial/grid.php"); break; case "inserted": dhtmlx.message("Berhasil menambah data"); myGrid.clearAndLoad("../tutorial/grid.php"); break; case "updated": dhtmlx.message("Berhasil mengubah data"); myGrid.clearAndLoad("../tutorial/grid.php"); break; case "error": var message = tag.firstChild.data; dhtmlx.message({type: "error", text: "Gagal memproses data<br>"+message, expire: 10000}); myGrid.clearAndLoad("../tutorial/grid.php"); break; } }); </script> </body>
perbanyak tutorial tentang DHTMLX
Array javascript tak bisa anda proses langsung di php bro
comboVal = JSON.stringify( comboVal )
Lalu di php
$arrayphp =json_decode($_POST['jsondata']);
Selanjutnya baru bisa diproses oleh php, krna sudah jadi array php
pake ini hasilnya benar:
var comboVal =myForm.getCombo('format').getChecked();
alert(comboVal);
tapi pas di php:
misal saya ambil function yang update:
function update($action){
var_dump($action->get_value("format"));
}
itu hasilnya [censored]p satu bukan array.
Saya belom pernah coba, tpi Itu hasilnya array
var comboVal = myForm.getCombo('format').getChecked();
di php bisa dicoba pakai event beforeInsert kalo mau diproses lebih dahulu
Atau kalo mau tanpa dataProcessor pakai manual
myForm.send("php/sending_data_script.php", function(loader, response){
//code
});
Nanti di php dapatkan $_POST
di dhtmlx untuk multiple select gimana ya caranya, termasuk send data ke php nya.
saya cobain script ini :
{type: "combo", label: "Format", name: "format", comboType: "checkbox", options:[
{text: "AAC", value: "AAC"},
{text: "AC3", value: "AC3", checked: true, selected: true},
{text: "MP3", value: "MP3", checked: true},
{text: "FLAC", value: "FLAC"}
]},
tapi kesulitan saat nerima isian kalo dia selectnya beberapa item.
thankx gan
Betul gan ane pake cara itu jadinya untuk sementara, atau mungkin gak cocok ya kalo pake autocomplete, pas editnya jadi susah. thanks atas bantuanya .
Wah...gan...saya blom pernah coba tuh combo autocomplete...setau saya kalau combo kan load semua listnya dulu baru pilih...tp kalo autocomplete kan on change baru keluar listnya
Kalo secara logic gambarannya
window.dhx.ajax.get('form.php?id='+GridId, function(r){
xml = r.xmlDoc.responseXML; // will give you DOM object
comboVal = xml.getElementsByTagName('comboname')[0].childNodes[0].nodeValue;
window.dhx.ajax.get('queryvaluedantextcombo.php?id='+ComboVal, function(){
//misalkan val=2 & text=Lala
Form.getCombo('autocombo').setComboValue(2);
Form.getCombo('autocombo').setComboText('Lala');
})
});
Atau bisa coba tanya sama forum DHTMLX