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:

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 CRUD Sederhana DHTMLX Click to collapse

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

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="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>

DEMO

SOURCE

Comments

0 #8 budi aman 2019-09-24 14:17

sangat bermanfaat sekali,

perbanyak tutorial tentang DHTMLX

Quote

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

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

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

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

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

+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

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