SlideShare una empresa de Scribd logo
1 de 21
Descargar para leer sin conexión
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
Pendahuluan

    Ketersediaan data

    Data disajikan dalam bentuk grafik dan tabel

    Informasi dipublikasikan dalam berbagai media

    Media online (internet)
Pendahuluan

    Visualisasi data (penyampaian informasi)
        
          Terstruktur
        
          Jelas
        
          Interaktif
        
          Atraktif
        
          Dinamis
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          Open Flash
        MySQL                                         jQuery
                      JSON             Chart


        Database   Data Model    Chart Generator    Dashboard

                                Symfony Framework
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'.
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) {                                   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
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>
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-   $(".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                             })
                                      ...
                                  }
                                  })
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.
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.
http://indikator.pappiptek.lipi.go.id/
Terima kasih

Más contenido relacionado

Destacado

Sistem Dashboard Management
Sistem Dashboard ManagementSistem Dashboard Management
Sistem Dashboard ManagementHanggono Duto
 
Dashboard management system
Dashboard management systemDashboard management system
Dashboard management systemyudhi kristiono
 
Kpi Executive Dashboard
Kpi Executive DashboardKpi Executive Dashboard
Kpi Executive Dashboardinflow
 
KPI(Key Performance Indicators) for Case Study of a hotel industry
KPI(Key Performance Indicators) for Case Study of a hotel industryKPI(Key Performance Indicators) for Case Study of a hotel industry
KPI(Key Performance Indicators) for Case Study of a hotel industryToji Easo Varghese
 
Sistem Visualisasi Data
Sistem Visualisasi DataSistem Visualisasi Data
Sistem Visualisasi Datappibelanda
 
Aplikasi Penghitung Lama Pengerjaan Skripsi
Aplikasi Penghitung Lama Pengerjaan SkripsiAplikasi Penghitung Lama Pengerjaan Skripsi
Aplikasi Penghitung Lama Pengerjaan SkripsiWim Sonevel
 
Model Pembelajaran Blended learning
Model Pembelajaran Blended learningModel Pembelajaran Blended learning
Model Pembelajaran Blended learningJanner Simarmata
 
PERANCANGAN SISTEM MONITORING SUHU MENGGUNAKAN RASPBERRY PI BERBASIS WEB DAN ...
PERANCANGAN SISTEM MONITORING SUHU MENGGUNAKAN RASPBERRY PI BERBASIS WEB DAN ...PERANCANGAN SISTEM MONITORING SUHU MENGGUNAKAN RASPBERRY PI BERBASIS WEB DAN ...
PERANCANGAN SISTEM MONITORING SUHU MENGGUNAKAN RASPBERRY PI BERBASIS WEB DAN ...Uofa_Unsada
 
Kpi for hotel industry
Kpi for hotel industryKpi for hotel industry
Kpi for hotel industrysolutesarrobin
 
Belajar Android Studio - Membuat Aplikasi Android Sederhana
Belajar Android Studio - Membuat Aplikasi Android SederhanaBelajar Android Studio - Membuat Aplikasi Android Sederhana
Belajar Android Studio - Membuat Aplikasi Android SederhanaAgus Haryanto
 
Effective Dashboard Design: Why Your Baby is Ugly
Effective Dashboard Design: Why Your Baby is UglyEffective Dashboard Design: Why Your Baby is Ugly
Effective Dashboard Design: Why Your Baby is UglyAaron Hursman
 
Profil Pengguna Internet Indonesia 2014 (Riset oleh APJII dan PUSKAKOM UI)
Profil Pengguna Internet Indonesia 2014 (Riset oleh APJII dan PUSKAKOM UI)Profil Pengguna Internet Indonesia 2014 (Riset oleh APJII dan PUSKAKOM UI)
Profil Pengguna Internet Indonesia 2014 (Riset oleh APJII dan PUSKAKOM UI)ICT Watch
 
Pivot tables mysql_5
Pivot tables mysql_5Pivot tables mysql_5
Pivot tables mysql_5sammy_mdp
 
