CRUD (Create Read Update Delete)
 

 crud

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:

  1. index.php (tampilan utama -View)
  2. grid.php (interaksi komponen Grid dengan database)
  3. 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: "output",
	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
 

 

Isi lengkap dari file index.html untuk menampilkan seperti di atas adalah:
<!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="output" style="width: 800px; height: 400px"></div>

	<script>
		//Buat Layout untuk menempatkan Grid dan Form
		var myLayout = new dhtmlXLayoutObject({
			parent: "output",
			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>

 

 

DEMO

SOURCE

 

Comments  

Tobing
0 #7 Tobing 2017-08-24 15:49
Quoting Msidik:
saya pake Data processor tapi coba di tampilkan post untuk format itu yang kebaca hanya satu bukan array.

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.


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
Quote
Msidik
0 #6 Msidik 2017-08-24 14:35
saya pake Data processor tapi coba di tampilkan post untuk format itu yang kebaca hanya satu bukan array.

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.
Quote
Tobing
0 #5 Tobing 2017-08-24 12:53
Quoting Msidik:
Halo gan, ane mau nanya nih.
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


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
Quote
Msidik
0 #4 Msidik 2017-08-24 11:32
Halo gan, ane mau nanya nih.
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
Quote
Msidik
0 #3 Msidik 2017-06-13 09:37
Quoting Tobing:
[quote name="Msidik"]
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



Betul gan ane pake cara itu jadinya untuk sementara, atau mungkin gak cocok ya kalo pake autocomplete, pas editnya jadi susah. thanks atas bantuanya .
Quote
Tobing
+1 #2 Tobing 2017-06-12 18:08
Quoting Msidik:
Gan ane ada kesulitan, saat pembuatan combobox autocomplete pas create bisa, datanya ke load dari server dan ke save. tp gimana caranya pas edit ya, pengenya yang pas create pilih a pas edit selected a. ada solusi gan? terimakasih 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
Quote
Msidik
0 #1 Msidik 2017-06-12 14:51
Gan ane ada kesulitan, saat pembuatan combobox autocomplete pas create bisa, datanya ke load dari server dan ke save. tp gimana caranya pas edit ya, pengenya yang pas create pilih a pas edit selected a. ada solusi gan? terimakasih bantuanya
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 79.3% Indonesia
United States 9.3% USA
Singapore 2.6% Singapore

Total:

56

Countries
002890
Today: 9
This Week: 9
This Month: 122