Tutorial DHTMLX

1. Konstruksi DHTMLX

Konstruksi DHTMLX Suite

Untuk mempelajari DHTMLX kita membutuhkan DHTMLX Suite Standar Edition yang bisa didownload dari http://dhtmlx.com/x/download/regular/dhtmlxSuite.zip. File yang diperoleh adalah berupa file terkompres bernama dhtmlxSuite_xxx_std.zip (xxx ini berarti versi). Setelah didekompres/extract akan diperoleh seperti gambar di bawah ini

 

  • codebase (inti dari DHTMLX, dhtmlx.js dan dhtmlx.css nanti akan di-include dalam index.html)
  • docs (manual atau tutorial yang nantinya diarahkan ke website www.dhtmlx.com)
  • samples (berisi contoh-contoh pemakaian DHTMLX lengkap dengan kode sekaligus)
  • skins (berisi tema atau style)
  • sources (berisi komponen DHTMLX secara terpisah)

 

Copy folder/directory codebase, samples, skins ke root directory web server, misalkan bila memakai XAMPP copy ketiga folder ini ke htdocs

Konstruksi DHTMLX PHP Connector

Untuk mengakses database dengan lebih mudah, team DHTMLX telah menyediakan DHTMLX PHP Connector yang berisi Class-class dan Function-function PHP. DHTMLX PHP Connector bisa didownload dari https://github.com/DHTMLX/connector-php. File yang diperoleh adalah berupa file terkompres bernama connector-php-master.zip. Setelah didekompres/extract akan diperoleh seperti gambar di bawah ini

Rename folder/directory codebase menjadi connector lalu copy folder connector dan MASUKKAN dalam folder codebase (Konstruksi DHMLX diatas), misalkan bila memakai XAMPP copy ke htdocs/codebase dan akan menjadi htdocs/codebase/connector

 

 

 

 

 

 

Maka struktur folder/directory akan menjadi seperti ini

 

 

 

 

 

 

 

 

File index.html dari suatu DHTMLX Web Apps

Dengan begini kita sudah siap untuk beraksi. Untuk mencoba apakah konfigurasi kita sudah berjalan semestinya silahkan membuat file index.html (atau apapun namanya terserah anda) pada folder htdocs. Copy lalu paste script di bawah ini (Script ini mutlak untuk semua aplikasi DHTMLX)

 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/codebase/dhtmlx.css">
        <script src="/codebase/dhtmlx.js"></script>
        <title>Web Apps</title>
        <style>
            html,body {
                width: 100%;
                height: 100%;
                margin: 0px;
                overflow: hidden;                   
            }               
        </style>
    </head>

    <body>
    <div id="output" style="width=300px;height=300px"></div>
        <script>     
        //Script ditulis disini
           
        </script>   
    </body>
</html>  

Keterangan :

  • pada baris link rel="stylesheet" dan script src merupakan include komponen utama DHTMLX
  • pada baris <style>htmlx,body agar aplikasi web kita menempati ruang penuh (full screen) pada web browser dan menghilangkan scrolling

Note: file dhtmlx.js berkisar sekitar 1,2 MB karena itu loading untuk pertama kali membutuhkan waktu

Tool lain yang dibutuhkan (Windows):

  1. Mozilla Firefox dengan Firebug addon
  2. Editor Sublime Text atau Notepad++
  3. Xampp untuk web server

 

Test Drive DHTMLX

Copy kode dibawah ini lalu paste ke Text Area kemudian klik Run

//Blok start Window dipasang pada div id=output
var myWins = new dhtmlXWindows();
myWins.attachViewportTo("output");
    var win1 = myWins.createWindow({
    id: "win1",
    text: "Hello Window",
    width: 300,
    height: 200,
    top: 10,
    left:10
});