Pemanfaatan information technology (teknologi informasi) dalam
Pemanfaatan information technology (teknologi informasi) dalamPemanfaatan information technology (teknologi informasi) dalam
Pemanfaatan information technology (teknologi informasi) dalamadung_mukti
 

Destacado (16)

Sistem Dashboard Management
Sistem Dashboard ManagementSistem Dashboard Management
Sistem Dashboard Management
 
Dashboard management system
Dashboard management systemDashboard management system
Dashboard management system
 
Information System Dashboard
Information System DashboardInformation System Dashboard
Information System Dashboard
 
Kpi Executive Dashboard
Kpi Executive DashboardKpi Executive Dashboard
Kpi Executive Dashboard
 
KPI(Key Performance Indicators) for Case Study of a hotel industry
KPI(Key Performance Indicators) for Case Study of a hotel industryKPI(Key Performance Indicators) for Case Study of a hotel industry
KPI(Key Performance Indicators) for Case Study of a hotel industry
 
Sistem Visualisasi Data
Sistem Visualisasi DataSistem Visualisasi Data
Sistem Visualisasi Data
 
Aplikasi Penghitung Lama Pengerjaan Skripsi
Aplikasi Penghitung Lama Pengerjaan SkripsiAplikasi Penghitung Lama Pengerjaan Skripsi
Aplikasi Penghitung Lama Pengerjaan Skripsi
 
Model Pembelajaran Blended learning
Model Pembelajaran Blended learningModel Pembelajaran Blended learning
Model Pembelajaran Blended learning
 
PERANCANGAN SISTEM MONITORING SUHU MENGGUNAKAN RASPBERRY PI BERBASIS WEB DAN ...
PERANCANGAN SISTEM MONITORING SUHU MENGGUNAKAN RASPBERRY PI BERBASIS WEB DAN ...PERANCANGAN SISTEM MONITORING SUHU MENGGUNAKAN RASPBERRY PI BERBASIS WEB DAN ...
PERANCANGAN SISTEM MONITORING SUHU MENGGUNAKAN RASPBERRY PI BERBASIS WEB DAN ...
 
Skripsi spbu
Skripsi spbuSkripsi spbu
Skripsi spbu
 
Kpi for hotel industry
Kpi for hotel industryKpi for hotel industry
Kpi for hotel industry
 
Belajar Android Studio - Membuat Aplikasi Android Sederhana
Belajar Android Studio - Membuat Aplikasi Android SederhanaBelajar Android Studio - Membuat Aplikasi Android Sederhana
Belajar Android Studio - Membuat Aplikasi Android Sederhana
 
Effective Dashboard Design: Why Your Baby is Ugly
Effective Dashboard Design: Why Your Baby is UglyEffective Dashboard Design: Why Your Baby is Ugly
Effective Dashboard Design: Why Your Baby is Ugly
 
Profil Pengguna Internet Indonesia 2014 (Riset oleh APJII dan PUSKAKOM UI)
Profil Pengguna Internet Indonesia 2014 (Riset oleh APJII dan PUSKAKOM UI)Profil Pengguna Internet Indonesia 2014 (Riset oleh APJII dan PUSKAKOM UI)
Profil Pengguna Internet Indonesia 2014 (Riset oleh APJII dan PUSKAKOM UI)
 
Pivot tables mysql_5
Pivot tables mysql_5Pivot tables mysql_5
Pivot tables mysql_5
 
Pemanfaatan information technology (teknologi informasi) dalam
Pemanfaatan information technology (teknologi informasi) dalamPemanfaatan information technology (teknologi informasi) dalam
Pemanfaatan information technology (teknologi informasi) dalam
 

Similar a Desain Dashboard Berbasis Web dengan Platform Opensource

Visualisasi Online untuk Data Indikator IPTEK
Visualisasi Online untuk Data Indikator IPTEK Visualisasi Online untuk Data Indikator IPTEK
Visualisasi Online untuk Data Indikator IPTEK Wildan Maulana
 
