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
