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

Modal and AJAX in CodeIgniter 3

Kenapa ingin sekali buat tutorial ini, sebab kemarin ada ide buat menampilkan data menggunakan modal jQuery dan ternyata lumayan sedikit sulit. Nah, berangkat dari sana ide ini berawal. Biasanya modal jQuery menampilkan peringatan atau message sukses sebuah proses. Kali ini akan mencoba bagaimana CodeIgniter integrasi modal jQuery dan AJAX. berikut langkahnya.

Langkah – 1
Buatlah class btn dan data

<a class='btn btn-success' href='#' data-id='".$item->id."' data-toggle='modal' data-target='#myModal'>
 <i class='halflings-icon white zoom-in'></i>

Langkah -2
Buatlah scritp jQuery sebagai berikut:

$(document).on("click", ".btn", function () {
 var myId = $(this).data('id'); 
 $.ajax({
 type: 'POST',
 url: 'http://localhost/dkm/admin/ajaxs/sambutan_ketua',
 data: { ids: myId },
 success: function(response) { 
 $('#result').html(response);
 }
 });
});

Langkah -3
Buatlah controller dari URL yang di POST AJAX.

public function sambutan_ketua()
 {
 if (!empty($this->input->post('ids'))) { 
 $data['listsambutanketua']=$this->sambutanketua_model->get_sambutanketua($this->input->post('ids')); 
 foreach($data as $item){
 echo 'ID :'.$item[0]->id.'<br>';
 echo 'Nama Ketua :'.$item[0]->nama_ketua_dkm.'<br>';
 echo 'Periode :'.$item[0]->periode.'<br>';
 echo 'Isi Sambutan :<p><i>'.$item[0]->isi_sambutan.'</i></p><br>';
 }
 } 
 }

Langkah-4,
yaitu langkah terakhir, tampilkan data pada id yang bernama result.

<p id="result"></p>

done. 😀
modal-dan-ajax

 

DropzoneJS and CodeIgniter 3

dropzone

Dropzone JS adalah sebuah library open source yang menyediakan untuk keperluan drag & drop file upload dengan preview gambar.
Lalu bagaimana dropzone js integrasi dengan CodeIgniter? Mudah sekali, yuk ikuti langkah berikut:

Langkah – 1
Download terlebih dahulu file dropzone.js di
https://github.com/enyo/dropzone

dropzonegithub

Langkah – 2
Ekstrak file rar tersebut di folder assets.

Langkah – 3
Buatlah file controller dropzone, script sebagai berikut:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Dropzone extends CI_Controller {
public function index() {
$this->load->view('dropzone');
}
public function upload() {
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name'];
$fileName = $_FILES['file']['name'];
$targetPath = getcwd() . '/uploads/';
$targetFile = $targetPath . $fileName ;
move_uploaded_file($tempFile, $targetFile);
}
}
}

Langkah – 4
Buatlah view dropzone, script sebagai berikut:

<html>
<head>
<link href="<?php echo base_url(); ?>assets/dropzone-master/dist/dropzone.css" type="text/css" rel="stylesheet" />
?php%20echo%20base_url();%20?assets/dropzone-master/dist/min/dropzone.min.js
?php%20echo%20base_url();%20?assets/js/jquery.js
</head>
<body>
<form action="<?php echo site_url('/dropzone/upload'); ?>" class="dropzone" ></form>
</body>
</html>

Langkah – 5
Done, hasil test pada browser
http://localhost/tutorial-codeigniter/CodeIgniter-3.0.6-libraries/index.php/dropzone

testdropzone

 

done. 😀

 

Email Class-CodeIgniter

Pada system tertentu yang luas terkadang kita membutuhkan email. Ini berfungsi misalnya ketika registrasi, validasi email, pemberitahuan, dan lain-lain sebagainya. Bagaimana menggunakan library email pada codeigniter, yuk ikuti langkah berikut:

Langkah – 1

Masuk ke system/libraries/Email.php

Buka file tersebut. Kemudian ikuti configurasi send email berikut:

