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.
simple_grid_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..

Advertisements

About Polairut

Abadi Harahap, I'm working in Supply Chain Third Party Logistic as Supply Chain Consultant. Daily in touch in Warehouse Operation, Transport System and provide advice for solution. I like hiking, open a tent in a mountain, enjoy the nature. Sometime write code for web, Android app and its for pleasure, not for pressure. Any opportunity you can drop me an email at badi_hrp@yahoo.com . I will give you my mobile. thanks.

Posted on October 11, 2009, in happy coding and tagged , , , , , , , . Bookmark the permalink. 2 Comments.

  1. untuk script lengkapnya dapat di download di
    http://www.ziddu.com/download/6879345/retrive-data-to-grid-from-database-mysql-php.rar.html

    Thanks, selanjutnya saya akan memberikan contoh grid interaktif dengan dhtmlx. Stay tune.

  2. Mas kok linknya sudah tidak aktif lagi ya, tolong kirim lewat email dong linknya πŸ™‚
    Terimakasih sebelumnya.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: