Belajar Membuat Plugin WordPress: Grafik Menggunakan Morris.js

Kali ini kita akan membuat sebuah komponen WordPress untuk menampilkan grafik. Hal yang biasa dilakukan adalah menampilkan grafik yang merupakan hasil screenshot atau export dari suatu aplikasi dan disimpan dalam file dengan format PNG. Di tutorial ini kita akan membuat sebuah komponen grafik yang dapat menampilkan data dari file CSV langsung ke dalam bentuk grafik. Tapi hanya akan dibatasi hingga grafik batang (bar chart) saja. Library javascript yang akan digunakakn adalah Morris.js

Perangkat yang dibutuhkan

Anda membutuhkan web browser, WordPress, XAMPP atau LAMPP, jQuery, Morris.js, dan apapun teks editor favorit Anda. Anda dapat melihat struktur file dan folder nya seperti pada gambar berikut:

Menulis kode untuk index.php

Seperti biasa, di dalam pembuatan plugin WordPress disarankan untuk membuat file index.php yang menyimpan identitas dari plugin yang dikembangkan. Anda dapat mengisinya sesuai keperluan Anda. Pastikan isi teks yang ada di dalam komentar disertakan, karena komentar tersebut merupakan pengenal agar plugin dapat dibaca di halaman admin WordPress.

Berikut adalah kode untuk index.php:

<?php

/*
Plugin Name: WordPress Morris.js
Description: Chart component for WordPress built with Morris.js
Author: Ridwan Bejo
Version: 0.1
*/

include "wp_morris_js.php"

?>

Menulis kode untuk wp_morris_js.php

Di dalam file wp_morris_js.php akan ada sejumlah function yang akan ditulis. Karena untuk menampilkan grafik batang memerlukan library Morris.js, maka kita perlu memanggil file javascript dan css milik Morris.js, untuk itu kita buatkan sebuah function yang berisi tag HTML untuk melakukan penyertaan aset – aset Morris.js. Kenapa dibuat dalam satu function? sebenarnya cara ini kurang praktis, tapi ketika kita membuat function lain untuk menampilkan grafik lainnya, kita dapat menyertakan function get_assets() tersebut. Berikut adalah kode wp_morris_js.php untuk fungsi get_assets():

<?php

function get_assets()
{
    ?>
    <script src="http://localhost/mywordpress/wp-content/plugins/wp_morris_js/assets/vendor/jquery.min.js"></script>
    <script src="http://localhost/mywordpress/wp-content/plugins/wp_morris_js/assets/vendor/raphael-min.js"></script>
    <script src="http://localhost/mywordpress/wp-content/plugins/wp_morris_js/assets/vendor/morrisjs/morris.min.js"></script>
    <link rel="stylesheet" href="http://localhost/mywordpress/wp-content/plugins/wp_morris_js/assets/vendor/morrisjs/morris.css">
    <?php
}

// kode lainnya akan ditulis dibawah komentar ini

?>

Kemudian kita teruskan dengan menulis function untuk menampilkan grafik batang dengan Morris.js. Kita definisikan wp_morris_js_bar untuk dikenali sebagai shortcode WordPress yang diarahkan ke functionwp_morris_js_bar_tags. Berikut adlaah kode untuk wp_morris_js.php yang mendaftarkan salah satu function di wp_morris_js.php ke shortcode:

<?php

// ada kode sebelumnya, silahkan scroll keatas

add_shortcode('wp_morris_js_bar', 'wp_morris_js_bar_tags');
function wp_morris_js_bar_tags($attr)
{
    // kode akan ditulis setelah komentar ini
}

?>

Kemudian di dalam function tersebut kita tambahkan proses pembacaan file CSV. File tersebut dilewatkan ke dalam shortcode melalui URL. Kemudian URL tersebut ditangkap melalui parameter $attr, file dibuka dan dibaca dengan menggunakan looping while dan fgetcsv(). Setelah selesai dibaca, file ditutup kembali . Berikut adalah kode untuk wp_morris_js.php dalam menangkap parameter url untuk mengetahui letak file CSV yang akan dibaca:

<?php

// ada kode sebelumnya, silahkan scroll keatas

add_shortcode('wp_morris_js_bar', 'wp_morris_js_bar_tags');
function wp_morris_js_bar_tags($attr)
{
    ob_start();
    $the_file = fopen($attr['url'], 'r');

    $graph_data = array();
    while (!feof($the_file)){
        $line = fgetcsv($the_file);
        $graph_data[] = array (
                'x' => $line[],
                'y' => $line[1],
            );
    }

    fclose($the_file);

    // kode lainnya akan ditulis setelah komentar ini
}

?>

Lalu hasil pembacaan file yang berupa array akan di-encode ke dalam bentuk JSON menggunakan function json_encode() dan disimpan di dalam elemen div#graph-bar-data. Untuk menampilkan grafik batang hasil render dari Morris.js akan ditempatkan di div#graph-bar. Jangan lupa panggil get_assets()setelah elemen div#graph-bar. Kita menggunakan ob_start, ob_get_contents, dan ob_end_clean agar output PHP dari function tersebut dapat ditempatkan sesuai dengan penempatan yang ditentukan penulis. Apabila tidak menggunakan ketiga fungsi tersebut. Kadangkala output yang dipanggil melalui shortcode akan tampil di lokasi yang tidak diharapkan. Berikut adalah kode untuk wp_morris_js.php dalam menampilkan hasil pembacaan ke elemen html graph-bar-data:

<?php

// ada kode sebelumnya, silahkan scroll keatas

add_shortcode('wp_morris_js_bar', 'wp_morris_js_bar_tags');
function wp_morris_js_bar_tags($attr)
{
    ob_start();
    $the_file = fopen($attr['url'], 'r');

    $graph_data = array();
    while (!feof($the_file)){
        $line = fgetcsv($the_file);
        $graph_data[] = array (
                'x' => $line[],
                'y' => $line[1],
            );
    }

    fclose($the_file);

    ?>
    <div id="graph-bar-data" style="display:none;"><?php echo json_encode($graph_data); ?></div>
    <div id="graph-bar"></div>
    <?php get_assets(); ?>
    <script>
        Morris.Bar({
          element: 'graph-bar',
          data: JSON.parse($('#graph-bar-data').html()),
          xkey: 'x',
          ykeys: ['y'],
          labels: ['Jumlah']
        });
    </script>
    <?php

    $output = ob_get_contents(); // end output buffering
    ob_end_clean(); // grab the buffer contents and empty the buffer
    return $output;
}

?>

Penutup

Dengan demikian Anda dapat membuat plugin WordPress yang dapat menampilkan file CSV. Walaupun dalam tutorial ini masih ada kekurangan karena tidak bisa menentukan penamaan label dan penamaan judul dari grafik. Tapi Anda sudah dapat menampilkan file CSV secara dinamis. Pengembangan selanjutnya dapat Anda lakukan sendiri sebagai eksperimen pribadi. [cp/ap]

Referensi

• WordPress API Documentation
• Morris.js Documentation
• W3Schools