Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2011 IlmuKomputer.Com 1

Chart Dinamis dengan PHP-XML-JSChart Fadlika Dita Nurjanto fadlikadn@gmail.com http://fadlikadn.wordpress.com

Artikel ini sesungguhnya lanjutan dari artikel saya sebelumnya, masih berkutat pada pembuatan chart dengan JSChart pada kasus yang sama, yaitu rekap data mahasiswa selama 5 tahun terakhir. Tapi bedanya, di sini chart tersebut sudah

dikembangkan lebih lanjut. Chart ini bisa digunakan sebagai monitoring secara realtime yang tidak memakan resource banyak, karena solusi AJAX yang digunakan di sini dapat menekan resource sehingga menjadi lebih rendah. Selain AJAX, PHP dan MySQL digunakan untuk mempermudah konektivitas antara server dan client side. Jika pada artikel sebelumnya, data pada chart hanya bersifat statis (karena dideklarasikan langsung pada source code), sehingga kurang fleksibel. Sekarang, data jumlah mahasiswa akan disimpan pada database MySQL. Sebelumnya, kita buat databasenya terlebih dahulu (pada MySQL). Pada MySQL, ketikkan sintaks sebagai berikut : CREATE DATABASE `jschart` ; CREATE TABLE `sum_student` ( `tahun` VARCHAR( 5 ) NOT NULL , `jumlah` VARCHAR( 255 ) NOT NULL ) ENGINE = INNODB; Masukkan data mahasiswa selama 5 tahun terakhir : INSERT INTO `sum_student` ( `tahun` , `jumlah` ) VALUES ('2006', '150'); INSERT INTO `sum_student` ( `tahun` , `jumlah` ) VALUES ('2007', '90'); INSERT INTO `sum_student` ( `tahun` , `jumlah` ) VALUES ('2008', '200'); INSERT INTO `sum_student` ( `tahun` , `jumlah` ) VALUES ('2009', '350'); INSERT INTO `sum_student` ( `tahun` , `jumlah` ) VALUES ('2010', '267');

Lisensi Dokumen: Copyright © 2003-2011 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2011 IlmuKomputer.Com 2

Pada PHPMyAdmin, tampilannya sebagai berikut :

Setelah database selesai, langkah selanjutnya adalah membuat file-file yang dibutuhkan dalam pembuatan chart ini. Di sini dibutuhkan 5 file termasuk file library JSChart itu sendiri. Alur data di sini membutuhkan beberapa elemen,yaitu PHP, XML, dan Javascript. XML digunakan untuk menghubungkan PHP dengan Javascript (JSChart).

File yang dibutuhkan :

- Class.main.php - Mysqltoxml.php - Jschart.js - Chart.php - Class.ajax.js

File class.main.php digunakan untuk menyimpan konfigurasi pada server, seperti host, user, password, database, dan variabel-variabel yang akan digunakan untuk konfigurasi JSChart.

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2011 IlmuKomputer.Com 3

File class.main.php

<?php $GLOBALS['tbl_data'] = "sum_student"; $GLOBALS['vl_tahun'] = "tahun"; $GLOBALS['vl_jumlah'] = "jumlah"; $GLOBALS['db'] = "jschart"; $GLOBALS['type_bar'] = "bar"; $GLOBALS['setAxisColor'] = "#FFFFFF"; $GLOBALS['setAxisNameColor'] = "#B2D4E9"; $GLOBALS['setAxisNameX'] = "Tahun"; $GLOBALS['setAxisNameY'] = "Jumlah"; $GLOBALS['setAxisValuesColor'] = "#35FA08"; $GLOBALS['setBackgroundColor'] = "#151515"; $GLOBALS['setBarOpacity'] = 1; $GLOBALS['setGridColor'] = "#B5DBE3"; $GLOBALS['setGridOpacity'] = 0.1; $GLOBALS['setSize_width'] = 600; $GLOBALS['setSize_height'] = 400; $GLOBALS['setTitle'] = "Data Mahasiswa Baru"; $GLOBALS['setTitleColor'] = "#FFFFFF"; class class_connect { public $host = "localhost"; public $user = "root"; public $password = ""; public $db_name = "jschart"; public function connect() { if(!$this->con) { $con_host = @mysql_connect($this->host,$this->user,$this->password) or die(mysql_error()); if($con_host) { $con_db = @mysql_select_db($this->db_name,$con_host) or die(mysql_error()); if($con_db) { $this->con = true; return true; } else { return false; } } else { return false; } } else { return false; } } } ?>

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2011 IlmuKomputer.Com 4

Setelah itu, kita buat file mysqltoxml.php. File ini digunakan untuk mengkonversi data dari format MySQL menjadi format XML. Kenapa harus XML, karena untuk mengenerate chart dengan library JSChart, tidak bisa menggunakan cara direct dari PHP langsung ke sintaks javscript, tetapi menggunakan perantara XML. Format XML

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2011 IlmuKomputer.Com 5

File mysqltoxml.php

