D-014

Prosiding Conference on Smart-Green Technology in Electrical and Information Systems

Bali, 14-15 November 2013

DESAIN ANTAR MUKA PLATFORM RESELIENT UNTUK MANAJEMEN BENCANA

Idris Winarno, Wiratmoko Yuwono, Tri Harsono

Departemen Teknik Informatika dan Komputer

Politeknik Elektronika Negeri Surabaya

Kampus PENS, Jalan Raya ITS Sukolilo, Surabaya

Tel: (031) 594 7280; Fax: (031) 594 6114

Email: idris@eepis-its.edu, moko@eepis-its.edu, trison@eepis-its.edu

Abstrak - Salah satu sistem informasi kebencanaan yang ada saat ini adalah Sahana.Sahana memiliki keterbatasan dalam integrasi dengan aplikasi pendukung kebencanaan yang dikembangkan olehpihaklain. Hal ini terjadi karena tidak adanya platform standar yang memiliki protokol yang terbuka untuk dapat dimanfaatkan oleh pengembang aplikasi atau sistem.Oleh karena itu dibutuhkan sebuah sistem informasi kebencanaan yang bersifat universal dimana memiliki protokol yang dapat dimanfaatkan oleh pengembang agar aplikasi yang dibuat dapat diintegrasikan secara langsung terhadap sistem informasi kebencanaan dengan diawali dengan pembuatan desain antar muka dari sistem informasi tersebut.Penelitian ini membuat desain antar muka yang bersifat universal dimana fitur-fiturnya lebih lengkap dari Sahana. Secara garis besar desain antar muka antara Sahana dan Sistem informasi kebencanaan hampir sama tetapi pada sistem informasi kebencanaan terdapat tambahan beberapa fitur yaitu Manejemen Trackingdengan penggunaan UI Boostrap didalam pembangunannya.

Kata Kunci : Sistem Informasi, Bencana Alam, platform, antar muka

  • I.    Pendahuluan

  • A.    Latar Belakang

Indonesia adalah daerah rawan bencana.Dua contoh besar yaitu gempa dan tsunami di Aceh serta gempa di Yogyakarta yang menelan banyak korban jiwa dan berpengaruh pada jutaan korban lainnya. Ketika ribuan orang dari berbagai latar belakang ingin memberikan pertolongan, maka tampak jelas bahwa tanpa adanya informasi teknologi akan sangat sulit untuk mengkoordinasikan usaha terebut untuk mencapai hasil yang maksimal. Ketika suatu bencana terjadi, seringkali koordinasi atau respon yang ada bersifat kacau. Tidak hanya banyak orang yang terkena dampak bencana yang terjadi dalam sekejap mata, juga berbagai infrastruktur seperti transportasi, komunikasi, manajemen gawat darurat (polisi, rumah sakit, pemadam) lumpuh[10]. Atau meskipun infrastrukturnya masih utuh, skala bencana seringkali lebih besar dari yang dapat ditangani oleh sumberdaya lokal.Dengan demikian, sangat diperlukan reaksi

yang cepat dari donator lokal atau asing untuk mendukung masyarakat sipil dan korban itu sendiri agar dapat menangani situasi yang ada. Semua kelompok dan individual ini membutuhkan kewenangan dan butuh dikoordinasikan untuk saling melengkapi satu sama lain sehingga lebih efektif.

Dengan melihat kebutuhan diatas diperlukan sebuah sistem informasiberbasis web yang dapat terintegrasi dengan mudah dengan layanan lain yang berkaitan dengan masalah tentang bencana alam, seperti misalnya sistem informasi geografis lumpur Sidoarjo[7], visualiasi 3D simulasi kebakaran hutan[8], dan lain-lain.Disamping itu juga diperlukan sistem informasi yang dapat dikembangkan dengan mudah oleh beberapa pengembang yang berbeda.Pada penelitian ini dibuat suatu platform desainantar muka (user interface) sistem informasi kebencanaan yang mendukungdan mengakomodasi layanan-layanan pendukung lainnya (multiservice).Sistem dibangun didasarkan pada konsep arsitektur Hierarcical model-view-control (HMVC). Konsep Arsitektur HMVC memungkinkan pengembang dapat mengembangkan aplikasi secara modul per modul[4]. Sehingga pengembang lain bisa ikut serta dalam pengembangan Sistem Informasi kebencanaan ini tanpa perlu mengubah kode utama aplikasi ini.

  • B.    Tujuan

