Menampilkan data dari database ke dhmlxgrid

Menyambung dari posting terdahulu tentang customize component dengan javascript library, maka saya akan berikan contoh tentang component dhtmlx yang merupakan javascript library. Disini saya akan coba menampikan data ke dalam grid(dhtmlxgrid) dari database. Disini saya menggunakan database PHP + mysql. Mari kita mulai saja. Untuk librarinya dapat didownload di dhtmlx.

Pertama-tama create terlebih dahulu halaman .htmlnya. Ini untuk membentuk component gridnya terlebih dahulu.

Grid DHTMLX
















  

    
 
    
PENJUALAN PERANGKAT KOMPUTER 
    
 
  
  

    
 
    
 
    
 
  
  

    
 
    
 
    
 
  



 	gridExample = new dhtmlXGridObject('gridExample');
	gridExample.setImagePath("dhtmlxgrid/imgs/");
	gridExample.setHeader("No,Kode Barang,Nama Barang,Harga,Quantity,Harga");
	gridExample.setInitWidths("30,90,250,60,65,60");
	gridExample.setColTypes("ro,ro,ro,ro,ro,ro");
	gridExample.setColAlign("right,left,left,right,right,right");
	gridExample.setEditable = "off";
	gridExample.setSkin("light");
	gridExample.loadXML('grid.php');
	gridExample.init();

Pada baris ke 8,9,10,11 adalah javascript library & css yang dibutuhkan untuk componen grid dhmtmlx.
Pada baris ke 34, ada tag “div” yang id-nya “gridExample“. Pada prinsipnya javascript library yang ada cara kerjanya adalah
dengan memanipulasi tag- tags html yang ada. Disini, tag div gridExample akan dimanipulasi oleh dhtmlx menjadi sebuah grid dengan
menggunakan syntax pada line 44 sampai dengan 55.

Pada baris ke 45, tag div id “gridExample” akan dimanipulasi menjadi Grid. Baris 46, merupakan tempat directory image yang ada pada css-nya.
Baris 47, header dari grid yang akan dibuat, spilitnya adalah tanda koma “,“.
Baris 48, Lebar dari tiap- tiap header grid, jika dibuat otomatis, maka masukkan tanda bintang “*“.
Baris 49, Type baris pada grid, Terdiri dari ro(read only), txt(text/ bisa diinput), ed (text, bisa diedit), dll.
Baris 50, Align dari tiap tiap column.
Baris 51, Editable, column grid bisa diedit atau tidak.
Baris 52, Skin, type skin dari grid
Baris 53, url untuk mengisi data pada grid. Disini, format datanya adalah dalam bentuk xml.
Baris 54, membentuk / generate grid.

Kira kira seperti itulah penjelasannya.

Kemudian kita akan isi data ke grid dengan menggunakan format data xml. Penjelasan mengenai xml dapat dibaca disini.Disini saya berikan contoh, data langsung dari database mysql dengan menggunakan PHP.

<?php
        define(DB_HOST, 'localhost');
	define(DB_USER, 'root');
	define(DB_PASS, '');
	define(DB_NAME, 'test');

	$conn = mysql_connect(DB_HOST, DB_USER, DB_PASS)  or die('Tidak dapat terkoneksi dengan database');
	mysql_select_db(DB_NAME, $conn);

	$sql = "select * from penjualan ";

	$xml=""
			." ";
	$i=1;
	$result = mysql_query($sql, $conn) or die('TESSSS');
	while ($row = mysql_fetch_array($result)) {
		$xml.=""
				." ".$i.""
				." ".$row['kode_barang'].""
				." ".$row['nama_barang'].""
				." ".$row['harga'].""
				." ".$row['quantity'].""
				." ".$row['total'].""
				.""
				."";
		$i++;
	}
	$xml.="";

	sayXML($xml);

	function sayXML($xml_){
		if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ){
			header("Content-type: application/xhtml+xml");
		}else{
			header("Content-type: text/xml");
		}

		$xml="\n";
		$xml.=$xml_;

		echo $xml;
	}
?>

Saya kira sekian dulu untuk penjelansannya, untuk source codenya secepatnya akan saya upload. So, stay tune..

Customize component html dengan javascript library

Sekarang sudah banyak tersedia library untuk customize componen pada html. Sebut saja extjs, dhtmlx, jquery yang sudah begitu terkenal & memberikan kelebihannya masing- masing.

Sebut saja table, yang merupakan component standard pada html. Dengan menggunakan javascript library, tampilan table tadi dapat menjadi bagus & lebih interaktif seperti component grid pada aplikasi desktop.

Tree , componen ini tidak ada pada html standart, tapi dengan menggunakan javascript library, anda dapat membuat tampilan website anda lebih menarik & interaktif.

Perbedaan mendasar antara extjs & dhtmlx adalah pada supplay datanya. Umumnya, supplay data pada extjs menggunakanformat data json, tetapi masih support menggunakan format data xml, javascript array dll.

kalo ada waktu, saya akan buat tutorial menggunakan dhtmlx.

C U.. & Keep In touch 😀

Javascript rasa PHP

Terkadang kita butuh fungsi javascript seperti fungsi fungsi miliknya php? semisal fungsi checkdate. Di phpjs fungsi ini sudah diconvert ke javascript. persis sama dengan function checkdate yang ada di-php.  Setidaknya ini mempermudah pekerjaan kita dalam mendevelop suatu system.

Fungsi  fungsi ini semua dapat didownload dalam satu package sesuai dengan keperluan kita atau per fungsi jika hanya memerlukan salah satu fungsi saja.

happy coding php  (^_^)