Desain Dashboard Berbasis Web  dengan Platform Opensource
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Desain Dashboard Berbasis Web dengan Platform Opensource

  • 6,101 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • ok, nice
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
6,101
On Slideshare
6,018
From Embeds
83
Number of Embeds
3

Actions

Shares
Downloads
194
Comments
1
Likes
0

Embeds 83

http://wildanm.wordpress.com 68
http://www.slideshare.net 14
https://wildanm.wordpress.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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)
  • 3. Pendahuluan  Visualisasi data (penyampaian informasi)  Terstruktur  Jelas  Interaktif  Atraktif  Dinamis
  • 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
  • 13. jQuery Layout <SCRIPT type="text/javascript">  plug-in untuk membuat <!-- code untuk setting style layout --> $('body').layout({ }); tampilan user interface <!-- code untuk memanggil ui accordion → $("#accordion").accordion();  5 pane, yaitu North, </SCRIPT> <BODY> West, Center, East, dan <div class="ui-layout-west"> <div class="header">Main Menu</div> South <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>
  • 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 }) ... } })
  • 17. Prototype Dashboard
  • 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.
  • 20. http://indikator.pappiptek.lipi.go.id/
  • 21. Terima kasih