public $useragent   = 'CodeIgniter';
public $mailpath    = '/usr/sbin/sendmail'; // Sendmail path
public $protocol    = 'smtp'; // mail/sendmail/smtp
public $smtp_host   = 'smtp.googlemail.com';
public $smtp_user   = 'oktoalhamdaputra@gmail.com';// email
public $smtp_pass   = 'XXXXXXXXX';//password email
public $smtp_port   = 465;
public $smtp_timeout    = 20;
public $smtp_crypto = 'ssl';
public $mailtype    = 'text';

Langkah – 2

Buatlah sebuah controller bernama email. Kemudian ikuti script berikut.

Controller email/index

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Email extends CI_Controller {
public function index() {
 $message = 'TEST FROM CLASS EMAIL LOGIKAPAGI.WORDPRESS.COM';
 $this->load->library('email');
 $this->email->set_newline("\r\n");
 $this->email->from('oktoalhamdaputra@gmail.com');
 $this->email->to('sakuraone.go@gmail.com');
 $this->email->subject('TEST MAIL');
 $this->email->message($message);
  if($this->email->send()){
   echo 'Email sent.';
  }
  else{
   show_error($this->email->print_debugger());
  }
 }
}

Done,

 

Remove index.php In CodeIgniter

Secara default, index.php include di dalam URL.

1

Url tersebut tampak tidak enak dilihat, oleh sebab itu yuk kita ikuti langkah berikut agar index.php tidak tampil lagi.

Langkah -1

buka file httpd.conf

cari script berikut:

AllowOverride none

Ubah menjadi

AllowOverride All

Langkah -2

cari script berikut:

#LoadModule rewrite_module modules/mod_rewrite.so

hilangkan tanda pagar tersebut;

Langkah -3

Buatlah file .htaccess sejajar dengan index.php , script sebagai berikut:

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule ^(.*)$ index.php/$1 [L]
 </IfModule>

2

Done.
Result:
3

Rule Greater_Than Form Validation CodeIgniter

Nah, kali ini saya punya kasus tentang form validation codeigniter. Kasus tersebut memiliki 2 inputan yang akan divalidasi. Aturannya nilai A tidak boleh lebih besar dari nilai B. Ehmmm….bagaimana caranya yak? Caranya mudah… yuk ikuti langkahnya.

Sebagai contoh:

1. Nilai variable customer_bayar_total_dp tidak boleh lebih kecil atau harus lebih besar dari niali variable bayar_dp.

 $this->form_validation->set_rules('customer_bayar_total_dp', 'Customer Bayar Total DP', 'trim|required|greater_than['.$this->input->post('bayar_dp').']');
 $this->form_validation->set_rules('bayar_dp', 'Bayar DP', 'trim|required');

2. Result

1

3.  Done 😀

Regards,

Okto Alhamda Putra

Using Google Chart & CodeIgniter 3

Seorang programmer dalam membuat sebuah sistem, biasanya mendapat tugas untuk membuat sebuah grafik laporan keuangan misalnya. Dan setelah mendapat tugas kebanyakan progammer pemula seperti saya kesulitan untuk menjawab persoalan tersebut dikarenakan plugin chart saat ini kebanyakan sudah berbayar. Nah.. dari persoalan tersebut ada sebuah ide membuat chart yang sederhana yang saya buat dengan Mbah Google yang gratis atau free.

Yuk ikuti langkah berikut:

1. Sebagai contoh buat table

CREATE TABLE IF NOT EXISTS `tbl_pemasukkan` (
  `no_pemasukkan` int(5) NOT NULL,
  `tgl_pemasukkan` datetime NOT NULL,
  `diterima_dari` varchar(20) NOT NULL,
  `jumlah_terima` int(10) NOT NULL,
  `kode_pemasukkan` int(2) NOT NULL,
  `keterangan` varchar(50) NOT NULL,
  `id_transaksi` varchar(25) NOT NULL,
  `id_dp` varchar(11) NOT NULL,
  `deletepemasukkan` enum('N','Y') NOT NULL DEFAULT 'N'
 ) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=latin1;

