PEMBUATAN WEBSITE TANGGAP DARURAT DENGAN

PEMBUATAN WEBSITE TANGGAP DARURAT DENGAN MENGGUNAKAN
TEKNIK FRAMEWORK CODEIGNITER
Muhammad Hanafi1)
1) Program Studi DIV Komputer Multimedia STIKOM Surabaya Email: [email protected]
abstract
Website is a component or set of components consisting of text, images, sound animation that is
more of a media information of interest to visit. Website is a page of information provided via
the Internet that can be accessed around the world for the network connected to the Internet.
Framework is a set of libraries are organized in an architecture designed to deliver speed,
precision, ease and consistency in application of the definition. CodeIgniter is one of the many
existing PHP framework. The purpose of the CodeIgniter framework making it according to the
user manual is to produce a framework that will be used for the development project of making
the website more quickly than the creation of websites by coding by hand, by providing a lot of
libraries that are needed in the creation of websites, with a simple interface and logical
structure to access the required libraries.
Disaster is a natural occurrence, manmade, or a combination of the two that occur suddenly
seingga a terrible negative impact for survival ". Broadly speaking there are three categories of
disasters: natural disasters, social disasters, complex disasters.
Keywordi: Website, Framework Codeigniter, Dissaster
Website merupakan komponen atau
framework PHP yang ada. Tujuan dari
kumpulan komponen yang terdiri dari teks,
pembuatan
gambar, suara animasi sehingga lebih
menurut user manualnya adalah untuk
merupakan media informasi yang menarik
menghasilkan framework yang akan dapat
untuk dikunjungi. Website adalah halaman
digunakan untuk pengembangan proyek
informasi yang disediakan melalui jalur
pembuatan website secara lebih cepat
internet sehingga bisa diakses di seluruh
dibandingkan dengan pembuatan website
dunia selama terkoneksi dengan jaringan
dengan cara koding secara manual, dengan
internet.
menyediakan banyak sekali pustaka yang
Framework adalah sekumpulan library
yang
diorganisasikan
Codeigniter
dalam pembuatan
ini
website,
sebuah
dengan antarmuka yang sederhana dan
rancangan arsitektur untuk memberikan
struktur logika untuk mengakses pustaka
kecepatan,
yang dibutuhkan.
konsistensi
ketepatan,
di
dalam
pada
dibutuhkan
framework
kemudahan
dan
pengembangan
Bencana adalah suatu kejadian alam,
aplikasi dari definisi tersebut. Codeigniter
buatan manusia, atau perpaduan antara
merupakan salah satu dari sekian banyak
keduanya yang terjadi secara tiba-tiba
1
seingga menimbulkan dampak negatif yang
halaman
backend
dasyat bagi kelangsungan hidup. Secara
kontent dari website. Contoh umum
garis besar ada tiga kategori bencana yaitu:
mengenai website dinamis adalah web
bencana alam, bencana sosial, bencana
berita
kompleks.
dalamnya
atau
untuk mengedit
web
portal
yang di
terdapat fasilitas
berita,
polling dan sebagainya.
LANDASAN TEORI
1. Pengertian Website:
2. Pengertian Framework:
Website merupakan komponen atau
Secara
umum,
framework
kumpulan komponen yang terdiri dari teks,
menggunakan struktur MVC (Model, View,
gambar, suara animasi sehingga lebih
Controller).
merupakan media informasi yang menarik
sekumpulan library yang diorganisasikan
untuk dikunjungi. Website adalah halaman
pada sebuah rancangan arsitektur untuk
informasi yang disediakan melalui jalur
memberikan
internet sehingga bisa diakses di seluruh
kemudahan dan konsistensi di dalam
dunia selama terkoneksi dengan jaringan
pengembangan
internet. Secara garis besar, website bisa
tersebut” (Siena, 2009).
“Framework
adalah
kecepatan,
aplikasi
ketepatan,
dari
definisi
digolongkan menjadi dua bagian yaitu:
1.
Model
Model mencakup semua proses yang
1.
Website Statis
Website
Statis
terkait dengan pemanggilan struktur
adalah web
yang
data baik berupa pemanggilan fungsi,
mempunyai halaman tidak berubah.
input processing atau mencetak output
Artinya untuk melakukan perubahan
ke dalam browser.
pada suatu halaman pada website
dilakukan
2.
secara
manual
2.
View
dengan
View mencakup semua proses yang
mengedit source code yang menjadi
terkait layout output. Bisa dibilang
struktur dari website tersebut.
untuk menaruh
Web Dinamis
website atau aplikasi.
Website Dinamis merupakan website
3.
template
interface
Controller
yang secara struktur diperuntukkan
Controller mencakup semua proses
untuk
yang
update
sesering
mungkin.
terkait
dengan
pemanggilan
Website dinamis terdiri dari halaman
database dan kapsulisasi proses-proses
frontend yang bisa diakses oleh user
utama. Jadi semisal di bagian ini ada
pada
file
umumnya,
juga
disediakan
bernama
member.php,
maka
2
semua proses yang terkait dengan
2.
Kompatibel dengan PHP versi 4.
member
akan
3.
Ringan dan Cepat.
dikapsulisasi/dikelompokan dalam file
4.
Terdapat dukungan untuk berbagai
ini.
basis data.
Kelebihan dengan adanya framework
akan
lebih
mempermudah
memahami
5.
Mendukung Active Record Database.
6.
Mendukung form dan validasi data
mekanisme kerja dari sebuah applikasi. Ini
masukan.
tentunya akan sangat membantu proses
7.
Keamanan dan XSS filtering.
pengembangan
8.
Tersedia pengaturan session.
9.
Tersedia class untuk mengirim email.
sistem
yang
dilakukan
secara team.
10. Tersedia
class
untuk
manipulasi
gambar (cropping, resizing, rotate dan
3. Pengertian Codeigniter:
Codeigniter merupakan salah satu
lain-lain).
dari sekian banyak framework PHP yang
11. Tersedia class untuk upload file.
ada. Codeigniter dikembangkan oleh Rick
12. Tersedia
Ellis (http://www.ellislab.com). Tujuan dari
pembuatan
framework
Codeigniter
ini
menurut user manualnya adalah untuk
class
yang
mendukung
transfer via FTP.
13. Mendukung lokalisasi bahasa.
14. Tersedia
class
menghasilkan framework yang akan dapat
pagination
digunakan untuk pengembangan proyek
perhalaman).
untuk
melakukan
(membuat
tampilan
pembuatan website secara lebih cepat
15. Mendukung enkripsi data.
dibandingkan dengan pembuatan website
16. Mendukung benchmarking.
dengan cara koding secara manual, dengan
17. Mendukung caching.
menyediakan banyak sekali pustaka yang
18. Pencatatan error yang terjadi.
dibutuhkan
website,
19. Tersedia
dengan antarmuka yang sederhana dan
calendar.
dalam pembuatan
class
untuk
membuat
struktur logika untuk mengakses pustaka
20. Tersedia class untuk mengetahui user
yang dibutuhkan. Codeigniter membiarkan
agent, misalnya tipe browser dan
kita
sistem
untuk
memfokuskan
diri
pada
pembuatan website dengan meminimalkan
pembuatan kode untuk berbagai tujuan
pembuatan
website.
Fitur-fitur
yang
dimiliki oleh Codeigniter diantaranya:
1.
Sistem
berbasis
Model
operasi
digunakan
untuk
pembuatan
pengunjung.
21. Tersedia
class
template website.
22. Tersedia
View
yang
class
untuk
membuat
trackback.
Controller
3
23. Tersedia pustaka untuk bekerja dengan
XMP-RPC.
meliputi lima unsur sebagai jawaban dari
pertanyaan yang diajukan itu, yaitu:
24. Menghasilkan clean URL.
1.
25. URI routing yang felksibel.
Komunikator
(siapa
yang
mengatakan?)
26. Mendukung hooks, ekstensi class dan
plugin.
2.
Pesan (mengatakan apa?)
3.
Media (melalui saluran/channel/media
27. Memiliki helper yang sangat banyak
jumlahnya.
apa?)
4.
Komunikan (kepada siapa?)
5.
Efek (dengan dampak/efek apa?).
Media
4. Pengertian Komunikasi:
Kata atau istilah komunikasi (dari
komunikasi
merupakan
perantara dalam penyampaian informasi.
bahasa Inggris “communication”), secara
Jenis-jenis
etimologis atau menurut asal katanya
bermacam-macam,
adalah dari bahasa Latin communicatus,
bahasa, tulisan, isyarat, alat peraga atau alat
dan
pada
elektronik. Media komunikasi merupakan
kata communis ini
unsur yang sangat penting dalam proses
memiliki makna “berbagi” atau “menjadi
komunikasi. Dengan menggunakan media
milik bersama” yaitu suatu usaha yang
komunikasi maka aliran informasi, berita
memiliki tujuan untuk kebersamaan atau
atau pesan dapat dikirim atau diterima
kesamaan makna.
dengan mudah dan cepat. Menurut (Barata,
perkataan
ini
kata communis. Dalam
Untuk
komunikasi
bersumber
memahami
tersebut
pengertian
sehingga
dapat
media
komunikasi
antara
lain
ada
berupa
2003) media komunikasi dikelompokkan
menjadi tiga jenis berdasarkan dari alat
dilancarkan secara efektif bahwa para
yang
peminat komunikasi sering kali mengutip
komunikasi audi, media komunikasi visual,
paradigma yang dikemukakan oleh Harold
dan
Lasswell dalam karyanya, The Structure
Website termasuk media komunikasi audio
and
in
visual, karena website merupakan media
Society. Lasswell mengatakan bahwa cara
komunikasi yang dapat memancarkan suara
yang
dan
Function
of
Communication
baik
untuk
untuk
komunikasi
ialah
dengan
menjelaskan
digunakannya,
media
disertai
yaitu:
komunikasi
tulisan
audio
ataupun
media
visual.
gambar,
menjawab
sehingga memungkinkan komunikasi dapat
pertanyaan sebagai berikut: Who Says What
ditangkap melalui saluran pendengaran dan
In Which Channel To Whom With What
pengelihatan.
Effect?,
5. Bencana Alam:
Paradigma
menunjukkan
bahwa
Lasswell
yang
komunikasi
Bencana alam adalah suatu peristiwa
alam yang mengakibatkan dampak besar
4
bagi populasi manusia. Peristiwa alam
alam sehingga menimbulkan dampak
dapat berupa banjir, letusan gunung berapi,
negatif bagi kehidupan (kebakaran,
gempa bumi, tsunami, tanah longsor, badai
epidemic
salju, kekeringan, hujan es, gelombang
ekosistem, polusi lingkungan).
penyakit,
kerusakan
panas, hurikan, badai tropis, taifun, tornado,
kebakaran
liar
dan
wabah
penyakit.
6. Tipografi:
Beberapa bencana alam terjadi tidak secara
alami.
Tipografi adalah suatu ilmu dalam
memilih
Menurut
menata
huruf
dengan
2009)
pengaturan penyebarannya pada ruang-
“Bencana adalah suatu kejadian alam,
ruang yang tersedia, untuk menciptakan
buatan manusia, atau perpaduan antara
kesan tertentu, sehingga dapat menolong
keduanya yang terjadi secara tiba-tiba
pembaca untuk mendapatkan kenyamanan
seingga menimbulkan dampak negatif yang
membaca semaksimal mungkin. Menurut
dasyat bagi kelangsungan hidup”. Secara
(Kusrianto, 2010) “Tipografi adalah seni
garis besar ada tiga kategori bencana
dan teknik dalam merancang maupun
diantaranya:
menata aksara dalam kaitannya untuk
1.
Bencana Alam
menyusun publikasi visual, baik cetak
Bencana alam yaitu bencana yang
maupun non-cetak”. Font adalah nama
disebabkan oleh perubahan kondisi
sebuah jenis huruf. Font memiliki gaya
alamiah alam semesta (angin: topan,
seperti miring, tebal, miring-tebal. Font
badai, putting beliung; tanah: erosi,
juga memiliki dua jenis, yaitu Serif dan
sedimentasi, logsor, ambles, gempa
Sans Serif.
2.
(Priambodo,
dan
bumi; air: banjir, tsunami, kekeringan,
Serif jenis huruf yang memiliki garis-
perembesan air tanah; api: kebakaran,
garis kecilyang berdiri horizontal pada
letusan gunung api).
badan huruf. Garis-garis kecil ini disebut
Bencana Sosial
counterstroke atau Serif Bracketed. Ciri-ciri
Bencana Sosial yaitu bencana yang
utama jenis huruf serif yaitu:
disebabkan oleh ulah manusia sebagai
1.
Kurva poros yang miring ke kiri.
komponen sosial (instabilitas politik,
2.
Lengkungan Serif/counterstroke.
sosial,
3.
Ada kontras antara tebal dan tipis garis
kerusuhan
dan
ekonomi;
masal,
terror
perang:
bom,
kelaparan, pengungsian).
3.
Bencana Kompleks
font.
4.
Ada palang/garis horizontal pada font.
Sans Serif adalah jenis huruf yang
Bencana Kompleks yaitu perpaduan
memiliki garis-garis kecil dan bersifat solid.
antara bencana sosial dan bencana
Jenis huruf sans serif lebih tegas, bersifat
5
fungsional dan lebih modern. Ciri-ciri
Bencana
STP
Website
utama jenis huruf san serif yaitu:
Kompetitor
Literatur
Eksisting
1.
Garis
melengkung
berbentuk
Masalah
Wawancara
SWOT
Perencanaan
Sistem
square/persegi.
Analisa
Audien-Sistem
DATA
2.
Ada perbedaan kontras yang halus.
3.
Bentuk mendekati penekanan kea rah
IDE
Perancangan
Desain
Konsep
garis vertical.
Storyboard
Layout
Pemilihan/Penggunaan jenis huruf
Navigasi
Typografi
Script
Beta Version
& Evaliuasi
Warna
yang akan digunakan pada website tanggap
darurat yaitu jenis huruf sans serif yaitu
Implementasi
Sistem
Format
System Requirement
Media
Century Gothic. Penggunaan font Century
Size
Final Testing
Gothic ini di pilih karena font ini
merupakan font stadard yang digunakan
Mac dan PC menurut (Gavin Ambrose,
Gambar
1
Diagram
Metodologi
Perancangan Menggunakan Sistem SDLC.
2007).
PERANCANGAN KARYA
1. Desain:
METODE PENELITIAN
Metode penelitian yang digunakan
dalam proses pembuatan website tanggap
darurat ini dilakukan berdasarkan SDLC
(System Development Life Cycle). Tahapantahapan yang digunakan dalam SDLC
diantara adalah planning atau perencanaan,
analisa, desain, implementasi (build and
coding),
pengujuan
(testing),
Desain
website
menggunakan
tanggap
darurat
software gambar
ini
raster,
kemudian dipadu dengan CSS (Cascading
Style Sheet) dan finishing menggunakan
HTML dan PHP. Ada beberapa desain yang
pada website tanggap darurat yaitu:
1.
Desain Halaman Utama
dan
pemeliharaan (maintenance).
Gambar 2 Desain Halaman Utama.
a. Layout pada halaman utama dibuat
sederhana dan tidak terlalu banyak
gambar, itu di fungsikan agar pada
6
saat website ini dibuka tidak terlalu
lama.
b. Header terdapat judul website,
menu utama, dan peta Indonesia,
pada menu utama terdapat menu
home/halaman utama, berita, dan
Gambar 4 Desain Halaman Berita.
informasi. Sedangkan pada peta
Halaman berita terdapat header dan
Indonesia terdapat tombol kecil
konten, konten yang ditampilkan pada
yang apa bila mouse/kursor di
halaman terletak pada panel kanan,
arahkan tepat pada tombol akan
dan pada panel kiri terdapat informasi
muncul detil berita pada daerah
tanggal pemuatan berita. Sedangkan
tersebut.
untuk komentar berada pada bawah
c. Content, Terdapat cuplikan dari
berita dan informasi, dan juga
berita di setiap beritanya.
4.
Desain Halaman Login
prakiraan weather/cuaca.
2.
Desain Halaman Info
Gambar 5 Desain Halaman Login.
Halaman Login difungsikan untuk
mengakses
Gambar 3 Desain Halaman Info.
dan konten,
konten
administrator,
agar dapat memasukan/memperbarui
Pada detil halaman info terdapat
header
halaman
berita/informasi
yang
ada
pada
halaman client. Pada halaman ini
ditampilkan pada halaman terletak
diminta memasukkan username dan
pada panel kiri, dan pada panel kanan
merupakan detil dari komentar disetiap
yang
password.
5.
Desain Halaman Administrator
sub-sub info yang ada. Terdapat juga
tombol
baca
selengkapnya
untuk
membaca informasi lebih detil.
3.
Desain Halaman Berita
7
oleh
pemerintah
penanggulangan
bencana secara online.
3.
Untuk membuat informasi prakiraan
cuaca
harus
menentukan
lokasi/koordinat tempat keberadaan
user yang sedang mengakses website,
kemudian data prakiraan cuaca diambil
Gambar 6 Desain Halaman
pada server yahoo.
Administrator.
Halaman
administrator
merupakan
halaman back side, yaitu halaman yang
SARAN
kusus digunakan untuk memberbarui
Beberapa saran yang bisa dijadikan
isi halaman front side. Pada halaman
sebagai pengembangan dalam penelitian
ini terdapat menu di sebelah kiri, dan
yang akan datang yaitu sebagai berikut:
juga terdapat detil counter informasi,
1.
dapat menampung video.
komentar dan korban yang ada pada
2.
website.
Website ini dapat dikembangkan untuk
Website ini dapat dikembangkan untuk
dapat diakses melalui handphone atau
smartphone.
KESIMPULAN
Setelah
melakukan
perancangan,
3.
Website ini dapat di kembangkan
analisa, implementasi dan evaluasi, maka
dengan menggunakan APE (Ajax Push
dapat ditarik beberapa kesimpulan sebagai
Engine) untuk dapat menggunakan
berikut:
notifikasi secara real time.
1.
Untuk
membuat
website
tanggap
4.
Website ini dapat di kembangan pada
darurat dengan menggunakan teknik
OS (operating system) IOS, Android,
Framework
dan BB OS.
Codeigniter
dibagi
menjadi tiga bagian yaitu: model untuk
database, view untuk desain website,
DAFTAR PUSTAKA
controller
Arief, R. (2009, Februari 17). web dinamis.
Retrieved oktober 4, 2011, from
rudiyantoarief:
http://
rudyantoarief.com/wp/?tag=webdinamis.
untuk
menggabungkan
antara model dan view.
2.
Untuk membuat website yang dapat
memberikan informasi korban bencana
kepada pemerintah penanggulangan
bencana harus menyediakan database
Barata, A. A. (2003). Dasar-dasar
Pelayanan Prima. Elex Media
Komputindo.
korban untuk pendataan, kemudian di
upload ke website dan dapat di buka
8
Gavin
Ambrose, P. H. (2007). The
Fundamentals
of
Typography.
Switzerland: AVA Publishing.
Isroi. (2005). Trik Desain Presentasi
dengan Power Point. Jakarta: PT
Elex Media Komputindo.
2012,
from
Megawati
Nilai
Penanganan
Bencana
oleh
Pemerintah
Lambat
Detik
News:http://news.detik.com/commen
t/2010/10/08/202251/1459521/10/me
gawati-nilai-penanganan-bencanaoleh-pemerintah-lambat.
Kobayashi, S. (1999). Colorist: A Practical
Handbook
for
Personal
and
Professional
Use.
Kodansha
International.
Tutang. (2002). Mendesain Web dan
Berinternet Bagi Pemula. Jakarta,
Jawa Barat, Indonesia: Datakom
Lintas Buana.
Kusrianto, A. (2010). Pengantar Tipografi
untuk
Pemakai
CorelDRAW,
Illustrator, InDesign, Photoshop,.
Jakarta: Elex Media Komputindo.
Lenggosari. (n.d.). Paduan Warna Menarik
untuk
Rumah.
Bogor:
Niaga
Swadaya.
Pipiapioh. (2010, Agustus). Pengertian
website statis. Retrieved 10 02, 2011,
from
http://piiafiatry.blogspot.com/2010/0
8/pengertian-website-statis-danwebsite.html.
Priambodo, S. A. (2009). Panduan Praktis
Menghadapi Bencana. Yogyakarta:
Kanisius.
Sandiago, M. (2009). Feng Shui Prediction:
Indonesia Rawan Bencana Tahun
2010-2014. Jakarta: PT Gramedia
Pustaka Utama.
Saputro, H. W. (2007, Juli 8). Teknologi.
Retrieved Oktober 4, 2011, from
Balebengong:http://www.balebengon
g.net/topik/teknologi/2007/07/08/apa
-itu-internet.html.
Siena, I. (2009, agustus 04). Retrieved
oktober
2,
2011,
from
http://my.opera.com/aviciena/blog/20
09/08/14/framework-3.
Soekarnoputri, M. (2010, Oktober 8).
Megawati
Nilai
Penanganan
Bencana oleh Pemerintah Lambat.
(irn/ndr, Ed.) Retrieved Februari 20,
9