Blog Archives

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

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  (^_^)