Trentech.id
No Result
View All Result
Login / Register
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
Trentech.id
No Result
View All Result

Belajar Membuat Plugin WordPress: Grafik Menggunakan Morris.js

24 April 2017
in Learn
Belajar Membuat Plugin WordPress: Grafik Menggunakan Morris.js
1.4k
VIEWS

Daftar Isi

  • Perangkat yang dibutuhkan
  • Menulis kode untuk index.php
  • Menulis kode untuk wp_morris_js.php
  • Penutup
  • Referensi
5/5 - (1 vote)

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[0],
                '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[0],
                '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
Tags: belajarbelajar webbelajar wordpressjsmorrismorris.jspluginplugin wordpresswordpress
Previous Post

Menangani Antrian Task dengan Kue di Node.js

Next Post

Masihkah Digital Marketing Berpotensi di Indonesia pada Tahun 2017?

Indra Nugraha

Indra Nugraha

Fullstack Web Developer | Javascript Ethusiast

Related Posts

Kalau Mau Kaya Tanpa Jadi Pengusaha, Belajar Coding Bisa Jadi Jawabannya

Kalau Mau Kaya Tanpa Jadi Pengusaha, Belajar Coding Bisa Jadi Jawabannya

27 March 2022
1.6k

Mengapa jadi programmer? Bukankan menulis kode di depan komputer adalah pekerjaan yang gak keren? Barangkali bagimu pekerjaan ini terlihat membosankan, tapi...

template website

Kamu Sering Menggunakan Template Website? Mulai Sekarang Coba Pikir Ulang

24 March 2022
1.4k

Ada banyak cara yang bisa Anda lakukan sebagai pelaku bisnis untuk menampilkan citra profesional di internet. Memiliki website adalah salah satunya. Desain...

desain grafis

10 Manfaat Menjadikan Desain Grafis Sebagai Karier

17 March 2022
1.6k

Desain grafis merupakan bagian dari desain komunikasi. Berarti, dengan menggunakan desain grafis, kita sedang berkomunikasi. Ini merupakan seni dari komunikasi...

Please login to join discussion

Terpopuler

  • Ini Dia 6 Kesalah Pahaman tentang Profesi Programmer

    Alasan Mahasiswa IT Harus Bisa Coding

    117 shares
    Share 47 Tweet 29
  • 8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    915 shares
    Share 366 Tweet 229
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    326 shares
    Share 130 Tweet 82
  • Kalau Mau Kaya Tanpa Jadi Pengusaha, Belajar Coding Bisa Jadi Jawabannya

    124 shares
    Share 50 Tweet 31
  • Inilah 15 Skin Paling Keren di Mobile Legends

    162 shares
    Share 65 Tweet 41
  • Upgrade XAMPP? Beginilah Caranya

    229 shares
    Share 92 Tweet 57
  • Trik Cara Main Game Berat di PC Kelas Bawah

    117 shares
    Share 47 Tweet 29
  • Apa Saja Kemudahan yang Ditawarkan Warung Pintar?

    139 shares
    Share 56 Tweet 35
  • Mengenal Lean Product Development dan Berbagai Keunggulannya

    133 shares
    Share 53 Tweet 33
  • Platform MoonXBT Membantu FTX dengan Likuiditas Tinggi

    113 shares
    Share 45 Tweet 28

About . Contact . Partnership

Trentech.id adalah situs yang menyajikan konten tentang startup, bisnis, game, event, hingga informasi pekerjaan. Trentech berusaha memberikan konten yang berkualitas untuk para pembacanya agar dapat menjadi rujukan utama mengenai dunia teknologi pada khususnya. Tim trentech terdiri dari orang – orang yang berkompeten dibidangnya, dan akan selalu mendukung karya – karya terbaik anak bangsa dengan memberikan kesempatan seluas-luasnya untuk para startup agar dapat publish karyanya di trentech.

Trentech ID

  • About
  • Contact
  • Partnership
  • Panduan Penulis
  • Privacy Policy
  • Sitemap

Tools

  • Harga Crypto Terbaru
  • Cek Ongkir
  • Cek Resi
  • Cek Domain
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
Login / Register

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • Login
  • Sign Up
Forgot Password?
Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.