Aplikasi Web Gis Pemetaan Penyebaran Sekolah Di Kota Medan Menggunakan Google Maps Api

5

BAB 2

LANDASAN TEORI

2.1 Geographic Information System(GIS)

Istilah geography digunakan karena GIS dibangun berdasarkan pada geografi atau
spasial. Objek ini mengarah pada spesifikasi dalam suatu ruang. Geographic
Information System adalah sistem informasi khusus yang mengelola data yang
memiliki informasi spasial (bereferensi keruangan). Sistem informasi geografis adalah
bentuk sistem informasi yang menyajikan informasi dalam bentuk grafis dengan
menggunakan peta sebagai antar muka. GIS tersusun atas konsep beberapa lapisan dan
relasi ( Prahasta, 2002).

2.1.1 Komponen GIS

Banyaknya definisi yang diajukan untuk menjelaskan pengertian GIS, pada prinsipnya
ada 5 komponen yang dapat didefiniskan sebagai komponen-komponen pembangun
GIS yaitu : basis data, perangkat keras, perangkat lunak komputer, pelaksana dan

prosedur.

SISTEM DATA

Basis Data

TEKNOLOGI
Perangkat keras

INFRASTRUKTUR

pelaksana

Perangkat Lunak

prosedur

Gambar 2.1 Komponen GIS

Universitas Sumatera Utara


6

Dari lima komponen GIS, basis data merupakan komponen yang paling penting
dan dapat dikatakan sebagai otak dari suatu GIS. Tanpa kuantitas dan kualitas data
yang memadai, sebaik apapun ke empat komponen GIS lainnya, GIS tersebut tidak
akan berfungsi secara efektif dan efesien. Komponen yang termasuk bagian teknologi
adalah komponen yang sangat menentukan, karena komponen ini sangat
mempermudah dan mempercepat pengelolaan, dan pemanipulasi data, serta
penganalisisan dan perepensatisian grafis dari informasi.(Abidin.Z 1995)

2.2 Google Maps
Google Maps adalah layanan aplikasi peta online yang disediakan oleh Google
secara gratis. Layanan peta Google Maps secara resmi dapat diakses melalui
situs http://maps.google.com. Pada situs tersebut dapat dilihat informasi geografis
pada hampir semua permukaan di bumi kecuali daerah kutub utara dan selatan.
Layanan ini dibuat sangat interaktif, karena di dalamnya peta dapat digeser sesuai
keinginan pengguna, mengubah level zoom, serta mengubah tampilan jenis peta.
Google Maps mempunyai banyak fasilitas yang dapat dipergunakan misalnya
pencarian lokasi dengan memasukkan kata kunci, kata kunci yang dimaksud

seperti nama tempat, kota, atau jalan, fasilitas lainnya yaitu perhitungan rute
perjalanan dari satu tempat ke tempat lainnya.
Cara membuat Google Maps untuk ditampilkan pada suatu web atau blog sangat
mudah hanya dengan membutuhkan pengetahuan mengenai HTML serta JavaScript,
serta koneksi internet yang sangat stabil. Dengan menggunakan Google Maps API,
kita dapat menghemat waktu dan biaya untuk membangun aplikasi peta digital yang
handal, sehingga kita dapat fokus hanya pada data-data yang akan ditampilkan.
Dengan kata lain, kita hanya membuat suatu data sedangkan peta yang akan
ditampilkan adalah milik Google sehingga kita tidak dipusingkan dengan mambuat
peta suatu lokasi, bahkan dunia.

Dalam pembutan program Google Map API menggunakan urutan sebagai berikut:

Universitas Sumatera Utara

7

1. Memasukkan Maps API JavaScript ke dalam HTML kita.
2. Membuat element div dengan nama map_canvas untuk menampilkan peta.
3. Membuat beberapa objek literal untuk menyimpan properti pada peta.

4. Menuliskan fungsi JavaScript untuk membuat objek peta.
5. Meng-inisiasi peta dalam tag body HTML dengan event onload.
Pada Google Maps API terdapat 4 jenis pilihan model peta yang disediakan oleh
Google, diantaranya adalah:
1. ROADMAP, ini yang saya pilih, untuk menampilkan peta biasa 2 dimensi
2. SATELLITE, untuk menampilkan foto satelit
3. TERRAIN, untuk menunjukkan relief fisik permukaan bumi dan menunjukkan
seberapa tingginya suatu lokasi, contohnya akan menunjukkan gunung dan
sungai
4. HYBRID, akan menunjukkan foto satelit yang diatasnya tergambar pula apa
yang tampil pada ROADMAP (jalan dan nama kota)

2.2.1 Cara Kerja Google Map

