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

Advertisements

PHP Connect To SQL SERVER 2012 Express

Kali ini kita mencoba bagaimana php dapat koneksi ke SQL Server yang lebih tepatnya PHP 5.6 dengan SQL Server 2012 Express. Sebenarnya ide ini berasal dari teman kantor yang ingin mencobanya namun masih gagal. Nah, berangkat dari situ sayapun ngulik2 bagaimana cara koneksinya. Berikut langkah2 cara koneksinya:

Langkah-1
Download  SQLSRV disini.

microsoft-driver

Langkah-2
Setelah didownload extract ke directory php/ext

Langkah-3
Tulis script sebagai berikut pada file php.ini

extension=php_sqlsrv_56_ts.dll

Langkah-4
Done.

Untuk mencobanya, silahkan buat sebuah file php bernama connect.php

<?php
$serverName = "OKTO\sqlexpress"; //serverName\instanceName
 
$connectionInfo = array( "Database"=>"testDB");
$conn = sqlsrv_connect( $serverName, $connectionInfo);

if( $conn ) {
 echo "Connection established.<br />";
}else{
 echo "Connection could not be established.<br />";
 die( print_r( sqlsrv_errors(), true));
}
?>

Selamat mencoba 🙂

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

Create New Theme WordPress From Bootstrap

Nah, hari ini kita membahas bagaimana cara merubah theme wordpress yang kita sukai. Kali ini kita mencoba merubah theme wordpress dari Bootstrap. Tanpa basa-basi lagi, yuk kita nyimak bagaimana caranya.

1. Misal kita siapkan terlebih dahulu theme bootstrap yang kita buat atau sudah tersedia di mbah Google tercinta.
Kita download di URL: http://www.wpfreeware.com/magexpress-fancy-style-wordpress-magazine-theme/

1

2. Persiapkan file-file wordpress seperti berikut:

2

3. Kemudian, register file CSS dan file Jquery pada wordpress

3

function twentysixteen_scripts() {
 // Add custom fonts, used in the main stylesheet.
 wp_register_style('bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css');
 wp_register_style('font-awesome.min', get_template_directory_uri() . '/css/font-awesome.min.css');
 wp_register_style('animate', get_template_directory_uri() . '/css/animate.css');
 wp_register_style('slick', get_template_directory_uri() . '/css/slick.css');
 wp_register_style('theme', get_template_directory_uri() . '/css/theme.css');
 wp_register_style('style', get_template_directory_uri() . '/css/style.css');
 
 wp_enqueue_style( 'bootstrap.min' );
 wp_enqueue_style( 'font-awesome.min' );
 wp_enqueue_style( 'animate' );
 wp_enqueue_style( 'slick' );
 wp_enqueue_style( 'theme' );
 wp_enqueue_style( 'style' );
 
 wp_enqueue_script('jquery.min', get_template_directory_uri() . '/js/jquery.min.js');
 wp_enqueue_script('wowjs', get_template_directory_uri() . '/js/wow.min.js');
 wp_enqueue_script('bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js'); 
 wp_enqueue_script('slickjs', get_template_directory_uri() . '/js/slick.min.js'); 
 wp_enqueue_script('customjs', get_template_directory_uri() . '/js/custom.js'); 
 
}
add_action( 'wp_enqueue_scripts', 'twentysixteen_scripts' );

Kemudian, file header.php letakkan script <?php wp_head(); ?>

4. Hit URL wordpress yang telah kita buat

4

 

5. Done 😀

Sekian Terimakasih,
Regards,

Okto Alhamda Putra