Desain Dashboard Berbasis Web dengan Platform Opensource
1. Desain Dashboard Berbasis Web
dengan Platform Opensource
1) 2)
Elmi Achelia – Wildan Maulana
1). Pusat Penelitian Perkembangan Iptek LIPI
2). OpenThink Labs
untuk
E-Indonesia Initiatives 2009
Bandung, 24-25 Juni 2009
2. Pendahuluan
Ketersediaan data
Data disajikan dalam bentuk grafik dan tabel
Informasi dipublikasikan dalam berbagai media
Media online (internet)
4. Dashboard
suatu model antarmuka sistem informasi yang
dianalogikan seperti dashboard sebuah mobil yang
mudah untuk dipelajari
5. Dashboard
Mengkomunikasikan informasi dengan cepat
Membantu identifikasi trend, pola, anomali data
Membantu pengambilan keputusan secara efektif
6. Dashboard
Teknologi Opensource
Data Open Flash
MySQL jQuery
JSON Chart
Database Data Model Chart Generator Dashboard
Symfony Framework
7. Data
Indikator Iptek Indonesia
Indikator Iptek merupakan hasil dari kegiatan survei litbang sektor
perguruan tinggi yang dilakukan oleh Pappiptek-LIPI. Hingga saat
ini telah dilakukan 3 kali kegiatan survei selama 3 tahun berturut-
turut yaitu tahun 2005, 2006, dan 2007. Survei dilakukan pada
Perguruan Tinggi Negeri, Perguruan Tinggi Swasta, Lembaga
Penelitian, dan Lembaga Pengembangan Masyarakat. Salah satu
tujuan kegiatan survei tersebut yaitu untuk mengumpulkan,
mengolah dan mempresentasikan data kegiatan litbang di
perguruan tinggi. Data yang dikumpulkan meliputi tiga hal yaitu
data belanja litbang, SDM litbang, dan luaran litbang. Data dan
indikator iptek merupakan perangkat yang diperlukan untuk
melihat perkembangan iptek di suatu negara, baik untuk
keperluan monitoring, perencanaan dan pengambilan keputusan.
Data indikator iptek disajikan dalam bentuk grafik dan tabel.
Pada saat ini data dan indikator iptek dipublikasikan dalam
bentuk buku 'Indikator Iptek Nasional: Survei Penelitian dan
Pengembangan Sektor Perguruan Tinggi 2007' dan buku saku
'Sekilas IPTEK di Indonesia'.
8. Symfony Framework
sebuah framework open
source berupa pustaka
dari kelas-kelas yang
ditulis dengan bahasa
pemrograman PHP.
menyediakan sebuah
arsitektur, komponen-
komponen dan tool-tool
yang diperlukan untuk
membangun sebuah
aplikasi web
9. Data JSON
format pertukaran data yang ringan, mudah dibaca dan
ditulis oleh manusia, serta mudah diterjemahkan dan dibuat
(generate) oleh komputer
Dibuat berdasarkan bagian dari JavaScript Programming
Language
tidak bergantung pada bahasa pemprograman apapun
Data JSON merupakan input bagi Open Flash Chart
10. Open Flash Chart
tool chart generator
berbasis swf
menyediakan
berbagai tipe grafik :
bar, pie, line
11. jQuery
JavaScript Library
Menyederhanakan sebuah dokumen DHTML dalam
penulisan, penanganan event, animasi, dan interaksi-
interaksi dengan Ajax
Contoh penulisan code javascript dan jQuery...
12. Kode untuk membuat Zebra-stripe
pada tabel
function hasClass(obj) { Tambahkan kelas CSS untuk setiap baris
var result = false;
if (obj.getAttributeNode("class") != null) { tabel yang genap
result = obj.getAttributeNode("class").value;
}
return result; $(“table tr:nth-
} child(even)”).addClass(“striped”, “#fff”);
function stripe(id) {
var even = false;
var evenColor = arguments[1] ? arguments[1] : "#fff"; Atau atur style warna latar
var oddColor = arguments[2] ? arguments[2] : "#eee";
var table = document.getElementById(id);
if (! table) { return; } $(“table tr:nth-child(even)”).css(“background-
var tbodies = table.getElementsByTagName("tbody");
for (var h = 0; h < tbodies.length; h++) {
color”, “#fff”);
var trs = tbodies[h].getElementsByTagName("tr"); $(“table tr:nth-child(odd)”).css(“background-
for (var i = 0; i < trs.length; i++) { color”, “#eee”);
if (! hasClass(trs[i]) &&
! trs[i].style.backgroundColor) {
var tds = trs[i].getElementsByTagName("td");
for (var j = 0; j < tds.length; j++) {
var mytd = tds[j];
if (! hasClass(mytd) &&
! mytd.style.backgroundColor) {
mytd.style.backgroundColor =
even ? evenColor : oddColor;
}
}
}
}
}
}
javascript jQuery
14. jQuery UI
Library jQuery yang menangani tampilan User
Interface
Sortable portlets
sebagai tempat untuk
tampilan grafik
15. jQuery UI
Accordion untuk menu
di pane west
<div id="accordion" class="ui-accordian">
<!--code query ke basisdata-->
<?php
$cats = KategoriQueryPeer::doSelect(new Criteria()) ;
?>
<?php foreach($cats as $cat) {?>
<!--hasil query basisdata
menjadi menu accordion-->
<?php } ?>
</div>
16. jQuery SWFObject
sebuah plug-in sebagai add- $(".column").sortable({
connectWith: [.'column'],
on jquery yang ...
<!--fungsi-fungsi yang dilakukan ketika menangkap
memberikan fungsi unik sebuah portlet pada proses drag n drop-->
receive: function(event, ui) {
yaitu menyimpan konten ...
$("#"+id+" > .portlet-content").flash({
Flash secara fleksibel di <!--file OpenFlashChart-->
data: '/swf/ichor-dz.swf',
dalam browser dengan <!--var js utk identifikasi portlet-->
id: chartId,
menggunakan jquery name: 'chart-'+id,
<!--set ukuran portlet-->
selector width: $(".column .portlet").width()-20,
flashvars: {
Menampilkan grafik yang <!--data grafik-->
'data-file': '<?php echo url_for("chart/");?>'+chartAction+'?
dibuat dengan Open Flash }
title='+id+'&id='+id
Chart })
...
}
})
18. Prototype Dashboard
Portlet yang ditampilkan ditentukan oleh pengguna
Dapat ditampilkan lebih dari satu portlet
Tool yang dapat digunakan yaitu tool untuk
menutup portlet, tool untuk mengkustomisasi
tampilan grafik, tool untuk mengubah ukuran dan
menyimpan grafik dalam bentuk image, tool untuk
menulis komentar, tool untuk embedded grafik, dan
tool untuk minimize portlet.
19. Penutup
Dashboard yang dikembangkan ini telah dapat memenuhi fungsi-
fungsiutama yang diperlukan yaitu penyajian grafik secara interaktif
dengan melibatkan pengguna dalam pengaturan layout informasi.
Namun untuk grafik yang ditampilkan belum disertai data dalam
bentuk tabel.
Pengaturan layout informasi grafik juga belum dapat disimpan dan
diberikan tag sebagai kategori tertentu. Jika hal tersebut dapat
dipenuhi maka akan lebih mempermudah pengguna untuk membuat
kategori-kategori tertentu yang dapat diakses berulang tanpa harus
mengulangi dalam pemilihan grafik.
Arah pengembangan selanjutnya yaitu melengkapi fungsi-fungsi yang
belum dipenuhi. Selain itu juga perlu dibuat suatu sistem dashboard
yang generik dimana grafik dan tabel yang ditampilkan merupakan
query yang diinputkan langsung oleh pengguna.