Google Maps dibuat dengan menggunakan kombinasi dari gambar peta, database,
serta obyek-obyek interaktif yang dibuat dengan bahasa pemrograman HTML,
Javascript dan AJAX, serta beberapa bahasa pemrograman lainnya. Gambar-gambar
yang muncul pada peta merupakan hasil komunikasi dengan database pada web
server Google untuk menampilkan gabungan dari potongan-potongan gambar
yang diminta. Keseluruhan citra yang ada diintegrasikan ke dalam database pada

Google Server, yang nantinya akan dapat dipanggil sesuai kebutuhan permintaan.

2.2.2 Migrasi Google Map API v2 ke v3

Google Map API v2 resmi ditinggalkan pada tanggal 19 Mei 2010, namun para
pengembang masih bisa menggunakan versi tersebut sampai dengan tanggal 19 Mei

Universitas Sumatera Utara

8

2013. Kehadiran Google Map API v3 membawa dampak positif untuk sistem
informasi berbasis GIS, diantaranya dalam bentuk aplikasi gadget maupun dalam
basis web. Google Map mempunyai fitur-fitur yang lebih memudahkan daripada
Google Map API v2, diantara perbedaannya yaitu :
1. Penamaan Baru
Perbedaan sangat terlihat sekali jika membandingkan kedua versi Google Map
API dalam penulisan kode. Contohnya saja dalam menuliskan penanda map
pada kode, dalam v3 ditulis google.maps.Marker sedangkan dalam v2
GMarker.

2. Navigasi Baru

Gambar 2.2 Google Map v2 dan v3

2.3 PHP

Bahasa scripting merupakan bahasa pemrograman yang menyediakan fasilitas
penerjemahan serta kompilasi kode dalam satu rangkaian proses secara integratif
sehingga memungkinkan kode dibuat dapat langsung dijalankan sebagai program
secara dinamis. Bahasa scripting dibagi menjadi 2 jenis yaitu server-side script dan
client-side script.

Universitas Sumatera Utara

9

Server-side script adalah script yang diterjemahkan oleh web server. Server-side
script merupakan satu set intruksi yang diproses di server dan hasilnya akan berupa
code HTML. PHP digunakan sebagai bahsa untuk menambah fitur-fitur tambahan
secara tertulis pada HTML. Untuk menampilkan code HTML dibutuhkan browser.

Sedangkan Client-side Script adalah script yang langsung diterjemahkan oleh program
dari client yaitu browser, contohnya css dan javascript.

2.3.1 Kelebihan PHP

Kelebihan PHP sebagai Server-side script adalah :
1. Bahasa pemrograman PHP adalah sebuah bahasa

script

yang tidak

melakukan sebuah kompilasi dalam peng gunaanya.
2. Web Server yang mendukung php lumayan banyak diantaranya IIS sampai
dengan apache, dengan configurasi yang relatif mudah.

3. Dapat digunakan di berbagai mesin (linux, unix, windows) dan dapat
dijalankan secara runtime melalui console serta juga dapat menjalankan
perintah-perintah sistem.
4. Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan

developer yang siap membantu dalam pengembangan.

2.4 MySQL

SQL(Structured Query Language) merupakan sebuah bahasa relational yang berisi
pernyataan yang digunakan untuk memasukkan, mengubah, menghapus, memilih dan
melindungi data (Prihatna, 2005).

SQL merupakan sebuah bahasa untuk

memanipulasi database. Ada banyak aplikasi database yang diedarkan dipasaran
seperti Oracle, Informix, Sybase, DBase, MS SQL, MS Access dan MySQL.

Universitas Sumatera Utara

10

MySQL adalah sebuah implementasi dari sistem manajemen database
relasional yang didistribusikan secara gratis dibawah lisensi GPL (General Public
License). Setiap pengguna dapat secara bebas menggunakan MySQL, namun dengan

batasan perangkat lunak tersebut tidak boleh dijadikan produk turunan yang bersifat
komersial.
MySQL menggunakan perintah dalam bahasa SQL antara lain:
1. SELECT
Perintah ini digunakan untuk mengambil data dari suatu tabel. Sintak
penulisannya adalah :
SELECT {*|namafield}FROM namatabel [WHERE kondisi]
2. INSERT
Perintah ini digunakan untuk menyisipkan data ke dalam tabel. Sintak
penulisannya adalah :
INSERT INTO nama tabel [(field1[,field2,...])]
3. DELETE
Perintah ini digunakan untuk menghapus record dari suatu tabel. Sintak
penulisannyaadalah:
DELETE FROM namatabel WHERE kondisi.
4. UPDATE
Perintah ini digunakan untuk memperbaharui nilai suatu data pada tabel.
Sintak penulisannya adalah :
UPDATE namatabel SET kriteria WHERE kondisi


