Membuat Chart menggunakan FusionCharts v.3 (Trial Version) dan CodeIgniter v.2

Mungkin sebagian teman-teman sudah tahu, salah satu library javascript yang sering digunakan programmer dalam pembuatan aplikasi yang membutuhkan charts. Library yang saya maksud tersebut adalah FusionCharts. Versi FusionCharts yang saya gunakan versi terbaru saat saya menulis artikel ini, yaitu versi 3. Banyak sekali  tutorial tersebar di blog-blog yang membahas penggunaan FusionCharts, namun kebanyakan dari tutorial tersebut menerapkannya pada bahasa pemrograman murni, misalkan: PHP, ASP, dll. Ada sedikit sekali tutorial FusionCharts yang menerapakan ke dalam suatu framework. Disini saya akan mencoba memberikan penjelasan kepada teman-teman bagaimana menggunakan FusionCharts v.3 kedalam framework PHP, Codeigniter v.2. Sebelumnya anda persiapkan dulu file-file yang dibutuhkan dalam tutorial ini:

  • FusionCharts v.3 download disini
  • Codeigniter v.2 download disini

Setelah melakukan download extract codeigniter ke dalam localhost server yang anda miliki (saya menggunakan xampp 1.7.7). Berikut ini struktur dari hasil extract codeigniter:

  • root
    • application
    • system
    • user_guide

tambahkan folder _assets setelah root, dan di folder assets tersebut tambahkan charts dan js. Sehingga struktur foldernya menjadi:

  • root
    • application
    • system
    • user_guide
    • _assets
      • charts
      • js

setelah membuat struktur folder seperti diatas, extract file zip FusionCharts v.3. Copy-paste file Pie3D.swf yang ada di folder /Charts/Pie3D.swf ke dalam folder /_assets/charts pada codeigniter. Copy-poste file FusionCharts.js yang ada di folder /SourceCode/JavaScript/Legacy/ FusionCharts.js ke dalam folder /_assets/js pada codeigniter. Copy-poste file FusionCharts.php yang ada di folder /Code/PHP/Includes/ FusionCharts.php ke dalam folder /application/libraries.

Selanjutnya, import file MySQL dump.sql yang ada di folder /Code/PHP/DB ke dalam database anda (saya beranggapan anda menggunakan MySQL). Setelah anda mengimportnya, akan muncul database baru yang bernama factorydb. Maka dari itu konfigurasikan file database.php di folder /application/config dengan merubah

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'factorydb';

Jika anda mengikuti langkah-langkah ini dengan benar, maka anda dapat melanjutkan tahap berikutnya, yaitu coding. Buatlah 3 file sebagai berikut, charts.php yang anda masukkan ke folder /application/controllers, charts_model.php yang anda masukkan ke folder /application/models, dan charts_view.php yang anda masukkan ke folder /application/views.

Membuat file charts_model.php, isi dari file tersebut adalah sebagai berikut:

<?php
class Chart_model extends CI_Model{
	function __construct(){
		parent::__construct();

	}
	function chart2g($id){

// hasil dari ActiveRecord ini sama dengan script SELECT SUM(‘Quantity’)
// ‘TotOutput’ FROM factory_output WHERE FactoryId=$id
				$this->db->select_sum('Quantity', 'TotOutput');
				$this->db->where('FactoryId',$id);
				$result2 = $this->db->get('factory_output');
				return $result2->result();
		}

	function getAll(){

// hasil dari ActiveRecord ini sama dengan script SELECT * FROM  factory_master

		$result = $this->db->get('factory_master');
		return $result->result();
	}
}

Model di dalam codeigniter merupakan bagaian yang mengurusi masalah database. Pada code diatas saya menggunakan active record yang telah disediakan codeigniter. Tujuan saya menggunakan active record adalah karena dengan active record akan mengatasi serangan SQL Injectioan, selain itu memberikan fleksibilitas bagi pengembang jika ingin pindah ke databse server lain, misalkan jika kita menginginkan pindah dari MySQL ke Oracle, tidak perlu melakukan query ulang untuk menyesuaikan query pada database server baru. Cukup dengan cara merubah konfigurasi yang ada pada file database.php. Pada code model diatas, saya membuat dua fungsi function chart2g($id) dan function getAll(). Pada fungsi chart2g($id) akan menghasilkan query SELECT SUM(‘Quantity’) ‘TotOutput’ FROM factory_output WHERE FactoryId=$id, sedangkan pada getAll() akan menghasilkan query SELECT * FROM  factory_master. Fungsi-fungsi model tersebut nantinya akan saya akses ke controller charts yang ada di file charts.php

Membuat file charts.php, isi dari file tersebut adalah sebagai berikut:

<?php
class Chart extends CI_Controller{
	function __construct(){
		parent::__construct();
//mengambil file FusionCharts.php di libraries

		include( APPPATH."libraries/FusionCharts.php");

//memanggil model chart_model

		$this->load->model('chart_model');
	}
	function chart2g(){
		$strXML = "<chart caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30' showBorder='1' formatNumberScale='0' numberSuffix=' Units'>";

// memanggil model chart_model pada fungsi getAll()

		$query1 = $this->chart_model->getAll();

		foreach($query1 as $row1){

//mengambil nilai yang ada di model chart_model pada fungsi chart2g

			$query2= $this->chart_model->chart2g($row1->FactoryId);
		foreach($query2 as $row2){
			$strXML .= "<set label='" . $row1->FactoryName . "' value='" . $row2->TotOutput . "' />";
			}
		}
		$strXML .= "</chart>";

//$data['graph'] ini akan dipanggil di file charts_view.php

		$data['graph'] = renderChart(base_url()."_assets/chart/Pie3D.swf", "", $strXML, "FactorySum", 600, 300, false, false);
		$this->load->view('chart_view',$data);
	}
}

Pada code controller diatas, saya terlebih dahulu include file FusionCharts.php include( APPPATH.”libraries/FusionCharts.php”);, dimana file ini merupakan file yang saya ambil dari extract BasicDBExample (Trial Version) yang sudah saya jelaskan pada pembahasan sebelumnya. Saya membuat fungsi chart2g(), di dalam fungsi akan memanggil model ‘chart_model, dimana model ini yang barusan kita buat diatas  $this->load->model(‘chart_model’); dan memanggil kedua fungsi dari model tersebut. Code-code berikutnya merupakan hasil konversi code dari file BasicDBExample.php yang ada di file zip BasicDBExample pada folder /Code/PHP/DBExample. Semua output dari code diatas saya jadikan sebuah variable $data[‘graph’] yang nantinya akan saya panggil pada bagian view.

Membuat file charts_view.php, isi dari file tersebut adalah sebagai berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
        <!-- FUSION CHARTS -->
	<script type="text/javascript" src="<?php echo base_url()?>_assets/js/FusionCharts.js"></script>
    </head>
    <body>
//mengambil variable $graph dari file charts.php
        <?php echo $graph ; ?>
    </body>
</html>

Variabel dari controller $data[‘graph’], saya panggil di view echo $graph ;.

Selanjutnya lihat hasilnya dengan mengakses http://localhost/root/index.php/chart/chart2g, anda akan melihat hasil dari code diatas, seperti gambar  berikut:

Sekian pengalaman saya dalam membuat fusioncharts denga codeigniter. Jika teman-teman ada pertanyaan/saran/kritik, silakan langsung saja memberikan komentar.

About irul

Kadang bisa serius amat. Tapi kebanyakan sih sukanya bercanda.

Posted on 26/03/2012, in programming and tagged , , . Bookmark the permalink. 1 Komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: