Desain Dashboard Berbasis Web dengan Platform Opensource

Elmi Achelia 1) – Wildan Maulana 2)

1). Pusat Penelitian Perkembangan Iptek LIPI2). OpenThink Labs

untuk E-Indonesia Initiatives 2009Bandung, 24-25 Juni 2009

Pendahuluan

Ketersediaan data Data disajikan dalam bentuk grafik dan tabel Informasi dipublikasikan dalam berbagai media Media online (internet)

Pendahuluan

Visualisasi data (penyampaian informasi)TerstrukturJelasInteraktifAtraktifDinamis

Dashboard

suatu model antarmuka sistem informasi yang dianalogikan seperti dashboard sebuah mobil yang

mudah untuk dipelajari

Dashboard

Mengkomunikasikan informasi dengan cepat Membantu identifikasi trend, pola, anomali data Membantu pengambilan keputusan secara efektif

Dashboard

Teknologi Opensource

Data JSONMySQL

Open Flash Chart

jQuery

Database Data Model Chart Generator Dashboard

Symfony Framework

DataIndikator 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'.

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

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

Open Flash Chart tool chart generator

berbasis swf menyediakan

berbagai tipe grafik : bar, pie, line

jQuery

JavaScript Library

Menyederhanakan sebuah dokumen DHTML dalam penulisan, penanganan event, animasi, dan interaksi-interaksi dengan Ajax

Contoh penulisan code javascript dan jQuery...

Kode untuk membuat Zebra-stripe pada tabel

function hasClass(obj) { var result = false; if (obj.getAttributeNode("class") != null) { result = obj.getAttributeNode("class").value; } return result; }function stripe(id) { var even = false; var evenColor = arguments[1] ? arguments[1] : "#fff"; var oddColor = arguments[2] ? arguments[2] : "#eee"; var table = document.getElementById(id); if (! table) { return; } var tbodies = table.getElementsByTagName("tbody"); for (var h = 0; h < tbodies.length; h++) { var trs = tbodies[h].getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { 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; } } } } } }

Tambahkan kelas CSS untuk setiap baris tabel yang genap

$(“table tr:nth-child(even)”).addClass(“striped”, “#fff”);

Atau atur style warna latar

$(“table tr:nth-child(even)”).css(“background-color”, “#fff”);

$(“table tr:nth-child(odd)”).css(“background-color”, “#eee”);

javascript jQuery

jQuery Layout

plug-in untuk membuat tampilan user interface

5 pane, yaitu North, West, Center, East, dan South

<SCRIPT type="text/javascript"> <!-- code untuk setting style layout --> $('body').layout({ }); <!-- code untuk memanggil ui accordion → $("#accordion").accordion();</SCRIPT><BODY><div class="ui-layout-west"> <div class="header">Main Menu</div> <div class="content"> <?php include_partial("menu_accordion");?> </div> <div class="subhead"> &copy; PAPPIPTEK LIPI </div> </div><div class="ui-layout-north"> <div class="header">...</div></div><!-- <div class="ui-layout-south"></div> --><!-- <div class="ui-layout-east"></div> --><div class="ui-layout-center"> <?php echo $sf_content ?></div></BODY>

jQuery UI

Library jQuery yang menangani tampilan User Interface

Sortable portlets sebagai tempat untuk tampilan grafik

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>

jQuery SWFObject

sebuah plug-in sebagai add-on jquery yang memberikan fungsi unik yaitu menyimpan konten Flash secara fleksibel di dalam browser dengan menggunakan jquery selector

Menampilkan grafik yang dibuat dengan Open Flash Chart

$(".column").sortable({ connectWith: [.'column'], ... <!--fungsi-fungsi yang dilakukan ketika menangkap sebuah portlet pada proses drag n drop--> receive: function(event, ui) { ... $("#"+id+" > .portlet-content").flash({ <!--file OpenFlashChart--> data: '/swf/ichor-dz.swf', <!--var js utk identifikasi portlet--> id: chartId, name: 'chart-'+id, <!--set ukuran portlet--> width: $(".column .portlet").width()-20, flashvars: { <!--data grafik--> 'data-file': '<?php echo url_for("chart/");?>'+chartAction+'? title='+id+'&id='+id } }) ...}})

Prototype Dashboard

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.

PenutupDashboard 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.

http://indikator.pappiptek.lipi.go.id/

Terima kasih