Penelitian ini dibangun untuk menghasilkan sebuah desain antar muka sistem informasikebencanaan yang memiliki fitur-fitur sistem informasi kebencanaan yang dapat mengakomodasi aplikasi-aplikasi atau sistem lain yang akan digabungkan pada sistem informasi kebencanaan ini.

  • C.    Kontribusi

Hasil dari desain antar muka yang dibuat adalah berupa aplikasi berbasis web yang akandifungsikan menjadi sistem informasi kebencanaan yang memiliki fitur atau menu-menu yang mengakomodir kebutuhan sistem informasi pendukung, dimana sistem informasi tersebut memiliki keunggulan dapat diintegrasikan dengan sistem lain tanpa perlu melakukan perubahan kode program pada sistem informasi yang telah dibangun.

  • II.    Teori Penunjang

A.Sahana

Sahana adalah sistem manajemen bencana yang bersifat Open Source[3]. Disamping itu, sistem ini mempunyai fitur yang cukup lengkap dan akan terus dikembangkan sehingga dapat memenuhi kebutuhan ketika terjadi bencana yang sesungguhnya. Beberapa fitur tersebut antara lain:

  • a.    Penanganan Orang Hilang

  • b.    Penanganan Korban Bencana

  • c.    Manajemen Sukarelawan

  • d.    Manajemen Organisasi Donor

  • e.    Manajemen Bantuan/Permohonan Bantuan

  • f.  Manajemen Barak Pengungsi

  • g.    Manajemen Inventaris

  • h.    Sistem Katalog

  • i.   Peta Situasi Bencana

  • j.   Sinkronisasi Data

  • k.    Laporan

    Gambar 1. Struktur general SAMBRO (Sahana Alerting and Messaging Broker)[1]


Sahana sendiri terdiri dari 2 projek utama yaitu Eden dan Agasti.Eden dibangun dengan menggunakan Python sebagai sebuah aplikasi berbasis desktop yang dapat membantu mengkoordinasikan usaha bantuan dari titik pusat pendistribusian bencana alam.Sedangkan Agasti ditulis dalam bahasa pemrograman PHP dan mempunyai fokus pada pemberian upaya bantuan lebih luas melalui penyediaan interkoneksi antara sejumlah titik pusat-pusat utama bantuan bencana.

Agasti sendiri, terdiri dari 2 bagian: Mayon dan Vesuvius.Mayon berfokus pada analisis statistik dan prediksi, Vesuvius berfokus pada menemukan orang hilang.

Vesuvius memiliki struktur yang sederhana namun efisien yang dapat membantu untuk mengatur acara bencana dan upaya mengkoordinasi sejumlah pusat titik bencana alam secara urut. Yang paling menarik tentang Vesuvius adalah dengan adanya Access Control List yang canggih yang dapat memberikan hak akses kepada para peneliti untuk mempunyai hak administrator dengan cara mengaturnya di website mereka sendiri.

Struktur dari generalSAMBRO (Sahana Alerting and Messaging Broker) tampak pada gambar 1, dimana pada gambar tersebut general SAMBRO memiliki 9 fitur utama yaitu: function, DM, integreate, OS, programming, OSI, database, data standart dan broker.

B.MVC (Model View Controller)

Model-View-Controller atau MVC adalah sebuah metode untuk membuat sebuah aplikasi dengan memisahkan data (Model) dari tampilan (View) dan cara bagaimana memprosesnya (Controller). Dalam implementasinya kebanyakan framework dalam aplikasiwebsite adalah berbasis arsitektur MVC.MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang membangun sebuah aplikasi seperti manipulasi data, antarmuka pengguna, dan bagian yang menjadi kontrol dalam sebuah aplikasi web.

Gambar 2.diagram MVC [4]

Model-View-Controller pertama sekali dipublikasikan oleh penelitiXEROX PARC yang bekerja dalam pembuatan bahasa pemrogramanSmalltalk sekitar tahun1970-1980[9]. Diagram Model-View-Controler dapat dilihat pada gambar 2. Didasarkan pada gambar 2, bagian-bagian dari MVC adalah:

  • a.    Model, Model mewakili struktur data. Biasanya model berisi fungsi-fungsi yang membantu seseorang dalam pengelolaan basis data seperti memasukkan data ke basis data, pembaruan data dan lain-lain.

  • b.    View, View adalah bagian yang mengatur tampilan ke pengguna. Bisa di katakan berupa halaman web.


  • c. Controller, Controller merupakan bagian yang menjembatani model dan view. Controller berisi perintah-perintah yang berfungsi untuk memproses suatu data dan mengirimkannya ke halaman web.

