LAPORAN SKRIPSI HALAMAN SAMPUL PEMANFAATAN GOOGLE MAPS API SEBAGAI MEDIA INFORMASI FASILITAS SPBU DI KOTA JEPARA DAN KUDUS DENGAN TEKNOLOGI NODE.JS Oleh : AHMAD SYAFIQ 201151073 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MURIA KUDUS 2015 i
LAPORAN SKRIPSI HALAMAN JUDUL PEMANFAATAN GOOGLE MAPS API SEBAGAI MEDIA INFORMASI FASILITAS SPBU DI KOTA JEPARA DAN KUDUS DENGAN TEKNOLOGI NODE.JS Oleh : AHMAD SYAFIQ 201151073 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MURIA KUDUS 2015 ii
UNIVERSITAS MURIA KUDUS PENGESAHAN STATUS SKRIPSI JUDUL : PEMANFAATAN GOOGLE MAPS API SEBAGAI MEDIA INFORMASI FASILITAS SPBU DI KOTA JEPARA DAN KUDUS DENGAN TEKNOLOGI NODE.JS SAYA : AHMAD SYAFIQ Mengijinkan Skripsi Teknik Informatika ini disimpan di Perpustakaan Program Studi Teknik Informatika Universitas Muria Kudus dengan syarat-syarat kegunaan sebagai berikut: 1. Skripsi adalah Hak Milik Program Studi Teknik Informatika Universitas Muria Kudus. 2. Perpustakaan Teknik Informatika UMK dibenarkan membuat salinan untuk tujuan referensi saja. 3. Perpustakaan juga dibenarkan membuat salinan Skripsi ini sebagai bahan pertukaran antar Institusi Pendidikan Tinggi. 4. Berikan tanda sesuai dengan kategori Skripsi Sangat rahasia Rahasia Biasa Penulis (Mengandung isi tentang keselamatan / kepentingan Negara Republik Indonesia) (Mengandung isi tentang kerahasiaan dari suatu organisasi / badan tepat penelitian Skripsi) Disahkan Oleh : Pembimbing Utama Alamat Tetap : Ds. Kedungsari 05/05 Gebog Kudus Tanggal : 17 Desember 2015 Tri Listyorini, M.Kom NIDN. 0616088502 Tanggal : 17 Desember 2015 iii
UNIVERSITAS MURIA KUDUS PERNYATAAN PENULIS JUDUL : PEMANFAATAN GOOGLE MAPS API SEBAGAI MEDIA INFORMASI FASILITAS SPBU DI KOTA JEPARA DAN KUDUS DENGAN TEKNOLOGI NODE.JS NAMA : AHMAD SYAFIQ NIM : 2011-51-073 Saya menyatakan dan bertanggung jawab dengan sebenarnya bahwa Skripsi ini adalah hasil karya saya sendiri kecuali cuplikan dan ringakasan yang masing-masing telah saya jelaskan sumbernya. Jika pada waktu selanjutnya ada pihak lain yang mengklaim bahwa Skripsi ini sebagai karyanya, yang disertai dengan bukti-bukti yang cukup, aka saya bersedia untuk dibatalkan gelar sarjana komputer saya beserta segala hak dan kewajiban yang melekat pada gelar tersebut. Kudus, 1 Desember 2015 Ahmad Syafiq Penulis iv
UNIVERSITAS MURIA KUDUS PERSETUJUAN SKRIPSI JUDUL : PEMANFAATAN GOOGLE MAPS API SEBAGAI MEDIA INFORMASI FASILITAS SPBU DI KOTA JEPARA DAN KUDUS DENGAN TEKNOLOGI NODE.JS NAMA : AHMAD SYAFIQ NIM : 2011-51-073 Skripsi ini telah diperiksa dan disetujui : Kudus, 1 Desember 2015 Pembimbing 1 Pembimbing 2 Tri Listyorini, M.Kom NIDN. 0616088502 Ahmad Jazuli, S.Kom, M.Kom NIDN. 0406107004 Mengetahui, Ka. Progdi Teknik Informatika Ahmad Jazuli, M.Kom NIDN. 0406107004 v
UNIVERSITAS MURIA KUDUS PENGESAHAN SKRIPSI JUDUL : PEMANFAATAN GOOGLE MAPS API SEBAGAI MEDIA INFORMASI FASILITAS SPBU DI KOTA JEPARA DAN KUDUS DENGAN TEKNOLOGI NODE.JS NAMA : AHMAD SYAFIQ NIM : 2011-51-073 Skripsi ini telah diujikan dan dipertahankan di hadapan Dewan Penguji pada Sidang Skripsi tanggal 17 Desember 2015. Menurut pandangan kami, Skripsi ini memadai dari segi kualitas untuk tujuan penganugerahan gelar Sarjana Komputer (S.Kom). Kudus, 23 Desember 2015 Ketua Penguji Anggota Penguji 1 Arief Susanto, ST, M.Kom NIDN. 0603047104 Anastasya Latubessy, S.Kom, M.Cs NIDN. 0604048702 Mengetahui Dekan Fakultas Teknik Kaprogdi Teknik Informatika Rochmad Winarso, ST, MT NIS. 0610701000001138 Ahmad Jazuli, M.Kom NIDN.0406107004 vi
ABSTRACT Gas Station in Indonesia, called (SPBU) as official agent the distribution of fuel oil scattered throughout Indonesia and growing rapidly. All of the region especially in Java Island have Gas Station with number of depots and different facilities. The increasing number of motor vehicles, make Gas Station in everywhere is one of important place for human. By using Application Programming Interface (API) on Google Maps, distribution of Gas Stations and all off facilities especially in Jepara and Kudus city can be digitally mapped with 3D view. This system will be build with method development using a prototype system, collaboration with node.js technology and using mongodb for databases which applied on some big companies because it is able to handle bigdata, so suitable to be applied on this system because that is possible to be developed in throughout Indonesia. Besides that, technology 3D on view of Gas Station, expected to help users found a Gas Station and all facilities in that Gas Station. Keyword : gas station, node.js, mongodb, google maps, API, prototype, 3D vii
ABSTRAK Stasiun Pengisian Bahan Bakar Umum (SPBU) sebagai agen resmi pendistribusian Bahan Bakar Minyak (BBM) tersebar di seluruh Indonesia dan semakin berkembang pesat. Hampir setiap pelosok terutama di pulau Jawa terdapat SPBU dengan jumlah tempat pengisian dan fasilitas yang berbeda-beda. Semakin banyaknya kendaraan bermotor, membuat keberadaan SPBU di setiap kota menjadi tempat prioritas yang banyak dicari masyarakat. Dengan memanfaatkan Application Programming Interface (API) yang terdapat pada Google Maps, persebaran SPBU dan fasilitasnya disetiap wilayah khususnya di kota Jepara dan Kudus dapat dipetakan secara digital dengan tampilan 3D. Pemetaan SPBU di kota Jepara dan Kudus ini dibangun dengan menerapkan metode pengembangan sistem prototype, menggunakan teknologi node.js dan dengan menggunakan mongodb sebagai database-nya yang telah dipakai oleh beberapa perusahaan besar karena mampu menangani bigdata sehingga cocok diterapkan pada sistem ini karena dimungkinkan sistem ini dapat dikembangkan dan diterapkan di seluruh Indonesia. Dan ditambah lagi penerapan tampilan 3D pada gambar SPBU diharapkan dapat membantu users untuk menemukan letak serta fasilitas yang dimiliki oleh SPBU tersebut. Kata kunci : SPBU, node.js, mongodb, google maps, API, prototype, 3D viii
KATA PENGANTAR Puji syukur kehadirat Allah SWT karena atas rahmat dan hidayahnya penulis mampu menyelesaikan penyusunan skripsi ini dengan judul Pemanfaatan Google Maps API Sebagai Media Informasi Fasilitas SPBU Di Kota Jepara dan Kudus dengan Teknologi Node.JS. Skripsi ini disusun guna melengkapi salah satu persyaratan untuk memperoleh Gelar Kesarjanaan Progam Studi Teknik Informatika Fakultas Teknik Universitas Muria Kudus. Kiranya dalam penyusunan skripsi ini tidak akan terselesaikan dengan baik tanpa bantuan dari berbagai pihak. Untuk itu pada kesempatan ini penulis mengucapkan terima kasih yang sebesar-besarnya, penghargaan yang setinggitingginya dan permohonan maaf atas segala kesalahan yang pernah penulis lakukan kepada semua pihak yang telah membantu dalam penyelesaian skripsi ini, terutama kepada: 1. Bapak Dr. Suparnyo, SH., MS., selaku Rektor Universitas Muria Kudus. 2. Bapak Rochmad Winarso, ST, MT, selaku Dekan Fakultas Teknik Universitas Muria Kudus. 3. Bapak Ahmad Jazuli, M.Kom, selaku Ketua Program Studi Teknik Informatika Universitas Muria Kudus sekaligus pembimbing Skripsi penulis. 4. Ibu Tri Listyorini, M.Kom, selaku pembimbing Skripsi penulis. 5. Orang tua, yang selalu memberikan semangat serta do a. 6. Semua pihak yang telah membantu penyusunan skripsi ini yang tidak bisa penulis sebutkan satu persatu. Semoga beliau-beliau di atas mendapatkan imbalan yang lebih besar dari Tuhan Yang Maha Kuasa melebihi apa yang beliau-beliau dberikan kepada penulis. Selain itu penulis juga berharap semoga Skripsi ini dapat memberikan manfaat bagi semua. Kudus, Desember 2015 Penulis ix
DAFTAR ISI Halaman HALAMAN SAMPUL... i HALAMAN JUDUL... ii PENGESAHAN STATUS SKRIPSI... iii PERNYATAAN PENULIS... iv PERSETUJUAN SKRIPSI... v PENGESAHAN SKRIPSI... vi ABSTRACT... vii ABSTRAK... viii KATA PENGANTAR... ix DAFTAR ISI... x DAFTAR TABEL... xiii DAFTAR GAMBAR... xiv DAFTAR LAMPIRAN... xvi BAB I PENDAHULUAN... 1 1.1 Latar Belakang... 1 1.2 Rumusan Masalah... 2 1.3 Batasan Masalah... 3 1.4 Tujuan Penelitian... 3 1.5 Manfaat Penelitian... 4 BAB II TINJAUAN PUSTAKA... 5 2.1 Penelitian Terkait... 5 2.2 Landasan Teori... 6 2.2.1 Pengertian Sistem Informasi Geografis... 6 2.2.2 Metode Pengembangan Perangkat Lunak... 10 2.3 Perancangan Sistem... 11 2.3.1 Flowchart... 11 2.3.2 Unified Modeling Language (UML)... 15 2.4 Pengujian Sistem... 22 2.5 Tool yang Digunakan... 23 2.5.1 Google Maps API... 23 x
2.5.2 Node.JS... 24 2.5.3 MongoDB... 25 2.5.4 NoSQL... 27 2.5.5 Sublime Text 3... 27 2.6 KERANGKA PEMIKIRAN... 28 BAB III METODE PENELITIAN... 29 3.1 Metode Pengembangan Perangkat Lunak... 29 3.1.1 Komunikasi... 29 3.1.2 Perancangan Secara Cepat... 30 3.1.3 Perancangan Model Secara Cepat... 30 3.1.4 Konstruksi Prototipe... 31 3.1.5 Pengiriman dan Umpan Balik... 31 BAB IV ANALISA DAN PERANCANGAN SISTEM... 33 4.1 Gambaran Sistem Pemetaan SPBU... 33 4.2 Analisis Masalah... 33 4.2.1 Analisis Sistem yang Sedang Berjalan... 33 4.2.2 Analisis Sistem yang Diusulkan... 33 4.2.3 Analisis Kebutuhan Sistem... 35 4.3 Perancangan Sistem... 36 4.3.1 Perancangan Flowchart... 36 4.3.2 Perancangan UML (Unified Modeling Language)... 37 4.4 Perancangan Basis Data... 51 4.4.1 Struktur Collection... 51 4.5 Perancangan Sistem... 52 4.5.1 Kebutuhan Pembuatan Sistem... 52 4.5.2 Perancangan Desain Sistem... 53 BAB V IMPLEMENTASI SISTEM... 61 5.1 Implementasi Basisdata... 61 5.2 Implementasi Sistem... 62 5.2.1 Antarmuka Sistem (Interface) Halaman Utama Pengguna... 62 5.2.2 Antarmuka Sistem (Interface) Administrator... 70 5.3 Pengujian Sistem... 75 BAB VI PENUTUP... 81 xi
6. 1 Kesimpulan... 81 6. 2 Saran... 81 DAFTAR PUSTAKA LAMPIRAN-LAMPIRAN xii
DAFTAR TABEL Halaman Tabel 2.1 : Flow Directions Symbols [sumber : 4]... 12 Tabel 2.2 : Processing Symbols [sumber : 4]... 13 Tabel 2.3 : Input-Output Symbols [sumber : 4]... 14 Tabel 2.4 : Tabel Simbol Use Case [sumber : 7]... 16 Tabel 2.5 : Tabel Simbol Class Diagram [sumber : 7]... 18 Tabel 2.6 : Tabel Simbol Sequence Diagram [sumber : 6]... 20 Tabel 2.7 : Tabel Simbol Activity Diagram [sumber : 7]... 21 Tabel 2.8 : Perintah dasar npm [sumber : 9]... 25 Tabel 2.9 : Perintah dasar MongoDB [sumber : 11]... 26 Tabel 4.1 : Tabel Bussiness Use Case Sistem Lama... 38 Tabel 4.2 : Tabel Bussiness Use Case Sistem Baru... 39 Tabel 4.3 : Alur Optimistik Use Case Mengelola Data... 41 Tabel 4.4 : Alur Pemistik Use Case Mengelola Data... 42 Tabel 4.5 : Alur Optimistik Use Case Memilih Marker... 43 Tabel 4.6 : Alur Pesimistik Use Case Memilih Marker... 43 Tabel 5.1 : Tabel Keterangan Pengujian Sistem... 79 Tabel 5.2 : Jalur Kompleksitas Siklomatis... 80 xiii
DAFTAR GAMBAR Halaman Gambar 2.1 : Prototype Paradigm... 11 Gambar 2.2 : Contoh flow graph dari suatu kode program... 22 Gambar 2.3 : Kerangka Pemikiran... 28 Gambar 4.1 : Flowchart Web SPBU... 37 Gambar 4.2 : Bussiness Use Case Sistem Informasi Geografis Lokasi SPBU Lama 38 Gambar 4.4 : Use Case Diagram Admin Sistem Informasi Geografis Lokasi SPBU 40 Gambar 4.5 : Use Case Diagram User Sistem Informasi Geografis Lokasi SPBU.. 42 Gambar 4.6 : Workflow Diagram dari awal sampai selesai... 44 Gambar 4.7 : Activity Diagram Membuat Marker... 44 Gambar 4.8 : Activity Diagram Memilih Tabel Marker... 45 Gambar 4.9 : Activity Diagram Memilih dan Melihat Info Marker... 45 Gambar 4.10 : Sequence Diagram Informasi SPBU... 46 Gambar 4.11 : Sequence Diagram Pengolahan Data SPBU... 47 Gambar 4.12 : Collaboration Diagram Informasi SPBU... 48 Gambar 4.13 : Collaboration Diagram Pengolahan Data SPBU... 49 Gambar 4.14 : Class Diagram Maps... 49 Gambar 4.15 : Class Diagram Marker... 50 Gambar 4.16 : Class Diagram... 50 Gambar 4.17 : Class Diagram User... 51 Gambar 4.18 : Relasi Class Diagram... 51 Gambar 4.19 : Collection Marker... 51 Gambar 4.20 : Collection User... 52 Gambar 4.21 : Desain Menu Utama... 53 Gambar 4.22 : Desain Menu Utama Pop up... 55 Gambar 4.23 : Desain Menu Login... 56 Gambar 4.24 : Desain Menu Register... 57 Gambar 4.25 : Desain Menu Admin... 58 Gambar 4.26 : Desain Menu Search... 59 Gambar 5.1 : Collection User... 61 xiv
Gambar 5.2 : Collection Maps... 62 Gambar 5.3 : Halaman Utama... 62 Gambar 5.4 : Pop-up InfoWindow... 64 Gambar 5.5 : Tampil Jalur, Navigasi dan 3D... 65 Gambar 5.6 : Halaman Utama Pencarian... 66 Gambar 5.7 : Tampil Menu Login... 67 Gambar 5.8 : Tampil Form Login... 68 Gambar 5.9 : Halaman Utama Administrator... 70 Gambar 5.10 : Tampil Sumbu X dan Y... 71 Gambar 5.11 : Form Simpan Data... 72 Gambar 5.12 : Form Daftar SPBU... 73 Gambar 5.13 : Tampilan Ubah Data... 74 Gambar 5.14 : Node Pengujian Sistem... 79 xv
DAFTAR LAMPIRAN Lampiran 1 : Kuisioner Lampiran 2 : Lembar Bimbingan Lampiran 3 : Lembar Revisi xvi