Universitas Sumatera Utara

11

2.5 Java Script dan Koneksi Google Maps API

Java

Script

adalah

bahasa

script

yang

berdasar


pada

objek

yang

memperbolehkan pemakai untuk mengendalikan banyak aspek interaksi pemakai
pada suatu dokumen HTML. Desain Java Script dipengaruhi oleh banyak bahasa
pemrograman, termasuk C, tetapi dimaksudkan untuk lebih digunakan oleh nonprogrammer. JavaScript tidak didasarkan pada atau terkait ke Java, ini adalah
kesalahpahaman umum. Java Script seringkali disertakan dalam file HTML atau link
dari file HTML dan dijalankan secara lokal oleh web browser.

Untuk bisa menampilkan peta pada web, diharuskan menambah referensi
pustaka google map di kode program. Nantinya referensi pustaka ini mengambil
objek-objek yang tersimpan di server google map dan menampilkan ke web kita.
Referensi ini diletakan pada kode “head” pada html.



Parameter sensor berisi true digunakan untuk menggunakan sensor lokasi , misalnya
GPS (jika ada, misalnya jika aplikasi web based kita diakses dengan ponsel tertentu
yang memiliki GPS). Teori lain tentang parameter sensor adalah digunakan google
untuk mendata statistis data yang digunakan. (Gabriel Svennerberg, 2010)

2.6 Adobe Dreameaver CS5.5
Adobe Dreamweaver CS5.5 dirilis tanggal 12 April 2011, dengan fitur memenuhi
kode HTML5. Adobe Dreamweaver adalah aplikasi desain dan pengembangan web
yang menyediakan editor visual dan kode editor dengan fitur standar seperti
pewarnaan sintaks, penyelesaian kode otomatis, dan bantuan penulisan kode untuk
menghasilkan kode yang benar untuk membantu pengguna dalam menulis kode. Tata
letak tampilan design view memfasilitasi desain cepat dan pembuatan kode seperti

Universitas Sumatera Utara

12

memungkinkan pengguna dengan cepat membuat tata letak dan manipulasi elemen
HTML. Dreamweaver memiliki fitur browser yang terintegrasi untuk melihat halaman
web yang dikembangkan di jendela pratinjau program sendiri agar konten
memungkinkan untuk terbuka di web browser yang telah terinstall. Aplikasi ini
menyediakan transfer dan fitur sinkronisasi, kemampuan untuk mencari dan
mengganti baris teks atau kode untuk mencari kata.
Dreamweaver memberikan 3 (tiga) pilihan yaitu bekerja dengan menulis kode
program (Menu Code ), dengan pengeditan secara visual ( Mode Design ) dan dengan
tampilan keduanya (Mode Split). Dreamweaver juga menyediakan alat - alat bantu
untuk mengembangkan kreativitas pembuatan

Gambar 2.3 Tampilan Adobe Dreameaver CS5.5

2.7 JQuery

JQuery adalah pustaka JavaScript yang memungkinkan kita untuk membuat program
web pada suatu halaman web, tanpa harus secara eksplisit kita menambahkan event
atau pun properti pada halaman web tersebut. Pustaka ini dirilis pada Januari 2006 di

Universitas Sumatera Utara

13

BarCamp NYC oleh John Resig. Dengan jQuery kita dapat membuat web lebih
menarik dan interaktif dengan mudah. jQuery sudah mengautomasi pekerjaanpekerjaan yang umum dan mempersimple kode yang kompleks. Library ini sangat
kecil dan mempunyai banyak plugin yang dapat mempermudah kita.

Untuk instalasi download jQuery dari websitenya http://jquery.com/. Ada dua
pilihan download Production dan development, perbedaannya adalah production
digunakan di realsite sedangkan development untuk masa developmen. Versi
production sudah di kompresi sehingga kode nya sudah tidak bisa dibaca lagi dan
ukurannya jauh lebih kecil. Versi developmen berguna jika kita mau merubah kode
jQuery.

Lisensi JQuery adalah open source yang bisa diperoleh secara cuma- cuma,
dan dapat digunakan untuk kepentingan komersial, tanpa ada tuntutan untuk
membayar kepada pembuat JQuery . Lisensi open source dari JQuery adalah MIT
dan LGP.

2.8 Adobe Photoshop CS5