Dengan menggunakan metode MVC maka aplikasi akan lebih mudah untuk dirawat dan dikembangkan. Untuk memahami metode pengembangan aplikasi menggunakan MVC diperlukan pengetahuan tentang pemrograman berorientasi objek (Object Oriented Programming).

  • C.    UI Boostrap

UI Bootstrap adalah sebuah framework desain antar muka yang dapat menyelesaikan permasalahan dalam mendesain web.Didalam boostrap sendiri sudah tersedia beberapa komponen pendukung dalam menciptakan view website yang terdiri dari file HTML, file javascript dan file css-nya.

Penggunaan UI Boostrap ini telah banyak digunakan oleh website website terkenal yaitu NASA , MSNBC. UI Boostrap sangat membantu sekali dalam pembentukan desain website. Berikut beberapa alas an dalam penggunaan boostrap:

  • a.    Menghemat Waktu

Didalam boostrap telah tersedia beberapa library dan komponen yang bisa dikustomisasi kan dengan website sehingga menghemat para developer dalam pembentukan website.

  • b.    Kustomisasi

UI Boostrap sendiri bersifat dinamis sehingga mudah untuk kustomisasi sesuai dengan kebutuhan website.

  • c.    Konsistensi

Library dan komponen yang ada di boostrap telah di validasi dengan menggunakan beberapa web browser di tiap versinya masing – masing sehingga menjaga ke konsistensi-an design dengan penggunaan browser yang berbeda.

  • d.    Update

UI Boostrap sendiri mempunyai celah atau bug dalam penggunaannya, sehingga masih terus diupdate atau diperbaharui.

  • e.    Integrasi

UI Boostrap dapat diintegrasikan dengan UI lainnya.

  • f.    Responsif

UI Boostrap sendiri telah dibangun dengan memperhatikan resolusi dari ukuran monitor yang digunakan user, sehingga tidak perlu melakukan pembentukan di resolusi yang baru lagi.

Terdapat beberapa macam UI boostrap antara lain twitterboostrap ,UI boostrap yang dibuat oleh JS Angular Team. Di penelitian ini yang digunakan adalah Twitter Boostrap dikarenakan Twitter Boostrap mempunyai komponen dan library yang paling banyak dibanding yang lain.

  • D.    Twitter Boostrap

TwitterBoostrap dibangun oleh Mark Otto dan Jacob Thornton di perusahaan twitter sebagai sebuah framework untuk membantu dalam kekonsistenan dalam penggunaan tools dalam pembangunan twitter itu sendiri. Agustus 2011, twitter merilis boostrap sebagai sebuah open source dan Februari 2012 menjadi sebuah project yang paling banyak disinggahi dan digunakan di github projek.

Slogan dari framework ini adalah “Sleek, intuitive, andpowerfulfront-end framework for faster and easier web development”, yang berarti kita dapat mendesain sebuah website dengan lebih rapi, cepat dan mudah.

Terdapat 4 bagian utama didalam boostrap yaitu

  • a.    Scaffolding

Desain secara general dari boostrap itu sendiri yang meliputi reset css, desain link, gridsystem, pengaturan layout.

  • b.    CSS Dasar.

Desain umum untuk pengaturan di HTML element seperti tipografi, code, tabel, form, tombol dan juga icon dari Glyphicons.

  • c.    Komponen.

Suatu desain dari elemen-elemen dasar website seperti tabsandpills, navbar, alerts, danpageheader.

  • d.    Javascript Plugin

Hampir sama dengan komponen, tetapi JavascriptPlugin ini lebih interaktif dalam menggunakannya seperti tooltips, popovers,modals dan lain lain.

  • III.    Pembuatan Sistem

  • A. Rancangan Sistem Global

Rancangan sistem global dari Sistem Informasi Kebencanaan secara keseluruhan dapat dilihat pada gambar3.

Gambar3.Desain Global Single Platform

Desain antar muka untuk sistem informasi kebencanaan dalam penelitian ini dibangun berbasis pemrograman web dan

dengan menggunakan dengan konsep arsitektur pembangunan MVC yang mana antar muka lebih difokuskan pada bagian Viewdari MVCuntuk dapat memfasilitasi semua menu yang ada. Sebagai langkah awal adalah dengan membedah menu yang terdapat pada Sahana yang telah disebutkan pada pembahasan sebelumnya.

