LAPORAN SKRIPSI HALAMAN SAMPUL PEMANFAATAN GOOGLE MAPS API SEBAGAI MEDIA INFORMASI FASILITAS SPBU DI KOTA JEPARA DAN KUDUS DENGAN TEKNOLOGI NODE.

Transkripsi

1 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 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MURIA KUDUS 2015 i

2 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 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MURIA KUDUS 2015 ii

3 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 Tanggal : 17 Desember 2015 iii

4 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 : 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

5 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 : Skripsi ini telah diperiksa dan disetujui : Kudus, 1 Desember 2015 Pembimbing 1 Pembimbing 2 Tri Listyorini, M.Kom NIDN Ahmad Jazuli, S.Kom, M.Kom NIDN Mengetahui, Ka. Progdi Teknik Informatika Ahmad Jazuli, M.Kom NIDN v

6 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 : Skripsi ini telah diujikan dan dipertahankan di hadapan Dewan Penguji pada Sidang Skripsi tanggal 17 Desember 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 Anastasya Latubessy, S.Kom, M.Cs NIDN Mengetahui Dekan Fakultas Teknik Kaprogdi Teknik Informatika Rochmad Winarso, ST, MT NIS Ahmad Jazuli, M.Kom NIDN vi

7 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

8 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

9 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

10 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 Latar Belakang Rumusan Masalah Batasan Masalah Tujuan Penelitian Manfaat Penelitian... 4 BAB II TINJAUAN PUSTAKA Penelitian Terkait Landasan Teori Pengertian Sistem Informasi Geografis Metode Pengembangan Perangkat Lunak Perancangan Sistem Flowchart Unified Modeling Language (UML) Pengujian Sistem Tool yang Digunakan Google Maps API x

11 2.5.2 Node.JS MongoDB NoSQL Sublime Text KERANGKA PEMIKIRAN BAB III METODE PENELITIAN Metode Pengembangan Perangkat Lunak Komunikasi Perancangan Secara Cepat Perancangan Model Secara Cepat Konstruksi Prototipe Pengiriman dan Umpan Balik BAB IV ANALISA DAN PERANCANGAN SISTEM Gambaran Sistem Pemetaan SPBU Analisis Masalah Analisis Sistem yang Sedang Berjalan Analisis Sistem yang Diusulkan Analisis Kebutuhan Sistem Perancangan Sistem Perancangan Flowchart Perancangan UML (Unified Modeling Language) Perancangan Basis Data Struktur Collection Perancangan Sistem Kebutuhan Pembuatan Sistem Perancangan Desain Sistem BAB V IMPLEMENTASI SISTEM Implementasi Basisdata Implementasi Sistem Antarmuka Sistem (Interface) Halaman Utama Pengguna Antarmuka Sistem (Interface) Administrator Pengujian Sistem BAB VI PENUTUP xi

12 6. 1 Kesimpulan Saran DAFTAR PUSTAKA LAMPIRAN-LAMPIRAN xii

13 DAFTAR TABEL Halaman Tabel 2.1 : Flow Directions Symbols [sumber : 4] Tabel 2.2 : Processing Symbols [sumber : 4] Tabel 2.3 : Input-Output Symbols [sumber : 4] Tabel 2.4 : Tabel Simbol Use Case [sumber : 7] Tabel 2.5 : Tabel Simbol Class Diagram [sumber : 7] Tabel 2.6 : Tabel Simbol Sequence Diagram [sumber : 6] Tabel 2.7 : Tabel Simbol Activity Diagram [sumber : 7] Tabel 2.8 : Perintah dasar npm [sumber : 9] Tabel 2.9 : Perintah dasar MongoDB [sumber : 11] Tabel 4.1 : Tabel Bussiness Use Case Sistem Lama Tabel 4.2 : Tabel Bussiness Use Case Sistem Baru Tabel 4.3 : Alur Optimistik Use Case Mengelola Data Tabel 4.4 : Alur Pemistik Use Case Mengelola Data Tabel 4.5 : Alur Optimistik Use Case Memilih Marker Tabel 4.6 : Alur Pesimistik Use Case Memilih Marker Tabel 5.1 : Tabel Keterangan Pengujian Sistem Tabel 5.2 : Jalur Kompleksitas Siklomatis xiii

14 DAFTAR GAMBAR Halaman Gambar 2.1 : Prototype Paradigm Gambar 2.2 : Contoh flow graph dari suatu kode program Gambar 2.3 : Kerangka Pemikiran Gambar 4.1 : Flowchart Web SPBU 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 Gambar 4.7 : Activity Diagram Membuat Marker Gambar 4.8 : Activity Diagram Memilih Tabel Marker Gambar 4.9 : Activity Diagram Memilih dan Melihat Info Marker Gambar 4.10 : Sequence Diagram Informasi SPBU Gambar 4.11 : Sequence Diagram Pengolahan Data SPBU Gambar 4.12 : Collaboration Diagram Informasi SPBU Gambar 4.13 : Collaboration Diagram Pengolahan Data SPBU Gambar 4.14 : Class Diagram Maps Gambar 4.15 : Class Diagram Marker Gambar 4.16 : Class Diagram Gambar 4.17 : Class Diagram User Gambar 4.18 : Relasi Class Diagram Gambar 4.19 : Collection Marker Gambar 4.20 : Collection User Gambar 4.21 : Desain Menu Utama Gambar 4.22 : Desain Menu Utama Pop up Gambar 4.23 : Desain Menu Login Gambar 4.24 : Desain Menu Register Gambar 4.25 : Desain Menu Admin Gambar 4.26 : Desain Menu Search Gambar 5.1 : Collection User xiv

15 Gambar 5.2 : Collection Maps Gambar 5.3 : Halaman Utama Gambar 5.4 : Pop-up InfoWindow Gambar 5.5 : Tampil Jalur, Navigasi dan 3D Gambar 5.6 : Halaman Utama Pencarian Gambar 5.7 : Tampil Menu Login Gambar 5.8 : Tampil Form Login Gambar 5.9 : Halaman Utama Administrator Gambar 5.10 : Tampil Sumbu X dan Y Gambar 5.11 : Form Simpan Data Gambar 5.12 : Form Daftar SPBU Gambar 5.13 : Tampilan Ubah Data Gambar 5.14 : Node Pengujian Sistem xv

16 DAFTAR LAMPIRAN Lampiran 1 : Kuisioner Lampiran 2 : Lembar Bimbingan Lampiran 3 : Lembar Revisi xvi