Kursus a2fahmi Gratis klik disini

Video Dahsyat !!! 3 orang diamankan Jawara Betawi diSidang Ahok 31 Jan 2017


Video Santai !!! Lagu Country "AHOK Gubernur Bar-Bar" di Sidang Ahok 31 Jan 2017


Video Macan !!! Ceramah Habib Rizieq depan Polda


Video Kacau !!! Massa Berdesakan Sambut Habib keluar dari polda


Video Heboh!!! HABIB RIZIEQ dicari INGGRIS


Video Mengejutkan!!! NOVEL BAMUKMIN diwawancara media ASING


Video Berani!!! Artis Kiwil Bela Ulama depan Polda


Fahmi Basya Kartapura On December - 22 - 2010

Diketahui:

  • Direktori Root untuk Program CodeIgniter Saya adalah ibook.
  • Nama Controllernya adalah graphik
  • Nama Metode Controllernya adalah batang
  • Nama Viewnya adalah tampilan.php

Contoh Kasus:

Pada link http://teethgrinder.co.uk/open-flash-chart/gallery-bar.php terdapat diagram seperti pada gambar dibawah ini:

Pertanyaan:

Bagaimana kita membuatnya dalam CodeIgniter … ?

Jawaban:

Download OpenFlashChart Versi 1.9.7 dari  http://teethgrinder.co.uk/open-flash-chart/download.php

Lalu Extractlah file hasil downloadan tersebut dimana saja.

File-File yang Diperlukan

Dari hasil extrakan tadi maka ambillah file-file yang diperlukan seperti terlihat dibawah ini:

Membuat Library

  • Ambillah file “open-flash-chart.php” dalam folder php-ofc-library
  • Lalu rubahlah namanya menjadi graph.php
  • Kemudian masukkan ke dalam folder application/libraries

Membuat Helper

  • Ambillah file “open_flash_chart_object.php” dalam folder php-ofc-library
  • Lalu rubahlah namanya menjadi “open_flash_chart_object_helper”
  • Kemudian masukkan file tersebut ke dalam direktori application/helpers

Membuat Folder

  • Buatlah satu folder bernama “open_flash_chart” dalam direktori rootmu
  • Kemudian masukkan file open_flash_chart.swf dan folder js ke dalam direktori “open_flash_chart”

Merubah Library Graph

Bukalah library graph.php lalu rubahlah 2 baris dibawah ini:

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

Menjadi

$this->js_path = base_url().’open_flash_chart/js/';

$this->swf_path = base_url().’open_flash_chart/';

Membuat Controller

Buatlah satu Controller bernama graphik.php dengan isi seperti dibawah ini:

<?php

class Graphik  extends CI_Controller {

public function batang()

{

$this->load->library(‘graph’);

$bar = new bar_outline( 50, ‘#9933CC’, ‘#8010A0′ );

$bar->key( ‘Page views’, 10 );

$data = array();

for( $i=0; $i<9; $i++ )

{

$bar->data[] = rand(5,9);

}

$this->graph->title( ‘Bar Chart’, ‘{font-size: 20px;}’ );

$this->graph->data_sets[] = $bar;

$this->graph->set_x_labels( array( ‘January’,’February’,’March’,’April’,’May’,’June’,’July’,’August’,’September’ ) );

$this->graph->set_x_label_style( 10, ‘#9933CC’, 0, 2 );

$this->graph->set_x_axis_steps( 2 );

$this->graph->set_y_max( 10 );

$this->graph->y_label_steps( 4 );

$this->graph->set_y_legend( ‘Open Flash Chart’, 12, ‘#736AFF’ );

$this->load->view(‘tampilan’);

}

}

Keterangan:

$bar = new bar_outline( 50, ‘#9933CC’, ‘#8010A0′ ), digunakan untuk membuat objek diagram batang dengan argumen:

  • 50 adalah angka ketajaman warna
  • #9933CC adalah warna dari diagram batang
  • #9010A0 adalah warna garis luar diagram batang

$bar->key( ‘Page views’, 10 ), key adalah sebuat metode dari objek $bar dimana kode ini akan membuat Legend bertulisakan ‘Page views’ dengan ukuran font adalah 10.

$bar->data[] = rand(5,9), array data[] disini digunakan untuk menambahkan nilai ke dalam diagram batang.

$this->graph->title( ‘Bar Chart’, ‘{font-size: 20px;}’ ), kode ini digunakan untuk membuat judul.

$this->graph->data_sets[] = $bar, kode ini untuk memasukkan obje $bar kedalam graphik.

$this->graph->set_x_labels, kode ini digunakan untuk membuat label pada koordinat X.

$this->graph->set_x_label_style( 10, ‘#9933CC’, 0, 2 ), kode ini digunakan untuk menambahkan style ke label dimana 10 adalah ukuran font dan ‘#9933CC’ adalah warna font, angka 0 saya tidak tahu,  serta angka 2 adalah jarak labelnya setiap berapa batang.

$this->graph->set_x_axis_steps( 2 ), kode ini untuk membuat satu garis kecil diatas label, dimana angka 2 menyatakan bahwa axis tersebut dibuat dengan jarak 2 batang.

$this->graph->set_y_max( 10 ), kode ini berarti angka maximal pada koordina Y adalah 10.

$this->graph->y_label_steps( 4 ), kode ini berarti 4 langkah dari angka 0 sampai angka 10.

$this->graph->set_y_legend( ‘Open Flash Chart’, 12, ‘#736AFF’ ), kode ini digunakan untuk membuat legend pada koordinat Y.

Membuat View

Buatlah satu view bernama tampilan.php dengan isi seperti dibawah ini:

<?php

$this->load->helper(‘open_flash_chart_object’);

echo $this->graph->render();

echo open_flash_chart_object(500,300, site_url(‘graphik/batang’),false, $this->graph->swf_path);

?>

Muncul Pertanyaan:

Diagram batangnya sudah keluar tapi kenapa ada tulisan seperti ini yang keluar juga :

&title=Bar+Chart,{font-size: 20px;}& &x_label_style=10,#9933CC,0,2& &x_axis_steps=2& &y_legend=Open Flash Chart,12,#736AFF& &y_ticks=5,10,4& &x_labels=January,February,March,April,May,June,July,August,September& &y_min=0& &y_max=10& &filled_bar=50,#9933CC,#8010A0,Page+views,10& &values=7,7,7,5,7,7,5,8,5&

Jawaban:

Gantilah tulisan dibawah ini

echo $this->graph->render();

Menjadi

echo ‘<span style=”display:none”>’.$this->graph->render().'</span>';


Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.




Categories: CodeIgniter

One Response

  1. Ari Karniawan says:

    Terima kasih Fahmi Basya Kartapura, bermanfaat banget. setelah saya cari2 tutorial sana sini. tutorial pak fahmi yang menyelamatkan saya..

    Semoga sukses selalu. salam kenal

Leave a Reply