Highchart and CodeIgniter 2

“Taqobbalallohu Minna wa Minkum” semoga Allah menerima amal kebaikan kita semua. Tidak lupa, di hari yang mulia ini saya memohon ampun dan maaf kepada teman-teman,  jika ada kesalahan yang telah dibuat, mohon maaf lahir dan batin.

Di hari raya ini, karena hobby saya menulis, kali ini ingin berbagi bagaimana caranya create chart menggunakan framework CodeIgniter dan highchart sebagai plugin. CodeIgniter yang digunakan adalah CodeIgniter versi 2. Kenapa CodeIgniter versi 2? ya… karena kasus ini berawal dari tempat saya bekerja. Selidik-selidik ternyata server yang digunakan di kantor yaitu php versi 5.3.

Langsung saja yuk..bagaimana langkah-langkah membuat chart.

Langkah-1
Pada view, tulis script seperti berikut pada <header>…</header>:

https://code.jquery.com/jquery-1.12.4.js 
?php%20echo%20base_url();%20?assets/code/highcharts.js
?php%20echo%20base_url();%20?assets/code/modules/exporting.js

kemudian, untuk memanggil ajax tulis script pada view (inputan year dan month) sebegai berikut :

$(document).ready(function(){
$("#submit").click(function(){
var year1=$("#year1").val();
var month1=$("#month1").val();
var year2=$("#year2").val();
var month2=$("#month2").val();
$.ajax({type: "POST",
url: "",
data:  {"year1" : year1, "month1" : month1,"year2" : year2, "month2" : month2},
success: function(data){                    
 $('#linechart120h').html(data);
}});return false;});});

Langkah-2
Pada controller tulis script sebagai berikut;

 Highcharts.chart('linechart120h', {
 title: { text: 'Performansi Collection -  s/d  ' },
 subtitle: { text: '' },
 xAxis: { categories:  }, 
 yAxis: { title: { text: 'Percentage (%)' } }, 
 legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' },
 plotOptions: { series: {  dataLabels: { enabled: true }  }  },
 series:  }); 

Langkah-3
Untuk memanggil data pada controller di view. Tulis script id=”linechart120h”

Done, berikut hasilnya:Jika teman-teman ada yang ditanyakan bisa dihubungi okto di nomor ini ya wa.. 08111353110.
Sumber: https://www.highcharts.com/

Advertisements

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

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