BAB IV IMPLEMENTASI KARYA
4.1 Desain
Desain website tanggap darurat ini menggunakan software gambar 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
Gambar 4.2 Desain Halaman Utama.
a. Layout pada halaman utama dibuat sederhana dan tidak terlalu banyak gambar, itu di fungsikan agar pada 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 informasi. Sedangkan pada peta Indonesia terdapat tombol kecil yang apa bila
STIKOM
mouse/kursor di arahkan tepat pada tombol akan muncul detil berita pada daerah tersebut.
c. Content, Terdapat cuplikan dari berita dan informasi, dan juga prakiraan weather/cuaca.
2. Desain Halaman Info
Gambar 4.3 Desain Halaman Info.
Pada detil halaman info terdapat header dan konten, konten yang ditampilkan pada halaman terletak pada panel kiri, dan pada panel kanan merupakan detil dari komentar disetiap sub-sub info yang ada. Terdapat juga tombol baca selengkapnya untuk membaca informasi lebih detil.
STIKOM
3. Desain Halaman Berita
Gambar 4.4 Desain Halaman Berita.
Halaman berita terdapat header dan konten, konten yang ditampilkan pada halaman terletak pada panel kanan, dan pada panel kiri terdapat informasi tanggal pemuatan berita. Sedangkan untuk komentar berada pada bawah berita di setiap beritanya.
STIKOM
4. Desain Halaman Login
Gambar 4.5 Desain Halaman Login.
Halaman Login difungsikan untuk mengakses halaman administrator, agar dapat memasukan/memperbarui berita/informasi yang ada pada halaman
client. Pada halaman ini diminta memasukkan username dan password.
5. Desain Halaman Administrator
Gambar 4.6 Desain Halaman Administrator.
Halaman administrator merupakan halaman back side, yaitu halaman yang kusus digunakan untuk memberbarui isi halaman front side. Pada halaman ini
STIKOM
terdapat menu di sebelah kiri, dan juga terdapat detil counter informasi, komentar dan korban yang ada pada website.
4.2 Konfigurasi Codeigniter
Codeigniter merupakan aplikasi open source yang berupa framework dengan arsitektur MVC (Model View Controller) untuk membangun website dinamis dengan menggunakan PHP. Pada konfigurasi Codeigniter yang perlu di seting yaitu file autoload.php, config.php, database.php, dan routes.php yang
terletak pada forlder “application/config/”.
1. Autoload
Fungsi autoload pada Codeigniter ini yaitu untuk memanggil fungsi
packages, libraries, helper, config, language, model, secara otomatis pada
saat user/pengguna membuka website. Pada website tanggap darurat ini yang fungsi autoload yang akan digunakan yaitu fungsi helper. Fungsi helper pada Codeignite terdiri dari array, captcha, cookie, date, directory, download,
email, file, form, html, inflector, language, number, path, security, smile,
string, text, typography, url, dan xml. Dari fungsi helper ini akan digunakan
sebagian dalam pembuatan website tanggap darurat, yaitu fungsi url, html,
form, file, cookie, security, date, text. Penulisan scrip untuk autoload sebagai
berikut:
$autoload['helper'] = array('url', 'html', 'form', 'file', 'cookie', 'security', 'date', 'text');
STIKOM
2. Config
Fungsi config pada Codeigniter digunakan untuk mengkonfigurasi base_url,
index_page, uri_protocol, url_surffix, language, charset, enable_hooks,
subclass_perffix, permitted_url_chars, dan yang di seting yaitu base_url, dan
index_page. Penulisan script pada config seperti dibawah ini:
$config['base_url'] = “http://localhost/td/”;
$config['index_page'] = “”;
Pada base_url berisikan alamat URL index yang akan digunakan misal: http://www.tanggapdarurat.com/ atau alamat local yang ada pada komputer yaitu http://localhost/td/
3. Database
Database merupakan sebuah tempat penyimpanan untuk data, pada website ini menggunakan database mysql dan menggunakan engine inodb. Untuk menseting database pada website tanggap darurat ini terletak pada folder
application/config file database.php. Didalam file tersebut ada beberapa
fungsi yang harus di seting, fungsi-fungsi yang harus diseting sebagai berikut: $db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root'; $db['default']['password'] = ''; $db['default']['database'] = 'db_td';
a. Variable hostname digunakan untuk mengatur hostname/server host yang
digunakan.
b. Variable username digunakan untuk menseting username yang dipakai
pada server.
STIKOM
c. Variable password digunakan untuk menseting password, apakah
username yang ada di server membuthkan password apa tidak.
d. Variable database digunakan untuk menseting/menseleksi database yang
akan dipakai. 4. Routes
Routes digunakan untuk megatur rute website, misal pada saat website dibuka
halaman manakah yang akan dibuka pertama kali. Routes di fungsikan untuk memanggil Controller. Pada setingan routes ini yang di atur yaitu pada dunfsi
default_controller.
$route['default_controller'] = "home";
Pada default_controller halaman yang pertama kali dibuka yaitu halaman home.
4.3 Manajemen Model
Model adalah kelas PHP yang dirancang untuk bekerja mengambil dan mengisi (synchronize) informasi dalam database. Struktur/Aturan dalam membuat model sebagai berikut:
class my_model extends CI_Model{ function __construct(){
parent::__construct(); }
}
Script model di atas my_model adalah sebuah kelas, dan pada saat membuat model harus di simpan di dalam folder “application/model”.pada website tanggap darurat memiliki beberapa model yaitu:
STIKOM
1. Model Member digunakan untuk sinkronisasi dengan akun member. 2. Model Berita digunakan untuk sinkronisasi dengan data berita.
3. Model Informasi digunakan untuk sinkronisasi dengan data informasi. 4. Model Album digunakan untuk sinkronisasi dengan album foto. 5. Model Images digunakan untuk sinkronisasi dengan gambar.
6. Model Comment Berita digunakan untuk sinkronisasi data komentar berita. 7. Model Comment Informasi digunakan untuk sinkronissasi dengan data
komentar informasi.
8. Model Korban digunakan untuk sinkronisasi dengan data korban.
Setiap model memiliki fungsi-fungsi tersendiri, fungsi-fungsi tersebut terdiri dari insert, update, delete, dan select.
1. Insert
Fungsi ini digunakan untuk memasukkan data, contoh penulisan script menambah data sebagai berikut:
function add($newData){
$newData['posted'] = unix_to_human(time(),true,'eu');
$this->db->insert($this->table_name, $newData);
} 2. Update
Fungsi ini digunakan untuk mengubah data, contoh penulisan script menambah data sebagai berikut:
function update($id,$newData){
$newData['posted'] = unix_to_human(time(),true,'eu');
$this->db->where($this->table_fields[0], $id);
return $this->db->update($this->table_name, $newData);
STIKOM
} 3. Delete
Fungsi ini digunakan untuk menghapus data, contoh penulisan script menambah data sebagai berikut:
function remove($ids){
return $this->db->delete($this->table_name, array($this- >table_fields[0]=>$ids));
} 4. Select
Fungsi ini digunakan untuk menseleksi data, contoh penulisan script menambah data sebagai berikut:
function get_record($limit=0,$offset=20){ $this->db->limit($offset,$limit); $this->db->order_by('posted','desc'); return $this->db->get($this->table_name); } function get_record_unlimit(){ $this->db->order_by('posted','desc'); return $this->db->get($this->table_name); } function get_where($where,$limit=0,$offset=20){ $this->db->like('id_vic_light_injured',$where,'both'); $this->db->or_like('id_info',$where,'both'); $this->db->or_like('name',$where,'both'); $this->db->or_like('gender',$where,'both'); $this->db->or_like('height',$where,'both'); $this->db->or_like('age',$where,'both');
STIKOM
SURABAYA
$this->db->or_like('character',$where,'both'); $this->db->or_like('posted',$where,'both'); $this->db->order_by('posted','desc'); $this->db->limit($offset,$limit); return $this->db->get($this->table_name); } 4.4 Manajemen View
View adalah sebuah halaman website, atau sebuah fragment, seperti header,
footer, sidebar, content. Bahkan view juga dapat ditanam/diletakkan didalam view
apabila ada kondisi tertentu saat dibutuhkan. View tidak bisa dipanggil/dimuat secara langsung, view harus dipanggil/dimuat oleh controller. Setiap halaman pada website tanggap darurat ini memiliki berbagai macam view salah satu contoh yaitu halaman berita, halaman berita memiliki 5 macam view diantaranya home, show, open berita, insert, dan edit. Kelima macam view tersebut berisikan konten yang berbeda-beda, dari segi desain dan kegunaan.
1. Home
Home pada view hanya berisikan kerangka yang akan memuat view-view yang lain, tampilan layout konten home seperti berikut.
Gambar 4.7 Tampilan Layout Halaman Home Pada Berita.
STIKOM
Pada baris pertama berisikan tulisan berita dan add, tulisan berita difungsikan hanya untuk menginformasikan bahwa yang sedang dibuka adalah halaman berita, dan yang kedua adalah button add, dan kolom ketiga terdapat button
next dan previous, fungsi dari button add yaitu untuk menambahkan konten
berita yang nantinya akan disimpan ke dalam database.
Baris kedua terdapat kolom search dan view per-page, pada kolom search digunakan untuk pencarian data yang ada pada konten berita. Kolom view per-page digunakan untuk membatasi tampilan yang sedang dimuat. Kolom ketiga ada dua button next dan previous, fungsi dari button ini digunakan untuk melihat halaman berikutnya ataupun sebelumnya. Dan pada baris terakhir berisikan data yang sedang dimuat.
2. Show
Show pada view berisikan script-scrip PHP yang berfungsi untuk mengambil/memuat data dari database, tampilan konten show seperti berikut.
Gambar 4.8 Tampilan Layout Pada Halaman Show Pada Berita.
STIKOM
Halaman show lebih difungsikan sebagai tempat penampung data dari database, dimana fungsi-fungsi controller yang nantinya akan menjalankan halaman show, seperti fungsi next/previous page, search, dan view per-page. 3. Open Berita
Halaman Open berita pada view berisikan script-scrip PHP yang berfungsi untuk mengambil/memuat data dari database, hampir sama seperti halaman show namun lebih detil dan juga terdapat fungsi comment untuk memberikan komentar, tampilan halaman layout open berita seperti berikut.
Gambar 4.9 Tampilan Layout Halaman Open Berita. 4. Insert
Halaman Insert pada view berisikan layout-layout yang didalamnya terdapat
fields, dan berfungsi untuk memasukkan data ke dalam database yang
nantinya akan di proses di controller, tampilan halaman layout insert seperti berikut.
STIKOM
Gambar 4.10 Tampilan Layout Halaman Insert. 5. Edit
Halaman Edit pada view berisikan layout-layout yang didalamnya terdapat
fields, dan berfungsi untuk mengubah/mengedit data, dan juga mengambil/memuat data dari database, yang nantinya akan diproses di
controller dan disimpan kembali ke dalam database, tampilan halaman layout
edit seperti berikut.
Gambar 4.11 Tampilan Layout Halaman Edit Pada Berita.
STIKOM
4.5 Manajemen Controller
Controller adalah sebuah kelas yang dipanggil oleh URL (Universal
Resource Loacator) pada saat browser memanggil alamat website. Controller juga
yang menjembatani antara Model dan View, juga resource lain yang dibutuhkan untuk memproses HTTP request dan memproduksi sebuah halaman website. Controller merupakan otak dari program framework codeigniter, karena controller yang mengatur jalannya program di codeigniter. Aturan/struktur penulisan script pada Controller sebagai berikut:
class MY_Controller extends CI_Controller{ function __construct(){
parent::__construct(); }
function index(){
echo "hellow world"; }
}
MY_Controller adalah sebuah kelas, dan pada saat membuat Controller harus disimpan pada folder “application/controller”, function index digunakan pemuatan/pemanggilan fungsi pertama pada saat halaman controller tersebut dipanggil oleh browser. Setiap file yang akan di load oleh browser harus mempunyain controller, pada website ini ada beberapa controller yaitu: admin, home, berita, info, dan login. Berikut penulisan script untuk controller.
STIKOM
1. Admin
Controller admin digunakan untuk mengatur jalannya halaman administrator website tanggap darurat ini. Pada controller admin ini terdiri beberapa fungsi yaitu fungsi index, show, insert, update, delete, dan beberapa fungsi ajax dapat dilihat pada lampiran.
2. Home
Controller home digunakan untuk mengatur jalannya halaman index/halaman utama website tanggap darurat ini. Fungsi-fungsi yang terdapat pada halaman home ini hanya fungsi index, dapat dilahat pada lampiran.
3. Berita
Controller berita digunakan untuk mengatur jalannya halaman berita. Fungsi- fungsi yang terdapat pada halaman berita ini hanya fungsi index, dapat dilihat pada lampiran.
4. Info
Controller info digunakan untuk mengatur jalannya halaman info. Fungsi- fungsi yang terdapat pada halaman info ini hanya fungsi index, dapat dilihat pada lampiran.
5. Login
Controller login digunakan untuk mengatur jalannya halaman login dan
logout. Fungsi-fungsi yang terdapat pada halaman login ini terdiri dari
beberapa fungsi diantaranya fungsi login, logout, penulisan scriptnya dapat dilihat pada lampiran.
STIKOM
4.6 Publikasi
Publikasi berisi implementasi atau hasil akhir desain poster, cover box CD, dan cover cakram CD. Desain poster, cover CD dan cakram CD dapat di lihat pada gambar 4.12-4.14
Gambar 4.12 Poster Website Tanggap Darurat
STIKOM
Gambar 4.13 Cover Box CD Website Tanggap Darurat
Gambar 4.14 Cover Cakram CD Website Tanggap Darurat
STIKOM
BAB V PENUTUP
5.1 Kesimpulan
Setelah melakukan perancangan, analisa, implementasi dan evaluasi, maka dapat ditarik beberapa kesimpulan sebagai berikut:
1. Untuk membuat website tanggap darurat dengan menggunakan teknik
Framework Codeigniter dibagi menjadi tiga bagian yaitu: model untuk
database, view untuk desain website, controller untuk menggabungkan antara
model dan view.
2. Untuk membuat website yang dapat memberikan informasi korban bencana kepada pemerintah penanggulangan bencana harus menyediakan database korban untuk pendataan, kemudian diupload ke website dan dapat dibuka 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 pada server yahoo.
5.2 Saran
Beberapa saran yang bisa dijadikan sebagai pengembangan dalam penelitian yang akan datang yaitu sebagai berikut:
1. Website ini dapat dikembangkan untuk dapat menampung video.
STIKOM
2. Website ini dapat dikembangkan untuk dapat diakses melalui handphone atau
smartphone.
3. Website ini dapat di kembangkan dengan menggunakan APE (Ajax Push
Engine) untuk dapat menggunakan notifikasi secara real time.
4. Website ini dapat di kembangan pada OS (operating system) IOS, Android, dan BB OS.
STIKOM
DAFTAR PUSTAKA
Arief, R. (2009, Februari 17). web dinamis. Diakses pada oktober 4, 2011, dari rudiyantoarief: http://rudyantoarief.com/wp/?tag=web-dinamis.
Barata, A. A. (2003). Dasar-dasar Pelayanan Prima. Jakarta: PT Elex Media Komputindo.
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.
Kobayashi, S. (1999). Colorist: A Practical Handbook for Personal and
Professional Use. Kodansha International.
Kusrianto, A. (2010). Pengantar Tipografi untuk Pemakai CorelDRAW,
Illustrator, InDesign, Photoshop,. Jakarta: PT Elex Media Komputindo.
Lenggosari. (n.d.). Paduan Warna Menarik untuk Rumah. Bogor: Niaga Swadaya. Permana, P. B. (2004). Kiat Praktis Menjadi Desainer Web Professional. Jakarta:
PT Elex Media Komputindo.
Pipiapioh. (2010, Agustus). Pengertian website statis. Diakses pada 10 02, 2011, dari http://piiafiatry.blogspot.com/2010/08/pengertian-website-statis-dan- website.html.
Priambodo, S. A. (2009). Panduan Praktis Menghadapi Bencana. Yogyakarta: Kanisius.
Pusat Pembinaan dan Pengembangan Bahasa, Indonesia. Departemen Pendidikan dan Kebudayaan, Balai Pustaka, PN. (1995). Kamus Besar Bahasa
Indonesia. Departemen Pendidikan dan Kebudayaan.
Sandiago, M. (2009). Feng Shui Prediction: Indonesia Rawan Bencana Tahun
2010-2014. Jakarta: PT Gramedia Pustaka Utama.
Saputro, H. W. (2007, Juli 8). Teknologi. Diakses pada Oktober 4, 2011, dari Balebengong:http://www.balebengong.net/topik/teknologi/2007/07/08/apa -itu-internet.html.
STIKOM
Siena, I. (2009, agustus 04). Diakses pada oktober 2, 2011, dari http://my.opera.com/aviciena/blog/2009/08/14/framework-3.
Soekarnoputri, M. (2010, Oktober 8). Megawati Nilai Penanganan Bencana oleh
Pemerintah Lambat. (irn/ndr, Ed.) Diakses pada Februari 20, 2012, dari
Megawati Nilai Penanganan Bencana oleh Pemerintah Lambat Detik News:http://news.detik.com/comment/2010/10/08/202251/1459521/10/me gawati-nilai-penanganan-bencana-oleh-pemerintah-lambat.
Swasty, W. (2010). A-Z Warna Interior: Rumah Tinggal. Jakarta: PT Niaga Swadaya.
Tutang. (2002). Mendesain Web dan Berinternet Bagi Pemula. Jakarta, Jawa Barat, Indonesia: Datakom Lintas Buana.