Cara Membuat Aplikasi Android Resep Masakan Sederhana Android-SQLite
Cara Membuat Aplikasi Android Resep Masakan Sederhana Android-SQLiteCara Membuat Aplikasi Android Resep Masakan Sederhana Android-SQLite
Cara Membuat Aplikasi Android Resep Masakan Sederhana Android-SQLitecreatorb dev
 
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...DicodingEvent
 
Modul framework code igniter
Modul framework code igniterModul framework code igniter
Modul framework code igniterFakhir Rizal
 
Membuat aplikasi polling dengan php
Membuat aplikasi polling dengan phpMembuat aplikasi polling dengan php
Membuat aplikasi polling dengan phpdikazaim
 
54 hal-dasar-dasar-jquery
54 hal-dasar-dasar-jquery54 hal-dasar-dasar-jquery
54 hal-dasar-dasar-jqueryFajar Baskoro
 
Belajar php-dengan-framework-code-igniter1
Belajar php-dengan-framework-code-igniter1Belajar php-dengan-framework-code-igniter1
Belajar php-dengan-framework-code-igniter1Al-dhimas Purnama
 
Membuat kategori artikel dan detail artikel menggunakan php dan mysql
Membuat kategori artikel dan detail artikel menggunakan php dan mysqlMembuat kategori artikel dan detail artikel menggunakan php dan mysql
Membuat kategori artikel dan detail artikel menggunakan php dan mysqlNie Andini
 
Ansanwan form sederhana php
Ansanwan form sederhana phpAnsanwan form sederhana php
Ansanwan form sederhana phpSigit Ariyanto
 
Belajar Android PHP MySQL Login dengan Volley
Belajar Android PHP MySQL Login dengan VolleyBelajar Android PHP MySQL Login dengan Volley
Belajar Android PHP MySQL Login dengan VolleyAgus Haryanto
 
Entri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQuery
Entri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQueryEntri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQuery
Entri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQueryAchmad Solichin
 
F 10011543 fathorazi nur fajri
F 10011543 fathorazi nur fajriF 10011543 fathorazi nur fajri
F 10011543 fathorazi nur fajriSyarif Fudin
 
Belajar membuat modul crud di laravel 5
Belajar membuat modul crud di laravel 5Belajar membuat modul crud di laravel 5
Belajar membuat modul crud di laravel 5Welly Rosadi, Mochamad
 

Similar a Desain Dashboard Berbasis Web dengan Platform Opensource (20)

Visualisasi Online untuk Data Indikator IPTEK
Visualisasi Online untuk Data Indikator IPTEK Visualisasi Online untuk Data Indikator IPTEK
Visualisasi Online untuk Data Indikator IPTEK
 
Tugas rekweb 2 1212511560 m.shafwan al farisy
Tugas rekweb 2 1212511560 m.shafwan al farisyTugas rekweb 2 1212511560 m.shafwan al farisy
Tugas rekweb 2 1212511560 m.shafwan al farisy
 
Cara Membuat Aplikasi Android Resep Masakan Sederhana Android-SQLite
Cara Membuat Aplikasi Android Resep Masakan Sederhana Android-SQLiteCara Membuat Aplikasi Android Resep Masakan Sederhana Android-SQLite
Cara Membuat Aplikasi Android Resep Masakan Sederhana Android-SQLite
 
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
Dicoding Developer Coaching #23: Android | Membangun Modern App dengan Jetpac...
 
Modul framework code igniter
Modul framework code igniterModul framework code igniter
Modul framework code igniter
 
Membuat aplikasi polling dengan php
Membuat aplikasi polling dengan phpMembuat aplikasi polling dengan php
Membuat aplikasi polling dengan php
 
54 hal-dasar-dasar-jquery
54 hal-dasar-dasar-jquery54 hal-dasar-dasar-jquery
54 hal-dasar-dasar-jquery
 
Jquery id
Jquery idJquery id
Jquery id
 
