Tutorial membuat Chart menggunakan Codeigniter dan Morris.js

Ingin tahu bagaimana membuat chart atau grafik dengan codeigniter dan morris.js?

Anda di tempat yang tepat.

Karena hari ini, saya akan sharing bagaimana membuat chart menggunakan codeigniter dan morris.js step by step.

Mari kita mulai.

Step 1. Persiapan

Ini penting!

Jika Anda melewatkan step ini, itu artinya Anda melewatkan keseluruhan tutorial ini.

Persiapan yang baik akan menentukan keberhasilan Anda mengikuti tutorial ini.

Jangan melewatkan step ini, meskipun terasa kompleks.

Jadi, apa saja yang perlu Anda persiapkan?

Berikut listnya:

1. Codeigniter

Codeigniter adalah framework php utama yang akan kita gunakan dalam tutorial ini. Jika Anda belum memilikinya, silakan download di situs web resmi: www.codeigniter.com

2. Jquery

Jquery adalah library javascript yang berfungsi untuk membantu mempermudah memanipulasi elemen html.

Jika Anda belum memilikinya, silakan download di situs web resmi: www.jquery.com

3. Morris.js

Morris.js adalah library javascript untuk mempermudah pembuatan chart yang bagus.

Jika Anda belum memilikinya, silakan download di situs web resmi: http://morrisjs.github.io/morris.js/

4. Raphael.js

Morris.js membutuhkan raphael.js. Jadi, kita butuh raphael.js.

Klik link berikut untuk mendapatkan raphael.js:

https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js

Kemudian select semua kodenya (Ctrl +A), kemudian copy dan simpan dengan nama raphael-min.js.

Step 2. Membuat DATABASE dan TABLE

Buat sebuah database dengan nama chart_db.

Untuk membuat database, anda dapat mengeksekusi query berikut:

CREATE DATABASE chart_db;

Kemudian buat sebuah table dengan nama "account" dengan struktur seperti gambar berikut:

struktur database

Untuk membuat table dengan struktur seperti gambar diatas, anda dapat mengeksekusi query berikut:

CREATE TABLE account(
id INT(11) PRIMARY KEY AUTO_INCREMENT,
year YEAR(4),
purchase INT(11),
sale INT(11),
profit INT(11)
)ENGINE=INNODB;

Step 3. Insert Beberapa Data

Insert beberapa data kedalam table “account” dengan mengeksekusi query berikut:

INSERT INTO account (year,purchase,sale,profit) VALUES 
('2013','2000','3000','1000'),('2014','4500','5000','500'),
('2015','3000','4500','1500'),('2016','2000','3000','1000'),
('2017','2000','4000','2000'),('2018','2200','3000','800'),
('2019','5000','7000','2000');

Query diatas akan menginput data 7 record kedalam table ”account”.

Seperti gambar berikut:

data table account

Step 4. Instalasi Codeigniter

Extract codeigniter yang telah di download sebelumnya ke folder www (jika Anda menggunakan wampserver) atau htdocs (jika Anda menggunakan XAMPP).

Disini saya menggunakan wampserver. Jadi, saya extract di folder c:/wamp/www/

kemudian, rename (ganti nama) codeigniter menjadi chart.

Seperti gambar berikut:

Project Name

Buka folder chart, kemudian buat folder baru dengan nama "assets" sejajar dengan folder application dan system, kemudian buat folder css dan js didalam folder assets.

Setelah itu copy file morris.css kedalam folder css dan copy file jquery.min.js, morris.min.js, dan raphael-min.js kedalam folder js.

Perhatikan gambar berikut untuk lebih jelasnya:

struktur project

Step 5. Konfigurasi Codeigniter

Step berikutnya adalah konfigurasi codeigniter.

Berikut beberapa file yang perlu di konfigurasi:

1. Autoload.php

Untuk melakukan konfigurasi pada file autoload.php, silahkan buka folder:

application/config/autoload.php

Seperti gambar berikut:

autoload

Buka autoload.php menggunakan text editor atau IDE seperti Notepad++ atau Sublime Text.

Kemudian temukan kode berikut:

$autoload['libraries'] = array();
$autoload['helper'] = array();

Ubah menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

2. Config.php

Untuk melakukan konfigurasi pada file config.php, sillahkan buka folder:

application/config/config.php

Seperti gambar berikut:

config

Buka config.php menggunakan text editor, kemudian temukan kode berikut:

$config['base_url'] = '';

Dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/chart/';

3. Database.php

Untuk melakukan konfigurasi pada file database.php, silahkan buka folder:

application/config/database.php

Seperti gambar berikut:

database config

Buka file database.php menggunakan text editor, kemudian temukan kode berikut:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => '',
        'password' => '',
        'database' => '', 
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

Kemudian atur menjadi seperti berikut:

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'chart_db', 
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

4. Routes.php

Untuk melakukan konfigurasi pada file routes.php, silahkan buka folder:

application/config/routes.php

Seperti gambar berikut:

routes

Buka file routes.php menggunakan text editor, kemudian temukan kode berikut:

$route['default_controller'] = 'welcome';

Dan atur menjadi seperti berikut:

$route['default_controller'] = 'chart';

Step 6. Model

Model representasi dari struktur data Anda. Biasanya class pada model berisi function-function yang berfungsi untuk memanipulasi dari dari database.

Pada kasus ini kita hanya membutuhkan satu model, yaitu Chart_model.php

Jadi, buat sebuah model models/Chart_model.php. Kemudian ketikan kode berikut:

<?php
class Chart_model extends CI_Model{

  //get data from database
  function get_data(){
      $this->db->select('year,purchase,sale,profit');
      $result = $this->db->get('account');
      return $result;
  }

}

Di dalam model Chart_model diatas terdapat satu function, yaitu function get_data().

Function get_data() digunakan untuk menampilkan semua data dari table "account" yang ada di database.

Pada kasus ini, kita hanya menampilkan field: year, purchase, sale, dan profit.

Step 7. Controller

Controller berfungsi sebagai perantara antara Model, view, dan sumber daya lain yang diperlukan untuk memproses HTTP request dan menampilkannya pada halaman web.

Pada kasus ini kita hanya membutuhkan satu controller, yaitu Chart.php

Jadi, buat sebuah controller controllers/Chart.php, kemudian ketikan kode berikut:

<?php
class Chart extends CI_Controller{
    function __construct(){
      parent::__construct();
      //load chart_model dari model
      $this->load->model('chart_model');
    }

    function index(){
      $data = $this->chart_model->get_data()->result();
      $x['data'] = json_encode($data);
      $this->load->view('chart_view',$x);
    }
}

Pada controller Chart diatas, terdapat dua function. yaitu Function __connstruct() dan function index().

Function __constrsuct() digunakan sebagai constructor, sedangkan function index() adalah function yang dipanggil ketika controller Chart dijalankan.

Pada function index(), kita memaggil function get_data() dari model Chart_model.

Kemudian outputnya di encode menjadi JSON object dengan metode json_encode.

Kemudian memanggil view "chart_view" dengan membawa array "data".

Step 8. View

View merupakan informasi yang ditampilkan ke user.

View biasanya adalah halaman web, tetapi di CodeIgniter, view juga bisa berupa fragmen halaman seperti header atau footer. Ini juga bisa berupa halaman RSS, atau jenis "halaman" lainnya.

Pada kasus ini kita hanya membutuhkan satu view, yaitu chart_view.php

