Jurnal Maklumatika Vol. 5, No. 1, Juli 2018 ISSN : 2407-5043 ANALISA DAN PERANCANGAN WEBSITE SISTEM INFORMASI GEOGRAFIS BUBURBAYI.ID Achmad Aditya Ashadul Ushud Program Studi Teknik Informatika, Fakultas Teknologi Informasi, Universitas Budi Luhur Jl. Ciledug Raya, Petukangan Utara, Jakarta Selatan, 12260 Email: achmad.aditya@budiluhur.ac.id Abstrak Teknologi Global Positioning System (GPS) saat ini telah banyak memberikan kemudahan kepada penggunanya dalam melakukan banyak hal terkait pemetaan. Di antaranya adalah menggunakan aplikasi penunjuk jalan, yang populer misalnya Waze dan Google Maps. Google Maps sendiri dapat dimanfaatkan untuk banyak hal, selain mencari suatu lokasi, juga untuk melihat-lihat suatu tempat yang sudah disisipkan fotonya, seperti Street View. Salah satu pemanfaatan Goggle Maps adalah untuk Sistem Informasi Geografis. Dengan bertujuan menampilkan outlet penjual bubur bayi yang menjadi mitranya, PT. NJA membangun sebuah website Sistem Informasi Geografis tersebut dengan memanfaatkan Application Programming Interface (API) dari Google Maps yang sifatnya open source. Dalam pembuatan website Sistem Informasi Geografis ini metode yang digunakan adalah model Waterfall yang memiliki empat tahanapan. Diharapkan dengan adanya website buburbayi.id yang menjadi nama domain website tersebut, terjadi peningkatan penjualan para mitra, selain itu juga membantu konsumen, dalam hal ini orang tua yang memiliki bayi atau balita, dapat dengan mudah mengetahui lokasi outlet penjual bubur bayi yang terdekat. Kata kunci : website, GPS, Sistem Informasi Geografis I. PENDAHULUAN 1.1. Latar Belakang Dengan semakin populernya penggunaan gawai di masyarakat, seperti handphone atau tablet, maka aplikasi-aplikasi yang bisa dijalankan dengan menggunakan gawai tersebut juga ikut populer bila dirasa bermanfaat bagi pengguna. Salah satu di antaranya adalah aplikasi yang berbasis pemetaan. Misalnya aplikasi penunjuk jalan seperti Google Maps. Peta buatan Google ini banyak dimanfaatkan oleh banyak aplikasi karena selain canggih, Google juga mengizinkan peta buatannya untuk dipakai dan dimodifikasi secara gratis oleh siapapun. Aplikasi-aplikasi ojek atau taksi online sudah memanfaatkan peta dari Google ini. Salah satu pemanfaatan peta adalah Sistem Informasi Geografis. Melalui teknik layer, SIG ini bisa menempatkan suatu obyek di dalam peta sehingga seperti menempel pada suatu lokasi di dalam peta. Ketika peta diperbesar, diperkecil atau digeser, obyek terebut akan mengikuti lokasi tertentu tempat obyek tersebut diletakkan. Sebelum adanya peta dari Google, pembuatan SIG ini harus mempunyai peta sendiri. Tentu saja membuat peta sendiri akan menemui tantangan yang tidak ringan, dan membutuhkan waktu yang lebih lama. PT. NJA (Nutrisi Juara Asia) adalah perusahaan yang bergerak di bidang distribusi dan kemitraan makanan bayi sampai balita. Saat ini PT. NJA memiliki banyak mitra yang membuka outlet menjual produknya. Di antaranya adalah bubur bayi, nasi tim dan puding khusus bayi sampai balita. Untuk meningkatkan penjualan bagi para mitranya, sekaligus membantu orang tua dalam mencari lokasi outlet bubur bayi terdekat, maka PT. NJA ingin memiliki sebuah sistem yang dapat memfasilitasi kedua tujuan tersebut. Untuk itulah melalui penelitian ini, dirancang Sistem Informasi Geografis dalam sebuah website yang bisa memenuhi kebutuhan yang dimaksud di atas. Website ini akan menampilkan sebuah peta Indonesia yang telah diletakkan obyek-obyek di lokasi tertentu. Obyek-obyek tersebut merupakan representasi dari outlet mitra dari PT. NJA. 25
Achmad Aditya Ashadul Ushud, Analisa dan Perancangan Website 1.2. Perumusan Masalah Adapun perumusan masalah dalam penelitian Analisa dan Perancangan Website Sistem Informasi Geografis BuburBayi.ID sebagai berikut : 1. Bagaimana menampilkan informasi lokasi outlet melalui Sistem Informasi Geografis di dalam sebuah website dengan tampilan yang ringkas dan jelas? 2. Sistem apa yang digunakan untuk membuat website Sistem Informasi Geografis yang baik dan mudah digunakan? 2. METODOLOGI Dalam pembuatan website Sistem Informasi Geografis ini metode yang diggunakan adalah model Waterfall. Metode yang mucul pada tahun 1970 ini memiliki empat tahapan di dalam model waterfall menurut Rosa A.S dan M. Shalahuddin (2011), yaitu. 1. Analisa Kebutuhan Perangkat Lunak Melalui diskusi dan wawancara dengan pengguna, dapat diketahui kebutuhan perangkat lunak. Pengguna yang dibutuhkan data dan informasinya adalah karyawan dan mitra PT. NJA. Setelah itu pengguna dibagi menjadi dua seperti berikut: a. Administrator Administrator adalah pengguna yang mempunyai hak akses penuh ke dalam sistem. Administrator memasukkan data lokasi mitra ke dalam peta, nama dan nomor kontak mitra sebagai informasi pendukung. Selain itu administrator juga dapat memperbaharui dan menghapus data mitra. b. Pengguna umum 2. Desain Pengguna umum adalah pengguna yang membuka website buburbayi.id untuk melihat atau mencari informasi. Pengguna umum tidak mempunyai hak akses untuk mengubah atau menambah data. Rancangan website dibuat terlebih dahulu sesuai dengan spesifikasi analisa yang telah didapat. Setelah itu barulah dibuat rancangan tampilan visual. 3. Implementasi Website Sistem Informasi Geografis ini dibangun dengan menggunakan framework CodeIgniter. Selain itu juga memanfaatkan Application Programming Interface (API) Google Maps sebagai peta yang digunakan. 4. Pengujian Proses pengujian terhadap sistem yang telah dibangun menggunakan Black BoxTesting. Black Box Testing, menurut Roger S. Pressman (2002) berfokus pada persyaratan fungsional dari perangkat lunak. Artinya, teknik Black Box Testing memungkinkan untuk mendapatkan set kondisi masukan yang sepenuhnya akan melaksanakan semua persyaratan fungsional untuk suatu program. Sistem navigasi, login, penambahan, update dan penghapusan program dan fasilitas lainnya termasuk ke dalam bagian yang diuji coba. Pengujian sampai batasan dimana sistem harus berjalan sesuai harapan sehingga bisa mencapai tujuan yang diinginkan. 5. Operasi dan Pemeliharaan (Maintenance) Pada tahap yang terakhir ini website dipublikasikan di internet secara online, dan mulai digunakan. Agar sistem tetap berjalan dengan baik, pemeliharaan rutin dilakukan secara berkala. 2.1. Framework Framework adalah suatu struktur konseptual dasar yang digunakan untuk memecahkan atau menangani suatu masalah kompleks. Istilah ini sering digunakan antara lain dalam bidang 26
Jurnal Maklumatika Vol. 5, No. 1, Juli 2018, hlm. 25 34 perangkat lunak untuk menggambarkan suatu desain sistem perangkat lunak yang dapat digunakan kembali, menurut (Budi, 2015). Kelebihan menggunakan framework: a. Membutuhkan waktu yang lebih singkat dalam membangun sebuah aplikasi web. b. Mempermudah pembangunan sebuah aplikasi web. c. Mempermudah proses pemeliharaan karena sudah ada pola tertentu. d. Tersedia fasilitas-fasilitas yang umum dipakai sehingga tidak perlu membangun dari awal. e. Lebih bebas dalam pengembangan jika dibandingkan CMS. 2.2 PHP PHP Hypertext Prepocessor atau disingkat dengan PHP adalah bahasa pemrograman yang digunakan untuk membuat website. Sifat PHP adalah server side scripting atau berbasis server, artinya untuk menjalankan PHP harus menggunakan web server. PHP dapat diintegrasikan dengan bahasa pemrograman web lain seperti HTML, JavaScript, CSS. Dengan mengunakan PHP suatu website bisa dibuat menjadi powerfull yang dinamis dengan disertai manajemen database-nya menurut Alexander (2013).. 2.3 CodeIgniter CodeIgniter merupakan framework PHP. Untuk membangun sebuah web yang dinamis berbasis PHP, maka CodeIgniter ini adalah pilihan yang tepat. Sifatnya yang open source sehingga mudah dikembangkan sendiri. Selain ringan dan cepat, CodeIgniter dapat mempercepat pengembang untuk membuat sebuah aplikasi web. Menurut Awan (2010) CodeIgniter adalah sebuah framework PHP yang dapat membantu mempercepat developer dalam pengembangan aplikasi web berbasis PHP dibanding jika menulis semua kode program dari awal. Selain itu CodeIgniter juga memiliki dokumentasi yang lengkap disertai dengan contoh implementasi kodenya. CodeIgniter pertama kali dikembangkan pada tahun 2006 oleh Rick Ellis. Alur kerja framework digambarkan dalam diagram di bawah ini: Gambar 1. Alur kerja framework codeigniter 1. Index.php: Index.php adalah file pertama yang akan dibaca oleh program. 2. Routing: Router akan memeriksa HTTP request untuk menentukan hal apa yang harus dilakukan oleh program. 3. Caching: Cache file dapat melewati proses yang sebenarnya harus dilakukan oleh program codeigniter apabila dalam program sudah terdapat cache file, sehingga akan langsung dikirim ke browser. 4. Security: Codeigniter memiliki fasilitas security untuk menyaring data yang dikirim oleh pengguna. 5. Controller: Controller akan membuka file model, core libraries, helper dan semua resources yang dibutuhkan dalam program tersebut. 27
Achmad Aditya Ashadul Ushud, Analisa dan Perancangan Website 6. View: View adalah membaca semua program yang ada dalam cache file dan mengirimkannya ke browser supaya dapat dilihat. View juga kan meng-update file yang sudah ada di cache. 2.4 Application Programming Interface (API) Google Maps API merupakan antarmuka perangkat lunak yang terdiri dari kumpulan instruksi dan menjelaskan bagaimana hubungan interaksi perangkat lunak yang satu dengan perangkat lunak yang lain. Penjelasan tentang API dianalogikan dengan membangun suatu rumah menurut Reddy (2011) seperti gambar di bawah ini. Gambar 2. Analogi tentang API Pemilik rumah cukup memberikan tugas yang perlu dilakukan oleh kontraktor tanpa harus mengetahui bagaimana cara kontraktor menyelesaikan pekerjaan tersebut. Dari analogi tersebut, rumah merupakan aplikasi yang akan dibuat, dan kontraktor merupakan API yang mengerjakan bagian tertentu dari aplikasi tersebut tanpa harus diketahui bagaimana prosedur dalam melakukan pekerjaan tersebut. 2.5 MySQL Menurut Arief (2011) MySQL adalah salah satu jenis database server yang sangat terkenal dan banyak digunakan untuk membangun aplikasi web yang menggunakan database sebagai sumber dan pengolahan datanya. Sifat MySQL yang open source dan gratis menjadikannya aplikasi database yang populer digunakan. 3. HASIL DAN PEMBAHASAN 3.1. Rancangan Flowchart Berikut rancangan flowchart dari website Sistem Informasi Geografis Buburbayi.id. 28
Jurnal Maklumatika Vol. 5, No. 1, Juli 2018, hlm. 25 34 Start Input Lokasi T Terdapat Outlet? Y Tampil Outlet di Peta Stop Gambar 3. Flowchart SIG buburbayi.id Pengunjung website buburbayi.id memasukkan lokasi yang ingin dicari, kemudian bila di lokasi tersebut ditemukan outlet, maka data outlet akan dimunculkan di peta. 3.2. Rancangan Basis Data Berikut rancangan basis data website Sistem Informasi Geografis Buburbayi.id. Tabel 1. Admin Field Tipe Panjang Id_admin Varchar 20 Username Varchar 50 Password Varchar (MD5) 20 Tabel 2. Mitra Field Tipe Panjang Id_mitra Varchar 20 Nama_mitra Varchar 50 Alamat_mitra Text No_telepon Int 13 Tabel 3. Outlet Field Tipe Panjang Id_outlet Varchar 20 Id_mitra Varchar 20 Alamat_Outlet Text Kordinat Varchar 50 29
Achmad Aditya Ashadul Ushud, Analisa dan Perancangan Website 3.3. Rancangan Relasi Antar Tabel Berikut rancangan relasi antar tabel pada Sistem Informasi Geografis buburbayi.id. Tabel Admin Tabel Mitra Tabel Outlet *Id_admin Username password *Id_mitra Nama_mitra Alamat_mitra No_telepon N *Id_outlet Alamat_outlet Kordinat **Id_mitra 1 Gambar 4. Relasi antar tabel 3.4. Analisa Kebutuhan Perangkat Lunak Kebutuhan Pengguna Administrator 1) Melakukan login ke dalam website 2) Menginput data mitra 3) Menginput lokasi mitra pada peta 4) Mengubah data mitra 5) Mengubah lokasi mitra pada peta 6) Menghapus data mitra 3.5. Desain 1. Rancangan Tampilan Awal Tampilan awal pada website ini adalah bagian header yang berisi informasi singkat mengenai web, kotak pencarian untuk mencari data mitra berdasarkan lokasi, peta dengan marker adalah peta Indonesia yang sudah disisipkan marker sebagai penanda lokasi mitra, data mitra merupakan tampilan informasi mitra yang muncul bila dilakukan pencarian. Header Kotak Pencarian Peta dengan Marker Data Mitra 1 Data Mitra 2 Data Mitra 3 Footer Gambar 5. Rancangan tampilan awal 2. Rancangan Tampilan Peta dengan Marker Marker atau penanda yang berbentuk pin pada peta merupakan simbol letak lokasi outlet mitra. Diperlukan kordinat yang tepat untuk memasukkan data lokasi pada peta, sehingga lokasi pada peta akurat merujuk pada lokasi yang sebenarnya. 30
Jurnal Maklumatika Vol. 5, No. 1, Juli 2018, hlm. 25 34 Gambar 6. Rancangan tampilan peta dengan marker 3. Rancangan Tampilan Jendela Informasi Mitra di Peta Ketika salah satu marker di-klik, maka akan muncul jendela kecil yang berisi foto dan data mitra. Jendela ini dapat di-klik dan membuka jendela baru yang berisi informasi yang lebih lengkap dari mitra tersebut. Data Mitra Gambar 7. Rancangan tampilan jendela informasi mitra di peta 3.6. Implementasi Website Sistem Informasi Geografis ini framework Codeigniter PHP dan API Google Maps. Database yang digunakan adalah MySQL. Website ini sudah dipublikasi pada domain www.buburbayi.id. 1. Implementasi Tampilan Awal Ketika pertama kali membuka www.buburbayi.id maka tampilan awal adalah seperti gambar di bawah ini: 31
Achmad Aditya Ashadul Ushud, Analisa dan Perancangan Website Gambar 8. Implementasi tampilan awal Pada tampilan awal ditampilkan peta lokasi yang langsung terbuka sesuai lokasi pengunjung berada, karena sistem akan langsung mendeteksi lokasi pengunjung. Sehingga bisa langsung ditampilkan lokasi outlet terdekat dengan lokasi pengunjung. 2. Implementasi Tampilan Detail Program Ketika sebuah marker dipilih dari tampilan awal, maka akan dimunculkan jendela kecil yang berisi informasi outlet tersebut. Seperti nama outlet yang merupaan pemilik outlet, alamat lengkap dan nomor telepon yang dapat dihubungi. Seperti ditunjukkan pada gambar di bawah ini: Gambar 9. Implementasi tampilan detail program Penelitian ini telah menghasilkan sebuah perangkat lunak berupa website Sistem Informasi Geografis yang bisa diakses di www.buburbayi.id. 3.7. Pengujian Pengujian perangkat lunak ini dilakukan menggunakan data uji dari administrator selaku pengguna khusus. 32
Jurnal Maklumatika Vol. 5, No. 1, Juli 2018, hlm. 25 34 1. Pengujian Login Berikut tabel pengujian login administrator. Username & Password Administrator Tabel 4. Pengujian login administrator Masuk ke halaman Berhasil masuk ke administrator dengan halaman hak akses administrator dengan administrator hak akses administrator Username & Password Tak terdaftar Tabel 5. Pengujian login salah Tidak dapat masuk dan Tidak dapat masuk dan muncul peringatan muncul peringatan kesalahan kesalahan 2. Pengujian Input, Edit dan Delete Data Berikut tabel pengujian input, edit dan delete data oleh administrator. Input data dan detailnya Tabel 6. Pengujian input data Data masuk ke dalam Data ada di database database dan tampil di dan tampil di web halaman web Input lokasi pada peta Tabel 7. Pengujian input lokasi pada peta Data lokasi masuk ke Data lokasi ada di dalam database dan database dan tampil di tampil di peta peta Edit data dan detailnya Tabel 8. Pengujian edit data Data berubah di dalam Data berubah di database dan database dan perubahan tampil di perubahan tampil di halaman web web Edit lokasi pada peta Tabel 9. Pengujian edit lokasi Lokasi berubah di Lokasi berubah di dalam database dan database dan perubahan tampil di perubahan tampil di peta peta 33
Achmad Aditya Ashadul Ushud, Analisa dan Perancangan Website Delete data dan detailnya Tabel 10. Pengujian delete data Data hilang dari dalam Data hilang dari database dan tidak database dan tidak tampil lagi di halaman tampil di web web 4. KESIMPULAN Setelah dilakukan perancangan, pembuatan, pengujian dan analisa maka penelitian ini menyimpulkan beberapan hal terkait dengan rumusan masalah perancangan website sistem informasi geografis buburbayi.id sebagai berikut : 1. Pembuatan website sistem informasi geografis ini dapat memenuhi kebutuhan PT. NJA dalam memetakan lokasi mitranya melalui peta sekaligus mempormosikan melalui website dengan menampilkan informasi secara ringkas dan jelas. Selain itu juga memudahkan pengunjung untuk mencari lokasi penjual bubur bayi yang terdekat. 2. Dengan menggunakan framework CodeIgniter dan API Google Maps sebagai tools, maka pembuatan website sistem informasi geografis ini menjadi lebih mudah dan cepat, sehingga dapat langsung diaplikasikan ke dalam program. DAFTAR PUSTAKA Alexander. 2013. Web Programming Power Pack. Jakarta: Mediacom Arief M. Rudianto. 2011. Pemrograman Web Dinamis Menggunakan PHP dan MySQL. Yogyakarta: ANDI. Awan Pribadi Basuki. 2010. Membangun Web Berbasis PHP dengan Framework. Yogyakarta: Lokomedia. Budi, Raharjo. 2015. Belajar Otodidak Framework CodeIgniter. Bandung: Informatika Bandung. Martin Reddy. 2011. API Design for C++. Elsevier. Pressman, Roger S. 2002 Rekayasa Perangkat Lunak Pendekatan Praktisi. Andi : Yogyakarta Rosa A.S, dan M. Shalahuddin. 2011. Modul Pembelajaran Rekayasa Perangkat Lunak (Terstruktur dan Berorientasi Obyek). Bandung: Modula. 34