Adobe Photoshop CS5 atau biasa disebut White Rabbit dirilis April 2010 oleh Adobe
System. Photoshop adalah perangkat lunak editor citra buatan Adobe Systems yang
dikhususkan untuk pengeditan foto/gambar dan pembuatan efek. Perangkat lunak ini
banyak digunakan oleh fotografer digital dan perusahaan iklan sehingga dianggap
sebagai pemimpin pasar (market leader) untuk perangkat lunak pengolah gambar, dan,
bersama Adobe Acrobat, dianggap sebagai produk terbaik yang pernah diproduksi
oleh Adobe Systems.

Adobe System selalu memperbaharui aplikasi Photoshopnya. Adobe
Photoshop CS5 bukan versi terbaru yang dibuat oleh Adobe tapi ini adalah software
yang mendekati versi terbarunya dari Adobe, memang tak semua fitur yang ada di
Adobe Photoshop CS6 akan hadir di Adobe Photoshop CS5 tapi setidaknya Anda
mempunya yang lebih bagus dari CS3, dan CS4.

Universitas Sumatera Utara

14

Photoshop tersedia untuk Microsoft Windows, Mac OS X, dan Mac OS; versi
9 ke atas juga dapat digunakan oleh sistem operasi lain seperti Linux dengan bantuan
perangkat lunak tertentu seperti Wine. Photoshop dirancang untuk menyunting gambar
untuk cetakan berbasis-kertas, Photoshop yang ada saat ini juga dapat digunakan
untuk memproduksi gambar untuk World Wide Web.

Gambar 2.4 Tampilan Adobe Photoshop CS5

2.9 Flow-Chart

Flow chart adalah penggambaran secara grafik dari langkah – langkah dan urutan –
urutan prosedur dari suatu program. Flow chart menolong analis dan programmer
untuk memecahkan masalah ke dalam segmen – segmen yang lebih kecil dan
menolong dalam menganalisis alternatif – alternatif lain dalam pengoperasian Flow
chart biasanya mempermudah penyelesaian suatu masalah khususnya masalah yang
perlu dipelajari dan dievaluasi lebih lanjut. Petunjuk untuk membuat flow chart Bila

Universitas Sumatera Utara

15

seorang analisis dan programmer akan membuat flow chart, ada eberapa petunjuk
yang harus diperhatikan, seperti :
1. Flow chart digambarkan dari halaman atas ke bawah dan kiri ke kanan.
2. Aktifitas yang digambarkan harus didefinisikan secara hati – hati dan

defenisi ini

harus dapat dimengerti oleh pembacanya.
3. Kapan aktifitas dimulai dan berakhir harus ditentukan secara jelas.
4. Setiap langkah dari aktifitas harus diuraikan dengan menggunakan deksripsi kata
kerja.
5. Setiap langkah dari aktifitas harus berada pada urutan yang benar.
6. Lingkup, range dan aktifitas yang sedang digambarkan harus ditelusuri dengan
hati - hati. Percabangan - percabangan

yang

memotong

aktifitas

yang

sedang digambarkan tidak perlu digunakan dan percabangannya diletakkan pada
halaman yang terpisah atau

hilangkan seluruhnya bila percabangan

tidak

berkaitan dengan sistem.
7. Gunakan symbol – symbol flowchart yang standard.

Berikut ini adalah gambar simbol – simbol standar dalam flow chart beserta
dengan arti dari masing – masing simbol :

Tabel 2.1 Flow-Chart
Simbol

Keterangan
Simbol ini dipergunakan untuk menunjukkan awal
kegiatan atau akhir kegiatan atau berhentinya
suatu program.

Terminal/Interupt
(Mulai/Berhenti)
Untuk mewakili data input dan menuliskan
output-nya

Input/Output (data/hasil)

Universitas Sumatera Utara

16

Suatu simbol yang melambangkan diprosesnya
suatu data.

Process (Pengolahan)
Dipakai untuk menuliskan jika adanya percabangan,
seperti if, case.

Decision (Keputusan)
Untuk

program-program

yang

sering

dipergunakan sebuah program berulang kali,
biasanya dibuat program terpisah dengan sebuah
Prefendefined

sub program (subroutine). Untuk menghubungkan
program utama dengan subroutine dipergunakan
symbol ini.
Bila suatu flow-chart sangat panjang dan diputus
di tengah sebelum selesai, jika disambung dalam
halaman yang sama lagi, maka digunakan symbol

Connector (Penghubung)

ini.
Bila suatu flow-chart dihubungkan dengan garisgaris ini. Garis-garis ini menunjukkan akar
selanjutnya yang akan dituju. Bila arahnya ke
bawah atau ke kanan tidak perlu memakai tanda
panah. Bila ke atas atau ke kiri , tanda panah

Flow lines (Garis Alir)

harus dipakai, untuk membedakannya.

Universitas Sumatera Utara