Jadi, buat sebuah view views/chart_view.php. kemudian ketikan kode berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Chart using codeigniter and morris.js</title>
    <link rel="stylesheet" href="<?php echo base_url().'assets/css/morris.css'?>">
  </head>
  <body>
    <h2>Chart using Codeigniter and Morris.js</h2>

    <div id="graph"></div>

    <script src="<?php echo base_url().'assets/js/jquery.min.js'?>"></script>
    <script src="<?php echo base_url().'assets/js/raphael-min.js'?>"></script>
    <script src="<?php echo base_url().'assets/js/morris.min.js'?>"></script>
    <script>
        Morris.Bar({
          element: 'graph',
          data: <?php echo $data;?>,
          xkey: 'year',
          ykeys: ['purchase', 'sale', 'profit'],
          labels: ['Purchase', 'Sale', 'Profit']
        });
    </script>
  </body>
</html>

Pada view chart_view, kita memanggil file morris.css, jquery.min.js, raphael-min.js, dan morris.min.js.

Untuk memanggil file morris.css, kita menggunakan kode berikut:

<link rel="stylesheet" href="<?php echo base_url().'assets/css/morris.css'?>">

Untuk memanggil file jquery.min.js, raphael-min.js, dan morris.min.js, kita menggunakan kode berikut:

<script src="<?php echo base_url().'assets/js/jquery.min.js'?>"></script>
<script src="<?php echo base_url().'assets/js/raphael-min.js'?>"></script>
<script src="<?php echo base_url().'assets/js/morris.min.js'?>"></script>

Untuk membuat chart, kita menggunakan kode berikut:

<script>
        Morris.Bar({
          element: 'graph',
          data: <?php echo $data;?>,
          xkey: 'year',
          ykeys: ['purchase', 'sale', 'profit'],
          labels: ['Purchase', 'Sale', 'Profit']
        });
</script>

Kode diatas akan menampilkan sebuah bar chart pada element graph. Dimana graph merupakan ID dari elemen HTML tempat dimana chart ingin ditampilkan.

Pada kasus ini, saya ingin menampilkan chart pada tag div yang memiliki id="graph" seperti kode berikut:

<div id="graph"></div>

Step 9. Testing

Untuk melakukan pengujian, silahkan buka browser anda dan ketikkan URL berikut:

http://localhost/chart/

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

bar chart

Keren Bukan?

Anda juga dapat mengganti style-nya dari bar chart diatas menjadi line chart atau area chart.

Untuk mengganti style chart sangat sederhana, cukup dengan mengganti Bar menjadi Line.

Perhatikan kode berikut:

<script>
        Morris.Bar({
          element: 'graph',
          data: <?php echo $data;?>,
          xkey: 'year',
          ykeys: ['purchase', 'sale', 'profit'],
          labels: ['Purchase', 'Sale', 'Profit']
        });
</script>

Kemudian ubah menjadi seperti berikut:

<script>
        Morris.Line({
          element: 'graph',
          data: <?php echo $data;?>,
          xkey: 'year',
          ykeys: ['purchase', 'sale', 'profit'],
          labels: ['Purchase', 'Sale', 'Profit']
        });
</script>

Kemudian kunjungi URL untuk melihat perubahannya:

http://localhost/chart/

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

line chart

Selain itu, anda juga dapat mengganti style-nya menjadi Area chart hanya dengan mengganti Line menjadi Area.

Seperti berikut:

<script>
        Morris.Area({
          element: 'graph',
          data: <?php echo $data;?>,
          xkey: 'year',
          ykeys: ['purchase', 'sale', 'profit'],
          labels: ['Purchase', 'Sale', 'Profit']
        });
</script>

Kemudian kunjungi URL untuk melihat perubahannya:

http://localhost/chart/

Jika berjalan dengan baik, maka akan terlihat seperti gambar berikut:

area chart

Selesai!.

Kesimpulan

Tutorial kali ini adalah tentang bagaimana membuat chart dengan codeigniter dan morris.js.

Dalam tutorial ini, Anda telah belajar bagaimana membuat chart dengan codeigniter dan morris.js step by step.

Tidak hanya itu, Anda juga telah belajar bagaimana mengganti style dari chart yang dibuat dari bar chart menjadi line chart dan area chart.

Jadi, tunggu apa lagi. Let's coding!

Download Source Code