i
Perancangan Sistem Informasi Pemetaan Lokasi SPBU di Kota
Semarang Berbasis
Web
Menggunakan
Google Maps API
SKRIPSI
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Oleh:
Micky Olivia NIM: 672009073
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
ii
iii
vi
Pernyataan
Artikel Ilmiah berikut ini :
Judul : Perancangan Sistem Informasi Pemetaan Lokasi SPBU di Kota Semarang Berbasis Web Menggunakan Google Maps API
Pembimbing : Ramos Somya, S.Kom., M.Cs. adalah benar hasil karya saya :
Nama : Micky Olivia
NIM : 672009073
Saya menyatakan tidak mengambil sebagian atau seluruhnya dari hasil karya orang lain kecuali sebagaimana yang tertulis pada daftar pustaka.
Pernyataan ini dibuat dengan sebenar-benarnya sesuai dengan ketentuan yang berlaku dalam penulisan artikel ilmiah.
Salatiga, 6 April 2015
vii
Prakata
Puji dan syukur pada Tuhan Yesus Kristus Pemilik segala makhluk dan bangsa yang kasih-Nya telah membimbing penulisan sehingga dapat menyelesaikan artikel ilmiah dengan judul “Perancangan Sistem Informasi Pemetaan Lokasi SPBU di Kota Semarang Menggunakan Google Maps API”. Artikel ilmiah ini disusun untuk memenuhi persyaratan dalam memperoleh gelar Sarjana Komputer pada Program Studi Teknik Informatika, Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.
Tesusunnya artikel ilmiah ini tidak lepas dari bantuan dan dukungan berbagai pihak. Oleh karena itu, penulis ingin menyampaikan ucapan terima kasih kepada: 1. Bapak Dharmaputra T. Palekahelu, M.Pd., selaku Dekan Fakultas Teknologi
Informasi, Universitas Kristen Satya Wacana Salatiga.
2. Bapak Suprihadi, S.Si., M.Kom., selaku Ketua Program Studi Teknik Informatika, Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga.
3. Bapak Ramos Somya, S.Kom., M.Cs., selaku dosen Pembimbing I atas kesabaran dalam memberi bimbingan, masukan, motivasi, dan pengarahan dalam penyusunan artikel ilmiah ini.
4. Seluruh Bapak/Ibu dosen pengajar, staff Tata Usaha, dan karyawan di Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga yang telah mendidik dan memberikan pengetahuan kepada penulis selama kuliah.
viii
6. Sahabat-sahabatku Kristy, Elisabeth, dan Tia yang selalu memberikan semangat dan pencerahan.
7. Teman-teman Fakultas Teknologi Informasi yang telah memberikan dukungan dan bantuannya dalam proses pengerjaan skripsi ini.
8. Bapak dan Ibu Kos “Kemiri 1, 7a” yang berperan sebagai orang tua kedua saat tinggal di Salatiga, serta keluarga kecil 7a yang selalu memberikan nasehat dan dorongan untuk menyelesaikan skripsi.
9. PT. Pertamina Semarang untuk kesempatan waktu yang diberikan selama wawancara.
10. Dan semua pihak yang tidak dapat penulis sebutkan satu persatu yang telah membantu selama penyusunan skripsi.
Penulis menyadari sepenuhnya bahwa dalam penulisan artikel ilmiah ini masih terdapat kekurangan. Oleh karena itu, penulis mengharapkan saran yang membangun dari pembaca demi penyempurnaan artikel ilmiah ini.
Akhir kata, penulis berharap semoga laporan artikel ilmiah ini dapat bermafaat bagi pembaca sekalian.
Salatiga, April 2015
vii
Daftar Isi
Halaman Sampul Depan ... i
Halaman Persetujuan ... ii
Halaman Pengesahan ... iii
Halaman Persetujuan Akses ... iv
Halaman Pernyataan Tidak Plagiat ... v
Halaman Pernyataan... vi
Prakata ... vii
Daftar Isi... ix
Daftar Tabel ... xii
Daftar Gambar ... xiii
Daftar Kode Program ... xv
Daftar Lampiran ... xvi
Arti Singkatan ... xvii
Abstrak ... xviii
Abstract ... xix
Bab 1 Pendahuluan ... 1
1.1 Latar Belakang ... 1
1.2 Rumusan Masalah ... 2
1.3 Tujuan Penelitian ... 2
1.4 Manfaat Penelitian ... 3
1.5 Batasan Masalah ... 3
1.6 Sistematika penulisan... 3
Bab 2 Tinjauan Pustaka ... 5
viii
2.2 Landasan Teori... 6
2.2.1 Konsep Dasar Sistem ... 6
2.2.2 Website ... 6
2.2.3 Sistem Informasi Geografis (SIG) ... 7
2.2.4 Komponen SIG ... 8
2.2.4.1 Hardware ... 8
2.2.4.2 Software ... 8
2.2.4.3 Data ... 9
2.2.4.4 Aplikasi ... 10
2.2.4.5 Brainware ... 10
2.2.5 HTML ... 10
2.2.6 Peta ... 11
2.2.7 Google Maps ... 12
2.2.8 XML ... 12
2.2.9 JavaScript ... 13
2.2.10 PHP ... 14
Bab 3 Metode Penelitian ... 15
3.1 Metode Pengembangan Sistem ... 15
3.2 Analisis Kebutuhan Sistem ... 16
3.2.1 Analisis Kebutuhan Perangkat Keras ... 16
3.2.2 Analisis Kebutuhan Perangkat Lunak ... 17
3.3 Desain Prosedur Sistem ... 17
3.3.1 Use Case Diagram ... 17
3.3.2 Activity Diagram ... 19
3.3.3 Sequence Diagram ... 21
3.3.4 Class Diagram ... 27
3.3.5 Deployment Diagram ... 28
3.3.6 Arsitektur Sistem ... 29
ix
3.5 Perancangan Sistem ... 32
3.5.1 Mengintegrasikan Google Maps API pada Halaman Web ... 32
3.5.2 Menentukan Lokasi SPBU ... 36
3.5.3 Perancangan Navigasi Aplikasi ... 36
3.5.3.1 Struktur Navigasi User ... 36
3.5.3.2 Struktur Navigasi Admin ... 37
3.6 Desain Antarmuka ... 38
Bab 4 Hasil Penelitian dan Pembahasan ... 40
4.1 Antarmuka Sistem ... 40
4.1.1 Antarmuka User ... 41
4.1.2 Antarmuka Admin ... 48
4.2 Pengujian Sistem ... 51
4.2.1 Pengujian User ... 52
4.2.2 Pengujian Admin ... 52
4.3 Analisis Hasil Pengujian Sistem ... 53
Bab 5 Kesimpulan dan Saran ... 56
5.1 Kesimpulan ... 56
5.2 Saran ... 56
Daftar Pustaka ... xx
xii
Daftar Tabel
Tabel 3.1 Tabel Login ... 30
Tabel 3.2 Tabel Data Lokasi SPBU ... 31
Tabel 4.1 Hasil Pengujian Aplikasi Web User ... 52
Tabel 4.2 Hasil Pengujian Aplikasi Web Admin ... 53
xii
Daftar Gambar
Gambar 2. 1 Komponen-Komponen Sistem Informasi Geografis ... 8
Gambar 2. 2 Skema Software (Perangkat Lunak) ... 9
Gambar 3.1 Tahapan Penelitian ... 15
Gambar 3.2 Use Case Diagram ... 18
Gambar 3.3 Activity Diagram User Mencari Lokasi ... 19
Gambar 3.4 Activity Diagram Melihat Data SPBU ... 20
Gambar 3.5 Activity Diagram Menambah Data SPBU ... 21
Gambar 3.6 Sequence Diagram Melihat Peta SPBU ... 22
Gambar 3.7 Sequence Diagram Mencari Lokasi SPBU ... 22
Gambar 3.8 Sequence Diagram Admin Login ... 23
Gambar 3.9 Sequence Diagram Admin Mengubah Data SPBU ... 24
Gambar 3.10 Sequence Diagram Admin Menambah Data SPBU... 25
Gambar 3.11 Sequence Diagram Admin Menghapus Data SPBU ... 26
Gambar 3.12 Sequence Diagram Admin Logout ... 27
Gambar 3.13 Class Diagram Sistem ... 28
Gambar 3.14 Deployment Diagram Sistem ... 29
Gambar 3.15 Arsitektur Sistem ... 37
Gambar 3.16 Struktur Navigasi User ... 38
Gambar 3.17 Struktur Navigasi Admin ... 39
Gambar 4.1 Menu Halaman Beranda ... 41
Gambar 4.2 Menu Navigasi Website ... 42
Gambar 4.3 Menu Kiri Berita... 43
Gambar 4.4 Menu Cari Lokasi ... 43
Gambar 4.5 Menu Kiri Info SPBU ... 44
xiii
Gambar 4.7 Isi Kontent Peta Cari Lokasi... 46
Gambar 4.8 Isi Kontent Tabel Cari Lokasi ... 46
Gambar 4.9 Isi Kontent Menu Daftar SPBU ... 47
Gambar 4.10 Menu Kontent Info SPBU ... 48
Gambar 4.11 Halaman Login Admin ... 48
Gambar 4.12 Halaman Admin ... 49
Gambar 4.13 Menu Data SPBU ... 50
xv
Daftar Kode Program
Kode Program 3.1 Google Maps API Key ... 32
Kode Program 3.2 Perintah untuk Menampilkan Peta ... 33
Kode Program 3.3 Menggunakan Echo PHP untuk Output XML ... 33
Kode Program 3.4 Perintah untuk Membuat Titik Koordinat Peta Google Maps ... 34
Kode Program 3.5 Perintah untuk Load Peta ... 35
xvi
Daftar Lampiran
Lampiran 1 Daftar SPBU Kota Semarang ... xxii
Lampiran 2 Luas Wilayah Kota Semarang ... xxiii
Lampiran 3 Jumlah Penduduk Kota Semarang ... xxiv
Lampiran 4 Hasil Kuesioner 1 ... xxv
Lampiran 5 Hasil Kuesioner 2 ... xxvi
Lampiran 6 Hasil Kuesioner 3 ... xxvii
Lampiran 7 Hasil Kuesioner 4 ... xxviii
xvii
Arti Singkatan
ASCII American Standard Code for Information Interchange
CD-ROM Compact Disk-Read Only Memory
CODO Company Owned Dealer Operated
GIS Geographic Information System
GML Generalized Markup Language
GUI Graphical User Interface
HTML Hypertext Markup Language
ID Identity
ISO International Organization for Standardization
PC Personal Computer
PHP Hypertext Prepocessor
RAM Random Access Memory
SGML Standard Generalized Markup Language
SIG Sistem Informasi Geografis
SPBU Stasiun Pengisian Bahan Bakar untuk Umum
SRS Software Requirement System
UML Unified Modelling Language
VGA Video Graphics Array
W3C World Wide Web Consortium
xviii
Abstrak
Kecenderungan masyarakat Kota Semarang dalam hal mengetahui informasi lokasi SPBU, keterbatasan informasi yang diperoleh pada aplikasi website Pertamina dimana perlu melakukan registrasi online maupun login yang kurang efisien, dan tidak lengkapnya informasi pada aplikasi pencarian Google Maps. Hal ini menimbulkan permasalahan untuk memperoleh suatu informasi lengkap dan efisien. Oleh karena itu, diperlukan untuk membangun aplikasi sistem informasi pemetaan lokasi SPBU yang berbasis web. Aplikasi yang dirancang menggunakan Google Maps API sebagai sarana penyediaan peta untuk menampilkan lokasi SPBU di kota Semarang. Perancangan web dibangun menggunakan aplikasi Macromedia Dreamweaver, dan PHPMySQL sebagai penyimpanan data lokasi SPBU. Keunggulan
aplikasi ini adalah menyediakan informasi lengkap antara lain: lokasi SPBU, info SPBU, dan berita terbaru mengenai Pertamina. Pengguna dapat mencari lokasi SPBU dengan lebih mudah dan tidak perlu untuk registrasi atau login pada website. Penelitian ini menghasilkan aplikasi sistem informasi pemetaan lokasi SPBU berbasis web yang dapat memberikan kemudahan kepada pengguna untuk mengetahui
informasi lokasi SPBU di Kota Semarang.
xix
Abstract
The tendency of people in Semarang in terms know the information location of
gas station, limitedness of information obtained in website application of Pertamina
wherein the need to online registration as well as login that are less efficient, and the
incomplete of information in search application on Google Maps. This poses
problems to obtaining some information are complete an efficient. Therefore, this
problems is necessary to build application of mapping information system of gas
station location are based on web. Designed application used Google Maps API as
means provision of maps to display location of gas stations in Semarang City.
Designed web builded using Macromedia Dreamweaver application, and PHP
MySQL as data storage are location of gas stations. Advantages of application to
provides of comprehensive information such as: location of gas stations, gas station
info, and latest news about Pertamina. User is easily to seacrh location of gas stations and doesn’t necessary to registration or login on the website. The research is resulting application of mapping information system of gas station based on web are
can to provide convenience to user to know information location of gas stations in
Semarang city.