JQuery
JQueryJQuery
JQuery
 
Kelompok 7
Kelompok 7Kelompok 7
Kelompok 7
 
16406 pertemuan17(konsep basis-data-di-web)
16406 pertemuan17(konsep basis-data-di-web)16406 pertemuan17(konsep basis-data-di-web)
16406 pertemuan17(konsep basis-data-di-web)
 
Belajar php-dengan-framework-code-igniter1
Belajar php-dengan-framework-code-igniter1Belajar php-dengan-framework-code-igniter1
Belajar php-dengan-framework-code-igniter1
 
Membuat kategori artikel dan detail artikel menggunakan php dan mysql
Membuat kategori artikel dan detail artikel menggunakan php dan mysqlMembuat kategori artikel dan detail artikel menggunakan php dan mysql
Membuat kategori artikel dan detail artikel menggunakan php dan mysql
 
Ansanwan form sederhana php
Ansanwan form sederhana phpAnsanwan form sederhana php
Ansanwan form sederhana php
 
Jobsheet2 php
Jobsheet2 phpJobsheet2 php
Jobsheet2 php
 
Lecture06 javascript1
Lecture06 javascript1Lecture06 javascript1
Lecture06 javascript1
 
Belajar Android PHP MySQL Login dengan Volley
Belajar Android PHP MySQL Login dengan VolleyBelajar Android PHP MySQL Login dengan Volley
Belajar Android PHP MySQL Login dengan Volley
 
Entri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQuery
Entri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQueryEntri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQuery
Entri, Edit, Delete, Tampil (CRUD) dengan PHP dan Ajax JQuery
 
F 10011543 fathorazi nur fajri
F 10011543 fathorazi nur fajriF 10011543 fathorazi nur fajri
F 10011543 fathorazi nur fajri
 
Belajar membuat modul crud di laravel 5
Belajar membuat modul crud di laravel 5Belajar membuat modul crud di laravel 5
Belajar membuat modul crud di laravel 5
 

Más de Wildan Maulana

Hasil Pendataan Potensi Desa 2018
Hasil Pendataan Potensi Desa 2018Hasil Pendataan Potensi Desa 2018
Hasil Pendataan Potensi Desa 2018Wildan Maulana
 
Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...
Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...
Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...Wildan Maulana
 
Ketahanan Pangan #1 : Gerakan Sekolah Menanam Melon
Ketahanan Pangan #1 : Gerakan Sekolah Menanam MelonKetahanan Pangan #1 : Gerakan Sekolah Menanam Melon
Ketahanan Pangan #1 : Gerakan Sekolah Menanam MelonWildan Maulana
 
Pengembangan OpenThink SAS 2013-2014
Pengembangan OpenThink SAS 2013-2014Pengembangan OpenThink SAS 2013-2014
Pengembangan OpenThink SAS 2013-2014Wildan Maulana
 
ICA – AtoM : Retensi Arsip
ICA – AtoM : Retensi ArsipICA – AtoM : Retensi Arsip
ICA – AtoM : Retensi ArsipWildan Maulana
 
OpenThink Labs Workshop : Ketahanan Pangan Skala RT/RW
OpenThink Labs Workshop : Ketahanan Pangan Skala RT/RWOpenThink Labs Workshop : Ketahanan Pangan Skala RT/RW
OpenThink Labs Workshop : Ketahanan Pangan Skala RT/RWWildan Maulana
 
OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...
OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...
OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...Wildan Maulana
 
PostgreSQL BootCamp : Manajemen Master Data dengan SkyTools
PostgreSQL BootCamp : Manajemen Master Data dengan SkyToolsPostgreSQL BootCamp : Manajemen Master Data dengan SkyTools
PostgreSQL BootCamp : Manajemen Master Data dengan SkyToolsWildan Maulana
 
