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
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 HypertextPreprocessor
(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 FrameworkBootstrap 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, bagaimanamerancang 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
“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 libraryGooglemaps 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
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.
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
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.
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 CaseDiagram 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# milikKLH Salatiga.
Pada gambar 4, class diagram yang menggambarkan model class dan controller class pada aplikasi. Modelclass merupakan bagian dari aplikasi yangbertugas untuk mengendalikan fungsi-fungsi yang berhubungan dengan database. Controller class digunakan untuk menghubungkan
view dengan model class.
Gambar 5. Activity DiagramUser.
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 untukmenampilkan 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
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 datamelakukandirectke halamanlogin
karena tidak terdapatsession.
4. Hasil dan Pembahasan
Penelitian yang berjudul model informasi data dan pemetaan tumbuhan menggunakan
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.
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.
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');
Gambar 9. Admin input data perizinan SPPL.
Gambar 9 adalah kondisi ketika admin KLH Salatiga melakukan upload data file perizinan.
Gambar 10. Hasil input danDirektori 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 = [
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.
Kode Program 3 berfungsi untuk.merubah file berbentuk XML ke dalam tabel html. Pada baris pertama berfungsi mengambil data file tumbuhan XML di folderassets. 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.
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.
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,
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.
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.
Kode program 6 merupakan session di halaman admin. Baris 1 mengecek apakah terdapat
sessionbernama ‘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.
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) {
5. //If no session, redirect to login page
6. redirect('login', 'refresh');
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.
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
1. $this->load->library('googlemaps'); 2. $config['center'] = '-7.320732, 110.499202'; 3. $config['zoom'] = 'auto';
4. $this->googlemaps->initialize($config); 5. $marker = array();
6. $marker['position'] = '-7.352434, 110.500313';
7. $marker['infowindow_content'] = 'Kelurahan Tegalrejo, Pohon Jati, Jumlah Penempatan Pohon : 15';
8. $marker['icon'] = 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=glyphish_pinetree|1db326|000000'; 9. $this->googlemaps->add_marker($marker);
10. $data['map'] = $this->googlemaps->create_map();
arsitektur MVC pada sistem.
Kode Program 8. Model.
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. 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');
1. <?php
2. defined('BASEPATH') or exit('No direct script access allowed');
3. class M_cont extends CI_Controller {
4. }
5. public function index() {
6. $data = array(
7. 'hasil' => $this->Main_model->list_visi_misi(), 8. 'hasil_berita' => $this->Main_model->list_berita(), 9. 'hasil_gambar' => $this->Main_model->list_gambar_admin(),
10. );
Controller bekerja berdasarkan task apa yang telah diminta dan berdasarkan task tersebut maka controller mengambil data dari model dan mengirimkan data dari model tersebut ke view. Jadi tugas controller adalah bekerja berdasarkan inputan user yang kemudian dikenal dengan nama
task, memanggil metode pada model untuk memanipulasi data pada tabel, dan mengirimkan data dari model ke view untuk ditampilkan pada browser. Kode program 9 menunjukkan sebagian script
kode sebuah controller yang akan mengendalikan alur program. Pada baris 6 adalah nama fungsi
controller yaitu index. Di dalam fungsi index terdapat fungsi membuat variabel baru dan memanggil
nama model yaitu pada baris ke delapan hingga ke sepuluh. Setelah membuat variabel baru dan memanggil nama model proses selanjutnya adalah mekakukan pengiriman data ke view.
Proses selanjutnya setelah controller dan model dibuat, yaitu diperlukan beberapa kode yang akan menampilkan informasi tersebut. Sejauh ini, file dengan akhiran. html.php telah berfungsi dengan baik untuk melakukan tugas ini. Melalui penggunaan view, dapat membuka layar tersebut sampai dengan tingkat admin sebagai pilihan. Keseluruhan output dalam file tunggal mulai ditinggalkan, sebagai gantinya dibuat folder secara terpisah untuk masing-masing view.
Folder tersebut akan memuat sub folder untuk beberapa jenis view yang akan ditampilkan, dan masing-masing sub folder tersebut terdapat sub folder, seperti yang ditunjukkan dalam Gambar 15.
Kode Program 10. View.
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.
1. <div class="col-md-8"> 2. <?php
3. $i = 0;
4. foreach ($hasil_berita as $row): {
5. /* Do stuff */
13. <center><p style="height: 200px;width: 320px" class="img-responsive"><?= img($row- >file) ?></p></center>
14. </div>
15. <div class="blog-post-body"> 16. <h3><?= $row->judul ?></h3>
17. <div class="post-meta"><span><?= $row->time ?> </span></div> 18. <p class="text"><?= $row->isi_berita ?></p>
19. <div class="read-more"><?= anchor('Detail/detail_berita/' . $row->id_berita, 'Berita Selengkapnya>>', ['class' => '', 'role' => 'button']) ?></div>
20. </div> 21. </article>
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.
Kode program 11.Routing.
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 fileconfig 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 Kondisi Output yang Output yang Status
diharapkan dihasilkan sistem Pengujian
Login Username dan password Sukses login Sukses login Sukses
benar
Username dan password Gagal login Gagal login
salah maupun kosong
Upload data XML Click button upload Sukses upload data Sukses upload data Sukses
XML
Download form User klik button download Sukses download form Browser Sukses
perizinan perizinan memunculkan
dialog download
Melihat persediaan User ke halaman Sukses tampilkan data Sukses tampilkan Sukses
tumbuhan persediaan tumbuhan data
Melihat pemetaan tumbuhan
User ke halaman pemetaan
tumbuhan 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 Pertanyaan TS S SS
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
Tabel 3 Hasil Pengujian User Acceptance Test.
Pertanyaan
Jawaban karyawan
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%
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
[2] Suherman. 2014. Layanan Web Berbasis Web XML Menggunakan .NETFramework Pada Aplikasi Pembelian Toko Buku Online. Semarang:Universitas Diponegoro (Undip). [3] 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.
[4] Setiawan, Albertus. 2011. Perkembangan XML dan Web Service. Jakarta: Lokomedia. [5] Hartanto, Agus, 2007. SQL Sebagai Database Web. Surabaya: Pustaka Coding. [6] Sidik, Betha. 2012. Framework Codeigniter. Bandung: Informatika.
[7] Amri, Khairul. 2009. Framework PHP Dengan Teknik MVC Dan OOP. Yogyakarta: Lokomedia.
[8] Deacon, John. CI. http://www.jdl.co.uk/briefings/index.html/#mvc. Diakses tanggal 25 Januari 2017.
[9] Satish. MVC. http://www.dotnetspider.com/resources/316Model-View-Controller-MVC- architecture.aspx. Diakses tanggal 26 Januari 2017.
