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 CRUD Sederhana DHTMLX

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