Mensetup Google Apps sebagai IdP jenis openID dan Aplikasi Berbasis CakePHP ...
Mensetup Google Apps sebagai IdP jenis openID  dan Aplikasi Berbasis CakePHP ...Mensetup Google Apps sebagai IdP jenis openID  dan Aplikasi Berbasis CakePHP ...
Mensetup Google Apps sebagai IdP jenis openID dan Aplikasi Berbasis CakePHP ...Wildan Maulana
 
Mensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai Sp
Mensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai SpMensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai Sp
Mensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai SpWildan Maulana
 
Konfigurasi simpleSAMLphp dengan Google Apps Sebagai Identity Provider
Konfigurasi simpleSAMLphp  dengan Google Apps Sebagai Identity ProviderKonfigurasi simpleSAMLphp  dengan Google Apps Sebagai Identity Provider
Konfigurasi simpleSAMLphp dengan Google Apps Sebagai Identity ProviderWildan Maulana
 
Instalasi simpleSAMLphp sebagai Identity Provider (IdP)
Instalasi simpleSAMLphp sebagai Identity Provider (IdP)Instalasi simpleSAMLphp sebagai Identity Provider (IdP)
Instalasi simpleSAMLphp sebagai Identity Provider (IdP)Wildan Maulana
 
Instalasi dan Konfigurasi simpleSAMLphp
Instalasi dan Konfigurasi simpleSAMLphpInstalasi dan Konfigurasi simpleSAMLphp
Instalasi dan Konfigurasi simpleSAMLphpWildan Maulana
 
River Restoration in Asia and Connection Between IWRM and River Restoration
River Restoration in Asia and Connection Between IWRM and River RestorationRiver Restoration in Asia and Connection Between IWRM and River Restoration
River Restoration in Asia and Connection Between IWRM and River RestorationWildan Maulana
 
Optimasi Limpasan Air Limbah Ke Kali Surabaya (Segmen Sepanjang – Jagir) De...
Optimasi Limpasan Air Limbah  Ke Kali Surabaya (Segmen Sepanjang – Jagir)  De...Optimasi Limpasan Air Limbah  Ke Kali Surabaya (Segmen Sepanjang – Jagir)  De...
Optimasi Limpasan Air Limbah Ke Kali Surabaya (Segmen Sepanjang – Jagir) De...Wildan Maulana
 
Penilaian Siswa di Finlandia - Pendidikan Dasar
Penilaian Siswa di Finlandia - Pendidikan DasarPenilaian Siswa di Finlandia - Pendidikan Dasar
Penilaian Siswa di Finlandia - Pendidikan DasarWildan Maulana
 
Proyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and Uses
Proyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and UsesProyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and Uses
Proyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and UsesWildan Maulana
 
OpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang Tua
OpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang TuaOpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang Tua
OpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang TuaWildan Maulana
 
Menggunakan AlisJK : Equating
Menggunakan AlisJK : EquatingMenggunakan AlisJK : Equating
Menggunakan AlisJK : EquatingWildan Maulana
 

Más de Wildan Maulana (20)

Hasil Pendataan Potensi Desa 2018
Hasil Pendataan Potensi Desa 2018Hasil Pendataan Potensi Desa 2018
Hasil Pendataan Potensi Desa 2018
 
Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...
Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...
Double for Nothing? Experimental Evidence on an Unconditional TeacherSalary I...
 
Ketahanan Pangan #1 : Gerakan Sekolah Menanam Melon
Ketahanan Pangan #1 : Gerakan Sekolah Menanam MelonKetahanan Pangan #1 : Gerakan Sekolah Menanam Melon
Ketahanan Pangan #1 : Gerakan Sekolah Menanam Melon
 
Pengembangan OpenThink SAS 2013-2014
Pengembangan OpenThink SAS 2013-2014Pengembangan OpenThink SAS 2013-2014
Pengembangan OpenThink SAS 2013-2014
 
ICA – AtoM : Retensi Arsip
ICA – AtoM : Retensi ArsipICA – AtoM : Retensi Arsip
ICA – AtoM : Retensi Arsip
 