Dari hasil pembedahan fitur atau menu yang ada di Sahana didapat desain antar muka yangdikembangkan lebih lanjut untuk mengakomodasi fitur-fitur atau menu dari beberapa layanan dibidangGeographic Information System (GIS),Mobile Application, Embedded System, Datawarehouse, sistem log/report dan lain sebagainya. Desain antar muka merujuk pada teknologi web yang terbaru dimana web dikembangkan untuk mendukung adanya kemudahan akses dari berbagai perangkat atau dengan kata lain antar muka mendukung sistem responsive web[6].

Data data yang diperlukan dalam penyebaran wabah bencana alam,

  • f. Disaster Managemen System

Data data yang diperlukan dalam konfigurasi alur proses utama di system informasi ini yaitu Situation, Decision, Response.

  • C. Desain Antar Muka

Pada desain antar muka kali ini akan dibagi dengan beberapa fitur bagian yaitu:

  • a. Alur sistem informasi

Pada desain antar muka ini akan menampilkan alur utama dalam Sistem Informasi Kebencanaan yaitu Situation,Decision dan Responseseperti terlihat pada gambar 5.

B.Data Flow Diagram (DFD)

Alur perancangan sistem yang menjelaskan tentang proses

integrasi dapat dilihat pada gambar 4

Gambar 4.Blok Diagram alur perancangan

Sistem tersebut mempunyai 6 macam alur utama data dengan rincian sebagai berikut:

  • a.    Evacuation Procedure

Data data yang diperlukan dalam pengevakuasian korban bencana alam ,

  • b.    Situation Map

Data data yang merupakan letak lokasi koordinat dari suatu tempat bencana alam.

  • c.    Infrastruktur

Data data infrastruktur terdiri dari data organisasi , Inventaris, Pengiriman Supply bantuan

  • d.    Disaster Victim Registry

Data Data yang diperlukan untuk pengidentifikasian korban

  • e.    Aid Management

Gambar 5.Desain Antar Muka Alur Utama

  • b.    Pemetaan

Pada desain kali akan menampilkan peta dari beberapa fitur yang ada yaitu tracking atau pelacakan seperti terlihat pada gambar 6.

  • c.    Pengidentifikasian Korban

Desain antar muka untuk indentifikasi korban dapat dilihat pada gambar 7.

Gambar 7.Desain Antar Muka Identifikasi Korban

d.


Manajemen Projek

Pada Desain Antar Muka Manajemen Projek kali ini, dapat digunakan untuk melihat, mencari, menambah, memperhaburi data data dari projek projek yang di beberapa kebencanaan seperti terlihat pada gambar 8.

Gambar 8.Desain Antar Muka Manajemen Projek

e.


Manajemen Rumah Sakit

Pada Desain Antar Muka Manajemen Rumah Sakit ini, merupakan tempat informasi menyimpan data data informasi rumah sakit beserta asset, sumber daya manusia yang dipunyai didalamnya seperti terlihat pada gambar 9.

Gambar 9.Desain Antar Muka Manajemen Rumah Sakit

f.


Manajemen Transportasi

Desain Antar Muka Manajemen Transportasi ini merupakan tempat informasi menyimpan data data informasi semua bentuk transportasi beserta pelacakan transportasi.Desain antar muka dapat dilihat pada gambar 10.

Gambar 10.Desain Antar Muka Manajemen Transportasi

g.


Manajemen Organisasi

Pada Desain Antar Muka Manajemen Organisasi ini, merupakan tempat informasi menyimpan data data informasi organisasi beserta anggota anggotanya seperti yang terlihat pada gambar 11.

Gambar 11.Desain Antar Muka Manajemen Organisasi

  • h.    Manajemen Asset

Pada Desain Antar Muka Manajemen Asset ini, merupakan tempat informasi menyimpan asset beserta keterangan tambahannya seperti kepemilikan dan sumber aset yang terlihat pada gambar 12.

Gambar 12.Desain Antar Muka Manajemen Asset

  • i.    Manajemen Relawan

Pada Desain Antar Muka Manajemen Relawan ini, merupakan tempat informasi menyimpan data Relawan, berasal dari relawan tersebut organisasi dan lain sebagainya seperti terlihat pada gambar 13.

Gambar 13.Desain Antar Muka Manajemen Relawan

  • j.    Manajemen Staff

Pada Desain Antar Muka Manajemen Staff ini, merupakan tempat informasi menyimpan data Staff,bisa berasal dari relawan atau user dari aplikasi ini seperti terlihat pada gambar 14.