<?php include('class.main.php'); $koneksi = new class_connect(); $koneksi->connect(); header('Content-Type: text/xml'); $SQL = "SELECT * FROM ".$GLOBALS['tbl_data']." ORDER BY ".$GLOBALS['vl_tahun']; $query = mysql_query($SQL) or die(mysql_error()); echo "<?xml version='1.0'?>"; echo "<JSChart>"; echo "<dataset type='".$GLOBALS['type_bar']."'>"; while($result = mysql_fetch_array($query)) { echo "<data unit='".$result[$GLOBALS['vl_tahun']]."' value='".$result[$GLOBALS['vl_jumlah']]."'/>"; } echo "</dataset>"; echo "<colorset>"; $query = mysql_query($SQL) or die(mysql_error()); while($result = mysql_fetch_array($query)) { if($result[$GLOBALS['vl_jumlah']]<100) { $color = '#BBDDE5'; } if($result[$GLOBALS['vl_jumlah']]>100 and $result['vl_jumlah']<=200) { $color = '#52AEC1'; } if($result[$GLOBALS['vl_jumlah']]>200 and $result['vl_jumlah']<=300) { $color = '#0D7EEF'; } if($result[$GLOBALS['vl_jumlah']]>300) { $color = '#074B8F'; } echo "<color value='".$color."'/>"; } echo "</colorset>"; echo "<optionset>"; echo "<option set='setTitle' value=\"'".$GLOBALS['setTitle']."'\"/>"; echo "<option set='setAxisNameX' value=\"'".$GLOBALS['setAxisNameX']."'\"/>"; echo "<option set='setAxisNameY' value=\"'".$GLOBALS['setAxisNameY']."'\"/>"; echo "<option set='setBackgroundColor' value=\"'".$GLOBALS['setBackgroundColor']."'\"/>"; echo "<option set='setAxisColor' value=\"'".$GLOBALS['setAxisColor']."'\"/>"; echo "<option set='setAxisValuesColor' value=\"'".$GLOBALS['setAxisValuesColor']."'\"/>"; echo "<option set='setAxisNameColor' value=\"'".$GLOBALS['setAxisNameColor']."'\"/>"; echo "<option set='setTitleColor' value=\"'".$GLOBALS['setTitleColor']."'\"/>"; echo "<option set='setSize' value='".$GLOBALS['setSize_width'].",".$GLOBALS['setSize_height']."'/>"; echo "<option set='setGridOpacity' value='".$GLOBALS['setGridOpacity']."'/>"; echo "<option set='setGridColor' value=\"'".$GLOBALS['setGridColor']."'\"/>"; echo "<option set='setBarOpacity' value='".$GLOBALS['setBarOpacity']."'/>"; echo "</optionset>"; echo "</JSChart>"; ?>

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2011 IlmuKomputer.Com 6

Step berikutnya adalah membuat script AJAX. Script ini bertujuan untuk men-generate ulang file mysqltoxml.php tanpa meload seluruh elemen halaman web. File class.ajax.js

Langkah terakhir adalah membuat file chart.php. File ini digunakan untuk menampilkan chart sesuai konfigurasi pada file mysqltoxml.php.

// JavaScript Document var XMLHttpRequestObject = false; if(window.XMLHttpRequest){ XMLHttpRequestObject = new XMLHttpRequest(); } else if(window.ActiveXObject){ XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } function getInfo(dataSource, divID) { if(XMLHttpRequestObject) { var obj = document.getElementById(divID); var chartnew = new JSChart(divID,'bar'); XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.onreadystatechange = function() { obj.innerHTML = "<img src='ajax-loading.gif'>"; obj.height = 400; obj.width = 600; if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { obj.innerHTML = ""; chartnew.setDataXML(dataSource); chartnew.draw(); } } XMLHttpRequestObject.send(null); } }

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2011 IlmuKomputer.Com 7

File chart.php

Hasil akhirnya adalah sebagai berikut:

Saat pertama kali di-load, javascript pada chart.php dijalankan. Untuk mengupdate data secara langsung, cukup menekan tombol yang ada di atas chart.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Chart with XML</title> <script type="text/javascript" src="jscharts.js"></script> <script type="text/javascript" src="class.ajax.js"></script> </head> <body> <div align="center"> <form> <input name="update" type="button" value="Update Data" onclick="getInfo('mysqltoxml.php','place')" id="update"/> </form> </div> <div id="place" style="vertical-align:middle; text-align:center;">Chart Here</div> <script type="text/javascript"> var chart_graph = new JSChart('place','bar'); chart_graph.setDataXML("mysqltoxml.php"); chart_graph.draw(); </script> </body> </html>

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2011 IlmuKomputer.Com 8

Source lengkap ada pada file lampiran. Untuk pengembangan lebih lanjut, coba cari kasus lain yang ada di sekitar kita dan cobalah temukan sebuah solusi yang efektif. Gunakan resource-resource yang ada. Maksimalkan kemampuan, tingkatkan kepekaan.. Selamat Belajar.. Referensi JSChart Manual http://www.jschart.com Holzner, Steve. 2006. Ajax For Dummies. Wiley Publishing PHP Manual http://www.php.net Biografi Penulis

Fadlika Dita Nurjanto. Lahir di Wonosobo, 9 November 1991. Menyelesaikan SD di SD 2 Wonosobo tahun 2004, SMP 1 Wonosobo tahun 2007, dan SMK 1 Wonosobo tahun 2010. Kemudian meneruskan studi di ITS Surabaya dengan jurusan Teknik Informatika. Semasa di SMK, menjadi programmer di DiengCyber, sebuah Komunitas IT di Wonosobo, Jateng. Saat ini konsentrasi ke pengembangan Aplikasi Enterprise, Pendidikan, dan UKM. Informasi lebih lanjut tentang penulis : Blog : http://fadlikadn.wordpress.com Email : fadlikadn@gmail.com