Sebuah laporan/statistik terkadang tidak dapat terlepas dari kegiatan web developer, berawal dari pengalaman mungkin tutorial ini dapat membantu teman-teman yang sedang mencari cara bagaimana membuat laporan/statistik dengan tampilan yang keren dan sangat mudah diterapkan(dalam kasus ini kita akan menggunakan codeigniter).
Langkah pertama silahkan buat database dengan nama chart, kemudian buat tabel "penjualan" dengan struktur seperti dibawah ini:
Selanjutnya siapkan file codeigniter dan tempatkan pada localhost masing-masing. Buat folder chart didalam folder htdocs (jika pakai xammp) dan paste file-file codeigniter didalam situ.
Kemudian lakukan konfigurasi base url pada config.php yang terletak pada folder application/config, rubah baris ke 17 dengan script seperti dibawah:
$config['base_url'] = 'localhost/chart/';
buka file database.php yang masih berada pada satu folder dengan config.php, rubah kode pada baris 51-54 dengan
$db['default']['hostname'] = 'localhost'; $db['default']['username'] = 'root'; $db['default']['password'] = ''; $db['default']['database'] = 'chart';
buka file autoload.php yang masih satu folder dengan config.php, rubah kode pada baris 55 dengan
$autoload['libraries'] = array('database');
pada baris 112 dengan
$autoload['model'] = array('chart_model');
lanjut, buka file routes.php yang masih satu folder dengan file diatas. Lalu sesuaikan baris 41 menjadi
$route['default_controller'] = "chart";
Setelah konfigurasi ci selesai, buat controller dengan nama chart.php, masukkan kode berikut
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Chart extends CI_Controller {
public function index()
{
$data['pie_data']=$this->chart_model->GetPie();
$this->load->view('index.php',$data);
}
}
Buat model dengan nama chart_model.php, masukkan kode berikut
<?php
class Chart_model extends CI_Model{
public function GetPie(){
$query=$this->db->query("select * from penjualan;");
return $query;
}
}
?>
Buat view index.php, dan masukkan kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pie Chart with Google Chart</title>
<!--js google chart-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>
<body>
<script type="text/javascript">
//load package
google.load('visualization', '1', {packages: ['corechart']});
</script>
<?php $result = $pie_data;
//get number of rows returned
$num_results = $result->num_rows;
if( $num_results > 0){ ?>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['PL', 'Ratings'],
<?php
foreach ($result->result_array() as $row) {
extract($row);
echo "['{$nama}', {$rate}],";
} ?>
]);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"Data Penjualan Kendaraan Bermotor Tahun 2015"});
}
google.setOnLoadCallback(drawVisualization);
</script>
<?php
}else{
echo "Tidak ada data di database.";
} ?>
</script>
<div id="container">
<h1>Statistik Penjualan Kendaraan di Indonesia</h1>
<div id="visualization"></div>
</div>
</body>
</html>
Selesai, silahkan akses http://localhost/chart
Hasilnya akan nampak ciamik... hehe
That is, sekarang kalian sudah membuat laporan/statistik chart dengan cara yang mudah bukan?