//Blok start menu dipasang pada Window win1
var myMenu = win1.attachMenu({
    items:[
        {id:"file", text:"File", items:[
            {id:"open", text:"Open"},
            {id:"exit", text:"Exit"}
        ]},
        {id:"edit", text:"Edit", items:[
            {id:"undo", text:"Undo"},
            {id:"redo", text:"Redo"}
        ]}
    ]
})
myMenu.setOpenMode("win") //win atau web

//Saat menu undo diklik, tampilkan alert
myMenu.attachEvent("onClick", function(id) {
    if (id == "undo") {
        dhtmlx.alert("Undo diklik");
    }
});

 

Text Area

Output
 

 

Isi lengkap dari file index.html untuk menampilkan seperti di atas adalah:
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/codebase/dhtmlx.css">
        <script src="/codebase/dhtmlx.js"></script>
        <title>Web Apps</title>
        <style>
            html,body {
                width: 100%;
                height: 100%;
                margin: 0px;
                overflow: hidden;                   
            }               
        </style>
    </head>

    <body>
    <div id="output" style="width=300px;height=300px"></div>
        <script>          
            //Blok start Window dipasang pada div id=output
            var myWins = new dhtmlXWindows();
            myWins.attachViewportTo("output");
                var win1 = myWins.createWindow({
                id: "win1",
                text: "Hello Window",
                width: 300,
                height: 200,
                top: 10,
                left:10
            });

            //Blok start menu dipasang pada Window win1
            var myMenu = win1.attachMenu({
                items:[
                    {id:"file", text:"File", items:[
                        {id:"open", text:"Open"},
                        {id:"exit", text:"Exit"}
                    ]},
                    {id:"edit", text:"Edit", items:[
                        {id:"undo", text:"Undo"},
                        {id:"redo", text:"Redo"}
                    ]}
                ]
            })
            myMenu.setOpenMode("win") //win atau web

            //Saat menu undo diklik, tampilkan alert
            myMenu.attachEvent("onClick", function(id) {
                if (id == "undo") {
                    dhtmlx.alert("Undo diklik");
                }
            });

        </script>   
    </body>
</html> 

 

2. CRUD sederhana

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

 

3. Toko Online

Menampilkan Katalog Produk pada Toko Online

Berikut akan membahas bagaimana menggunakan DHTMLX untuk menampilkan katalog produk untuk toko online.

Komponen utama yang digunakan yaitu:
- dhtmlxDataView (menampilkan data berkelompok, cocok untuk toko online dan galeri gambar)


Kali ini akan digunakan skin/tema “web”. Kalau pada tulisan sebelumnya dipakai skin/tema standar yaitu “skyblue”. Untuk memperoleh skin sesuai yang kita inginkan bisa menggunakan tool dhtmlxSkinBuilder yang disediakan oleh team DHTMLX secara online pada http://dhtmlx.com/docs/products/skinBuilder/

Kita menulis kode program pada 2 file terpisah yaitu:


1. index.html (untuk view)
2. dataview.php (untuk controller)

Langsung saja pada kode program, anda akan melihat seberapa singkatnya kode yang ditulis. Untuk database, yaitu tabel barang (handphone) dengan definisi sebagai berikut:

CREATE TABLE `barang` (
`bid` INT(11) NOT NULL AUTO_INCREMENT,
`bnama` VARCHAR(50) NOT NULL,
`prnama` VARCHAR(64) NULL DEFAULT NULL,
`bharga` FLOAT NULL DEFAULT NULL,
`bimg` VARCHAR(64) NULL DEFAULT NULL,
`splayar` VARCHAR(50) NULL DEFAULT NULL,
PRIMARY KEY (`bid`)
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB

index.html

<!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 onload="doOnLoad()">
	<p></p>
	<div id="myDataViewID" style="width: 800px; height: 600px"></div>
	<script>
		function doOnLoad() {
			var myDataView = new dhtmlXDataView({
				container: "myDataViewID",
				type:{
					template: "#bimg#<span class='dhx_strong'>#bnama#</span>#splayar#<br/> Harga: #bharga#",
					height: 140,
					width: 250
				}
			});

			myDataView.load("dataview-basic.php"); //muat database

			//Saat pointer mouse diletakkan pada item 
			myDataView.attachEvent("onMouseMove", function(id) {
				var data = myDataView.get(id); 
				dhtmlx.message({text: "Mouse Over<br>Item "+data.bnama});
			});

			//Saat tombol mouse diklik pada item 
			myDataView.attachEvent("onItemClick", function(id) {
				var data = myDataView.get(id); 
				dhtmlx.message({type: "alert", text: "Klik <br>Item "+data.bnama});
			});
		}
	</script>
</body> 

dataview.php

<?php
	include ("../../codebase/connector/dataview_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";	

	$dbconn = new PDO($dsn, $dbuser, $dbpassword);	

	$data = new DataViewConnector($dbconn, "PDO");

	$sql = "SELECT bid,bnama,prnama,bharga,bimg,splayar FROM barang";

	$data->dynamic_loading(10);
	$data->render_sql($sql, "bid", "bnama,prnama,bharga,bimg,splayar");
?> 

Test Drive DHTMLX

Copy kode dibawah ini lalu paste ke Text Area kemudian klik Run

var myDataView = new dhtmlXDataView({
				container: "output",
				type:{
					template: "#bimg#<span class='dhx_strong'>#bnama#</span>#splayar#<br/> Harga: #bharga#",
					height: 140,
					width: 250
				}
			});

			myDataView.load("../tutorial/3/dataview-basic.php"); //muat database

 

Text Area

Output
 

 

DEMO

SOURCE (termasuk versi complex)

 

 

4. Galeri Gambar

Galeri Gambar

Pada tulisan-tulisan DHTMLX sebelumnya umumnya pembahasan mengenai manipulasi data dari database. Pada tulisan kali ini akan membahas bagaimana menggunakan DHTMLX untuk mengakses file system. File system berhubungan dengan file dan folder/direktori. Perlu diperhatikan path/lokasi dari file/folder berbeda antara system operasi Windows dan *nix (UNIX, Linux), yaitu penggunaan slash dan backslash. Lalu permission terhadap file/folder pada system operasi *nix juga perlu diperhatikan (chmod, chown, 755 – Silahkan cari di Wikipedia).

DHTMLX menyediakan filesystem_connector.php untuk proses manipulasi terhadap file system. Seperti pada tulisan-tulisan sebelumnya conector ini sangat membantu dan memberi kemudahan bagi developer PHP untuk mengembangkan aplikasi berbasis web tanpa menulis kode program yang panjang dan rumit.

Disini akan dibahas mengenai Galeri Gambar & Uploader yang cukup sederhana. Hal-hal yang berhubungan diantaranya menampilkan gambar, upload gambar (unggah), hapus gambar dan sama sekali tidak berhubungan dengan database.

Komponen utama yang digunakan yaitu:
- dhtmlxWindow ( seperti Windows Form pada VB)
- dhtmlxDataView (menampilkan data berkelompok, cocok untuk toko online dan galeri gambar)
- dhtmlxForm untuk uploader gambar
- dhtmlxMenu (Context Menu saat item pada DataView di-klik kanan)
- dhtmlxPopup

Kita menulis kode program pada 3 file terpisah yaitu:
1. index.html (untuk view)
2. dataview.php (untuk controller)
3. dhtmlxform_item_upload.php (ini disediakan oleh DHTMLX, kita hanya mengubah nama dan lokasi upload sesuai yang kita inginkan)
4. gambar_delete.php (untuk menghapus gambar dari file system)

Langsung saja pada kode program,

 

index.html

<!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 onload="doOnLoad()">
	<p></p>
	<div id="output" style="width: 800px; height: 600px"></div>
	<script>
		function doOnLoad() {
			var myWins = new dhtmlXWindows();
			myWins.attachViewportTo(document.body);
			
			var gambarWindows = myWins.createWindow({
				id: "gbrwin",
				text: "Galeri Gambar",
				width: 800,
				height: 500,
				center: true
			});
			gambarWindows.keepInViewport(true);

			var myToolbar = gambarWindows.attachToolbar({
				items: [
					{id: "upload", type: "button", text: "Upload Gambar", img: "icons/upload.png"}
				]
			});

			var myPopup = new dhtmlXPopup({toolbar: myToolbar, id: "upload"});

			var myForm = myPopup.attachForm([
				{type: "fieldset", label: "Popup Uploader", list: [
					{type: "upload", name: "upload_gambar", inputWidth: 300, url: "upload/dhtmlxform_item_upload.php", 
					_swfLogs: "enabled", swfPath: "uploader.swf", swfUrl: "upload/dhtmlxform_item_upload.php"}
				]}				
			]);

			myForm.attachEvent("onBeforeFileAdd", function(filename, size){
			    var ext = filename.split('.').pop();
			    if (ext == "jpg" || ext == "jpeg" || ext == "JPG" || ext == "JPEG" || ext == "png" || ext == "PNG" || 
			    	ext == "bmp" || ext == "BMP" || ext == "gif" || ext == "GIF") {
			    	if (size > 500000) {
			    		dhtmlx.message({type: "error", text:'Tidak boleh melebihi 500 KB'});
			    	} else return true							    	
			    } else {
			    	dhtmlx.message({type: "error", text:'Hanya gambar saja<br>png,jpg,bmp,gif'});										    	
			    }		
			});

			myForm.attachEvent("onUploadComplete", function(count) {
				dhtmlx.message("Upload "+count+" file berhasil");
				semuaDataView.clearAll();
				semuaDataView.load("dataview-basic.php");
			})

			var semuaDataView = gambarWindows.attachDataView({
				type:{
					template: "<img src='upload/uploaded/#filename#' height='110' width='90'>
					<span class='dhx_strong'>#filename#</span>Size: #size# bytes<br/>",
					height: 140,
					width: 250
				}
			});

			var semuaDataViewDP = new dataProcessor("dataview-basic.php");
			semuaDataViewDP.init(semuaDataView);

			semuaDataView.load("dataview-basic.php");

			var myContextMenu = new dhtmlXMenuObject({
				parent: "contextArea",
				items:[
			        {id:"hapus", text: "Hapus", img: "icons/delete.png"}
			    ],
			    context: true
			});

			var selectedItem;
			var data;
			semuaDataView.attachEvent("onBeforeContextMenu", function(id,e) {
				myContextMenu._doOnContextBeforeCall(e,{id:id});
				semuaDataView.select(id);
				selectedItem = id;
				data = semuaDataView.get(id);
				return false;
			});

			myContextMenu.attachEvent("onClick", function(id) {
				if (id == "hapus") {
					semuaDataView.remove(selectedItem);
					dhx4.ajax.post("gambardelete.php?filename="+data.filename);
				} 
			})
		}
	</script>
</body>
</html>

Penjelasan index.html
- Baris 22-30 Buat komponen Window dan tempatkan pada document.body.
- Baris 31 Window tidak boleh keluar dari document.body
- Baris 33 Tempatkan Toolbar Upload pada Window
- Baris 39 Tempatkan Popup untuk upload pada Toolbar
- Baris 41 Tempatkan Form Uploader pada Toolbar, dhtmlxform_item_upload.php merupakan script untuk upload data ke server
- Baris 48 “onBeforeFileAdd” event saat file dipilih dan sebelum diupload ke server
- Baris 50, cek hanya file gambar saja
- Baris 52, file gambar tidak boleh melebihi 500KB
- Baris 60 “onUploadComplete” event setelah proses upload selesai
- Baris 80, ContextMenu merupakan menu yang muncul apabila saalah satu item pada DataView diklik-kanan
- Baris 90 “onBeforeContextMenu” event sesaat sebelum context menu tampil
- Baris 98, Event saat context menu (hapus) diklik

 

dataview.php

<?php
	include ("../../codebase/connector/dataview_connector.php");
	include ("../../codebase/connector/db_filesystem.php");

	$data = new DataViewConnector("", "FileSystem");
	$fileTypes = FileSystemTypes::getInstance();
	$fileTypes->setType('image');
	$data->render_table("upload/uploaded", "safe_name", "filename,full_filename,size,name,extension,date,is_folder");
?>

 

dhtmlx_item_upload.php (terletak di dalam folder UPLOAD)

<?php
	if (@$_REQUEST["mode"] == "html5" || @$_REQUEST["mode"] == "flash") {

		$name = $_FILES["file"]["name"];
		$extension = end((explode(".", $name))); # extra () to prevent notice

		$filename = time() . '_' . rand(100, 999) . '.' . $extension;
		move_uploaded_file($_FILES["file"]["tmp_name"],"uploaded/".$filename);

		header("Content-Type: text/json");
		print_r("{state: true, name:'".str_replace("'","\\'",$filename)."', extra: {info: 'just a way to send some extra data', param: 'some value here'}}");
	}
?>

gambar_delete.php

<?php
	$filename = $_GET['filename'];
	unlink('upload/uploaded/'.$filename);
?>

 

Tidak disertai DEMO karena UPLOAD FILE KE SERVER, silahkan download SOURCE CODE

5. Grafik

grafik chart javascript js php dhtmlx

DHTMLX Suite menyediakan komponen untuk menampilkan grafik, yaitu dhtmlxChart. Ada 2 cara untuk menampilkan grafik dengan dhtmlxChart. Cara pertama bisa dilakukan dengan mengambil data langsung dari database lalu ditampilkan pada Grafik/Chart. Cara kedua data dari database ditampilkan ke dalam grid (dhtmlxGrid) terlebih dahulu lalu grafik akan menampilkan data dari grid, jadi ada hubungan antara Grid dan Grafik. Cara kedua memiliki kelebihan diantaranya bisa melakukan filter pada Grid dan Grafik menampilkan data sesuai Grid yang sudah di-filter tersebut.

 

DHTMLXChart mendukung beberapa tipe grafik diantaranya:

1. Line

grafik line/line chart

2. Bar

grafik bar/bar chat

3. Area

grafik area/area chart

4. Radar

grafik radar/radar chart

5. Scatter

grafik scatter/scatter chart

6. Pie

grafik pie/pie chart

Kita akan menulis kode program pada 2 file terpisah, yaitu:

  1. index.html (untuk View)
  2. grid-chart.php (untuk controller Grid)

Database hanya menggunakan satu tabel produksi dengan field id,tahun,output (PERHATIAN: DHTMLX sangat menganjurkan primary key AUTOINCREMENT, dalam hal ini id). index.html ada pada bagian paling bawah tulisan ini

grid-chart.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";		//mysql or pgsql
	$dbconn = new PDO($dsn, $dbuser, $dbpassword);	
	
	$data = new GridConnector($dbconn, "PDO");
	$sql = "SELECT id,tahun,output FROM produksi";
	$data->render_sql($sql, "id", "tahun,output");
?>

Adapun tampilan dari grid-chart.php ini saat dibuka dengan browser:

<rows>
	<row id="1">
		<cell>2010</cell>
		<cell>40</cell>
	</row>
	<row id="2">
		<cell>2011</cell>
		<cell>60</cell>
	</row>
	<row id="3">
		<cell>2012</cell>
		<cell>50</cell>
	</row>
	<row id="4">
		<cell>2013</cell>
		<cell>30</cell>
	</row>

	...

</rows>

 

Test Drive DHTMLX

Copy kode dibawah ini lalu paste ke Text Area kemudian klik Run

	//Buat layout utama
	var myLayout = new dhtmlXLayoutObject({
		parent: "output",
		pattern: "2U",
		cells: [
			{id: "a", text: "Grid"},
			{id: "b", text: "Chart"}
		]
	});	

	//Grid dengan mengambil data dari database
	var myGrid = myLayout.cells("a").attachGrid();
	myGrid.setHeader("Tahun, Ouput");
	myGrid.attachHeader("#text_filter,#select_filter");
	myGrid.setColTypes("ro,ro");
	myGrid.init();	

	//Chart pada layout kanan (b)
	var myChart = myLayout.cells("b").attachChart({
		view: "bar", //bar,pie,line
		color: 
		function(obj) {
			if (obj.data1 < 40) {
				return "red";
			} else return "#66ccff";
		},
		gradient: "3d",
		value: "#data1#", //#data0# -> kolom pertama grid 
		label: "#data0#, #data1#", //#data1# -> kolom kedua grid
		tooltip: "#data0#, #data1#", //info ketika mouse over
		width: 30,
		origin: 0,
		yAxis: {
			title: "Output",
			start: 0,
			step: 20,
			end: 200
		},
		xAxis: {
			title: "Tahun",
			template: "#data0#"
		}
	});

	//Integrasi Grid & Chart
	function refresh_func() {
		myChart.clearAll();
		myChart.parse(myGrid, "dhtmlxgrid");
	}

	//Event saat memuat data ke grid & perubahan(filter)
	myGrid.load("../tutorial/grid-chart.php", refresh_func);
	myGrid.attachEvent("onGridReconstructed", refresh_func);

 

Text Area

Output
 

 

Isi lengkap dari file index.html untuk menampilkan seperti di atas adalah:
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
	<title>Grafik/Chart</title>
	<script src="/codebase/dhtmlx.js"></script>
	<link rel="stylesheet" href="/codebase/dhtmlx.css"></link>
	<style type="text/css">
	html,body {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin: 0px;
	}
	</style>
</head>
<body>
	<div id="output" style="width: 800px; height: 400px"></div>
	<script type="text/javascript">

	//Buat layout utama
	var myLayout = new dhtmlXLayoutObject({
		parent: "output",
		pattern: "2U",
		cells: [
			{id: "a", text: "Grid"},
			{id: "b", text: "Chart"}
		]
	});	

	//Grid dengan mengambil data dari database
	var myGrid = myLayout.cells("a").attachGrid();
	myGrid.setHeader("Tahun, Ouput");
	myGrid.attachHeader("#text_filter,#select_filter");
	myGrid.setColTypes("ro,ro");
	myGrid.init();	

	//Chart pada layout kanan (b)
	var myChart = myLayout.cells("b").attachChart({
		view: "bar", //bar,pie,line
		color: 
		function(obj) {
			if (obj.data1 < 40) {
				return "red";
			} else return "#66ccff";
		},
		gradient: "3d",
		value: "#data1#", //#data0# -> kolom pertama grid 
		label: "#data0#, #data1#", //#data1# -> kolom kedua grid
		tooltip: "#data0#, #data1#", //info ketika mouse over
		width: 30,
		origin: 0,
		yAxis: {
			title: "Output",
			start: 0,
			step: 20,
			end: 200
		},
		xAxis: {
			title: "Tahun",
			template: "#data0#"
		}
	});

	//Integrasi Grid & Chart
	function refresh_func() {
		myChart.clearAll();
		myChart.parse(myGrid, "dhtmlxgrid");
	}

	//Event saat memuat data ke grid & perubahan(filter)
	myGrid.load("../tutorial/grid-chart.php", refresh_func);
	myGrid.attachEvent("onGridReconstructed", refresh_func);

	</script>
</body>
</html> 

 

DEMO

SOURCE

6. Export Grid

Export DHTMLX Grid ke Excel & PDF
 

Kali ini akan dibahas bagaimana caranya export data dari Grid ke Excel dan PDF. DHTMLX menyediakan library yang dipersiapkan sedemikian rupa sehingga hanya membutuhkan sebaris kode. Untuk proses export ini, hal penting yang perlu diingat adalah:

- Jumlah data yang akan di-export, semakin banyak maka waktu yang dibutuhkan semakin lama

- Module XDebug yang diaktifkan(enabled) pada PHP akan membuat proses export jauh lebih lama dari biasanya , anda bisa melihat dengan phpinfo()

Library yang dibutuhkan :

1.Grid-pdf-php, dengan komponen penyusun yang utamanya TCPDF (http://dhtmlx.com/x/download/regular/grid-pdf-php.zip)

2.Grid-excel-php, dengan komponen penyusun yang utamanya PHP Excel (http://dhtmlx.com/x/download/regular/grid-excel-php.zip)

Setelah library diatas didownload, extract ke dalam directory/folder codebase, misalnya pada xampp (htdocs/codebase)

Komponen dan database yang digunakan sama dengan yang ada pada TUTORIAL CRUD SEDERHANA

index.html

<!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="myID" style="width: 600px; height: 300px"></div>

	<script>
		var myGrid = new dhtmlXGridObject("myID");
		myGrid.setHeader("Nama,Alamat");
		myGrid.setColTypes("ro,ro");
		myGrid.attachHeader("#text_filter,#text_filter");
		myGrid.attachFooter("-,Footer1");
		myGrid.attachFooter("-,Footer2");
		myGrid.init();
		
		myGrid.load("grid.php"); //muat database ke grid

		function toXLS() {
			myGrid.toExcel("../../codebase/grid-excel-php/generate.php");          
		}

		function toPDF() {
			myGrid.toPDF("../../codebase/grid-pdf-php/generate.php");          
		}

	</script>

	<p></p>
	<p><a href="javascript:void(0)" onclick="toXLS()">to Excel</a></p>
	<p></p>
	<p><a href="javascript:void(0)" onclick="toPDF()">to PDF</a></p>
</body>
</html>

 

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");
?>

DEMO

SOURCE CODE

7. Realtime Web App dengan WebSocket

 

Apa itu websocket ? Websocket adalah protokol komunikasi pada komputer yang memungkinkan komunikasi 2 arah pada satu koneksi TCP (wikipedia & translate by google).

Manfaat WebSocket (source: Codepolitan)

  1. Websocket memungkinkan server untuk mendorong data kepada klien yang terhubung (http biasanya client meminta terlebih dahulu baru server memberikan data yang diminta)
  2. Mengurangi traffic atau lalu lintas jaringan yang tidak perlu dan latency menggunakan full duplex melalui koneksi tunggal.
  3. Streaming melalui proxy dan firewall, mendukung komunikasi simultan hulu dan hilir.
  4. Kompatibel dengan pre-WebSocket dunia dengan cara beralih dari koneksi HTTP ke WebSockets.

Sampai saat ini untuk aplikasi realtime saya biasanya menggunakan AJAX (panggil ajax setiap sekian detik). Mungkin bisa dibayangkan jika polling ajax tiap 5 detik dan client yang terhubung mencapai ratusan sementara tidak ada perubahan data, sudah berapa trafik yg dipakai ?

Saya akan mencoba mengembangkan aplikasi CRUD SEDERHANA yang saya tulis sebelumnya dengan WebSocket dari https://github.com/Flynsarmy/PHPWebSocket-Chat.

Dengan ini kita bisa mengembangkan sistem yang lebih lengkap misalnya DASHBOARD REALTIME bisa berupa data maupun grafik. Logika dari aplikasi ini:

  1. Server harus dijalankan agar client dapat terhubung
  2. Client1, Hallo Server saya terhubung dengan kamu
  3. Client2, Hallo Server saya terhubung dengan kamu
  4. Client3, Hallo Server saya terhubung dengan kamu
  5. Client2 insert/update/delete data, kirim info ke server
  6. Server, ada perubahan data dari Client2, beritahukan ke Client1 & Client3
  7. Client1 & Client3, saya terima info dari server  & apa yang harus saya lakukan ? refresh, redirect, atau exit ?

Langkah-langkahnya (ingat CRUD SEDERHANA):

- Pada index.html, tambahkan source javascript

<script src="/jquery.min.js"></script>
<script src="/websocket/fancywebsocket.js"></script>

 - Lalu diantara tag <script></script>, sebelum seluruh coding DHTMLX tambahkan

//Define websocket server
var Server;
Server = new FancyWebSocket('ws://127.0.0.1:9300');
Server.bind('message', function( payload ) {
	switch (payload) {
		case 'grid':
			myGrid.clearAndLoad("grid.php");
			dhtmlx.message('Data Changed');
			break;
	}
});

Server.connect();

 

 - Terakhir pada index.html di bagian Event "onAfterUpdate" (saat insert/delete/update data oleh Form), tambahkan bagian ini supaya client yang bersangkutan mengirim info ke server bahwa dia telah melakukan perubahan data, sehingga server akan memberikan info kepada client lainnya selain client yang melakukan perubahan data tersebut

Server.send( 'message', 'grid' );

 

 - Adapun isi file server.php yang nantinya akan di eksekusi dengan perintah php server.php

<?php
// prevent the server from timing out
set_time_limit(0);

// include the web sockets server script (the server is started at the far bottom of this file)
require 'class.PHPWebSocket.php';

// when a client sends data to the server
function wsOnMessage($clientID, $message, $messageLength, $binary) {
	global $Server;
	
	// check if message length is 0
	if ($messageLength == 0) {
		$Server->wsClose($clientID);
		return;
	}
	
	if ( sizeof($Server->wsClients) != 1 ) {
		//Send the message to everyone but the person who said it
		foreach ( $Server->wsClients as $id => $client ) {
			if ( $id != $clientID ) {
				$Server->wsSend($id, $message);
			}
		}
	}	
		
}

// when a client connects
function wsOnOpen($clientID)
{
	global $Server;
	$ip = long2ip( $Server->wsClients[$clientID][6] );
	$Server->log( "$ip ($clientID) has connected." );
}

// when a client closes or lost connection
function wsOnClose($clientID, $status) {
	global $Server;
	$ip = long2ip( $Server->wsClients[$clientID][6] );
	$Server->log( "$ip ($clientID) has disconnected." );
}

// start the server
$Server = new PHPWebSocket();
$Server->bind('message', 'wsOnMessage');
$Server->bind('open', 'wsOnOpen');
$Server->bind('close', 'wsOnClose');
// for other computers to connect, you will probably need to change this to your LAN IP or external IP,
// alternatively use: gethostbyaddr(gethostbyname($_SERVER['SERVER_NAME']))
$Server->wsStartServer('127.0.0.1', 9300);

?>

PREVIEW

- Atas Windows 10 & Bawah Linux Mint VMWare

Realtime App WebSocket

 

DEMO (Buka 2 atau 3 tab, Edit data di salah satunya. Lalu lihat perubahan di tab lainnya tanpa refresh page)

Tidak DIJAMIN bisa running di website saya karena harus menjadi WebSocket Server 

(Untuk lebih pasti silahkan download SOURCE lalu extract dan jalankan server.php dalam directory websocket dengan perintah "php server.php" di command line) , jadi localhost anda menjadi websocket server. Kemudian dari browser akses index.html - buka di 2 atau 3 tab lalu ubah data di salah satunya. yang lain akan refresh begitu ada perubahan data tanpa reload page

- Silahkan ubah IP Address websocket server pada bagian akhir server.php & bagian awal index.html apabila ingin diakses oleh komputer lain (disini saya buat 127.0.0.1)

 

SOURCE

 

 

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 78.5% Indonesia
United States 9.8% USA
Singapore 2.7% Singapore

Total:

53

Countries
002695
Today: 5
This Week: 45
This Month: 124