INSERT INTO `tbl_pemasukkan` (`no_pemasukkan`, `tgl_pemasukkan`, `diterima_dari`, `jumlah_terima`, `kode_pemasukkan`, `keterangan`, `id_transaksi`, `id_dp`, `deletepemasukkan`) VALUES
 (1, '2016-01-03 14:19:35', 'AJAT SUDRAJAT', 350000, 2, 'PEMBAYARAN 1', '183720160103021935', '1', 'N'),
 (2, '2016-01-03 14:58:23', 'AJAT SUDRAJAT', 50000, 2, 'PEMBAYARAN 2', '183720160103021935', '2', 'N'),
 (3, '2016-01-03 16:04:05', 'AJAT SUDRAJAT', 400000, 2, 'PEMBAYARAN 3', '183720160103021935', '3', 'N'),
 (4, '2016-01-03 16:59:48', 'OKTO ALHAMDA PUTRA', 600000, 2, 'PEMBAYARAN 1', '183720160103045948', '4', 'N'),
 (5, '2016-01-03 17:25:24', 'OKTO ALHAMDA PUTRA', 50000, 2, 'PEMBAYARAN 1', '183720160103052524', '5', 'N');

2. Buatlah sebuah model pada CodeIgniter

function ambilData(){
 
  $this->db->select('no_pemasukkan');
  $this->db->select('jumlah_terima');
  $this->db->from('tbl_pemasukkan'); 
  $query = $this->db->get();

  return $query->result();

 }

3. Buatlah sebuah kontroller pada CodeIgniter

public function index()
  {
  $this->load->database();
  $this->load->model('m_welcome'); 
  $datagrafik = $this->m_welcome->ambilData();
  $data = array ( 
  'datagrafik' => $datagrafik, 
  ); 

 $this->load->view('welcome_message', $data);
  }

4. Copy script berikut di https://developers.google.com/chart/interactive/docs/gallery/linechart , kemudian paste di view CodeIgniter

<html>
 <head>
  type="text/javascript" src="https://www.google.com/jsapi">
  type="text/javascript">
  google.load('visualization', '1.1', {packages: ['line']});
  google.setOnLoadCallback(drawChart);

 function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Guardians of the Galaxy');
  data.addColumn('number', 'The Avengers');
  data.addColumn('number', 'Transformers: Age of Extinction');

 data.addRows([
  [1,  37.8, 80.8, 41.8],
  [2,  30.9, 69.5, 32.4],
  [3,  25.4,   57, 25.7],
  [4,  11.7, 18.8, 10.5],
  [5,  11.9, 17.6, 10.4],
  [6,   8.8, 13.6,  7.7],
  [7,   7.6, 12.3,  9.6],
  [8,  12.3, 29.2, 10.6],
  [9,  16.9, 42.9, 14.8],
  [10, 12.8, 30.9, 11.6],
  [11,  5.3,  7.9,  4.7],
  [12,  6.6,  8.4,  5.2],
  [13,  4.8,  6.3,  3.6],
  [14,  4.2,  6.2,  3.4]
  ]);

  var options = {
   chart: {
    title: 'Box Office Earnings in First Two Weeks of Opening',
    subtitle: 'in millions of dollars (USD)'
   },
   width: 900,
   height: 500
 };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));

  chart.draw(data, options);
 }
 
 </head>
 <body>
 
<id="linechart_material">
 
 </body>
 </html>

 5.  Pada bagian data.AddRows ubah menjadi:

data.addRows(
  <?php
   foreach($datagrafik as $value){
    $resulta[]=array($value->no_pemasukkan, $value->jumlah_terima );
   }
   echo $a=json_encode($resulta, JSON_NUMERIC_CHECK);
 ?>
  );

6. Result, done 😀

chart

Terimakasih
Sumber: https://developers.google.com/chart/interactive/docs/gallery/linechart ;
Sumber: http://php.net/manual/en/function.json-encode.php
Regards,

Okto Alhamda Putra