Tutorial CodeIgniter : Integrasi Open Flash Chart Dengan CodeIgniter

Chart atau diagram sudah menjadi hal yang wajib disajikan dalam sebuah aplikasi yang berhubungan dengan data-data yang berbentuk angka. Selain tampilannya yang menarik, orang awam contohnya seperti saya pun akan lebih mudah membaca data yang ingin disampaikan di dalamnya. Banyak contoh-contoh diagram yang bisa disajikan, contohnya seperti diagram batang, diagram lingkaran, grafik diagram dan yang lainnya saya sudah agak lupa (#haha). Di dalam website pun begitu juga, data yang dalam bentuk angka-angka sebaiknya ditampilkan melalui diagram. Diagramnya pun bisa dibuat secara manual ataupun otomatis. Kalau yang manual, sudah pasti datanya statis dan biasanya dibuat dengan aplikasi grafis semacam Adobe Sotosop. Nah, kalau yang otomatis, pastinya sudah berbentuk semacam plug-in siap pakai. Pada postingan kali ini, saya akan membahas cara membuat chart atau diagram dengan menggunakan Open Flash Chart dan CodeIgniter.

Open Flash Chart adalah plug-in open source berbasis Flash yang sampai saat ini sudah mencapai versi 2.xx. Di versi 2.xx ke atas, parsing data dari php ke Flash sudah menggunakan JSON (alternatif dari XML). Nah, lantaran saya belum paham dengan yang namanya JSON, maka pada tutorial ini saya gunakan Open Flash Cart versi 1.9.7 :D. Open Flash Cart bisa diintegrasikan dengan CodeIgniter maupun tanpa CodeIgniter, karena Open Flash Chart ini pemrogramannya sudah OOP, yang source code-nya bisa digunakan kembali alias reusable. Daripada banyak omong, ayo kita langsung aja menuju penerapan Open Flash Chart dengan CodeIgniter.

1. Siapkan dulu file-file framework CodeIgniter di direktori htdocs web server masing-masing. Kalau belum punya, silahkan download disini.

2. Jangan lupa juga, download Open Flash Chart yang versi 1.9.7 di situs resminya.

3. Setelah selesai mendownload Open Flash Chart, ekstrak dulu di sembarang tempat. Buka folder php-ofc-library, ubah nama file open-flash-chart.php menjadi graph.php. Copy file graph.php tersebut ke folder libraries framework CodeIgniter yang sudah kita siapkan di step awal tadi.

4. Buat folder asset di direktori root framework CodeIgniter. Kemudian di dalamnya buat lagi folder swf. Copy file open-flash-chart.swf ke folder swf tersebut.

5. Jangan lupa untuk mengcopy folder js (di dalamnya terdapat file swfobject.js) ke folder asset yang sudah kita buat. Maka susunannya seperti berikut :

– asset
-swf
– open-flash-chart.swf
-js
– swfobject.js

6. Buka file graph.php dengan teks editor kesayangan kalian, ubah kode berikut :

$this->js_path = ‘js/’;
$this->swf_path = ”;

menjadi :

$this->js_path = base_url().’asset/js/’;
$this->swf_path = base_url().’asset/swf/’;

7. Setelah semua konfigurasi untuk Open Flash Chart selesai, sekarang kita buat Controller, Model dan View untuk di CodeIgniter. Untuk konfigurasi CodeIgniter, saya anggap rekan-rekan sudah paham. Nah, untuk Controller-nya kira-kira tampilan kodenya seperti di bawah ini :

class Polling extends CI_Controller {

	function __construct()
	{
		parent::__construct();
		$this->load->helper(array('url'));
		$this->load->database();
		$this->load->library('graph');
		$this->load->model('poll_model');
	}

	function index()
	{
		$data['soal'] = $this->poll_model->tampil_soal();
		foreach($data['soal']->result() as $d)
		{
			$id_soal = $d->id;
			$data['soal'] = $d->soal;
		}
		$data['jawaban'] = $this->poll_model->tampil_jawaban($id_soal);
		foreach($data['jawaban']->result() as $j)
		{
			$jwb[] = $j->jawaban;
			$jum[] = $j->counter;
		}
		$this->graph->set_data( $jum );
		$this->graph->set_data( $jum );
		$this->graph->title("Presentase Polling",'{font-size: 18px; color: #800000}');
		$this->graph->bar_glass( 55, '#FF9900', '#C31812', 'Tingkat Perbandingan Polling', 11  );
		$this->graph->line_hollow( 3, 5, '#79B900', 'Grafik Polling', 11 );
		$this->graph->set_x_labels( $jwb );
		$this->graph->set_tool_tip( '#x_label# : #val#');
		$this->graph->set_x_label_style( 10, '0×000000', 0 );
		$this->graph->set_y_max( 50 );
		$this->graph->width=800;
		$this->graph->height=400;
		$this->graph->y_label_steps( 10 );
		$this->graph->bg_colour='#ffffff';
		$this->graph->set_x_legend( 'Pilihan', 14, '#736AFF' );
		$this->graph->set_y_legend( 'Statistik', 14, '#736AFF' );
		$this->graph->set_output_type("js");
		$this->load->view('depan',$data);
	}
	function simpan()
	{
		$id=$this->input->post('jwb');
		$this->poll_model->simpan_poll($id);
		echo "";
	}
}

8. Dan di Model-nya saya buat seperti ini :

class poll_model extends CI_Model{

	function __construct()
	{
		parent::__construct();
	}
	function tampil_soal()
	{
		$q = $this->db->query("select * from tbl_pollingsoal where status='Y'");
		return $q;
	}
	function tampil_jawaban($id)
	{
		$q = $this->db->query("select * from tbl_pollingjawaban where id_soal=$id");
		return $q;
	}
	function simpan_poll($id)
	{
		$q = $this->db->query("update tbl_pollingjawaban set counter=counter+1 where id_jawaban=$id");
	}

}

9. Terakhir untuk View, saya susun seperti berikut :

<div id="chart">
<!--?php echo $this--->graph->render();
?></div>
<div id="soal">
<form action="<?php echo base_url(); ?>index.php/polling/simpan" method="post">
<!--?php 		echo $soal; 		foreach($jawaban--->result_array() as $j)
		{
			echo "
<div id="jwb"><input name="jwb" type="radio" value="&quot;.$j[" />". $j['jawaban']."</div>
";
		}
?>
<div id="jwb"><input class="tombol" type="submit" value="Vote" /></div>
</form></div>

Nah, gampang kan??? Mudah-mudahan bisa bermanfaat untuk rekan-rekan yang juga sedang mencari refrensi tentang Open Flash Chart. Di bawah ini sudah saya sediakan link demo dan link untuk mendownload file contohnya.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!