<h3>Pendahuluan</h3>
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
<h3>Perangkat yang dibutuhkan</h3>
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:

[caption id="attachment_7217" align="aligncenter" width="261"]<img class="size-full wp-image-7217" src="http://www.codepolitan.com/wp-content/uploads/2016/01/Selection_001.png" alt="struktur folder dan file wp_morris_js" width="261" height="530" /> struktur folder dan file wp_morris_js[/caption]
<h3>Menulis kode untuk index.php</h3>
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:
<pre><code>&lt;?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"

?&gt;
</code></pre>
<h3>Menulis kode untuk wp_morris_js.php</h3>
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():
<pre><code>&lt;?php

function get_assets()
{
 ?&gt;
 &lt;script src="http://localhost/mywordpress/wp-content/plugins/wp_morris_js/assets/vendor/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script src="http://localhost/mywordpress/wp-content/plugins/wp_morris_js/assets/vendor/raphael-min.js"&gt;&lt;/script&gt;
 &lt;script src="http://localhost/mywordpress/wp-content/plugins/wp_morris_js/assets/vendor/morrisjs/morris.min.js"&gt;&lt;/script&gt;
 &lt;link rel="stylesheet" href="http://localhost/mywordpress/wp-content/plugins/wp_morris_js/assets/vendor/morrisjs/morris.css"&gt;
 &lt;?php
}

// kode lainnya akan ditulis dibawah komentar ini

?&gt;
</code></pre>
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 function wp_morris_js_bar_tags. Berikut adlaah kode untuk wp_morris_js.php yang mendaftarkan salah satu function di wp_morris_js.php ke shortcode:
<pre><code>&lt;?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
}

?&gt;
</code></pre>
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:
<pre><code>&lt;?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' =&gt; $line[0],
 'y' =&gt; $line[1],
 );
 }

 fclose($the_file);

 // kode lainnya akan ditulis setelah komentar ini
}

?&gt;
</code></pre>
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:
<pre><code>&lt;?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' =&gt; $line[0],
 'y' =&gt; $line[1],
 );
 }

 fclose($the_file);

 ?&gt;
 &lt;div id="graph-bar-data" style="display:none;"&gt;&lt;?php echo json_encode($graph_data); ?&gt;&lt;/div&gt;
 &lt;div id="graph-bar"&gt;&lt;/div&gt;
 &lt;?php get_assets(); ?&gt;
 &lt;script&gt;
 Morris.Bar({
 element: 'graph-bar',
 data: JSON.parse($('#graph-bar-data').html()),
 xkey: 'x',
 ykeys: ['y'],
 labels: ['Jumlah']
 });
 &lt;/script&gt;
 &lt;?php

 $output = ob_get_contents(); // end output buffering
 ob_end_clean(); // grab the buffer contents and empty the buffer
 return $output;
}

?&gt;
</code></pre>
<h3>Cara Penggunaan</h3>
[caption id="attachment_7218" align="aligncenter" width="685"]<img class="size-full wp-image-7218" src="http://www.codepolitan.com/wp-content/uploads/2016/01/Selection_002.png" alt="Simpan plugin wp_morris_js yang sudah dibuat ke folder wp-content/plugins" width="685" height="168" /> Simpan plugin wp_morris_js yang sudah dibuat ke folder wp-content/plugins[/caption]

&nbsp;

[caption id="attachment_7221" align="aligncenter" width="444"]<img class="size-full wp-image-7221" src="http://www.codepolitan.com/wp-content/uploads/2016/01/Selection_005-1.png" alt="Buatlah file csv yang terdiri dari dua kolom. Kolom pertama adalah label, kolom kedua adalah nominal. Contoh bisa dilihat pada gambar ini" width="444" height="166" /> Buatlah file csv yang terdiri dari dua kolom. Kolom pertama adalah label, kolom kedua adalah nominal. Contoh bisa dilihat pada gambar ini[/caption]

&nbsp;

[caption id="attachment_7220" align="aligncenter" width="700"]<img class="size-large wp-image-7220" src="http://www.codepolitan.com/wp-content/uploads/2016/01/Selection_004-1-700x349.png" alt="Upload file tersebut melalui menu media di halaman admin Wordpress" width="700" height="349" /> Upload file tersebut melalui menu media di halaman admin Wordpress[/caption]

&nbsp;

[caption id="attachment_7219" align="aligncenter" width="700"]<img class="size-large wp-image-7219" src="http://www.codepolitan.com/wp-content/uploads/2016/01/Selection_003-1-700x418.png" alt="Sertakan shortcode dan lewatkan url file csv yang diupload" width="700" height="418" /> Sertakan shortcode dan lewatkan url file csv yang diupload[/caption]

&nbsp;

[caption id="attachment_7222" align="aligncenter" width="700"]<img class="size-large wp-image-7222" src="http://www.codepolitan.com/wp-content/uploads/2016/01/Selection_006-1-700x359.png" alt="Simpan tulisan dan voilla, akhirnya grafik dari plugin morris.js tampil juga :D" width="700" height="359" /> Simpan tulisan dan voilla, akhirnya grafik dari plugin morris.js tampil juga :D[/caption]
<h3>Penutup</h3>
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.
<h3>Referensi</h3>
<ul>
	<li>Wordpress API Documentation</li>
	<li>Morris.js Documentation</li>
	<li>W3Schools</li>
</ul>
(rfs)

Membuat Plugin Wordpress: Grafik Menggunakan Morris.js

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Membuat Plugin Wordpress: Grafik Menggunakan Morris.js

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Yukihiro Matsumoto, Perancang Bahasa Pemrograman Ruby

Guido van Rossum, Tokoh Di Balik Bahasa Python

17 Grup Populer tentang Pemrograman di Facebook yang Berasal dari Indonesia

Haris Hasanudin, Pembuat Bahasa Pemrograman BAIK

Intip Perkembangan Teknologi di Negeri Tirai Bambu

Larry Wall, Sang Guru Bahasa Perl