Export HTML Table to XLS

Selamat malam teman-teman, hehe… seperti biasa ada aja kalo mau nulis selalu aja ada ide.. hehe…ini sebenernya tugas kantor. Nah, latar belakang kali ini dimana kita membuat export excel namun letaknya ada di controller CodeIgniter. Saya tidak menampilkan data pada Views, sebab data yang ditampilan untuk keperluan data AJAX. Saya pikir ini akan sulit sekali, namun untungnya HTML5 memang luar biasa. Ikuti saja yuk langkah-langkahnya.

Langkah-1,  buatlah button namakan id btnExport

<p align="right"><button id="btnExport">Export</button></p>

Langkah-2, namakan table dan berikan nama id table_wrapper

<table id='table_wrapper' width='100%' class='table table-bordered table-condensed'>

Langkah-3, buat script javascriptnya.

 $(document).ready(function() {
 $("#btnExport").click(function(e) {
 e.preventDefault();

//getting data from our table
 var data_type = 'data:application/vnd.ms-excel';
 var table_div = document.getElementById('table_wrapper');
 var table_html = table_div.outerHTML.replace(/ /g, '%20');

var a = document.createElement('a');
 a.href = data_type + ', ' + table_html;
 a.download = 'exported_table_' + Math.floor((Math.random() * 9999999) + 1000000) + '.xls';
 a.click();
 });
});

done, hasil:

Terimakasih teman-teman semoga membantu 🙂

reference:
https://codepen.io/kostas-krevatas/pen/mJyBwp

Advertisements

Integrate Yii2-Highcharts Using Database

Selamat malam teman-teman, semoga hari ini menyenagkan, ada kalanya ketika membuat report perlu data visual agar mudah menarik kesimpulan dengan cepat, sebenernya kasus ini adalah kasus di kantor dimana teman-teman kesulitan membuat datavisual, nah data visual ini berupa Chart/grafik, lalu bagaimana ya jika kita integrasi chart kita dengan Yii2?

yuk ikut langkah berikut:

Langkah-1, akses ke halaman berikut:
https://github.com/miloschuman/yii2-highcharts

Langkah-2, pada CMD
composer require –prefer-dist miloschuman/yii2-highcharts-widget “dev-master”

Langkah-3, buatlah controller untuk menarik data

$data = Yii::$app->db->createCommand('select 
 regional,
 sum(msisdn) as jmlmsisdn,
 sum(bill_amount_1) as jmlba,
 sum(cb_bill_1) as jmlcb,
 sum(cb_bucket_1) as jmlcbu
 from dash_summary_aging_tracking 
 group by regional')->queryAll();
 //print_r($data);
 return $this->render('diagram', [
 'ddiagram' => $data 
 ]);

Langkah-4, buat view diagram kemudian tampilkan grafik.

<?php

use miloschuman\highcharts\Highcharts;
/* @var $this yii\web\View */

$this->title = 'Monitoring Collection';
 
foreach($ddiagram as $values){ 
 $a[0]= ($values['regional']); 
 $c[]= ($values['regional']); 
 $b[]= array('type'=> 'column', 'name' =>$values['regional'], 'data' => array((int)$values['jmlmsisdn'], 
 (int)$values['jmlba'],(int)$values['jmlcb'], (int)$values['jmlcbu']) ); 
}
 
echo 
Highcharts::widget([
 'options' => [
 'title' => ['text' => 'Monitoring Collection'],
 'xAxis' => [
 'categories' => ['jmlmsisdn', 'jmlba', 'jmlcb', 'jmlcbu']
 ],
 'yAxis' => [
 'title' => ['text' => 'Collection Data']
 ],
 'series' => $b
 ]
]);

Done

Semoga teman-teman dapat terbantu,

Reference:
https://github.com/miloschuman/yii2-highcharts

Fusionchart

Sudah diduga sebelumnya, javascript chart yang dahulu gratis kini sudah tidak gratis. Sebagai contoh FusionChart http://www.fusioncharts.com/

fusionchart

tapi jangan kecewa, saya punya backupnya loh he.. he.. he..

Gimana caranya yak buat grafik pake fusionchart? Mau tau? yuk nyimak..

1. Buatlah file index.php dengan script seperti berikut:

  http://swfobject.js

  var flashvars = {};
  flashvars.xml_file = "flashmo_264_photo_list_2.xml";
  var params = {};
  params.wmode = "transparent";
  params.allowfullscreen = true;
  var attributes = {};
  attributes.id = "slow";
  swfobject.embedSWF("flashmo_264_bar_gallery.swf", "flashmo_template", "900", "150", "9.0.0", false, flashvars, params, attributes);

 http://jquery-1.5.1.min.js
 http://js/jquery.fusioncharts.js
 http://js/FusionCharts.js

<?php
 echo"<span id='myChart2Container'>Loading FusionCharts!</span>

 $('#myChart2Container').insertFusionCharts({
  swfPath: 'Charts/',
  id: 'chart2',
  width: '900',
  height: '300', 
  type: 'Column3D',
  data: 'summary.php',
  dataFormat: 'URIData'
  });
  "; 
 echo"<hr>"; 
 ?>
 

2. File index.php akan memanggil data dari file summary.php, berikut script summary.php

<?php
 include "config/fungsi_indotgl.php";
 include"config/koneksi.php"; 
 include"config/library.php";

$result = mysql_query(" select bulan, 
  COUNT(tgl_cash) as jumlah_jual 
  from tbl_motor 
  where tgl_cash like '%2015%' and tgl_cash<>'0000-00-00' group by bulan "); 
 echo "<graph caption='Penjualan CV. H.M. Asep Motor Tahun $thn_sekarang' xAxisName='Bulan' yAxisName='Penjualan' numberPrefix=''>";
 $colors = array( 'AFD8F8','F6BD0F','8BBA00','FF8E46','008E8E','D64646','8E468E','588526',
  'B3AA00','008ED6','9D080D','A186BE','CC6600','FDC689','ABA000','F26D7D',
  'FFF200','0054A6','F7941C','CC3300','006600','663300','6DCFF6'); 
 $no=0;

while ($data = mysql_fetch_array($result)) {
  $bulan=konversi_bulan($data['bulan']);
  echo "<set name='$bulan' value='$data[jumlah_jual]' color='$colors[$no]' />";
  $no++;
 }

echo "</graph>";
 ?>
 

3. Result:
diagramfusionchart

4. Done 😀

Sekian Terimakasih,
Regards,

Okto Alhamda Putra