T1__Full text Institutional Repository | Satya Wacana Christian University: Pemanfaatan Google Maps API dan Framework Codeigniter untuk Pemetaan dan Pendataan Tumbuhan Berbasis Web: Studi Kasus Website Kantor Lingkungan Hidup Kota Salatiga T1 Full text
Pemanfaatan Google Maps API dan Framework Codeigniter Untuk
Pemetaan dan Pendataan Tumbuhan Berbasis Web (Studi Kasus :
Website Kantor Lingkungan Hidup Kota Salatiga)
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh gelar Sarjana Komputer
Peneliti:
Prayudha Riantoro (672012138)
Dr. Kristoko Dwi Hartomo, M.Kom.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Januari 2017
1.
Pendahuluan
Kantor Lingkungan Hidup (KLH) Kota Salatiga merupakan lembaga atau dinas
pemerintahan kota Salatiga yang memiliki tugas pokok membantu Walikota dalam melaksanakan
urusan bidang lingkungan hidup. KLH Salatiga mempunyai tugas mendata tumbuhan yang masuk
di kota Salatiga, selain mendata KLH Salatiga menyediakan perizinan Perlindungan dan
Pengelolaan Lingkungan Hidup (PPLH), Upaya Pengelolaan Lingkungan Hidup (UKL), Upaya
Pemantauan Lingkungan Hidup (UPL), Surat Pernyataan Pengelolaan Lingkungan Hidup (SPPL)
dan izin pemakaian taman dan hutan kota.
Saat ini KLH kota Salatiga sudah memiliki sebuah sistem yang secara menyeluruh
membantu proses pendataan. Sistem tersebut menggunakan aplikasi desktop yang dibuat dengan
bahasa pemrogaman C#. Kekurangan dari sistem tersebut adalah terdapat sebuah hasil output yang
belum di manfaatkan sebagai sarana pendataan. Hasil proses output tersebut adalah sebuah file
berbentuk XML(eXtendel Markup Language). File output tersebut dapat di manfaatkan sebagai
sumber pendataan tumbuhan di website KLH Salatiga. Selain hasil output sistem C# yang belum
di manfaatkan KLH Salatiga juga mempunyai masalah dengan sistem penyediaan form perizinan
dan belum adanya pemetaan persebaran dan penempatan tumbuhan dari KLH Salatiga. Saat ini
proses perizinan KLH Salatiga masih menggunakan formulir sebagai sara perizinan. Masyarakat
Salatiga harus datang ke kantor KLH untuk mendapatkan form perizinan. Berdasarkan hasil
wawancara dengan pengurus KLH, jumlah pengunjung yang mengambil form perizinan setiap
minggu mencapai 20 hingga 30 orang. Hal ini menyebabkan proses perizinan menjadi tidak
efisien. Pada proses persebaran dan penempatan data tumbuhan, KLH Salatiga masih
menggunakan sistem milik mereka dan belum di implementasikan ke dalam teknologi pemetaan
map.
Aplikasi ini dibangun dengan menggunakan bahasa pemrograman Hypertext Preprocessor
(PHP) dengan arsitektur Model View Controller (MVC) dan Framework CodeIgnite, sehingga ke
depannya dapat mempermudah programmer dalam proses pengembangan dan pemeliharaan.
Aplikasi ini juga memanfaatkan CSS Framework Bootstrap untuk membuat desain tampilan agar
mendapatkan tampilan yang lebih menarik dan memanfaatkan library Google maps untuk
membuat pemetaan data tumbuhan. Framework CodeIgniter memiliki keunggulan dibanding
framework-framework lainnya seperti, kecepatan, mudah dimodifikasi dan beradaptasi,
dokumentasi lengkap dan jelas, serta learning curve rendah [1].
Tujuan dari penelitian ini adalah merancang dan membangun website yang dapat
memberikan informasi persediaan tumbuhan KLH Salatiga, form perizinan secara online dan
pemetaan data tumbuhan menggunakan Google maps API. Aplikasi yang akan dikembangakan
dalam sistem ini nantinya akan berbentuk aplikasi berbasis web. Perumusan masalah dalam
penelitian meliputi, bagaimana sistem membaca file berbentuk xml dan menampilkannya di
website, bagaimana merancang keamanan website menggunakan session data pada halaman login
dan bagaimana membuat peta persebaran dan penempatan data tumbuhan dari KLH Salatiga di
kota Salatiga dengan Google maps API.
2.
Tinjauan Pustaka
Saat ini terdapat beberapa penelitian terdahulu yang membahas mengenai sistem pendataan
menggunakan XML dan pemetaan menggunakan Google maps. Penelitian yang pertama di bangun
dengan menggunakan bahasa pemrogaman C# dan .Net Framework, penelitian tersebut berjudul
“Layanan Web Berbasis Web XML Menggunakan .NET Framework Pada Aplikasi Pembelian
Toko Buku Online” yang dilakukan oleh Suherman, mahasiswa Universitas Diponegoro (Undip)
kota Semarang pada tahun 2014[2]. Dijelaskan bahwa dengan adanya sistem aplikasi pembelian
buku secara online yang telah diimplementasikan dan terintergrasi web XML mampu melakukan
pengelolaan administrasi pada toko buku online dan mampu melakukan monitoring penjualan
buku secara online, karena didasarkan pada analisis kebutuhan dan pada analisis sistem saat ini .
Pada penelitian kedua yang berjudul ”Pemanfaatan Google Maps Api Untuk Pembangunan
Sistem Informasi Manajemen Bantuan Logistik Pasca Bencana Alam Berbasis Mobile Web (Studi
Kasus : Badan Penanggulangan Bencana Daerah Kota Yogyakarta)” yang dilakukan oleh Fahya
Madia, mahasiswa universitas Ahmad Dahlan kota Yogyakarta pada tahun 2013. Pada penelitian
tersebut membahas proses pendistribusian bantuan logistik ke posko-posko bencana alam dari
pemerintah, instansi dan masyarakat sekitar seringkali kurang merata. Penyebab kurang meratanya
bantuan antara lain terbatasnya informasi lokasi korban dan belum memiliki sistem pendataan
kebutuhan untuk para korban. Penelitian ini menjelaskan bagaimana menyelesaikan masalah
dalam pendistribusian bantuan logistik kepada korban bencana alam dengan memanfaatkan
google maps[3].
Pada dua penelitian sebelumnya implementasi dilakukan menggunakan teknologi yang
berbeda-beda. Perbedaan penelitian ini dengan penelitian sebelumnya yaitu penelitian ini dibangun
menggunakan bahasa pemrogaman PHP dan Framework menggunakan CodeIgniter yang
diimplementasi menggunakan mySQL sebagai database sistemnya, XML sebagai sumber
pendataan tumbuhan dan library Googlemaps API sebagai sistem pembuatan map.
Extensible Markup Language (XML) adalah sebuah markup language yang mempunyai
himpunan aturan untuk pengkodean dokumen dalam format yang dimengerti oleh manusia dan
mesin. Tujuan perancangan dari XML menekankan pada kesederhanaan, keumuman, dan kegunaan
melalui Internet. XML adalah format data tekstual dengan dukungan yang kuat melalui Unicode
untuk bahasa-bahasa di seluruh dunia. Meskipun desain dari XML memfokuskan pada dokumen,
yang digunakan secara luas untuk representasi struktur data yang bebas, sebagai contoh pada web
services. Banyak application programming interfaces (APIs) telah dikembangkan untuk
memproses data XML, dan ada beberapa sistem skema untuk membantu dalam proses
mendefinisikan dari bahasa berbasis XML. Pada tahun 2009, ratusan bahasa berbasis XML telah
dikembangkan, termasuk RSS, Atom, SOAP, dan XHTML. Format berbasis XML telah menjadi
standar bagi banyak office-productivity, termasuk Microsoft Office (Office Open XML),
OpenOffice.org dan LibreOffice (OpenDocument), dan iWork dari Apple. XML juga diperlakukan
sebagai bahasa baku untuk protokol komunikasi, seperti XMPP (eXtensible Messaging and
Presence Protocol)[4].
MySQL merupakan sebuah perangkat lunak atau software sistem manajemen basis data
SQL atau DBMS Multithread dan multi user. MySQl sebenarnya merupakan turunan dari salah satu
konsep utama dalam database untuk pemilihan atau seleksi dan pemasukan data yang
memungkinkan pengoperasian data dikerjakan secara mudah dan otomatis. MySQL diciptakan
oleh Michael "Monty" Widenius pada tahun 1979, seorang programmer komputer asal Swedia
yang mengembangkan sebuah sistem database sederhana yang dinamakan UNIREG yang
menggunakan koneksi low-level ISAM database engine dengan indexing[5].
Framework merupakan kerangka kerja yang memudahkan programmer untuk membuat
sebuah aplikasi sehingga programmer akan lebih mudah melakukan perubahan (customize)
terhadap aplikasinya dan dapat memakainya kembali untuk aplikasi lain yang sejenis. Penggunaan
framework, programmer tidak perlu membuat program dari awal, tetapi sudah diberikan library
fungsi-fungsi yang sudah diorganisasikan untuk dapat membuat suatu program dengan cepat [6].
MVC atau Model-View-Controller adalah konsep pemisahan kode program menjadi tiga
bagian utama. Dengan konsep ini akan menyebabkan halaman yang ditulis oleh programmer lebih
sedikit kode program di bandingkan dengan program tanpa menggunakan konsep MVC. Hal
tersebut didapatkan karena telah dipisahkan antara struktur tampilan, logika dan operasi basis
data[7].
Model-View-Controller (MVC) adalah sebuah konsep yang diperkenalkan oleh penemu
Smalltalk (Trygve Reenskaug) untuk meng-enkapsulasi data bersama dengan pemrosesan (model),
mengisolasi dari proses manipulasi (controller) dan tampilan (view) untuk direpresentasikan pada
sebuah user interface[8]. MVC mengikuti pendekatan yang paling umum dari Layering. Layering
hanyalah sebuah logika yang membagi kode kita ke dalam fungsi di kelas yang berbeda.
Pendekatan ini mudah dikenal dan yang paling banyak diterima. Keuntungan utama dalam
pendekatan ini adalah penggunaan ulang (reusability) kode[9]. Definisi teknis dari arsitektur MVC
dibagi menjadi tiga lapisan yaitu :
A.
Model, digunakan untuk mengelola informasi dan memberitahu pengamat ketika ada
perubahan informasi. Hanya model yang mengandung data dan fungsi yang berhubungan
dengan pemrosesan data. Sebuah model meringkas lebih dari sekedar data dan fungsi yang
beroperasi di dalamnya. Pendekatan model yang digunakan untuk komputer model atau
abstraksi dari beberapa proses dunia nyata. Hal ini tidak hanya menangkap keadaan proses
atau sistem, tetapi bagaimana sistem bekerja. Sebagai contoh, programmer dapat
menentukan model yang menjembatani komputasi back-end dengan front-end GUI
(graphical user interface).
B.
View, bertanggung jawab untuk pemetaan grafis ke sebuah perangkat. View biasanya
memiliki hubungan 1-1 dengan sebuah permukaan layar dan tahu bagaimana untuk
membuatnya. View melekat pada model dan me-render isinya ke permukaan layar. Selain
itu, ketika model berubah, view secara otomatis menggambar ulang bagian layar yang
terkena perubahan untuk menunjukkan perubahan tersebut. Terdapat kemungkinan
beberapa view pada model yang sama dan masing-masing view tersebut dapat merender
isi model untuk permukaan tampilan yang berbeda.
C.
Controller, menerima input dari pengguna dan menginstruksikan model dan view untuk
melakukan aksi berdasarkan masukan tersebut. Sehingga, controller bertanggung jawab
untuk pemetaan aksi pengguna akhir terhadap respon aplikasi. Sebagai contoh, ketika
pengguna mengklik tombol atau memilih item menu, controller bertanggung jawab untuk
menentukan bagaimana aplikasi seharusnya merespon.
Model, view dan controller sangat erat terkait, oleh karena itu, mereka harus merujuk satu
sama lain. Gambar 1. mengilustrasikan hubungan dasar Model-View-Controller.
Gambar 1 Hubungan antara model, view, dan controller [10].
Arsitektur MVC memiliki manfaat yaitu pemisahan antara model dan view memungkinkan
beberapa view menggunakan model yang sama. Akibatnya, komponen model sebuah aplikasi lebih
mudah untuk diterapkan, diuji, dan dipelihara, karena semua akses ke model berjalan melalui
komponen ini .
CodeIgniter adalah aplikasi open source yang berupa framework dengan model MVC
untuk membangun website dinamis dengan PHP. CodeIgniter tergolong framework dengan ukuran
kecil dan cukup mudah untuk dikuasai. CodeIgniter juga datang dengan manual tergolong
lengkap[9].
Google Maps adalah layanan gratis Google yang cukup populer. Google Maps merupakan
suatu peta yang dapat dilihat dengan menggunakan suatu browser. Kita dapat menambahkan fitur
Google Maps API dalam web yang telah kita buat atau pada blog kita yang berbayar maupun gratis.
Dalam pemakaian Google Maps API itu sendiri dibutuhkan koneksi internet yang stabil [11].
3.
Metode Dan perancangan Sistem
Penelitian ini dilakukan beberapa tahapan penelitian yang secara garis besar terbagi ke
dalam lima tahapan, yaitu : 1) Analisis kebutuhan dan pengumpulan data yang diperlukan. 2)
Perancangan Sistem. 3) Perancangan aplikasi/program. 4) Implementasi dan pengujian sistem,
serta analisis hasil pengujian. 5) Penulisan laporan hasil penelitian . Tahapan-tahapan yang
dilakukan dalam penelitian ini dapat dilihat pada Gambar 3.
Gambar 2. Tahapan Penelitian.
Berdasarkan Gambar 2 dapat dijelaskan bahwa tahapan pertama penelitian yaitu analisis
kebutuhan user. Tahapan pertama ini dilakukan dilakukan wawancara kepada pengurus KLH
Salatiga untuk mendapatkan kebutuhan sistem yang akan dibuat. Berdasarkan hasil wawancara
didapatkan informasi jika selama ini proses pencatatan data, perizinan dan penempatan atau
persebaran data tumbuhan di KLH Salatiga menggunakan sistem aplikasi desktop milik mereka
tetapi beberapa fitur sistem belum diimplementasikan di website KLH Salatiga.
Pada tahapan kedua dilakukan perancangan sistem. Pada tahapan ini perancangan sistem
dilakukan, meliputi perancangan proses, perancangan database dan perancangan keamanan
website menggunakan session data. Perancangan proses dalam sistem menggunakan perangkat
lunak pendukung StarUML untuk membangun diagram Unified Modelling Diagram (UML)
meliputi Use Case Diagram(di buat menggunakan software UMLet), Class Diagram, dan Activity
Diagram yang bertujuan menggambarkan secara jelas alur yang ada pada sistem yang akan
dibangun. Perancangan database berisi rancangan dari struktur tabel yang akan digunakan dalam
pembuatan sistem inventarisasi. Perangkat lunak pendukung, MySQL digunakan untuk
mempermudah pembuatan database.
Tahapan ketiga adalah tahapan perancangan aplikasi, perancangan aplikasi menggunakan
perangkat lunak Netbeans 8.1, XAMPP Server (Apache, MySQL, PHP) dan web browser (dalam
penelitian ini menggunakan Mozilla Firefox). Tahapan ketiga ini dilakukan pembuatan aplikasi
sesuai dengan kebutuhan user yang didapatkan dari hasil wawancara dengan KLH Salatiga dan
seletah tahapan perancangan sistem selesai dibuat. Setelah tahapan perancangan aplikasi telah
dilakukan, tahap selanjutnya adalah tahapan keempat. Tahap implementasi dan pengujian sistem
aplikasi yang telah dibuat. Tahap ini sistem akan diuji untuk mengetahui apakah sistem tersebut
telah memenuhi kebutuhan user. Dilakukan pula analisis terhadap sistem dan aplikasi berdasarkan
pengujian sistem.
Tahapan yang terakhir, atau tahapan kelima adalah tahapan penulisan hasil penelitian.
Hasil dari tahapan-tahapan sebelumnya akan didokumentasikan dan dituliskan dalam bentuk
jurnal. Tahapan ini diambil kesimpulan untuk mengetahui apakah program yang telah dibangun
sesuai dengan kebutuhan KLH Salatiga.
Perancangan proses pada sistem ini dibangun menggunakan UML dan diagram yang
dibangun yaitu use case diagram, class diagram, dan activity diagram. Use case diagram dibuat
berdasarkan hubungan aktivitas yang dilakukan oleh tiap user dan admin.
Gambar 3. Use Case Diagram Sistem.
Use Case Diagram sistem inventarisasi tumbuhan dibuat menggunakan software UMLet.
Dari gambar 3 dapat dijelaskan bahwa aplikasi ini user dapat melihat data persediaan tumbuhan,
download form perizinan dan pemetaan tumbuhan KLH Salatiga. Kemudian pada use case
diagram ini admin KLH Salatiga dapat mengelola data persediaan tumbuhan, formulir perizinan
dan pemetaan data tumbuhan KLH Salatiga. Pada bagian pengelolaan persediaan tumbuhan, admin
KLH salatiga hanya melakukan upload data tumbuhan berbentuk file XML karena untuk proses
delete dan edit di lakukan di program .net C# milik KLH Salatiga.
Gambar 4. Class Diagram Sistem.
Pada gambar 4, class diagram yang menggambarkan model class dan controller class pada
aplikasi. Model class merupakan bagian dari aplikasi yang bertugas untuk mengendalikan fungsifungsi yang berhubungan dengan database. Controller class digunakan untuk menghubungkan
view dengan model class.
Gambar 5. Activity Diagram User.
Gambar 5 merupakan activity diagram untuk proses melihat data persediaan tanaman.
Aktivitas dimulai dengan memilih menu persediaan tanaman pada halaman utama website.
Selanjutnya model atau database akan mengirimkan query select untuk menampilkan data dari file
XML. Gambar 6 juga terdapat activity diagram untuk proses download form perizinan dan
pemetaan tumbuhan. Pertama user memilih menu perizinan kemudian langkah selanjutnya
menekan tombol download, setelah menekan tombol download maka fungsi tombol download
akan mengirimkan query ke database dan menampilkan file yang akan di download. Langkah
terakhir adalah user menekan tombol save. Pada proses melihat data pemetaan tumbuhan, ketika
user menekan button melihat peta pada halaman website maka sistem akan memanggil titik-titik
kordinat google map dan menampilkannya pada halaman website.
Gambar 6. Activity Diagram Session Data.
Pada gambar 6 merupakan activity diagram untuk proses keamanan data pada halaman
login. Aktivitas dimulai dengan admin melakukan login kemudian basis data akan mengecek
username dan password, jika ada maka proses selanjutnya membuat session dan jika tidak ada
maka sistem akan mengembalikan ke halaman admin karena tidak ada username, password dan
session yang tersedia. Setelah melakukan aktivitas di admin panel selanjutnya admin melakukan
logout dan proses session destroy dilakukan.
Gambar 7. Activity Diagram Session Data.
Pada gambar 7 merupakan activity diagram untuk proses keamanan data pada sisi admin
panel. Aktivitas dimulai dengan admin mengetikan url langsung menuju ke index halaman admin
selanjutnya session data melakukan pengecekan. Session data melakukan direct ke halaman login
karena tidak terdapat session.
4.
Hasil dan Pembahasan
Penelitian yang berjudul model informasi data dan pemetaan tumbuhan menggunakan
framework codeigniter dan google maps api (studi kasus : website kantor lingkungan hidup kota
Salatiga) dapat dijelaskan sebagai berikut.
Gambar 8. Halaman Perizinan SPPL.
Gambar 8 merupakan halaman admin upload form perizinan. Pada pembahasan tahap ini
penulis mengambil contoh form perizinan Surat Pernyataan Pengelolaan Lingkungan Hidup
(SPPL) karena fungsi upload perizinan Perlindungan dan Pengelolaan Lingkungan Hidup (PPLH),
Upaya Pengelolaan Lingkungan Hidup (UKL) dan Upaya Pemantauan Lingkungan Hidup (UPL)
relatif sama.
Kode Program 1. Fungsi upload form perizinan SPPL.
1. $config = [
2. 'upload_path' => './assets/perizinan/sppl/',
3. 'allowed_types' => 'pdf|doc',
4. "overwrite" => true
5. ];
6. $this->upload->initialize($config);
7.
if (!$this->upload->do_upload()) {
8.
} else {
9.
$data = [
10.
'deskripsi' => set_value('deskripsi'),
11.
'persyaratan_sppl' => set_value('persyaratan_sppl'),
12.
'file' => 'assets/perizinan/sppl/' . $file['file_name'],
13.
];
14. $this->Main_model->insert_sppl($data);
15. $this->session->set_flashdata('message', 'Berhasil Posting Data SPPL');
16. redirect('A_cont/post_sppl');
Kode program 1 adalah fungsi upload form perizinan SPPL. Pada baris ke 2 adalah fungsi
untuk memasukan file upload ke direktori folder assets, perizinan, sppl. Baris ke 3 adalah fungsi
hanya file bertipe pdf dan doc saja yang hanya boleh di upload selanjutnya baris 12 hingga ke 19
adalah fungsi memasukan hasil input ke dalam database.
Gambar 9. Admin input data perizinan SPPL.
Gambar 9 adalah kondisi ketika admin KLH Salatiga melakukan upload data file perizinan.
Gambar 10. Hasil input dan Direktori file perizinan.
Gambar 10 adalah kondisi ketika sukses melakukan upload dan pada gambar 10 juga
terdapat direktori folder ketika sukses upload file perizinan dan masuk ke folder tersebut.
Gambar 11. Halaman Admin upload file XML.
Gambar 11 merupakan tampilan dari halaman admin upload file XML.
Kode Program 2. Fungsi upload XML.
1. $config = [
2. 'upload_path' => './assets/XML/',
3. 'allowed_types' => 'XML',
Kode Program 2 berfungsi untuk upload file XML. Pada baris kedua sistem melakukan
upload file XML ke direktori folder assets. Pada baris ketiga sistem mengatur hanya file jenis XML
saja yang boleh di upload.
Kode Program 3. Fungsi Merubah Bentuk XML Ke Dalam tabel HTML.
1. $content = file_get_contents('assets/XML/tumbuhan.XML');
2. $x = new SimpleXMLElement($content);
3. foreach ($x->Isi->Row as $entry) {
4. $feeds[] = array(
5. 'NamaTumbuhan' => (string) $entry->NamaTumbuhan,
6. 'NamaIlmiah' => (string) $entry->NamaIlmiah,
7. 'Jumlah' => (string) $entry->Jumlah,
8. 'Dari' => (string) $entry->Dari,
9. 'PenempatanTumbuhan' => (string) $entry->Dari,
10. 'JumlahPenempatan' => (string) $entry->Dari,
11.
12. );
13. $this->load->model('Main_model');
14. $this->Main_model->feeds_sql($feeds);
Kode Program 3 berfungsi untuk.merubah file berbentuk XML ke dalam tabel html. Pada
baris pertama berfungsi mengambil data file tumbuhan XML di folder assets. Pada baris 2 sampai
14 adalah proses merubah XML ke dalam tabel html. Kode program 4 adalah contoh bentuk file
XML.
Kode Program 4. Xml data tumbuhan.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Pohon Jati
Tectona grandis
30
Kab. Malang
Kel.Tegalrejo
15
Kode program 4 merupakan contoh kode XML data tumbuhan. Baris pertama adalah root
element XML bernama tumbuhan. Baris kedua merupakan parent kode XML bernama isi dan baris
ke 3 mendeklarasikan child yaitu nama tumbuhan, nama ilmiah, jumlah, dari, penempatan
tumbuhan dan jumlah penempatan.
Gambar 12. Halaman persediaan tumbuhan.
Gambar 12 merupakan halaman persediaan tumbuhan di halaman website Kantor
Lingkungan Hidup Kota Salatiga.
Kode Program 5. Fungsi Login Admin.
1. //Field validation succeeded. Validate against database
2. $username = $this->input->post('username');
3. //query the database
4. $result = $this->Main_model->login($username, $password);
5. if ($result) {
6. $sess_array = array();
7. foreach ($result as $row) {
8. $sess_array = array(
9. 'id_user' => $row->id_user,
10. 'username' => $row->username
11. );
12. $this->session->set_userdata('logged_in', $sess_array);
13. }
14. false;
15. }
Kode program 5 merupakan fungsi login admin. Baris 1 sampai baris ke 12 adalah proses
mengecek username dan password di database dan pada baris ke 14 adalah fungsi create session
bernama ‘logged_in’.
Kode Program 6. Session di Admin Panel.
1.
2.
3.
4.
5.
6.
7.
8.
if ($this->session->userdata('logged_in')) {
$session_data = $this->session->userdata('logged_in');
$this->load->view('admin/index);
} else {
//If no session, redirect to login page
redirect('login', 'refresh');
}
}
Kode program 6 merupakan session di halaman admin. Baris 1 mengecek apakah terdapat
session bernama ‘Logged_in’. Baris ke 2 menvalidasi jika ada session bernama ‘logged_in’ maka
url akan menuju halaman index dan jika tidak terdapat session maka url akan menuju halaman
login. Proses selanjutnya adalah bagaimana proses pemetaan menggunakan google maps API di
framework CodeIgniter.
Gambar 13. Halaman pemetaan tumbuhan.
Gambar 13 merupakan halaman menu peta jateng, halaman peta memiliki marker dan node
yang ditandai x, ketika user memilih salah satu marker maka berdasarkan data dari sistem akan
menampilkan informasi mengenai nama kelurahan, nama pohon dan jumlah penempatan. Kode
program untuk menampilkan google maps ada pada kode program 7.
Kode Program 7. Fungsi menampilkan google maps.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
$this->load->library('googlemaps');
$config['center'] = '-7.320732, 110.499202';
$config['zoom'] = 'auto';
$this->googlemaps->initialize($config);
$marker = array();
$marker['position'] = '-7.352434, 110.500313';
$marker['infowindow_content'] = 'Kelurahan Tegalrejo, Pohon Jati, Jumlah Penempatan Pohon : 15';
$marker['icon'] = 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=glyphish_pinetree|1db326|000000';
$this->googlemaps->add_marker($marker);
$data['map'] = $this->googlemaps->create_map();
$this->load->view('homepage/pemetaan_tumbuhan', $data);
Kode program 7 merupakan fungsi untuk menampilkan peta dari google maps. Pada baris
pertama merupakan fungsi untuk memanggil library google maps API pada framework
codeigniter, pada baris kedua adalah baris untuk mengatur titik tengah map. Selanjutnya pada baris
kelima hingga ke sembilan belas terdapat marker position, marker info window dan icon yang
berfungsi membuat titik-titik di peta dan menampilkan informasi kelurahan, jenis pohon dan
jumlah tumbuhan. Fungsi create_map adalah fungsi untuk menampilkan map di halaman view
pemetaan tumbuhan di Salatiga yang dicontohkan pada gambar 14. Proses selanjutnya bagaimana
Arsitektur MVC diimplementasikan dalam setiap modul aplikasi dalam sistem ini. Setiap modul
memiliki satu model, satu controller, dan beberapa view. Berikut ini akan dijelaskan implementasi
arsitektur MVC pada sistem.
Kode Program 8. Model.
1. if ($this->session->userdata('logged_in')) {
2. function list_berita() {
3. $this->db->select('*');
4. $this->db->from('tb_berita');
5. $this->db->order_by('id_berita', 'desc');
Model perlu dibuat sebelum mulai memisahkan view untuk mendapatkan informasi yang
akan kita tampilkan. Bagian front-end digunakan untuk user, sedangkan bagian back-end
digunakan untuk administrator. Kode program 8 adalah code di dalam class model MVC
CodeIgniter. Di dalam class model hanya terdapat query-query MySQL. Pada baris ke tiga hingga
ke tujuh adalah coding active record database CodeIgniter yang berfungsi memanggil data berita
dari database dan menampilkannya di halaman website (Gambar 14).
Gambar 14. Halaman berita.
Kode Program 9. Controller.
1.
14.
15.
16.
17.
18.
19.
20.
21.
22.
Kode program 10 adalah kode di dalam class view. Pada baris ke empat mendeklarasikan
variabel hasil menjadi object row selanjutnya object row memanggil judul, waktu, gambar dan isi
berita dari database dan menampilkannya pada baris ke 13, 16, 17 dan 18.
Gambar 15. Hirarki view.
Kesimpulan dari pemanfaatan struktur MVC di framework CodeIgniter yaitu konsep
pemisahan kode program menjadi tiga bagian utama. Dengan konsep ini akan menyebabkan
halaman yang ditulis oleh programmer lebih sedikit kode program di bandingkan dengan program
tanpa menggunakan konsep MVC. Hal tersebut didapatkan karena telah dipisahkan antara struktur
tampilan, logika dan operasi basis data.
Dalam penelitian ini dilakukan dengan uji coba dengan blackbox testing dan user
acceptance testing. Validitas fungsi akan diuji melalui Black Box Testing dan pengujian pengguna
menggunakan user acceptance testing . Keterangan keberhasilan uji coba akan diisikan pada
kolom validitas. Hasil dari pengujian tersebut dapat dilihat pada Tabel 1, Tabel 2 dan Tabel 3.
Kode program 11. Routing.
1. $route['default_controller'] = "M_cont/index";
2. $route['index'] = "M_cont/index";
3. $route["sppl"] = 'M_cont/sppl';
4. $route["persediaan_tanaman"] = 'M_cont/persediaan_tanaman';
5. $route["ukl_upl"] = 'M_cont/ukl_upl';
6. $route["amdal"] = 'M_cont/amdal';
7. $route["tugas_pokok"] = 'M_cont/tugas_pokok';
8. $route["kontak"] = 'M_cont/kontak';
9. $route["perizinan"] = 'M_cont/perizinan';
10. $route["tpsb3"] = 'M_cont/tpsb3';
11. $route["iplc"] = 'M_cont/iplc';
Kode program 11 menjelaskan sistem routing pada codeigniter. Ketika pertama kali
mengakses aplikasi melalui web browser, maka halaman yang pertama di panggil adalah halaman
index.php pada folder aplikasi. Setelah itu index.php melakukan routing ke controller yang telah
di config oleh programmer pada file manajemen_surat/application/config/routes.php. Jadi secara
singkat proses routing framework codeigniter yaitu ketika user mengakses aplikasi pada web
browser, maka sistem akan memanggil controller yang telah di set pada file config routes. Selain
itu controller memanggil file view, jadi halaman yang tampil pada web browser adalah file view
yang di tentukan controller.
Tabel 1 Hasil Pengujian Blackbox
Fungsi yang diuji
Login
Kondisi
Username dan password
benar
Username dan password
salah maupun kosong
Output yang
diharapkan
Sukses login
Output yang
dihasilkan sistem
Sukses login
Gagal login
Gagal login
Status
Pengujian
Sukses
Upload data XML
Click button upload
Sukses upload data
Sukses upload data
XML
Sukses
Download form
perizinan
User klik button download
Sukses download form
perizinan
Browser
memunculkan
dialog download
Sukses
Melihat persediaan
User ke halaman
Sukses tampilkan data
Sukses tampilkan
Sukses
tumbuhan
persediaan tumbuhan
Melihat pemetaan
tumbuhan
User ke halaman pemetaan
tumbuhan
data
Sukses tampilkan peta
Sukses tampilkan peta
Sukses
Pengujian User Acceptance Test yang dilakukan di KLH Salatiga adalah memberikan hak
kepada karyawan KLH untuk langsung memberi penilaian terhadap sistem berupa kuisioner.
Jumlah responden karyawan adalah 5 orang dengan 5 pertanyaan. Kategori penilaian yang
digunakan untuk kuesioner antara lain:
1.
Tidak Setuju (TS)
2.
Setuju (S)
3.
Sangat Setuju (SS)
Pertanyaan kuisioner karyawan adalah sebagai berikut:
Tabel 2 Kuisioner Karyawan
No
TS
Pertanyaan
1
Performa sistem input, output
dan download dapat berjalan
dengan baik.
2
Sistem dapat menampilkan dile
sesuai dengan dile yang di
download
3
Level user dan administrator
dapat berjalan sesuai fungsinya
masing-masing.
4
Sistem pendataan tumbuhan di
sistem sudah benar.
5
Apakah website tersebut dapat
menunjang kinerja Karyawan
KLH Salatiga
S
SS
Tabel 3 Hasil Pengujian User Acceptance Test.
Jawaban karyawan
Pertanyaan
TS
%
S
%
SS
%
1
0
0%
1
200%
1
80%
2
0
0%
3
60%
2
40%
3
0
0%
3
60%
2
40%
4
0
0%
1
20%
4
80%
5
0
0%
2
40%
3
60%
Total
0
0%
20
50%
20
50%
Dari hasil penilaian pengujian user acceptance test dapat diambil kesimpulan yaitu:
1.
Pengguna sistem yang telah memilih Tidak Setuju (TS) mendapat nilai 0%
2.
Pengguna sistem yang telah memilih Setuju (S) mendapat nilai 50 %
3.
Pengguna sistem yang telah memilih Sangat Setuju (SS) mendapat nilai 50%.
Berdasarkan hasil pengujian black box dan user acceptance test diatas Berdasarkan hasil
pengujian black box dan user acceptance test diatas, maka disimpulkan bahwa aplikasi ini berjalan
dengan baik dan sesuai yang diharapkan. Pengujian aplikasi dilakukan dengan cara wawancara
kepada KLH Salatiga. Hasil dari wawancara yang didapatkan menyatakan bahwa sistem yang
dibuat sudah dapat membantu KLH menyediakan form perizinan lebih cepat, menyajikan data
tumbuhan lebih cepat dan menyajikan pemetaan tumbuhan KLH Salatiga di kota Salatiga dengan
valid.
5.
Kesimpulan
Berdasarkan penelitian yang telah dilakukan, diambil kesimpulan bahwa pendataan
tumbuhan menggunakan framework CodeIgniter dan XML telah menjawab kebutuhan KLH
Salatiga. Penggunaan framework CodeIgniter bermanfaat dalam pengembangan sistem dengan
menggukan arsitektur Model View Controller (MVC), karena proses pembuatan sistem menjadi
lebih cepat. Saran website ke depan adalah perlu dikembanganya fitur-fitur website dengan
tampilan yang menyesuaikan, keamanan website perlu dikembangkan dan dalam pengujian
kotanya dapat ditambahkan beberapa daftar kecamatan atau kota lagi, titik kota pada aplikasi dapat
disertakan keterhubungan jarak antar titik yang lebih banyak lagi.
6.
Daftar Pustaka
[1]
Daqiqil, Ibnu. 2011. Framework CodeIgniter Sebuah Panduan dan Best Practice.
Pekanbaru
Suherman. 2014. Layanan Web Berbasis Web XML Menggunakan .NET Framework Pada
Aplikasi Pembelian Toko Buku Online. Semarang: Universitas Diponegoro (Undip).
Mahdia, Faya. 2013. Pemanfaatan Google Maps Api Untuk Pembangunan Sistem
Informasi Manajemen Bantuan Logistik Pasca Bencana Alam Berbasis Mobile Web (Studi
Kasus : Badan Penanggulangan Bencana Daerah Kota Yogyakarta). Yogyakarta:
Universitas Ahmad Dahlan.
Setiawan, Albertus. 2011. Perkembangan XML dan Web Service. Jakarta: Lokomedia.
Hartanto, Agus, 2007. SQL Sebagai Database Web. Surabaya: Pustaka Coding.
Sidik, Betha. 2012. Framework Codeigniter. Bandung: Informatika.
Amri, Khairul. 2009. Framework PHP Dengan Teknik MVC Dan OOP. Yogyakarta:
Lokomedia.
Deacon, John. CI. http://www.jdl.co.uk/briefings/index.html/#mvc. Diakses tanggal 25
Januari 2017.
Satish. MVC. http://www.dotnetspider.com/resources/316Model-View-Controller-MVCarchitecture.aspx. Diakses tanggal 26 Januari 2017.
Gulzar, Nadir. Fast track to struts. http://media.techtarget.com/tss/static/articles/c
ontent/StrutsFastTrack/StrutsFastTrack.pdf. Diakses tanggal 26 Januari 2017.
Shodiq, Amri, 2008, Pemrograman Google Maps API.
[2]
[3]
[4]
[5]
[6]
[7]
[8]
[9]
[10]
[11]
Pemetaan dan Pendataan Tumbuhan Berbasis Web (Studi Kasus :
Website Kantor Lingkungan Hidup Kota Salatiga)
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh gelar Sarjana Komputer
Peneliti:
Prayudha Riantoro (672012138)
Dr. Kristoko Dwi Hartomo, M.Kom.
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Januari 2017
1.
Pendahuluan
Kantor Lingkungan Hidup (KLH) Kota Salatiga merupakan lembaga atau dinas
pemerintahan kota Salatiga yang memiliki tugas pokok membantu Walikota dalam melaksanakan
urusan bidang lingkungan hidup. KLH Salatiga mempunyai tugas mendata tumbuhan yang masuk
di kota Salatiga, selain mendata KLH Salatiga menyediakan perizinan Perlindungan dan
Pengelolaan Lingkungan Hidup (PPLH), Upaya Pengelolaan Lingkungan Hidup (UKL), Upaya
Pemantauan Lingkungan Hidup (UPL), Surat Pernyataan Pengelolaan Lingkungan Hidup (SPPL)
dan izin pemakaian taman dan hutan kota.
Saat ini KLH kota Salatiga sudah memiliki sebuah sistem yang secara menyeluruh
membantu proses pendataan. Sistem tersebut menggunakan aplikasi desktop yang dibuat dengan
bahasa pemrogaman C#. Kekurangan dari sistem tersebut adalah terdapat sebuah hasil output yang
belum di manfaatkan sebagai sarana pendataan. Hasil proses output tersebut adalah sebuah file
berbentuk XML(eXtendel Markup Language). File output tersebut dapat di manfaatkan sebagai
sumber pendataan tumbuhan di website KLH Salatiga. Selain hasil output sistem C# yang belum
di manfaatkan KLH Salatiga juga mempunyai masalah dengan sistem penyediaan form perizinan
dan belum adanya pemetaan persebaran dan penempatan tumbuhan dari KLH Salatiga. Saat ini
proses perizinan KLH Salatiga masih menggunakan formulir sebagai sara perizinan. Masyarakat
Salatiga harus datang ke kantor KLH untuk mendapatkan form perizinan. Berdasarkan hasil
wawancara dengan pengurus KLH, jumlah pengunjung yang mengambil form perizinan setiap
minggu mencapai 20 hingga 30 orang. Hal ini menyebabkan proses perizinan menjadi tidak
efisien. Pada proses persebaran dan penempatan data tumbuhan, KLH Salatiga masih
menggunakan sistem milik mereka dan belum di implementasikan ke dalam teknologi pemetaan
map.
Aplikasi ini dibangun dengan menggunakan bahasa pemrograman Hypertext Preprocessor
(PHP) dengan arsitektur Model View Controller (MVC) dan Framework CodeIgnite, sehingga ke
depannya dapat mempermudah programmer dalam proses pengembangan dan pemeliharaan.
Aplikasi ini juga memanfaatkan CSS Framework Bootstrap untuk membuat desain tampilan agar
mendapatkan tampilan yang lebih menarik dan memanfaatkan library Google maps untuk
membuat pemetaan data tumbuhan. Framework CodeIgniter memiliki keunggulan dibanding
framework-framework lainnya seperti, kecepatan, mudah dimodifikasi dan beradaptasi,
dokumentasi lengkap dan jelas, serta learning curve rendah [1].
Tujuan dari penelitian ini adalah merancang dan membangun website yang dapat
memberikan informasi persediaan tumbuhan KLH Salatiga, form perizinan secara online dan
pemetaan data tumbuhan menggunakan Google maps API. Aplikasi yang akan dikembangakan
dalam sistem ini nantinya akan berbentuk aplikasi berbasis web. Perumusan masalah dalam
penelitian meliputi, bagaimana sistem membaca file berbentuk xml dan menampilkannya di
website, bagaimana merancang keamanan website menggunakan session data pada halaman login
dan bagaimana membuat peta persebaran dan penempatan data tumbuhan dari KLH Salatiga di
kota Salatiga dengan Google maps API.
2.
Tinjauan Pustaka
Saat ini terdapat beberapa penelitian terdahulu yang membahas mengenai sistem pendataan
menggunakan XML dan pemetaan menggunakan Google maps. Penelitian yang pertama di bangun
dengan menggunakan bahasa pemrogaman C# dan .Net Framework, penelitian tersebut berjudul
“Layanan Web Berbasis Web XML Menggunakan .NET Framework Pada Aplikasi Pembelian
Toko Buku Online” yang dilakukan oleh Suherman, mahasiswa Universitas Diponegoro (Undip)
kota Semarang pada tahun 2014[2]. Dijelaskan bahwa dengan adanya sistem aplikasi pembelian
buku secara online yang telah diimplementasikan dan terintergrasi web XML mampu melakukan
pengelolaan administrasi pada toko buku online dan mampu melakukan monitoring penjualan
buku secara online, karena didasarkan pada analisis kebutuhan dan pada analisis sistem saat ini .
Pada penelitian kedua yang berjudul ”Pemanfaatan Google Maps Api Untuk Pembangunan
Sistem Informasi Manajemen Bantuan Logistik Pasca Bencana Alam Berbasis Mobile Web (Studi
Kasus : Badan Penanggulangan Bencana Daerah Kota Yogyakarta)” yang dilakukan oleh Fahya
Madia, mahasiswa universitas Ahmad Dahlan kota Yogyakarta pada tahun 2013. Pada penelitian
tersebut membahas proses pendistribusian bantuan logistik ke posko-posko bencana alam dari
pemerintah, instansi dan masyarakat sekitar seringkali kurang merata. Penyebab kurang meratanya
bantuan antara lain terbatasnya informasi lokasi korban dan belum memiliki sistem pendataan
kebutuhan untuk para korban. Penelitian ini menjelaskan bagaimana menyelesaikan masalah
dalam pendistribusian bantuan logistik kepada korban bencana alam dengan memanfaatkan
google maps[3].
Pada dua penelitian sebelumnya implementasi dilakukan menggunakan teknologi yang
berbeda-beda. Perbedaan penelitian ini dengan penelitian sebelumnya yaitu penelitian ini dibangun
menggunakan bahasa pemrogaman PHP dan Framework menggunakan CodeIgniter yang
diimplementasi menggunakan mySQL sebagai database sistemnya, XML sebagai sumber
pendataan tumbuhan dan library Googlemaps API sebagai sistem pembuatan map.
Extensible Markup Language (XML) adalah sebuah markup language yang mempunyai
himpunan aturan untuk pengkodean dokumen dalam format yang dimengerti oleh manusia dan
mesin. Tujuan perancangan dari XML menekankan pada kesederhanaan, keumuman, dan kegunaan
melalui Internet. XML adalah format data tekstual dengan dukungan yang kuat melalui Unicode
untuk bahasa-bahasa di seluruh dunia. Meskipun desain dari XML memfokuskan pada dokumen,
yang digunakan secara luas untuk representasi struktur data yang bebas, sebagai contoh pada web
services. Banyak application programming interfaces (APIs) telah dikembangkan untuk
memproses data XML, dan ada beberapa sistem skema untuk membantu dalam proses
mendefinisikan dari bahasa berbasis XML. Pada tahun 2009, ratusan bahasa berbasis XML telah
dikembangkan, termasuk RSS, Atom, SOAP, dan XHTML. Format berbasis XML telah menjadi
standar bagi banyak office-productivity, termasuk Microsoft Office (Office Open XML),
OpenOffice.org dan LibreOffice (OpenDocument), dan iWork dari Apple. XML juga diperlakukan
sebagai bahasa baku untuk protokol komunikasi, seperti XMPP (eXtensible Messaging and
Presence Protocol)[4].
MySQL merupakan sebuah perangkat lunak atau software sistem manajemen basis data
SQL atau DBMS Multithread dan multi user. MySQl sebenarnya merupakan turunan dari salah satu
konsep utama dalam database untuk pemilihan atau seleksi dan pemasukan data yang
memungkinkan pengoperasian data dikerjakan secara mudah dan otomatis. MySQL diciptakan
oleh Michael "Monty" Widenius pada tahun 1979, seorang programmer komputer asal Swedia
yang mengembangkan sebuah sistem database sederhana yang dinamakan UNIREG yang
menggunakan koneksi low-level ISAM database engine dengan indexing[5].
Framework merupakan kerangka kerja yang memudahkan programmer untuk membuat
sebuah aplikasi sehingga programmer akan lebih mudah melakukan perubahan (customize)
terhadap aplikasinya dan dapat memakainya kembali untuk aplikasi lain yang sejenis. Penggunaan
framework, programmer tidak perlu membuat program dari awal, tetapi sudah diberikan library
fungsi-fungsi yang sudah diorganisasikan untuk dapat membuat suatu program dengan cepat [6].
MVC atau Model-View-Controller adalah konsep pemisahan kode program menjadi tiga
bagian utama. Dengan konsep ini akan menyebabkan halaman yang ditulis oleh programmer lebih
sedikit kode program di bandingkan dengan program tanpa menggunakan konsep MVC. Hal
tersebut didapatkan karena telah dipisahkan antara struktur tampilan, logika dan operasi basis
data[7].
Model-View-Controller (MVC) adalah sebuah konsep yang diperkenalkan oleh penemu
Smalltalk (Trygve Reenskaug) untuk meng-enkapsulasi data bersama dengan pemrosesan (model),
mengisolasi dari proses manipulasi (controller) dan tampilan (view) untuk direpresentasikan pada
sebuah user interface[8]. MVC mengikuti pendekatan yang paling umum dari Layering. Layering
hanyalah sebuah logika yang membagi kode kita ke dalam fungsi di kelas yang berbeda.
Pendekatan ini mudah dikenal dan yang paling banyak diterima. Keuntungan utama dalam
pendekatan ini adalah penggunaan ulang (reusability) kode[9]. Definisi teknis dari arsitektur MVC
dibagi menjadi tiga lapisan yaitu :
A.
Model, digunakan untuk mengelola informasi dan memberitahu pengamat ketika ada
perubahan informasi. Hanya model yang mengandung data dan fungsi yang berhubungan
dengan pemrosesan data. Sebuah model meringkas lebih dari sekedar data dan fungsi yang
beroperasi di dalamnya. Pendekatan model yang digunakan untuk komputer model atau
abstraksi dari beberapa proses dunia nyata. Hal ini tidak hanya menangkap keadaan proses
atau sistem, tetapi bagaimana sistem bekerja. Sebagai contoh, programmer dapat
menentukan model yang menjembatani komputasi back-end dengan front-end GUI
(graphical user interface).
B.
View, bertanggung jawab untuk pemetaan grafis ke sebuah perangkat. View biasanya
memiliki hubungan 1-1 dengan sebuah permukaan layar dan tahu bagaimana untuk
membuatnya. View melekat pada model dan me-render isinya ke permukaan layar. Selain
itu, ketika model berubah, view secara otomatis menggambar ulang bagian layar yang
terkena perubahan untuk menunjukkan perubahan tersebut. Terdapat kemungkinan
beberapa view pada model yang sama dan masing-masing view tersebut dapat merender
isi model untuk permukaan tampilan yang berbeda.
C.
Controller, menerima input dari pengguna dan menginstruksikan model dan view untuk
melakukan aksi berdasarkan masukan tersebut. Sehingga, controller bertanggung jawab
untuk pemetaan aksi pengguna akhir terhadap respon aplikasi. Sebagai contoh, ketika
pengguna mengklik tombol atau memilih item menu, controller bertanggung jawab untuk
menentukan bagaimana aplikasi seharusnya merespon.
Model, view dan controller sangat erat terkait, oleh karena itu, mereka harus merujuk satu
sama lain. Gambar 1. mengilustrasikan hubungan dasar Model-View-Controller.
Gambar 1 Hubungan antara model, view, dan controller [10].
Arsitektur MVC memiliki manfaat yaitu pemisahan antara model dan view memungkinkan
beberapa view menggunakan model yang sama. Akibatnya, komponen model sebuah aplikasi lebih
mudah untuk diterapkan, diuji, dan dipelihara, karena semua akses ke model berjalan melalui
komponen ini .
CodeIgniter adalah aplikasi open source yang berupa framework dengan model MVC
untuk membangun website dinamis dengan PHP. CodeIgniter tergolong framework dengan ukuran
kecil dan cukup mudah untuk dikuasai. CodeIgniter juga datang dengan manual tergolong
lengkap[9].
Google Maps adalah layanan gratis Google yang cukup populer. Google Maps merupakan
suatu peta yang dapat dilihat dengan menggunakan suatu browser. Kita dapat menambahkan fitur
Google Maps API dalam web yang telah kita buat atau pada blog kita yang berbayar maupun gratis.
Dalam pemakaian Google Maps API itu sendiri dibutuhkan koneksi internet yang stabil [11].
3.
Metode Dan perancangan Sistem
Penelitian ini dilakukan beberapa tahapan penelitian yang secara garis besar terbagi ke
dalam lima tahapan, yaitu : 1) Analisis kebutuhan dan pengumpulan data yang diperlukan. 2)
Perancangan Sistem. 3) Perancangan aplikasi/program. 4) Implementasi dan pengujian sistem,
serta analisis hasil pengujian. 5) Penulisan laporan hasil penelitian . Tahapan-tahapan yang
dilakukan dalam penelitian ini dapat dilihat pada Gambar 3.
Gambar 2. Tahapan Penelitian.
Berdasarkan Gambar 2 dapat dijelaskan bahwa tahapan pertama penelitian yaitu analisis
kebutuhan user. Tahapan pertama ini dilakukan dilakukan wawancara kepada pengurus KLH
Salatiga untuk mendapatkan kebutuhan sistem yang akan dibuat. Berdasarkan hasil wawancara
didapatkan informasi jika selama ini proses pencatatan data, perizinan dan penempatan atau
persebaran data tumbuhan di KLH Salatiga menggunakan sistem aplikasi desktop milik mereka
tetapi beberapa fitur sistem belum diimplementasikan di website KLH Salatiga.
Pada tahapan kedua dilakukan perancangan sistem. Pada tahapan ini perancangan sistem
dilakukan, meliputi perancangan proses, perancangan database dan perancangan keamanan
website menggunakan session data. Perancangan proses dalam sistem menggunakan perangkat
lunak pendukung StarUML untuk membangun diagram Unified Modelling Diagram (UML)
meliputi Use Case Diagram(di buat menggunakan software UMLet), Class Diagram, dan Activity
Diagram yang bertujuan menggambarkan secara jelas alur yang ada pada sistem yang akan
dibangun. Perancangan database berisi rancangan dari struktur tabel yang akan digunakan dalam
pembuatan sistem inventarisasi. Perangkat lunak pendukung, MySQL digunakan untuk
mempermudah pembuatan database.
Tahapan ketiga adalah tahapan perancangan aplikasi, perancangan aplikasi menggunakan
perangkat lunak Netbeans 8.1, XAMPP Server (Apache, MySQL, PHP) dan web browser (dalam
penelitian ini menggunakan Mozilla Firefox). Tahapan ketiga ini dilakukan pembuatan aplikasi
sesuai dengan kebutuhan user yang didapatkan dari hasil wawancara dengan KLH Salatiga dan
seletah tahapan perancangan sistem selesai dibuat. Setelah tahapan perancangan aplikasi telah
dilakukan, tahap selanjutnya adalah tahapan keempat. Tahap implementasi dan pengujian sistem
aplikasi yang telah dibuat. Tahap ini sistem akan diuji untuk mengetahui apakah sistem tersebut
telah memenuhi kebutuhan user. Dilakukan pula analisis terhadap sistem dan aplikasi berdasarkan
pengujian sistem.
Tahapan yang terakhir, atau tahapan kelima adalah tahapan penulisan hasil penelitian.
Hasil dari tahapan-tahapan sebelumnya akan didokumentasikan dan dituliskan dalam bentuk
jurnal. Tahapan ini diambil kesimpulan untuk mengetahui apakah program yang telah dibangun
sesuai dengan kebutuhan KLH Salatiga.
Perancangan proses pada sistem ini dibangun menggunakan UML dan diagram yang
dibangun yaitu use case diagram, class diagram, dan activity diagram. Use case diagram dibuat
berdasarkan hubungan aktivitas yang dilakukan oleh tiap user dan admin.
Gambar 3. Use Case Diagram Sistem.
Use Case Diagram sistem inventarisasi tumbuhan dibuat menggunakan software UMLet.
Dari gambar 3 dapat dijelaskan bahwa aplikasi ini user dapat melihat data persediaan tumbuhan,
download form perizinan dan pemetaan tumbuhan KLH Salatiga. Kemudian pada use case
diagram ini admin KLH Salatiga dapat mengelola data persediaan tumbuhan, formulir perizinan
dan pemetaan data tumbuhan KLH Salatiga. Pada bagian pengelolaan persediaan tumbuhan, admin
KLH salatiga hanya melakukan upload data tumbuhan berbentuk file XML karena untuk proses
delete dan edit di lakukan di program .net C# milik KLH Salatiga.
Gambar 4. Class Diagram Sistem.
Pada gambar 4, class diagram yang menggambarkan model class dan controller class pada
aplikasi. Model class merupakan bagian dari aplikasi yang bertugas untuk mengendalikan fungsifungsi yang berhubungan dengan database. Controller class digunakan untuk menghubungkan
view dengan model class.
Gambar 5. Activity Diagram User.
Gambar 5 merupakan activity diagram untuk proses melihat data persediaan tanaman.
Aktivitas dimulai dengan memilih menu persediaan tanaman pada halaman utama website.
Selanjutnya model atau database akan mengirimkan query select untuk menampilkan data dari file
XML. Gambar 6 juga terdapat activity diagram untuk proses download form perizinan dan
pemetaan tumbuhan. Pertama user memilih menu perizinan kemudian langkah selanjutnya
menekan tombol download, setelah menekan tombol download maka fungsi tombol download
akan mengirimkan query ke database dan menampilkan file yang akan di download. Langkah
terakhir adalah user menekan tombol save. Pada proses melihat data pemetaan tumbuhan, ketika
user menekan button melihat peta pada halaman website maka sistem akan memanggil titik-titik
kordinat google map dan menampilkannya pada halaman website.
Gambar 6. Activity Diagram Session Data.
Pada gambar 6 merupakan activity diagram untuk proses keamanan data pada halaman
login. Aktivitas dimulai dengan admin melakukan login kemudian basis data akan mengecek
username dan password, jika ada maka proses selanjutnya membuat session dan jika tidak ada
maka sistem akan mengembalikan ke halaman admin karena tidak ada username, password dan
session yang tersedia. Setelah melakukan aktivitas di admin panel selanjutnya admin melakukan
logout dan proses session destroy dilakukan.
Gambar 7. Activity Diagram Session Data.
Pada gambar 7 merupakan activity diagram untuk proses keamanan data pada sisi admin
panel. Aktivitas dimulai dengan admin mengetikan url langsung menuju ke index halaman admin
selanjutnya session data melakukan pengecekan. Session data melakukan direct ke halaman login
karena tidak terdapat session.
4.
Hasil dan Pembahasan
Penelitian yang berjudul model informasi data dan pemetaan tumbuhan menggunakan
framework codeigniter dan google maps api (studi kasus : website kantor lingkungan hidup kota
Salatiga) dapat dijelaskan sebagai berikut.
Gambar 8. Halaman Perizinan SPPL.
Gambar 8 merupakan halaman admin upload form perizinan. Pada pembahasan tahap ini
penulis mengambil contoh form perizinan Surat Pernyataan Pengelolaan Lingkungan Hidup
(SPPL) karena fungsi upload perizinan Perlindungan dan Pengelolaan Lingkungan Hidup (PPLH),
Upaya Pengelolaan Lingkungan Hidup (UKL) dan Upaya Pemantauan Lingkungan Hidup (UPL)
relatif sama.
Kode Program 1. Fungsi upload form perizinan SPPL.
1. $config = [
2. 'upload_path' => './assets/perizinan/sppl/',
3. 'allowed_types' => 'pdf|doc',
4. "overwrite" => true
5. ];
6. $this->upload->initialize($config);
7.
if (!$this->upload->do_upload()) {
8.
} else {
9.
$data = [
10.
'deskripsi' => set_value('deskripsi'),
11.
'persyaratan_sppl' => set_value('persyaratan_sppl'),
12.
'file' => 'assets/perizinan/sppl/' . $file['file_name'],
13.
];
14. $this->Main_model->insert_sppl($data);
15. $this->session->set_flashdata('message', 'Berhasil Posting Data SPPL');
16. redirect('A_cont/post_sppl');
Kode program 1 adalah fungsi upload form perizinan SPPL. Pada baris ke 2 adalah fungsi
untuk memasukan file upload ke direktori folder assets, perizinan, sppl. Baris ke 3 adalah fungsi
hanya file bertipe pdf dan doc saja yang hanya boleh di upload selanjutnya baris 12 hingga ke 19
adalah fungsi memasukan hasil input ke dalam database.
Gambar 9. Admin input data perizinan SPPL.
Gambar 9 adalah kondisi ketika admin KLH Salatiga melakukan upload data file perizinan.
Gambar 10. Hasil input dan Direktori file perizinan.
Gambar 10 adalah kondisi ketika sukses melakukan upload dan pada gambar 10 juga
terdapat direktori folder ketika sukses upload file perizinan dan masuk ke folder tersebut.
Gambar 11. Halaman Admin upload file XML.
Gambar 11 merupakan tampilan dari halaman admin upload file XML.
Kode Program 2. Fungsi upload XML.
1. $config = [
2. 'upload_path' => './assets/XML/',
3. 'allowed_types' => 'XML',
Kode Program 2 berfungsi untuk upload file XML. Pada baris kedua sistem melakukan
upload file XML ke direktori folder assets. Pada baris ketiga sistem mengatur hanya file jenis XML
saja yang boleh di upload.
Kode Program 3. Fungsi Merubah Bentuk XML Ke Dalam tabel HTML.
1. $content = file_get_contents('assets/XML/tumbuhan.XML');
2. $x = new SimpleXMLElement($content);
3. foreach ($x->Isi->Row as $entry) {
4. $feeds[] = array(
5. 'NamaTumbuhan' => (string) $entry->NamaTumbuhan,
6. 'NamaIlmiah' => (string) $entry->NamaIlmiah,
7. 'Jumlah' => (string) $entry->Jumlah,
8. 'Dari' => (string) $entry->Dari,
9. 'PenempatanTumbuhan' => (string) $entry->Dari,
10. 'JumlahPenempatan' => (string) $entry->Dari,
11.
12. );
13. $this->load->model('Main_model');
14. $this->Main_model->feeds_sql($feeds);
Kode Program 3 berfungsi untuk.merubah file berbentuk XML ke dalam tabel html. Pada
baris pertama berfungsi mengambil data file tumbuhan XML di folder assets. Pada baris 2 sampai
14 adalah proses merubah XML ke dalam tabel html. Kode program 4 adalah contoh bentuk file
XML.
Kode Program 4. Xml data tumbuhan.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
Pohon Jati
Tectona grandis
30
Kab. Malang
Kel.Tegalrejo
15
Kode program 4 merupakan contoh kode XML data tumbuhan. Baris pertama adalah root
element XML bernama tumbuhan. Baris kedua merupakan parent kode XML bernama isi dan baris
ke 3 mendeklarasikan child yaitu nama tumbuhan, nama ilmiah, jumlah, dari, penempatan
tumbuhan dan jumlah penempatan.
Gambar 12. Halaman persediaan tumbuhan.
Gambar 12 merupakan halaman persediaan tumbuhan di halaman website Kantor
Lingkungan Hidup Kota Salatiga.
Kode Program 5. Fungsi Login Admin.
1. //Field validation succeeded. Validate against database
2. $username = $this->input->post('username');
3. //query the database
4. $result = $this->Main_model->login($username, $password);
5. if ($result) {
6. $sess_array = array();
7. foreach ($result as $row) {
8. $sess_array = array(
9. 'id_user' => $row->id_user,
10. 'username' => $row->username
11. );
12. $this->session->set_userdata('logged_in', $sess_array);
13. }
14. false;
15. }
Kode program 5 merupakan fungsi login admin. Baris 1 sampai baris ke 12 adalah proses
mengecek username dan password di database dan pada baris ke 14 adalah fungsi create session
bernama ‘logged_in’.
Kode Program 6. Session di Admin Panel.
1.
2.
3.
4.
5.
6.
7.
8.
if ($this->session->userdata('logged_in')) {
$session_data = $this->session->userdata('logged_in');
$this->load->view('admin/index);
} else {
//If no session, redirect to login page
redirect('login', 'refresh');
}
}
Kode program 6 merupakan session di halaman admin. Baris 1 mengecek apakah terdapat
session bernama ‘Logged_in’. Baris ke 2 menvalidasi jika ada session bernama ‘logged_in’ maka
url akan menuju halaman index dan jika tidak terdapat session maka url akan menuju halaman
login. Proses selanjutnya adalah bagaimana proses pemetaan menggunakan google maps API di
framework CodeIgniter.
Gambar 13. Halaman pemetaan tumbuhan.
Gambar 13 merupakan halaman menu peta jateng, halaman peta memiliki marker dan node
yang ditandai x, ketika user memilih salah satu marker maka berdasarkan data dari sistem akan
menampilkan informasi mengenai nama kelurahan, nama pohon dan jumlah penempatan. Kode
program untuk menampilkan google maps ada pada kode program 7.
Kode Program 7. Fungsi menampilkan google maps.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
$this->load->library('googlemaps');
$config['center'] = '-7.320732, 110.499202';
$config['zoom'] = 'auto';
$this->googlemaps->initialize($config);
$marker = array();
$marker['position'] = '-7.352434, 110.500313';
$marker['infowindow_content'] = 'Kelurahan Tegalrejo, Pohon Jati, Jumlah Penempatan Pohon : 15';
$marker['icon'] = 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=glyphish_pinetree|1db326|000000';
$this->googlemaps->add_marker($marker);
$data['map'] = $this->googlemaps->create_map();
$this->load->view('homepage/pemetaan_tumbuhan', $data);
Kode program 7 merupakan fungsi untuk menampilkan peta dari google maps. Pada baris
pertama merupakan fungsi untuk memanggil library google maps API pada framework
codeigniter, pada baris kedua adalah baris untuk mengatur titik tengah map. Selanjutnya pada baris
kelima hingga ke sembilan belas terdapat marker position, marker info window dan icon yang
berfungsi membuat titik-titik di peta dan menampilkan informasi kelurahan, jenis pohon dan
jumlah tumbuhan. Fungsi create_map adalah fungsi untuk menampilkan map di halaman view
pemetaan tumbuhan di Salatiga yang dicontohkan pada gambar 14. Proses selanjutnya bagaimana
Arsitektur MVC diimplementasikan dalam setiap modul aplikasi dalam sistem ini. Setiap modul
memiliki satu model, satu controller, dan beberapa view. Berikut ini akan dijelaskan implementasi
arsitektur MVC pada sistem.
Kode Program 8. Model.
1. if ($this->session->userdata('logged_in')) {
2. function list_berita() {
3. $this->db->select('*');
4. $this->db->from('tb_berita');
5. $this->db->order_by('id_berita', 'desc');
Model perlu dibuat sebelum mulai memisahkan view untuk mendapatkan informasi yang
akan kita tampilkan. Bagian front-end digunakan untuk user, sedangkan bagian back-end
digunakan untuk administrator. Kode program 8 adalah code di dalam class model MVC
CodeIgniter. Di dalam class model hanya terdapat query-query MySQL. Pada baris ke tiga hingga
ke tujuh adalah coding active record database CodeIgniter yang berfungsi memanggil data berita
dari database dan menampilkannya di halaman website (Gambar 14).
Gambar 14. Halaman berita.
Kode Program 9. Controller.
1.
14.
15.
16.
17.
18.
19.
20.
21.
22.
Kode program 10 adalah kode di dalam class view. Pada baris ke empat mendeklarasikan
variabel hasil menjadi object row selanjutnya object row memanggil judul, waktu, gambar dan isi
berita dari database dan menampilkannya pada baris ke 13, 16, 17 dan 18.
Gambar 15. Hirarki view.
Kesimpulan dari pemanfaatan struktur MVC di framework CodeIgniter yaitu konsep
pemisahan kode program menjadi tiga bagian utama. Dengan konsep ini akan menyebabkan
halaman yang ditulis oleh programmer lebih sedikit kode program di bandingkan dengan program
tanpa menggunakan konsep MVC. Hal tersebut didapatkan karena telah dipisahkan antara struktur
tampilan, logika dan operasi basis data.
Dalam penelitian ini dilakukan dengan uji coba dengan blackbox testing dan user
acceptance testing. Validitas fungsi akan diuji melalui Black Box Testing dan pengujian pengguna
menggunakan user acceptance testing . Keterangan keberhasilan uji coba akan diisikan pada
kolom validitas. Hasil dari pengujian tersebut dapat dilihat pada Tabel 1, Tabel 2 dan Tabel 3.
Kode program 11. Routing.
1. $route['default_controller'] = "M_cont/index";
2. $route['index'] = "M_cont/index";
3. $route["sppl"] = 'M_cont/sppl';
4. $route["persediaan_tanaman"] = 'M_cont/persediaan_tanaman';
5. $route["ukl_upl"] = 'M_cont/ukl_upl';
6. $route["amdal"] = 'M_cont/amdal';
7. $route["tugas_pokok"] = 'M_cont/tugas_pokok';
8. $route["kontak"] = 'M_cont/kontak';
9. $route["perizinan"] = 'M_cont/perizinan';
10. $route["tpsb3"] = 'M_cont/tpsb3';
11. $route["iplc"] = 'M_cont/iplc';
Kode program 11 menjelaskan sistem routing pada codeigniter. Ketika pertama kali
mengakses aplikasi melalui web browser, maka halaman yang pertama di panggil adalah halaman
index.php pada folder aplikasi. Setelah itu index.php melakukan routing ke controller yang telah
di config oleh programmer pada file manajemen_surat/application/config/routes.php. Jadi secara
singkat proses routing framework codeigniter yaitu ketika user mengakses aplikasi pada web
browser, maka sistem akan memanggil controller yang telah di set pada file config routes. Selain
itu controller memanggil file view, jadi halaman yang tampil pada web browser adalah file view
yang di tentukan controller.
Tabel 1 Hasil Pengujian Blackbox
Fungsi yang diuji
Login
Kondisi
Username dan password
benar
Username dan password
salah maupun kosong
Output yang
diharapkan
Sukses login
Output yang
dihasilkan sistem
Sukses login
Gagal login
Gagal login
Status
Pengujian
Sukses
Upload data XML
Click button upload
Sukses upload data
Sukses upload data
XML
Sukses
Download form
perizinan
User klik button download
Sukses download form
perizinan
Browser
memunculkan
dialog download
Sukses
Melihat persediaan
User ke halaman
Sukses tampilkan data
Sukses tampilkan
Sukses
tumbuhan
persediaan tumbuhan
Melihat pemetaan
tumbuhan
User ke halaman pemetaan
tumbuhan
data
Sukses tampilkan peta
Sukses tampilkan peta
Sukses
Pengujian User Acceptance Test yang dilakukan di KLH Salatiga adalah memberikan hak
kepada karyawan KLH untuk langsung memberi penilaian terhadap sistem berupa kuisioner.
Jumlah responden karyawan adalah 5 orang dengan 5 pertanyaan. Kategori penilaian yang
digunakan untuk kuesioner antara lain:
1.
Tidak Setuju (TS)
2.
Setuju (S)
3.
Sangat Setuju (SS)
Pertanyaan kuisioner karyawan adalah sebagai berikut:
Tabel 2 Kuisioner Karyawan
No
TS
Pertanyaan
1
Performa sistem input, output
dan download dapat berjalan
dengan baik.
2
Sistem dapat menampilkan dile
sesuai dengan dile yang di
download
3
Level user dan administrator
dapat berjalan sesuai fungsinya
masing-masing.
4
Sistem pendataan tumbuhan di
sistem sudah benar.
5
Apakah website tersebut dapat
menunjang kinerja Karyawan
KLH Salatiga
S
SS
Tabel 3 Hasil Pengujian User Acceptance Test.
Jawaban karyawan
Pertanyaan
TS
%
S
%
SS
%
1
0
0%
1
200%
1
80%
2
0
0%
3
60%
2
40%
3
0
0%
3
60%
2
40%
4
0
0%
1
20%
4
80%
5
0
0%
2
40%
3
60%
Total
0
0%
20
50%
20
50%
Dari hasil penilaian pengujian user acceptance test dapat diambil kesimpulan yaitu:
1.
Pengguna sistem yang telah memilih Tidak Setuju (TS) mendapat nilai 0%
2.
Pengguna sistem yang telah memilih Setuju (S) mendapat nilai 50 %
3.
Pengguna sistem yang telah memilih Sangat Setuju (SS) mendapat nilai 50%.
Berdasarkan hasil pengujian black box dan user acceptance test diatas Berdasarkan hasil
pengujian black box dan user acceptance test diatas, maka disimpulkan bahwa aplikasi ini berjalan
dengan baik dan sesuai yang diharapkan. Pengujian aplikasi dilakukan dengan cara wawancara
kepada KLH Salatiga. Hasil dari wawancara yang didapatkan menyatakan bahwa sistem yang
dibuat sudah dapat membantu KLH menyediakan form perizinan lebih cepat, menyajikan data
tumbuhan lebih cepat dan menyajikan pemetaan tumbuhan KLH Salatiga di kota Salatiga dengan
valid.
5.
Kesimpulan
Berdasarkan penelitian yang telah dilakukan, diambil kesimpulan bahwa pendataan
tumbuhan menggunakan framework CodeIgniter dan XML telah menjawab kebutuhan KLH
Salatiga. Penggunaan framework CodeIgniter bermanfaat dalam pengembangan sistem dengan
menggukan arsitektur Model View Controller (MVC), karena proses pembuatan sistem menjadi
lebih cepat. Saran website ke depan adalah perlu dikembanganya fitur-fitur website dengan
tampilan yang menyesuaikan, keamanan website perlu dikembangkan dan dalam pengujian
kotanya dapat ditambahkan beberapa daftar kecamatan atau kota lagi, titik kota pada aplikasi dapat
disertakan keterhubungan jarak antar titik yang lebih banyak lagi.
6.
Daftar Pustaka
[1]
Daqiqil, Ibnu. 2011. Framework CodeIgniter Sebuah Panduan dan Best Practice.
Pekanbaru
Suherman. 2014. Layanan Web Berbasis Web XML Menggunakan .NET Framework Pada
Aplikasi Pembelian Toko Buku Online. Semarang: Universitas Diponegoro (Undip).
Mahdia, Faya. 2013. Pemanfaatan Google Maps Api Untuk Pembangunan Sistem
Informasi Manajemen Bantuan Logistik Pasca Bencana Alam Berbasis Mobile Web (Studi
Kasus : Badan Penanggulangan Bencana Daerah Kota Yogyakarta). Yogyakarta:
Universitas Ahmad Dahlan.
Setiawan, Albertus. 2011. Perkembangan XML dan Web Service. Jakarta: Lokomedia.
Hartanto, Agus, 2007. SQL Sebagai Database Web. Surabaya: Pustaka Coding.
Sidik, Betha. 2012. Framework Codeigniter. Bandung: Informatika.
Amri, Khairul. 2009. Framework PHP Dengan Teknik MVC Dan OOP. Yogyakarta:
Lokomedia.
Deacon, John. CI. http://www.jdl.co.uk/briefings/index.html/#mvc. Diakses tanggal 25
Januari 2017.
Satish. MVC. http://www.dotnetspider.com/resources/316Model-View-Controller-MVCarchitecture.aspx. Diakses tanggal 26 Januari 2017.
Gulzar, Nadir. Fast track to struts. http://media.techtarget.com/tss/static/articles/c
ontent/StrutsFastTrack/StrutsFastTrack.pdf. Diakses tanggal 26 Januari 2017.
Shodiq, Amri, 2008, Pemrograman Google Maps API.
[2]
[3]
[4]
[5]
[6]
[7]
[8]
[9]
[10]
[11]