Gambar 14.Desain Antar Muka Manajemen Staff

  • k.    Manajemen User

Pada Desain Antar Muka Manajemen User ini, merupakan tempat informasi menyimpan data Semua User baik dari organisasi atau non organisasi seperti terlihat pada gambar 15.

  • Gambar 15.Desain Antar Muka Manajemen User

  • IV.    Analisa

Berdasarkan hasil pengujian sistem yang telah dilakukan didapatkan beberapa analisaantar muka dalam bentuk perbandingan antara sistem informasi kebencanaan ini dengan Sahanaseperti pada tabel 1.

Antar muka yang telah dibuat, fitur-fitur didalamnya mengakomodasi sistem informasi manajemen kebencaaan yang sudah ada yaitu Sahana, namun fitur-fitur tersebut akan dapat bertambah seiring dengan aplikasi-aplikasi yang nantinya akan di integrasikan dengan sistem informasi kebencanaan yang ada

Tabel.1 Perbandingan Sistem Informasi kebencanaan denganSahana

Fitur

Sistem

si naan

Sahana

Alur

(Situation,Decision,Response)

V

V

Mapping

V

V

Pengidentifikasian Korban

V

V

Manajemen Projek

V

V

Manajemen Rumah Sakit

V

V

Managemen Transportasi

V

V

Managemen Organisasi

V

V

Managemen Asset

V

V

Manajemen Tracking

V

X

Manajemen Relawan

V

V

Manajemen Staff

V

V

Manajemen User

V

V

Survey

V

V

oleh user terhadap tabel master dan tabel transaksi seperti asset, organization, inventaris, hrm (humanresourcemanagement),hms(hospitalmanagementse rvice) dan lain lain. Pencatatan tersebut adalah dengan memberikan kolom relasi dengan tipe constraintforeignkey di tiap tabel tabel tersebut.

  • V.    Kesimpulan

Secara garis besar desain antar muka antara Sahana dan Sistem informasi kebencanaan hampir sama tetapi pada sistem informasi kebencanaan terdapat tambahan beberapa fitur yaitu Manejemen Trackingdengan penggunaan UI Boostrap didalam pembangunannya.

Daftar Pustaka

  • [1]    Sahana Alerting And Messaging Broker (SAMBRO). Sahana Alerting And Messaging Broker (SAMBRO)     Specification.

http://www.scdmc.lk/dokuwiki/doku.php?id=sambro:specs.     Diakses

pada Juni 2013.

  • [2]    Ramindu Deshapriya .    Sahana   Agasti   –   Vesuvius.

http://rdeshapriya.com/sahana-agasti-vesuvius/. Diakses pada Juni 2013.

  • [3]    Sahana Eden. Sahana Eden Manual Book.

  • [4]    Sam de Freyssinet . 2005. Scaling Web Application with HMVC. http://techportal.inviqa.com/2010/02/22/scaling-web-applications-with-hmvc/ . Diakses Juli 2013

  • [5]    Wikipedia. MVC. http://id.wikipedia.org/wiki/MVC. Diakses pada Juli 2013.

  • [6]    Megan Miller, Brian Young, "A content-first approach to designing responsive Drupal layouts using Twitter Bootstrap", Stanford University, BAD Camp 2012.

  • [7]    Windhy Rokhmat Rosmantyo, “Aplikasi Sistem Informasi Geografi (Sig) Berbasis Web Untuk Visualisasi Dampak Bencana Lumpur Di Sidoarjo”, Tugas Akhir, Politeknik Elektronika Negeri Surabaya, 2008.

  • [8]    Mashudi, “Teknik Visualisasi 3 Dimensi Simulasi Kebakaran Hutan Untuk Proses Mitigasi dan Evakuasi”, Tugas Akhir, Politeknik Elektronika Negeri Surabaya, 2010

  • [9]    Model              View              Control              History,

http://c2.com/cgi/wiki?ModelViewControllerHistory. Diakses pada juni 2013.

  • [10]    Bencana Alam di Indonesia 10           Tahun           Terakhir,

http://www.academia.edu/4066595/Bencana_Alam_di_Indonesia_10_Ta hun_Terakhir. Diakses pada juni 2013.

Manajemen Tracking merupakan suatu fitur yang mencatat tentang perubahan perubahan yang dilakukan

264

ISBN: 978-602-7776-72-2 © Universitas Udayana2013