OpenThink Labs Workshop : Ketahanan Pangan Skala RT/RW
OpenThink Labs Workshop : Ketahanan Pangan Skala RT/RWOpenThink Labs Workshop : Ketahanan Pangan Skala RT/RW
OpenThink Labs Workshop : Ketahanan Pangan Skala RT/RW
 
OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...
OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...
OpenThink Labs : Dengar Pendapat Komunitas ciliwung dengan kemen pu dan kemen...
 
PostgreSQL BootCamp : Manajemen Master Data dengan SkyTools
PostgreSQL BootCamp : Manajemen Master Data dengan SkyToolsPostgreSQL BootCamp : Manajemen Master Data dengan SkyTools
PostgreSQL BootCamp : Manajemen Master Data dengan SkyTools
 
Mensetup Google Apps sebagai IdP jenis openID dan Aplikasi Berbasis CakePHP ...
Mensetup Google Apps sebagai IdP jenis openID  dan Aplikasi Berbasis CakePHP ...Mensetup Google Apps sebagai IdP jenis openID  dan Aplikasi Berbasis CakePHP ...
Mensetup Google Apps sebagai IdP jenis openID dan Aplikasi Berbasis CakePHP ...
 
Mensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai Sp
Mensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai SpMensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai Sp
Mensetup Google Apps sebagai IdP jenis openID dan Wordpress sebagai Sp
 
Konfigurasi simpleSAMLphp dengan Google Apps Sebagai Identity Provider
Konfigurasi simpleSAMLphp  dengan Google Apps Sebagai Identity ProviderKonfigurasi simpleSAMLphp  dengan Google Apps Sebagai Identity Provider
Konfigurasi simpleSAMLphp dengan Google Apps Sebagai Identity Provider
 
Instalasi simpleSAMLphp sebagai Identity Provider (IdP)
Instalasi simpleSAMLphp sebagai Identity Provider (IdP)Instalasi simpleSAMLphp sebagai Identity Provider (IdP)
Instalasi simpleSAMLphp sebagai Identity Provider (IdP)
 
Instalasi dan Konfigurasi simpleSAMLphp
Instalasi dan Konfigurasi simpleSAMLphpInstalasi dan Konfigurasi simpleSAMLphp
Instalasi dan Konfigurasi simpleSAMLphp
 
River Restoration in Asia and Connection Between IWRM and River Restoration
River Restoration in Asia and Connection Between IWRM and River RestorationRiver Restoration in Asia and Connection Between IWRM and River Restoration
River Restoration in Asia and Connection Between IWRM and River Restoration
 
Optimasi Limpasan Air Limbah Ke Kali Surabaya (Segmen Sepanjang – Jagir) De...
Optimasi Limpasan Air Limbah  Ke Kali Surabaya (Segmen Sepanjang – Jagir)  De...Optimasi Limpasan Air Limbah  Ke Kali Surabaya (Segmen Sepanjang – Jagir)  De...
Optimasi Limpasan Air Limbah Ke Kali Surabaya (Segmen Sepanjang – Jagir) De...
 
Penilaian Siswa di Finlandia - Pendidikan Dasar
Penilaian Siswa di Finlandia - Pendidikan DasarPenilaian Siswa di Finlandia - Pendidikan Dasar
Penilaian Siswa di Finlandia - Pendidikan Dasar
 
Statistik Listrik
Statistik ListrikStatistik Listrik
Statistik Listrik
 
Proyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and Uses
Proyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and UsesProyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and Uses
Proyek Al-'Alaq : Electric Bicycles ; History, Characteristics, and Uses
 
OpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang Tua
OpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang TuaOpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang Tua
OpenThink SAS : Interaksi Antara Sekolah, Wali Kelas, Siswa dan Orang Tua
 
Menggunakan AlisJK : Equating
Menggunakan AlisJK : EquatingMenggunakan AlisJK : Equating
Menggunakan AlisJK : Equating
 

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)
  • 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 }) ... } })
  • 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.