Institutional Repository | Satya Wacana Christian University: Perancangan Sistem Informasi Pemetaan Lokasi SPBU di Kota Semarang Berbasis Web Menggunakan Google Maps API

  

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

Salatiga

April 2015

  

Halaman Persetujuan

  

Halaman Pengesahan

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 Micky Olivia

  

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.

  5. Ibunda tercinta, kedua kakakku, dan adikku tersayang yang selalu memberikan semangat, doa, perhatian, dan kasih sayang yang begitu besar sampai sekarang dan seterusnya.

  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.

  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 Micky Olivia

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

  ...................................................................................................................... xix

  Abstract

  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

  2.1 Penelitian Terdahulu ....................................................................................... 5

  2.2 Landasan Teori................................................................................................ 6

  2.2.10 PHP ................................................................................................... 14

  3.3.6 Arsitektur Sistem ............................................................................... 29

  3.3.5 Deployment Diagram ........................................................................ 28

  3.3.4 Class Diagram .................................................................................. 27

  3.3.3 Sequence Diagram ............................................................................ 21

  3.3.2 Activity Diagram ............................................................................... 19

  3.3.1 Use Case Diagram ............................................................................ 17

  3.3 Desain Prosedur Sistem ................................................................................ 17

  3.2.2 Analisis Kebutuhan Perangkat Lunak ............................................... 17

  3.2.1 Analisis Kebutuhan Perangkat Keras ................................................ 16

  3.2 Analisis Kebutuhan Sistem ........................................................................... 16

  3.1 Metode Pengembangan Sistem ..................................................................... 15

  Bab 3 Metode Penelitian ............................................................................................. 15

  2.2.9 JavaScript .......................................................................................... 13

  2.2.1 Konsep Dasar Sistem .......................................................................... 6

  2.2.8 XML ................................................................................................... 12

  2.2.7 Google Maps ..................................................................................... 12

  2.2.6 Peta .................................................................................................... 11

  2.2.5 HTML ................................................................................................ 10

  2.2.4.5 Brainware ........................................................................... 10

  2.2.4.4 Aplikasi ............................................................................... 10

  2.2.4.3 Data ....................................................................................... 9

  2.2.4.2 Software ................................................................................ 8

  2.2.4.1 Hardware .............................................................................. 8

  2.2.4 Komponen SIG ................................................................................... 8

  2.2.3 Sistem Informasi Geografis (SIG) ..................................................... 7

  2.2.2 Website ................................................................................................ 6

  3.4 Perancangan Tabel Data ............................................................................... 30

  3.5 Perancangan Sistem ...................................................................................... 32

  4.1.2 Antarmuka Admin ............................................................................. 48

  5.1 Kesimpulan ................................................................................................... 56

  Bab 5 Kesimpulan dan Saran ...................................................................................... 56

  4.3 Analisis Hasil Pengujian Sistem ................................................................... 53

  4.2.2 Pengujian Admin ............................................................................... 52

  4.2.1 Pengujian User .................................................................................. 52

  4.2 Pengujian Sistem ........................................................................................... 51

  4.1.1 Antarmuka User ................................................................................ 41

  3.5.1 Mengintegrasikan Google Maps API pada Halaman Web ................ 32

  4.1 Antarmuka Sistem ......................................................................................... 40

  Bab 4 Hasil Penelitian dan Pembahasan ..................................................................... 40

  3.6 Desain Antarmuka ........................................................................................ 38

  3.5.3.2 Struktur Navigasi Admin ..................................................... 37

  3.5.3.1 Struktur Navigasi User ....................................................... 36

  3.5.3 Perancangan Navigasi Aplikasi ........................................................ 36

  3.5.2 Menentukan Lokasi SPBU ................................................................ 36

  5.2 Saran ............................................................................................................. 56 Daftar Pustaka ............................................................................................................. xx Lampiran ................................................................................................................... xxii

  

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

  Tabel 4.3 Hasil Jawaban Kuesioner............................................................................ 54

  

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

  Gambar 4.6 Menu Kontent Beranda........................................................................ 45

  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

  Gambar 4.14 Menu Tambah Data Lokasi SPBU ...................................................... 51

  

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

  Kode Program 3.6 Perintah untuk Menampilkan Pencarian Lokasi ........................... 35

  

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

  Lampiran 8 Hasil Kuesioner 5 ................................................................................ xxix

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

WHATWG Web Hypertext Application Technology Working Group

  

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 yang dapat memberikan kemudahan kepada pengguna untuk mengetahui

  web informasi lokasi SPBU di Kota Semarang.

  Kata Kunci: Teknologi, Sistem Informasi, Google Maps API.

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.

  Keywords: Technology, Information System, Google Maps.