Implementasi Algoritma Dijkstra Untuk Pencarian Rute Terpendek Menuju Pelabuhan Belawan Berbasis Sistem Informasi Geografis
IMPLEMENTASI ALGORITMA DIJKSTRA UNTUK PENCARIAN
RUTE TERPENDEK MENUJU PELABUHAN BELAWAN
BERBASIS SISTEM INFORMASI GEOGRAFIS
SKRIPSI
DEFI RAKHMAWATI
091421023
PROGRAM STUDI EKSTENSI S1 ILMU KOMPUTER
FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI
UNIVERSITAS SUMATERA UTARA
MEDAN
2013
(2)
PERSETUJUAN
Judul
: IMPLEMENTASI ALGORITMA DIJKSTRA
UNTUK PENCARIAN RUTE TERPENDEK
MENUJU PELABUHAN BELAWAN BERBASIS
SISTEM INFORMASI GEOGRAFIS
Kategori
: SKRIPSI
Nama
: DEFI RAKHMAWATI
Nomor Induk Mahasiswa
: 091421023
Program Studi
: EKSTENSI S1 ILMU KOMPUTER
Departemen
: ILMU KOMPUTER
Fakultas
: ILMU KOMPUTER DAN TEKNOLOGI
INFORMASI
Diluluskan di
Medan, 2014
Komisi Pembimbing
:
Pembimbing 2
Pembimbing 1
Drs. Marihat Situmorang, M. Kom
Drs. Agus Salim Harahap, M.Si NIP.
196312141989031001
NIP. 195408281981031004
Diketahui/Disetujui oleh
Departemen Ilmu Komputer FASILKOM-TI USU
Ketua,
Drs. Poltak Sihombing, M. Kom
196203171991031001
(3)
PERNYATAAN
IMPLEMENTASI ALGORITMA DIJKSTRA UNTUK PENCARIAN
RUTE TERPENDEK MENUJU PELABUHAN BELAWAN
BERBASIS SISTEM INFORMASI GEOGRAFIS
SKRIPSI
Saya mengakui bahwa skripsi ini adalah hasil karya saya sendiri, kecuali beberapa kutipan dan
ringkasan yang masing – masing disebutkan sumbernya.
Medan, 2014
Defi Rakhmawati
091421023
(4)
PENGHARGAAN
Alhamdulillah, puji syukur penulis panjatkan kehadirat Allah SWT, yang telah memberikan
rahmat dan ridho-Nya, sehingga saya dapat menyelesaikan penyusunan skripsi ini, sebagai syarat
untuk memperoleh gelar Sarjana Komputer, Program Studi Ekstensi S1 Ilmu Komputer
Universitas Sumatera Utara. Shalawat dan Salam saya hadiahkan kepada Nabi Besar Muhammad
SAW.
Ucapan terima kasih saya sampaikan kepada Bapak Drs. Agus Salim Harahap, M.Si
sebagai Dosen Pembimbing I dan Bapak Drs. Marihat Situmorang, M. Kom sebagai Dosen
Pembimbing II atas bimbingan, saran dan masukkan kepada penulis untuk menyelesaikan dan
menyempurnakan skripsi ini. Ucapan terima kasih juga ditujukan kepada Ketua dan Sekretaris
Program Studi Ekstensi S1 Ilmu Komputer, Bapak Drs. Poltak Sihombing, M. Kom dan Ibu
Maya Silvi Lydia, B.Sc, M.Sc. Dekan dan Pembantu Dekan Fakultas Ilmu Komputer dan
Teknologi Informasi Universitas Sumatera Utara, semua dosen, pegawai/staf Program Studi
Ekstensi S1 Ilmu Komputer USU.
Terimakasih yang sebesarnya kepada kedua Orang Tua dan keluarga saya atas
dukungannya baik materil maupun spiritual. Terimakasih juga kepada rekan – rekan kerja di PT.
Pelabuhan Indonesia I (Persero) serta seluruh teman – teman yang tidak dapat saya sebutkan
semuanya.
Saya menyadari bahwa skripsi ini masih jauh dari kesempurnaan. Oleh karena itu, saya
menerima saran dan kritik yang bersifat membangun demi kesempurnaan skripsi ini. Semoga
skripsi ini dapat bermanfaat bagi yang memerlukan.
(5)
ABSTRAK
Pelabuhan Belawan terletak di kota Medan, Sumatera Utara, Indonesia. Saat ini Pelabuhan
Belawan merupakan Pelabuhan tersibuk di Sumatera. Lalu lintas transportasi, logistik maupun
aktivitas perdangangan sangat ramai menuju Pelabuhan Belawan sehingga Sistem Informasi
Georafis sangat diperlukan. Sistem Informasi Geografis ini dirancang berbasis web dengan layer
peta yang direpresentasikan oleh
Mapguide
Open Source
2.2.0.5703. Digitasi peta menggunakan
Quantun GIS 1.8.0-2. Untuk
database
peta menggunakan PostgreSQL 8.4.16-1 dan Postgis
1.5.5-1. Teknik pencarian rute terpendek menggunakan algoritma Dijkstra, serta
diimplementasikan ke halaman web melalui PHP dan
Java Script.
Adapun penggunaan algoritma
Dijkstra karena algoritma ini dipastikan memiliki solusi terbaik dalam menentukan rute
terpendek karena algoritma Dijkstra akan membaca seluruh lintasan dan hanya memilih lintasan
dengan bobot terkecil sebagai rute terpendeknya. Untuk pengujian dilakukan pencarian rute
terpendek dengan melakukan input titik asal dan titik tujuan dimana untuk titik adalah adalah
Stasiun Kereta Api Medan dan titik tujuan adalah Terminal Penumpang di Pelabuhan Belawan.
Kemudian dari hasil pengujian tersebut menunjukkan bahwa sistem berhasil menampilkan rute
terpendek, nama jalan dan jarak yang ditempuh untuk menuju Terminal Penumpang di
Pelabuhan Belawan yang divisualisasikan dalam peta kota Medan. Dengan demikian
implementasi algoritma Dijkstra pada sistem informasi geografis untuk menentukan rute
terpendek menuju Pelabuhan Belawan ini layak digunakan karena berhasil menampilkan rute
terpendek menggunakan algoritma Dijkstra.
Kata Kunci
: Sistem Informasi Geografis, Algoritma Dijkstra, Rute Terpendek, Pelabuhan
Belawan.
(6)
IMPLEMENTATION OF DIJKSTRA ALGORITHM TO DETERMINE A
SHORTEST PATH TO PORT OF BELAWAN BASED ON GEOGRAPHIC
INFORMATION SYSTEM
ABSTRACT
Belawan is a port in Medan, North of Sumatra, Indonesia. Belawan is Indonesia's busiest port of
Sumatera Island. The traffic of logistics and trade activity in Belawan port is very crowded it
means people need Geographic Information System. Geographic Information System created by
web basis through map layers which is represented by Mapguide Open Source 2.2.0.5703. Map
digitation by Quantun GIS 1.8.0-2. PostgreSQL 8.4.16-1 and Postgis 1.5.5-1 is used for database
of map. Dijkstra method is used as the shortest route searching technique. It will be implemented
to web page through PHP and Java Script. The author has chosen algorithm Dijkstra because this
algorithm has a best solution to find a shortest path because it will find the path with lowest cost
as the shortest path. For the testing to find a shortest path add start point and end point which is
start point is Stasiun Kereta Api Medan and the end point is Port of Belawan. The result is the
shortest path found and represented with routing of shorthest path, name of road and the distance
to go to Port of Belawan that visualization in Map of Medan City. Then this System Information
Geographic is useful because it can representation the shortest path by using Dijkstra Algorithm.
Keywords :
Geographic Information System, Algorithm Dijkstra, Shortest Path, Port of
Belawan.
(7)
DAFTAR ISI
Halaman
Persetujuan
ii
Pernyataan
iii
Penghargaan
iv
Abstrak
v
Abstract
vi
Daftar Isi
vii
Daftar Gambar
ix
Daftar Tabel
x
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
3
1.6 Lokasi dan Waktu Penelitian
4
1.7 Metode Penelitian
4
1.4 Sistematika Penulisan
5
Bab II Landasan Teori
6
2.1 Sistem Informasi Geografis
6
2.1.1 Sistem
6
2.1.2 Informasi
6
2.1.3 Sistem Informasi
7
2.1.4 Geografi
7
2.1.5 Sistem Informasi Geografis
7
2.1.5.1 Subsistem Sistem Informasi Geografis
8
2.1.5.2 Komponen Sistem Informasi Geografis
9
2.2 Peta
11
2.2.1 Proyeksi Peta
11
2.2.2 Proyeksi Universal Transverse Mercator (UTM)
12
2.3 Algoritma Dijkstra
14
2.3.1 Definisi Algoritma Dijkstra
14
2.3.2 Pseudo Code Algoritma Dijkstra
16
2.3.3 Penelitian Terdahulu Algoritma Dijkstra
16
Bab III Analisis dan Perancangan Sistem
20
3.1 Analisis Sistem
20
3.1.1 Analisis Masalah
20
3.1.2 Analisis dan Perancangan SIG
21
3.2 Analisis Kebutuhan
22
(8)
3.2.2 Analisis Kebutuhan Non Fungsional
23
3.3 Pemodelan Sistem
23
3.3.1 Model Proses DFD (Data Flow Diagram)
23
3.3.1.1 DFD (
Data Flow Diagram)
Level 0
23
3.3.1.2 DFD (
Data Flow Diagram)
Level 1
24
3.3.1.3 DFD (
Data Flow Diagram)
Level 2 Proses 1
25
3.3.2 Model Data (
Entity Relationship Diagram)
26
3.4
Flowchart
26
3.4.1
Flowchart Algoritma Dijkstra Dalam Mencari Rute
Terpendek
26
3.5 Perancangan Database
28
3.6 Perancangan Antarmuka
35
3.6.1 Perancangan Antarmuka Situs Pengunjung
35
Bab IV Implementasi Sistem
37
4.1 Implementasi
37
4.2 Implementasi Algoritma Dijkstra
37
4.3 Tampilan Sistem Informasi Geografis
48
4.3 Pengujian Sistem
52
4.4 Pengujian
Black Box (Black Box Testing)
53
Bab V Kesimpulan dan Saran
54
Daftar Pustaka
55
Lampiran
57
(9)
DAFTAR GAMBAR
Halaman
2.1.5.1 Ilustrasi Subsistem SIG
8
2.1.5.2 Pelabuhan Belawan
10
2.2.1a Proyeksi Peta
11
2.2.1b Jenis Proyeksi Peta
11
2.2.2a Peta Dunia Berproyeksi UTM
13
2.2.2b Peta Indonesia Berproyeksi UTM
13
2.3.1 Graf
15
3.1.1 Diagram Ishikawa Untuk Analisis Masalah
21
3.1.2 Gambaran Umum Perancangan SIG
22
3.3.1.1 DFD Level 0
24
3.3.1.2 DFD Level 1
25
3.3.1.3 DFD Level 2 Proses 1
25
3.3.2
Entity Relationship Diagram
26
3.4.1 Flowchart Algoritma Dijkstra
27
3.6.1 Perancangan Antarmuka SIG Berbasis Web
35
4.2a Representasi Graf
38
4.2b Node Terpilih Pada Iterasi ke-1
39
4.2c Node terpilih pada Iterasi ke-2
40
4.2d Node terpilih pada Iterasi ke-3
41
4.2e Node terpilih pada Iterasi ke-4
42
4.2f Node terpilih pada Iterasi ke-5
43
4.2g Node terpilih pada Iterasi ke-6
44
4.2h Node terpilih pada Iterasi ke-7
45
4.3a Tampilan Awal
48
4.3b Tampilan
Zoom In
49
4.3c Tampilan Input Jalan dan Tempat
49
4.3d Tampilan Shorthest Path
50
4.3e Tampilan
Zoom In Shorthest Path
51
4.3f Jalur Pendek Tiap - Tiap Jalan
51
4.3g Notifikasi Jalur Tidak Ditemukan
52
(10)
DAFTAR TABEL
Halaman
2.3.1 Perhitungan Dijkstra pada gambar 2.3.1
15
3.5a Bangunan
28
3.5b Rincian Tabel Bangunan
28
3.5c Jalan
29
3.5d Rincian Tabel Jalan
30
3.5e Network
32
3.5f Database Tabel Bangunan
34
3.5g Node
35
4.2a Hasil Iterasi Ke-1
39
4.2b Hasil Iterasi Ke-2
40
4.2c Hasil Iterasi Ke-3
40
4.2d Hasil Iter
asi
Ke-4
41
4.2e Hasil Iterasi Ke-5
42
4.2f Hasil Iterasi Ke-6
43
4.2g Hasil Iterasi Ke-7
44
(11)
ABSTRAK
Pelabuhan Belawan terletak di kota Medan, Sumatera Utara, Indonesia. Saat ini Pelabuhan
Belawan merupakan Pelabuhan tersibuk di Sumatera. Lalu lintas transportasi, logistik maupun
aktivitas perdangangan sangat ramai menuju Pelabuhan Belawan sehingga Sistem Informasi
Georafis sangat diperlukan. Sistem Informasi Geografis ini dirancang berbasis web dengan layer
peta yang direpresentasikan oleh
Mapguide
Open Source
2.2.0.5703. Digitasi peta menggunakan
Quantun GIS 1.8.0-2. Untuk
database
peta menggunakan PostgreSQL 8.4.16-1 dan Postgis
1.5.5-1. Teknik pencarian rute terpendek menggunakan algoritma Dijkstra, serta
diimplementasikan ke halaman web melalui PHP dan
Java Script.
Adapun penggunaan algoritma
Dijkstra karena algoritma ini dipastikan memiliki solusi terbaik dalam menentukan rute
terpendek karena algoritma Dijkstra akan membaca seluruh lintasan dan hanya memilih lintasan
dengan bobot terkecil sebagai rute terpendeknya. Untuk pengujian dilakukan pencarian rute
terpendek dengan melakukan input titik asal dan titik tujuan dimana untuk titik adalah adalah
Stasiun Kereta Api Medan dan titik tujuan adalah Terminal Penumpang di Pelabuhan Belawan.
Kemudian dari hasil pengujian tersebut menunjukkan bahwa sistem berhasil menampilkan rute
terpendek, nama jalan dan jarak yang ditempuh untuk menuju Terminal Penumpang di
Pelabuhan Belawan yang divisualisasikan dalam peta kota Medan. Dengan demikian
implementasi algoritma Dijkstra pada sistem informasi geografis untuk menentukan rute
terpendek menuju Pelabuhan Belawan ini layak digunakan karena berhasil menampilkan rute
terpendek menggunakan algoritma Dijkstra.
Kata Kunci
: Sistem Informasi Geografis, Algoritma Dijkstra, Rute Terpendek, Pelabuhan
Belawan.
(12)
IMPLEMENTATION OF DIJKSTRA ALGORITHM TO DETERMINE A
SHORTEST PATH TO PORT OF BELAWAN BASED ON GEOGRAPHIC
INFORMATION SYSTEM
ABSTRACT
Belawan is a port in Medan, North of Sumatra, Indonesia. Belawan is Indonesia's busiest port of
Sumatera Island. The traffic of logistics and trade activity in Belawan port is very crowded it
means people need Geographic Information System. Geographic Information System created by
web basis through map layers which is represented by Mapguide Open Source 2.2.0.5703. Map
digitation by Quantun GIS 1.8.0-2. PostgreSQL 8.4.16-1 and Postgis 1.5.5-1 is used for database
of map. Dijkstra method is used as the shortest route searching technique. It will be implemented
to web page through PHP and Java Script. The author has chosen algorithm Dijkstra because this
algorithm has a best solution to find a shortest path because it will find the path with lowest cost
as the shortest path. For the testing to find a shortest path add start point and end point which is
start point is Stasiun Kereta Api Medan and the end point is Port of Belawan. The result is the
shortest path found and represented with routing of shorthest path, name of road and the distance
to go to Port of Belawan that visualization in Map of Medan City. Then this System Information
Geographic is useful because it can representation the shortest path by using Dijkstra Algorithm.
Keywords :
Geographic Information System, Algorithm Dijkstra, Shortest Path, Port of
Belawan.
(13)
BAB I
PENDAHULUAN
1.1 Latar Belakang
Pelabuhan Belawan terletak di kota Medan, Sumatera Utara, Indonesia. Saat ini Pelabuhan
Belawan merupakan Pelabuhan tersibuk di Sumatera. Lalu lintas transportasi, logistik maupun
aktivitas perdangangan sangat ramai menuju Pelabuhan Belawan. Pelabuhan Belawan memiliki
area kerja sekitar 288.136 hektar yang terdiri dari :
1.
Terminal Belawan Lama: merupakan terminal general cargo, dengan kapasitas cargo
yang lebih kecil
2.
Citra Jetty: terminal yang melayani bongkar muat curah kering dan distribusi BBM ke
PLTU pulau Sicanang.
3.
IKD (Industri Kimia Dasar): terminal untuk kapal-kapal yang membawa bahan kimia
untuk industri kimia dasar.
4.
Ujung Baru: terminal ujung baru melayani jasa pemanduan, terminal penumpang, dan
curah kering, general cargo.
5.
Pipa Terpadu: terminal yang melayani curah cair seperti CPO
(Crude Palm Oil).
Selain di Pelabuhan Belawan, daerah Belawan sendiri memiliki beberapa tempat penting
seperti rumah sakit, wisata bahari, kantor/perusahaan yang berada di luar area Pelabuhan
Belawan. Belawan merupakan wilayah kecamatan Medan Belawan dengan Kabupaten Deli
Serdang di sebelah barat, Kabupaten Deli Serdang di timur, Medan Marelan dan Medan Labuhan
di selatan, serta Selat Malaka di utara. Saat ini jumlah penduduk di Belawan mencapai 95.835
jiwa.
Padatnya aktivitas perdagangan di Sumatera Utara baik expor/impor maupun
bongkar/muat dalam negeri, menyebabkan Pelabuhan Belawan menjadi pusat kegiatan ekonomi
(14)
terbesar di Sumatera Utara. Saat ini, Belawan berada dalam tahap pengembangan menjadi daerah
tujuan wisata bahari karena jaraknya yang dekat dari kota Medan yaitu sekitar 27 km dari pusat
12kota Medan. Apabila wisata bahari ini terealisasi, maka lalu lintas Medan - Belawan akan
ramai. Kemacetan menuju pelabuhan Belawan juga menjadi sangat tinggi.
Sebuah sistem informasi geografis merupakan sebuah sistem yang menampilkan
data-data berupa peta suatu wilayah, dan dalam tugas akhir ini akan dikembangkan untuk mencari
lokasi tujuan di daerah Belawan dari beberapa tempat di kota Medan, serta dapat menunjukkan
rute terpendek menuju lokasi tujuan di Belawan sehingga memberikan solusi efesiensi waktu,
biaya bahan bakar dan menghindati kemacetan.
Berdasarkan hal tersebut, maka pada penelitian Tugas Akhir ini akan dibangun Sistem
Informasi Geografis berbasis web untuk memberikan informasi dalam menentukan rute
terpendek menuju Pelabuhan Belawan dengan menerapkan Algoritma Dijkstra sehingga dapat
memberikan efesiensi waktu dan biaya bagi pengguna SIG (Sistem Informasi Geografis) ini.
1.2
Rumusan Masalah
Berdasarkan latar belakang di atas, maka masalah yang dibahas dalam penelitian ini yaitu
bagaimana membangun aplikasi SIG berbasis web yang dapat memberikan informasi kepada
masyarakat tentang rute terpendek menuju tempat yang dituju di Belawan (Pelabuhan Belawan,
Rumah Sakit, wisata bahari, kantor/perusahan dan tempat penting lainnya) dengan entri point
dari beberapa tempat penting di kota Medan (Bandara Polonia, stasiun kereta api, terminal
Amplas, dan beberapa pusat perbelanjaan di kota Medan).
1.3
Batasan Masalah
(15)
1.
Daerah yang menjadi objek dalam penelitian ini adalah Pelabuhan Belawan serta beberapa
tempat penting di Medan dan di sekitar Pelabuhan Belawan .
2.
Perangkat lunak yang digunakan adalah
PostGIS, Quantum GIS, PostgreSQL, Mapguide,
Macromedia Dreamweaver
.
3.
Input pada sistem ini adalah titik asal dan titik tujuan dimana titik asal berupa tempat-tempat
penting di kota Medan (bandara Polonia, stasiun kereta api, terminal Amplas, dan beberapa
tempat pusat perbelanjaan di Medan) sedangkan titik tujuan berupa beberapa tempat penting
di Belawan seperti pelabuhan, kantor bank, rumah sakit, ocean pacific. Output berupa rute
perjalanan, jalur yang harus dilewati pada peta, dan pewarnaan pada jalur yang ditempuh.
1.4
Tujuan Penelitian
Tujuan penelitian ini adalah membangun sistem informasi geografis berbasis web mengenai rute
terpendek menuju Pelabuhan Belawan serta tempat penting di Belawan yang
user friendly.
1.5
Manfaat Penelitian
Manfaat dari penelitian ini adalah memberikan informasi kepada masyarakat tentang lokasi
Pelabuhan Belawan dan tempat penting di Belawan serta memberikan rute terpendek untuk
mencapai lokasi tujuan.
1.6
Lokasi dan Waktu Penelitian
Penelitian dimulai pada awal bulan Agustus 2012 sampai dengan bulan Jamuari 2013 yang
bertempat di Pelabuhan Belawan, PT. Pelabuhan Indonesia I (Persero) Cabang Belawan serta
daerah Belawan.
(16)
1.7
Metode Penelitian
Metodologi penelitian yang digunakan dalam penulisan tugas akhir ini adalah sebagai berikut:
1.
Studi Literatur
Melakukan studi kepustakaan melalui hasil penelitian berupa buku, jurnal, dan artikel-artikel
yang relevan, serta mempelajari lebih dalam teori-teori tentang sistem informasi geografis dan
Algoritma Dijkstra
2.
Pengumpulan Data
Tahapan selanjutnya yaitu pengumpulan data yang berhubungan dengan penelitian.
3.
Analisis dan Perancangan Sistem
Melakukan analisis terhadap masalah yang ada untuk mendapatkan solusi dari masalah
tersebut dan membuat perancangan aplikasi SIG berbasis web.
4.
Pengkodean
Menulis kode program dan mengimplementasikan kedalam bahasa pemrograman
5.
Pengujian dan Pemeliharaan
Melakukan pengujian terhadap aplikasi SIG yang dihasilkan dan melakukan pemeliharaan
sistem
6.
Dokumentasi
Membuat dokumentasi dalam bentuk laporan penelitian dalam hal ini tugas akhir.
1.8
Sistematika Penulisan
Sistematika penulisan dari skripsi ini terdiri dari beberapa bagian utama sebagai berikut:
BAB I: PENDAHULUAN
Bab ini akan menjelaskan mengenai latar belakang pemilihan judul skripsi “Implementasi
Algoritman Dijkstra Untuk Pencarian Rute Terpendek Menuju Pelabuhan Belawan Berbasis
Sistem Informasi Geografis. (Studi Kasus: Pelabuhan Belawan)”, rumusan masalah, batasan
masalah, tujuan penelitian, manfaat penelitian, metode penelitian, lokasi dan waktu penelitian,
serta sistematika penulisan.
(17)
BAB II: LANDASAN TEORI
Bab ini akan membahas teori-teori yang berkaitan dengan Sistem Informasi Geografis,
Algoritma
Dijkstra
,
PostGIS, Quantum GIS, PostgreSQL, Mapguide, Javascript
dan
pemrograman PHP.
BAB III: ANALISIS DAN PERANCANGAN SISTEM
Pada bab ini berisikan langkah-langkah penelitian yang dilakukan, serta analisis terhadap fokus
permasalahan penelitian. Pada bab ini juga akan dibahas perancangan sistem yang merupakan
tindak lanjut dari tahapan analisis, termasuk didalamnya pemodelan proses dan pemodelan data
yang dibangun berdasarkan pendekatan terstruktur.
BAB IV: IMPLEMENTASI SISTEM
Bab ini berisi proses pembangunan perangkat lunak berdasarkan hasil perancangan pada bab
sebelumnya dan pengimplementasiannya ke sistem nyata.
BAB V: KESIMPULAN DAN SARAN
Bab terakhir akan memuat kesimpulan isi dari keseluruhan uraian bab-bab sebelumnya dan
saran-saran dari hasil yang diperoleh yang diharapkan dapat bermanfaat dalam pengembangan
selanjutnya untuk perbaikan di masa yang akan datang.
(18)
BAB II
LANDASAN TEORI
2.1
Sistem Informasi Geografis
2.1.1
Sistem
Sistem dapat didefinisikan sebagai sekumpulan objek, ide, yang saling terkait untuk mencapai
suatu tujuan tertentu [14]. Sistem adalah elemen-elemen yang saling terintegrasi dengan maksud
yang sama dalam mencapai suatu tujuan.
Dari definisi tersebut di atas, dapat disimpulkan bahwa sistem adalah objek, ide serta
elemen-elemen yang saling berhubungan dan berintegrasi satu sama lain untuk menyelesaikan
suatu sasaran sehingga mengeluarkan output untuk mencapai suatu tujuan tertentu.
2.1.2
Informasi
Informasi adalah data yang telah diolah menjadi bentuk yang memiliki arti bagi si penerima dan
bermanfaat bagi pengambilan keputusan saat ini atau mendatang [7]. Informasi adalah data yang
telah dikelola sehingga data tersebut menjadi berarti dan berharga bagi sang penerima data.
Dari definisi di atas dapat disimpulkan bahwa informasi adalah data-data yang telah
diolah sehingga memiliki arti dan berharga bagi sang penerima data sehingga bermanfaat bagi
pengambilan keputusan untuk saat ini ataupun mendatang.
(19)
2.1.3
Sistem Informasi
Sistem Informasi merupakan sistem yang mempunyai kemampuan untuk mengumpulkan
informasi dari semua sumber dan menggunakan berbagai media untuk menampilkan informasi
[14].
Sistem informasi dapat didefinisikan sebagai suatu sistem di dalam suatu organisasi yang
merupakan kombinasi dari orang-orang, fasilitas, teknologi, media prosedur-prosedur dan
pengendalian yang ditujukan untuk mendapatkan jalur komunikasi penting, memproses tipe
transaksi rutin tertentu, memberi sinyal kepada manajemen dan yang lainnya terhadap
kejadian-kejadian internal dan eksternal yang penting dan menyediakan suatu dasar informasi untuk
pengambilan keputusan.
2.1.4
Geografi
Menurut Erastothenes geografi berasal dari kata geographica yang berarti penulisan atau
penggambaran mengenai bumi. Geografi tidak hanya menjawab apa dan dimana yang ada di atas
muka bumi, tapi juga tempat lainnya, kadang diartikan dengan lokasi pada ruang.
2.1.5
Sistem Informasi Geografis
Sistem Informasi Geografis atau
Geographic Information System (GIS)
merupakan sistem
komputer yang digunakan untuk memasukkan, menyimpan, memeriksa, mengintegrasikan,
memanipulasi, menganalisis, dan menampilkan data-data berhubungan dengan posisi-posisinya
di muka bumi (Prahasta, 2009) [14]. Sedangkan yang dimaksud dengan Sistem Informasi
Geografis, yaitu pemasukan, manajemen data (penyimpanan data dan pemanggilan kembali),
pengolahan data analis, serta pengembangan produk dan pencetakan (Aronoff, 1989) [3].
(20)
2.1.5.1
Subsistem Sistem Informasi Geografis
Sistem Informasi Geografis dapat diuraikan menjadi beberapa subsistem sebagai berikut:
a.
Data Input
Bertugas mengumpulkan, mempersiapkan, dan menyimpan data spasial dan atributnya dari
berbagai sumber. Subsistem ini pula yang bertanggungjawab dalam mengkonversikan atau
mentransformasikan format-format yang digunakan oleh perangkat SIG.
b.
Data Output
Bertugas menampilkan atau menghasilkan keluaran seluruh atau sebagian basis data spasial
baik dalam bentuk
softcopy
maupun
hardcopy
seperti halnya tabel, grafik,
report,
peta, dan
sebagainya.
c.
Data Management
Mengorganisasikan baik data spasial maupun tabel-tabel atribut terkait ke dalam sebuah
sistem basis data sehingga mudah dipanggil kembali, diupdate dan diedit.
d.
Data
Manipulation
dan
Analysis
Menentukan informasi-informasi yang dapat dihasilkan oleh SIG. Serta melakukan
manipulasi dalam penggunaan fungsi-fungsi dan operator logika untuk menghasilkan
informasi yang diharapkan.
Gambar 2.1.5.1: Ilustrasi Subsistem SIG
Sumber (Eddy P. 2009. Sistem Informasi Geografis Konsep-Konsep Dasar, Informatika,
Bandung.)
Data Manipulation & Analysis
SIG
Data
Management
Data
Input
Data
Output
(21)
2.1.5.2
Komponen Sistem Informasi Geografis
Secara umum SIG bekerja berdasarkan integrasi 5 Komponen, yaitu:
Hardware
,
software
, data,
manusia dan metode.
a.
Hardware
(perangkat keras)
SIG membutuhkan
hardware
atau perangkat komputer yang memiliki spesifikasi lebih tinggi
dibandingkan dengan sistem informasi lainnya untuk menjalankan
software-software
SIG,
seperti kapasitas Memori
(RAM)
,
Hard disk
, Prosesor serta
VGA Card
. Hal tersebut
disebabkan karena data-data yang digunakan dalam SIG baik data vektor maupun data raster
penyimpanannya membutuhkan ruang yang besar dan dalam proses analisanya
membutuhkan memori yang besar dan prosesor yang cepat.
b.
Software
(perangkat lunak)
Sebuah
software
SIG harus menyediakan fungsi dan
tools
yang mampu melakukan
penyimpanan data, analisis dan menampilkan informasi geografis. Dengan demikian elemen
yang harus terdapat dalam komponen software SIG adalah:
•
Tools
untuk melakukan input dan transformasi data geografis
•
Sistem manajemen basis data
•
Tool
yang mendukung
query
geografis, analisis dan visualisasi
•
Graphical User Interface
(GUI) untuk memudahkan akses pada
tool
geografi
c.
Data
Hal yang merupakan komponen penting dalam SIG adalah data. Secara dasar SIG bekerja
dengan dua tipe model data geografis yaitu model data vektor dan model data raster.
•
Data Spasial
Model data ini terdiri dari gambaran nyata suatu wilayah yang terdapat di permukaan
bumi, biasanya ditampilkan dalam bentuk peta, grafik dalam format digital dan disimpan
dalam bentuk koordinat vektor (x,y) atau dalam bentuk image (
raster
) yang memiliki
nilai tertentu.
(22)
Gambar 2.1.5.2: Pelabuhan Belawan
Sumber
•
Data Non Spasial (
Atribute
)
Data non spasial adalah data berbentuk tabel dimana tabel tersebut berisi informasi-
informasi yang dimiliki oleh objek dalam data spasial. Data tersebut berbentuk data
tabular yang saling terintegrasi dengan data spasial yang ada
d.
Manusia
Teknologi SIG tidaklah menjadi bermanfaat tanpa manusia yang mengelola sistem dan
membangun perencanaan yang dapat diaplikasikan sesuai kondisi dunia nyata. Sama seperti
pada Sistem Informasi lain, pemakai SIG pun memiliki tingkatan tertentu dari tingkat
spesialis teknis yang mendesain dan memelihara sistem sampai pada pengguna yang
menggunakan SIG untuk menolong pekerjaan mereka sehari-hari.
e.
Metode
SIG yang baik memiliki keserasian antara rencana desain yang baik dan aturan dunia nyata,
dimana metode, model dan implementasi akan berbeda-beda untuk setiap permasalahan.
(23)
2.2
Peta
Peta adalah suatu alat peraga untuk menyampaikan suatu ide berupa sebuah gambar mengenai
tinggi rendahnya suatu daerah (Topografi), penyebaran penduduk jaringan jalan dan hal lainnya
yang berhubungan dengan kedudukan dalam ruang [14].
2.2.1
Proyeksi Peta
Proyeksi Peta adalah prosedur matematis yang memungkinkan hasil pengukuran yang dilakukan
di permukaan bumi fisis bisa digambarkan diatas bidang datar (peta). Karena permukaan bumi
fisis tidak teratur maka akan sulit untuk melakukan perhitungan-perhitungan langsung dari
pengukuran. Untuk itu diperlukan pendekatan secara matematis (model) dari bumi fisis
tersebut[11].
Gambar 2.2.1a
Proyeksi Peta dari Permukaan Bumi ke Bidang Datar
Sumber (Ira Mutiara. 2004. Pengukuran dan Pemetaan Kota, Surabaya.)
Proyeksi peta terdiri atas 3 jenis yaitu :
a.
Proyeksi Azimuthal
Bidang proyeksi yang digunakan adalah bidang datar. Sumbu simetri dari proyeksi ini adalah
garis yang melalui pusat bumi dan tegak lurus terhadap bidang proyeksi.
(24)
Bidang proyeksi yang digunakan adalah kerucut. Sumbu simetri dari proyeksi ini adalah
sumbu dari kerucut yang melalui pusat bumi.
c.
Proyeksi Silinder (Cylindrical)
Bidang proyeksi yang digunakan adalah silinder. Sumbu simetri dari proyeksi ini adalah
sumbu dari silinder yang melalui pusat bumi.
Gambar 2.2.1b
Jenis Proyeksi Peta
Sumber (Ira Mutiara. 2004. Pengukuran dan Pemetaan Kota, Surabaya.)
2.2.2
Proyeksi Universal Transverse Mercator (UTM)
Proyeksi UTM dibuat oleh US Army sekitar tahun 1940-an. Sejak saat itu proyeksi ini menjadi
standar untuk pemetaan [11]. Sifat-sifat proyeksi UTM adalah :
a.
Proyeksi ini adalah proyeksi Transverse Mercator yang memotong bola bumi pada dua buah
meridian, yang disebut dengan meridian standar. Meridian pada pusat zone disebut sebagai
meridian tengah.
b.
Daerah di antara dua meridian ini disebut zone. Lebar zone adalah 6 sehingga bola bumi
dibagi menjadi 60 zone.
(25)
Wilayah Indonesia terbagi dalam 9 zone UTM, dimulai dari meridian 90° BT sampai
meridian 144° BT dengan batas lintang 11° LS sampai 6° LU. Dengan demikian, wilayah
Indonesia terdapat pada zone 46 sampai dengan zone 54. Pembagian Zone dapat dilihat melaui
gambar berikut :
Gambar 2.2.2a
Peta Dunia Berproyeksi UTM
Sumber (Ira Mutiara. 2004. Pengukuran dan Pemetaan Kota, Surabaya.)
Gambar 2.2.2b Peta Indonesia Berproyeksi UTM
(26)
Pada Sistem Informasi Geografis ini, peta yang digunakan adalah peta Kota Medan yang
memiliki kordinat
latitude
3
o35’ N dan l
ongitude
98
o40’ E. Yang dimaksud dengan
latitude
adalah garis lintang yang melingkari bumi ditarik dari arah barat ke timur atau sebaliknya sejajar
dengan garis khatulistiwa. Sedangkan
longitude
adalah garis bujur yang melingkari bumi ditarik
dari kutub utara hingga kutub selatan atau sebaliknya. Jika diproyeksikan ke dalam kordinat (x.y)
maka
latitude
adalah merupakan sumbu x sedangkan
longitude
merupakan sumbu y.
2.3
Algoritma Dijkstra
2.3.1
Definisi Algoritma Dijkstra
Algoritma dijkstra digunakan untuk menetukan jarak terpendek pada sebuah graf berarah.
Contoh penerapan algoritma dijkstra adalah lintasan terpendek yang menghubungkan dua
lokasi,tempat berlainan tertentu (
single-source single-destination shortest path problem
).
Algoritma ini ditemukan oleh seorang ilmuwan komputer berkebangsaan belanda yang bernama
Edsger Dijkstra. Alfred V Aho, John E Hopcroft, Jeffrey D Ullman menyimpulkan cara kerja
algoritma dijkstra adalah memakai strategi greedy dimana pada setiap langkah dipilih sisi dengan
bobot terkecil yang menghubungkan sebuah simpul yang sudah terpilih dengan simpul lain yang
belum terpilih [2]. Algoritma dijkstra membutuhkan parameter tempat asal dan tempat tujuan.
Hasil akhir algoritma ini adalah jarak terpendek dari tempat asal ke tempat tujuan beserta
rutenya.
Proses untuk mendapatkan solusi optimum jalur terpendek adalah dengan menghitung
jarak satu per satu sesuai dengan arah yang ditunjukkan oleh tiap-tiap sisi. Perhitungan dilakukan
terhadap sisi graf yang memiliki jalur awal dan jalur akhir. Contoh pada gambar di bawah ini
akan memberikan gambaran yang lebih mudah dipahami. Misalkan akan ditentukan jalur
terpendek dari graf berarah dibawah ini dengan G = (V,E) dimana masing-masing lintasan
memiliki nilai tidak negatif dan satu titik ditentukan sebagai titik awal. Masalahnya adalah
bagaimana menentukan rute terpendek dari titik awal ke setiap titik (simpul) lainnya dalam V,
dimana panjang lintasan adalah jumlah dari bobot lintasan yang dilalui.
(27)
Gambar 2.3.1: Graf
Langkah-langkah penyelesaiannya adalah sebagai berikut:
Jika titik awal S = {1}, D [2] = 10, D [3] =
∞
, D [4] = 30 dan D [5] = 100. Pada iterasi pertama
untuk loop baris (4) - (8), w = 2 dipilih sebagai simpul dengan nilai D minimum. Kemudian kami
menetapkan D [3] = min (
∞,
10 +50) = 60. D (4) dan D (5) tidak berubah, karena dapat langsung
mencapai tanpa melewati titik 2. Urutan nilai D setiap iterasi dari loop ditunjukkan pada Tabel
8.2.1.
Tabel 2.3.1: Perhitungan Dijkstra pada gambar 2.3.1
Keterangan
:
1.
G = Graph
2.
V = himpunan titik
3.
E = himpunan garis
4.
S = Simpul sumber (titik awal)
5.
D = Jarak antara simpul misalkan D[2] adalah jarak antara simpul s dan simpul 2
6.
W = simpul dengan nilai paling minimum
(28)
2.3.2
Pseudo Code Algoritma Dijkstra
procedure Dijkstra ( INPUT m: matriks, a : simpul awal )
{
Mencari Lintasan terpendek dari simpul awal a ke semua simpul lainnya. Masukan : matriks ketetanggaan (m) dari graph berbobot G dan simpul awal a Keluaran :Lintasan terpendek dari a ke semua simpul lainnya.
}
Kamus :
s: array [1. .n] of integer d: array [1. .n] of integer i: integer
Algoritma :
{ Langkah 0 (inisialisasi : ) } Traversal [1. .n]
s1 ← 0 d1 ← ma1
{ Langkah 1: } s1 ← 1
da ← ∞
{ Langkah 2,3,…,n-1 : ) } Traversal { 2..n-1 }
cari j sedemikian sehingga sj=0 dan
dj= min {d1,d2,…,dn }
sj ← 1 { simpul j sudah terpilih }
Perbaharui d, untuk i = 1,2,3,s.d.n dengan : d1 (baru) = min (lama,dj +mji }
(29)
2.3.3
Penelitian Terdahulu Algoritma Dijkstra
Berikut terdapat 7 (tujuh) penelitian terdahulu yang telah dilakukan berkaitan dengan Algoritma
Dijkstra :
1.
Perbandingan Algoritma Greedy dan Dijkstra Untuk Menentukan Lintasan Terpendek.
Lubis, Heni Syahriza [9] merupakan perbandingan cara kerja antara Algoritma Greedy
dan Dijkstra dalam menentukan rute terpendek yang paling baik. Berdasarkan
penelitiannya disimpulkan bahwa Algoritma Greedy tidak beroperasi secara menyeluruh
terhadap semua fungsi alternatif yang ada sehingga lintasan terpendek hanya diperoleh
dari vertex asal hingga vertex tujuan, sedangkan Algoritma Dijkstra beroperasi secara
menyeluruh terhadap semua alternatif fungsi yang adasehingga lintasan terpendek tidak
hanya diperoleh dari node sumber ke node tujuan saja, akan tetapi lintasan terpendek
dapat diperoleh dari semua node.
untuk mencari rute terpendek terhadap setiap fasilitas yang ada di wilayah kampus IPB
Darmaga. SIG ini bekerja dengan menginputkan titik asal dan titik tujuan dimana user
dapat memilih titik/lokasi awal yang akan ditempuhnya dan titik akhir yang ditujunya,
kemudia user juga harus menginput beberapa titik acuan yaitu misalnya fasilitas-fasilitas
apa saja yang berada disekitar jalan menuju titik tujuannya sehingga kemudian didapat
rute terpendeknya dengan output berupa peta rute terpendek, informasi jarak titik yang
dilalui, tampilan peta yang berada di sekitar titik acuan, tampilan peta fasilitas yang
diingankan.
3.
Simulasi Algoritma Dijkstra Pada Protokol
Routing Open Shortest Path First
oleh
Suherman, Eman [16]. Dalam penelitiannya Eman menjelaskan bagaimana algoritma
Dijkstra menentukan rute terpendek pada suatu topologi jaringan. Perangkat lunak yang
dibangun dapat memberikan gambaran simulasi algoritma penentuan jalur terpendek.
Dengan masukkan jumlah
hop
topologi jaringan dan biaya masing-masing rute pada rute
(30)
pada topologi jaringan yang diberikan, algoritma Dijkstra optimal menentukan rute
terpendek tiap-tiap node pada topologi jaringan tersebut.
4.
Pencarian Rute Terpendek Tempat Wisata Di Bali Dengan Menggunakan Algoritma
Dijkstra oleh Joni Erawati Dewi, Luh [8]. Bagaimana algoritma Dijkstra menemukan rute
terpendek dalam menuju tempat-tempat wisata di Bali. Algoritma Dijkstra cukup baik
digunakan pada pencarian rute terpendek dari dan menuju suatu tempat wisata di Bali.
Hasil yang diperoleh yaitu jarak terpendeknya 33.33 km dengan 9 titik jalur terpendek.
5.
Pencarian Rute Terpendek Menggunakan Algoritma Dijkstra Dan Astar (A*) Pada SIG
Berbasis Web Untuk Pemetaan Pariwisata Kota Sawahlunto oleh Okta Pugas, Diana [13].
Secara umum hasil pengujian pencarian rute terpendek antar objek wisata di Kota
Sawahlunto dengan menggunakan algoritma Dijkstra dan A Star menghasilkan rute yang
sama pada 5 kali
sample
pengujian. Namun terdapat perbedaan waktu proses pencarian
rute terpendek antara algoritma Dijkstra dan A star. Algoritma A star memperoleh rute
terpendek dengan waktu pencarian yang relatif lebih cepat daripada algoritma Dijkstra.
6.
Perbandingan Algoritma Dijkstra, Bellman-Ford, dan Floyd-Warshall Untuk Mencari
Rute Terpendek oleh Muliawatik Susani, Indriyani [10]. Disimpulkan bahwa dalam
persoalan lintasan terpendek algoritma Dijkstra lebih efisien dibandingkan algoritma
Bellman-Ford dan algoritma Floyd-Warshall jika dilihat dari sisi
running time
.
7.
Perbandingan Algoritma Dijkstra dan Algoritma Ant Colony dalam Penentuan Jalur
Terpendek oleh Ferdiansyah, Finsa [6]. Perbandingan algoritma koloni semutdengan
Dijkstra menghasilkan jarak ter-pendek yang sama baik untuk rute jarakdekat, jarak
menengah, maupun jarak jauh. Namun Algoritma koloni semut membutuhkan waktu
rata-rata 16,326 detik untukmendapatkan jarak terpendek daripada algoritma Dijkstra
yaitu 0,036 detik karena parameter yang digunakan Ant Colony lebih banyak
dibandingkandengan Dijkstra.
(31)
Berdasarkan penelitian terdahulu di atas, dapat diambil kelemahan dan kekurangan dari
algortima Dijkstra dibandingkan dengan algoritma lainnya sebagai berikut :
1.
Kelebihan Algoritma Dijkstra
Algoritma Dijkstra lebih cepat dalam mengeksekusi algoritmanya daripada algoritma
Bellman-Ford, Algoritma Floyd-Warshall dan Algoritma
Ant Colony
. Sehingga waktu
yang dibutuhkan untuk menemukan rute terpendek lebih cepat. Selain itu algortima
dijkstra beroperasi secara menyeluruh terhadap semua alternative fungsi yang ada
sehingga lintasan terpendek tidak hanya diperoleh dari node awal dan akhir saja tetapi
dapat diperoleh dari semua node yang ada.
2.
Kekurangan Algoritma Dijkstra
Algoritma Dijkstra tidak dapat menyelesaikan masalah lintasan terpendek dengan kasus
graf yang berbobot negatif.
(32)
BAB III
ANALISIS DAN PERANCANGAN SISTEM
3.1
Analisis Sistem
Analisis sistem adalah suatu tahapan berupa proses yang dilakukan sistem untuk menguraikan
suatu sistem informasi yang utuh ke dalam bagian – bagian komponennya dalam
mengidentifikasi masalah dan hambatan yang terjadi dalam sistem sehingga ditemukan solusi
untuk memperbaiki masalah dan hambatan yang timbul.
3.1.1
Analisis Masalah
Sebuah hal yang ironis bahwa saat ini informasi geografis mengenai Pelabuhan Belawan masih
kurang. Padahal Pelabuhan Belawan merupakan pelabuhan tersibuk di Sumatera Utara dan
merupakan pintu gerbang perekonomian kota Medan dan Sumatera Utara. Tidak hanya itu,
Belawan saat ini sedang melakukan pengembangan potensi wisata sehingga minimnya informasi
geografis untuk Belawan akan berdampak kurangnya pemasukan daerah.
Untuk membuat Pelabuhan Belawan serta daerah wisata di Belawan banyak diketahui
masyarakat, dirancang system informasi geografis yang dapat menampilkan rute terpendek
menuju tempat yang diinginkan di Belawan ataupun sebaliknya. Dan untuk lebih memudahkan
calon wisatawan dalam mengaksesnya, SIG tersebut dapat dirancang dengan berbasis web.
Dalam mengidentifikasi masalah tersebut dapat digunakan Diagram Ishikawa. Diagram
Ishikawa sering juga disebut Diagram
Fishbone
(tulang ikan) karena secara kasat mata digaram
ini menyerupai tulang ikan. Diagram Ishikawa merupakan suatu alat visual untuk
mengidentifikasi, mengeksplorasi, dan secara grafik menggambarkan secara detail semua
penyebab yang berhubungan dengan suatu permasalahan. Diagram ini umumnya digunakan pada
(33)
tahap mengidentifikasi permasalahan dan menentukan penyebab dari munculnya permasalahan
tersebut.
Analisis dan identifikasi masalah yang ada pada pembangunan Sistem Informasi
Geografis ini dapat dilihat melalui diagram Ishikawa di bawah ini :
Gambar 3.1.1 Diagram Ishikawa Untuk Analisis Masalah
3.1.2
Analisis dan Perancangan SIG
Aplikasi ini nantinya akan menampilkan peta digital berbasis web dan dapat mencari rute
terpendek antara titik awal dan titik akhir yang diinginkan user dengan menampilkan gambar
rute, nama jalan apa saja yang harus dilewati, dan panjang rute yang ditempuh. Rute terpendek
pada aplikasi ini menggunakan algoritma Dijkstra. Di bawah ini terdapat gambaran proses
pembuatan sistem untuk memudahkan pemahaman mengenai aplikasi yang akan di bangun.
(34)
Gambar 3.1.2 Gambaran Umum Perancangan SIG
Dari gambar di atas dapat dijelaskan bahwa terdapat 2 (dua) komponen utama dalam
pembuatan SIG ini yaitu data atribut dan data spasial. Adapun data atribut dalam SIG ini adalah
informasi yang dapat berupa huruf, angka, dan karakter khusus, sedangkan untuk data spasial
adalah merupakan peta Kota Medan hingga Belawan yang meliputi jaringan jalan dan
objek-objek yang terdapat dalam lingkungan kota Medan.
Selanjutnya dilakukan proses digitasi oleh kedua jenis data tersebut sehingga diperoleh
peta digital dengan penyimpanan datanya
postgresql
yang kemudian divisualisasikan ke dalam
halaman
web
sehingga dapat digunakan untuk mencari rute terpendeknya dengan algoritma
Dijkstra.
3.2 Analisis Kebutuhan
3.2.1
Analisis Kebutuhan Fungsional
Kebutuhan fungsional merupakan segala sesuatu yang harus dimiliki dan dikerjakan oleh sistem.
Adapun kebutuhan fungsional pada perancangan system ini adalah sebagai berikut :
(35)
a.
Memiliki database peta (jalan, bangunan. Network dan node)
b.
Menampilkan peta digital dengan menyediakan
tools map control
yang dapat dipilih sesuai
dengan kebutuhan pengguna.
c.
Menampilkan rute terpendek yang dapat dilalui, dalam pencarian rute terpendek
menggunakan metode Dijkstra.
d.
Menampilkan informasi jarak yang ditempuh serta informasi nama jalan yang harus dilalui.
3.2.2
Analisis Kebutuhan Non Fungsional
Kebutuhan non fungsional merupakan apa saja yang harus dilakukan sistem agar sistem dapat
menyajikan yang terbaik dengan tingkat keamanan yang baik serta tidak ada penggunaan biaya
yang terlalu besar ataupun terlalu kecil. Dalam perancangan sistem ini memiliki kebutuhan non
fungsional sebagai berikut :
a.
Membuthkan tempat penyimpanan
(storage)
yang cukum untuk dapat menampilkan peta.
b.
Penggunaan biaya tambahan harus dihindari
3.3
Pemodelan Sistem
3.3.1
Model Proses DFD (
Data Flow Diagram)
DFD atau
Data Flow Diagram
adalah representasi grafik dari sebuah sistem. DFD
menggambarkan komponen sebuah sistem, aliran-aliran data di mana
komponen-komponen tersebut, dan asal, tujuan, dan penyimpanan dari data tersebut.
3.3.1.1
DFD (
Data Flow Diagram)
Level 0
Data flow diagram level 0 memuat proses - proses yang ada di sistem, yaitu proses entri data,
proses pilih posisi awal, proses laporan jarak terpendek.
(36)
Gambar 3.3.1.1 DFD Level 0
Penjelasan DFD Level 0 pencarian rute terpendek menuju Pelabuhan Belawan adalah
sebagai berikut :
1.
Admin
Admin melakukan input data peta dan tiap jalan di kota Medan hingga Belawan yaitu
berupa data jalan, data bangunan dan data network.
2.
User
User melakukan pencarian rute terpendek menuju Pelabuhan Belawan dengan melakukan
input titik awal dan titik akhir.
Setelah data peta diinputkan oleh admin , maka program akan bekerja mencari rute
terpendek sesuai dengan titik awal dan titik akhir yang telah diinput oleh user. Sehingga
dihasilkan
output
berupa informasi rute terpendek kepada user.
3.3.1.2
DFD (
Data Flow Diagram)
Level 1
Pada DFD Level 1 dapat menjelaskan lebih rinci lagi terhadap DFD Level 0. Dimana pada DFD
level 1 memuat proses pengolahan peta, serta proses agoritma dijkstra dalam menentukan rute
terpendek.
(37)
Gambar 3.3.1.2 DFD Level 1
Proses pengisian data dilakukan oleh admin dan user dimana admin melakukan
penginputan /
entry
data peta sedangkan user menginputkan titik awal dan titik akhir. Pada
proses
dijkstra
akan diambil data tersebut untuk dilakukan perhitungan sehingga dapat
menghasilkan rute terpendek yang akan diinformasikan kepada user.
3.3.1.3
DFD (
Data Flow Diagram)
Level 2 Proses 1
Pada DFD Level 2 Proses 1 di atas menjelaskan kegiatan penginputan / entry data oleh admin.
Adapun data yang dientry tersebut adalah data jalan, data bangunan dan data network. Kemudian
seluruh data tersebut disimpan di dalam
database.
Pada proses
dijkstra
data-data tersebut akan
(38)
diproses kembali untuk dilakukan perhitungan sehinggan informasi rute terpendek dapat diterima
user
.
3.3.2
Model Data (
Entity Relationship Diagram)
Perancangan basis data merupakan menciptakan data yang saling terhubung dan disimpan secara
bersamaan. Adapun model database yang digunakan pasa SIG ini adalah
Relational Database
Management System.
Untuk menjelaskan hubungan antar entitas dalam sebuah system maka
dirancang ERD (
Entity Relational Diagram)
sebelum memulai untuk merancang basisdata.
(39)
3.4
Flowchart
3.4.1
Flowchart Algoritma Dijkstra Dalam Mencari Rute Terpendek
Algoritma Dijkstra digunakan untuk mencari lintasan terpendek dengan menggunakan prinsip
Greedy
yaitu menemukan solusi langkah demi langkah dengan menyatakan bobot minimum
pada setiap langkah lalu memasukkannya ke himpunan solusi. Untuk memudahkan pemahaman
dalam proses pencarian rute terpendek dengan metode algoritma Dijkstra, secara umum dapat
dilihat melalui
flowchart
berikut :
(40)
(41)
3.5 Perancangan Data Base
Adapun struktur tabel database dalam perancangan Sistem Informasi Geografis ini ada 4 tabel
yaitu bangunan, jalan, network, node yang dijabarkan dalam struktur tabel sebagai berikut :
Tabel 3.5a Bangunan
Nama Kolom
Tipe Data
Ukuran
Fungsi
Gid
Char
4
Menyatakan nomor ID nama bangunan
Jenis
Varchar
255
Menyatakan jenis bangunan
Name
Varchar
255
Menyatakan nama bangunan
the_geom
Geometry
Menyatakan geometri
no_ruas
Numeric
4
Menyatakan no ruas bangunan pada peta
Pada tabel bangunan berisi nama bangunan berjumlah 57 sebagai berikut :
Tabel 3.5b Rincian Tabel Bangunan
No
Gid
Jenis
Name
1
3
Unknown Point Feature
PULAU BELAWAN
2
7
Hospital
RUMAH SAKIT GLUGUR
3
10
Hospital
RS ROSIVA
4
16
Hospital
RS PTPN
5
21
Hospital
RSU MALAHAYATI
6
22
Hospital
RUMAH SAKIT MARTHA FRISKA
7
26
Hospital
KLINIK BERSALIN KARYA
8
28
Hospital
RSU PRINGADI
9
40
Hospital
RS MITRA MEDIKA
10
55
Hospital
RS PERMATA BUNDA
11
186
Amusement Center
PEKAN RAYA SUMUT
12
255
Unknown Point Feature
PPI BELAWAN
13
256
Bank
BNI BELAWAN
14
257
Amusement Center
PACIFIC OCEAN
15
279
School
LP3I POLITEKNIK
16
280
Lodging
SWISS BELL HOTEL
17
310
Restaurant
RM PADANG GARUDA
(42)
19
345
School
UNIVERSITAS DHARMAWANGSA
20
355
Unknown Point Feature
PT PELINDO
21
428
Shopping
PASAR IKAN GLUGUR
22
440
Stadium
GEDUNG OLAHRAGA/GOR
23
443
School
UNIVERSITAS NOMENSEN
24
457
School
UNIV SISIMANGARAJA XII
25
470
School
IAIN SUMUT
26
471
Stadium
GELANGGANG REMAJA
27
474
Lodging
GRAND ANGKASA
28
475
Lodging
EMERALD GARDEN HOTEL
29
579
Stadium
STADION HOKI KEBUN BUNGA
30
580
Stadium
STADION BOLA KEBUN BUNGA
31
587
School
SANTO THOMAS
32
597
Lodging
ARYADUTHA
33
598
Lodging
JW MARRIOT
34
736
Shopping
CENTRAL PLAZA
35
764
Lodging
SAKURA HOTEL
36
776
Hospital
RS MATERNA
37
812
Terminal
TERMINAL BUS AMPLAS
38
856
School
ITM MEDAN
39
860
Lodging
HOTEL MADANI
40
861
Lodging
HOTEL NOVOTEL
41
862
Lodging
PARDEDE HOTEL
42
864
Lodging
GRAND ANTARES
43
866
Lodging
HOTEL GARUDA CITRA
44
867
Lodging
DANAU TOBA HOTEL
45
868
Lodging
HOTEL GARUDA PLAZA
46
869
Lodging
HOTEL DHAKSINA
47
1025
Bandara
POLONIA AIRPORT (DEPAN)
48
1026
Bandara
POLONIA AIRPORT (BELAKANG)
49
1029
Cemetery
TAMAN MAKAM PAHLAWAN
50
1081
Terminal
STASIUN K A MEDAN
51
1118
Taman
TAMAN STADION TELADAN
52
1125
Unknown Point Feature
ACE HARDWARE ISTANA PLAZA
53
1126
Terminal
TERMINAL PENUMPANG
54
1127
Kantor
KANTOR PELABUHAN BELAWAN
55
1128
Kantor
BICT
56
1129
Mall
SUN PLAZA
57
1130
Mall
PLAZA MEDAN FAIR
(43)
Tabel 3.5c Jalan
Nama Kolom
Tipe Data
Ukuran
Fungsi
Gid
Char
4
Menyatakan nomor ID nama jalan
Namajalan
Varchar
250
Menyatakan nama jalan
Jenis
Varchar
250
Menyatakan jenis jalan
the_geom
Geometry
Menyatakan geometri
Id
Char
4
Menyatakan no urut
Pada tabel bangunan berisi nama jalan berjumlah 226 sebagai berikut :
Tabel 3.5d Rincian Tabel Jalan
Gid
namajalan
Jenis
gid
namajalan
jenis
1
A. Rivai
Jalan Kota
114
Krakatau
Jalan Propinsi
2
Abdullah Lubis
Jalan Propinsi
115
Letda Sujono
Jalan Propinsi
3
Adam Malik
Jalan Propinsi
116
Letjend Jamin Ginting
Jalan Propinsi
4
AH Nasution
Jalan Propinsi
117
Letjend S. Parman
Jalan Propinsi
5
Ahmad Yani
Jalan Propinsi
118
Letjend Suprapto
Jalan Kota
6
Aksara
Jalan Propinsi
119
Lorong Dermawan
Jalan Kota
7
Alumunium 5
Jalan Kota
120
Lorong Sekolah
Jalan Kota
8
Alumunium Raya
Jalan Kota
121
Lorong Sempurna
Jalan Kota
9
Aman
Jalan kota
122
M.H Thamrin
Jalan Propinsi
10
Angada
Jalan Kota
123
Madong Lubis
Jalan Kota
11
Arif Rahman Hakim
Jalan Propinsi
124
Makmur
Jalan Kota
12
Asahan
Jalan Propinsi
125
Marenda Siregar
Jalan Kota
13
Asia
Jalan Propinsi
126
Martubung
Jalan Kota
14
Asrama
Jalan Propinsi
127
Megawati
Jalan Propinsi
15
Asrama Zipur
Jalan Kota
128
Merak
Jalan Kota
16
Bakaran Batu
Jalan Propinsi
129
Merdeka
Jalan Kota
17
Balai Kota
Jalan Propinsi
130
Merpati
Jalan Kota
18
Bambu
Jalan Kota
131
Metal Raya
Jalan Kota
19
Bambu 2
Jalan Kota
132
MH Thamrin
Jalan Propinsi
20
Bandar Udara Polonia
Jalan Kota
133
MT Haryono
Jalan Kota
21
Bangka Barat
Jalan Kota
134
Mujahir
Jalan Kota
22
Bangka Timur
Jalan Kota
135
Mustang
Jalan Kota
23
Bawal
Jalan Kota
136
Ngumban Surbakti
Jalan Propinsi
24
Bawal 1
Jalan Kota
137
Nusantara
Jalan Propinsi
25
Bawal 4
Jalan Kota
138
Pahlawan
Jalan Kota
26
Bawal 5
Jalan Kota
139
Pancing
Jalan Kota
(44)
28
Beliton Timur
Jalan Kota
141
Pancing 2
Jalan Kota
29
Bengkalis
Jalan Kota
142
Pancing 4
Jalan Kota
30
Bhayangkara
Jalan Kota
143
Pancur
Jalan Kota
31
Bilal
Jalan Kota
144
Pandu
Jalan Propinsi
32
Bilal Ujung
Jalan Kota
145
Pasar
Jalan Kota
33
Boxit
Jalan KOta
146
Pasar 1
Jalan Kota
34
Brigjend Katamso
Jalan Propinsi
147
Patimura
Jalan Propinsi
35
Bukit Barisan
Jalan Kota
148
Paus
Jalan Kota
36
Bunga
Jalan Kota
149
Pelabuhan 1
Jalan Propinsi
37
Bunga Mawar
Jalan Kota
150
Pelabuhan 2
Jalan Propinsi
38
Bunga Teratai
Jalan Kota
151
Pelabuhan 3
Jalan Propinsi
39
Cemara
Jalan Propinsi
152
Pelangi
Jalan Kota
40
Ciamis
Jalan Kota
153
Pelita
Jalan Kota
41
Cianjur
Jalan Kota
154
Pelita 1
Jalan Kota
42
Cibadak
Jalan Kota
155
Pembangunan
Jalan Kota
43
Cibatu Timur
Jalan Kota
156
Pemuda
Jalan Propinsi
44
Cicalengka
Jalan Kota
157
Pengadilan
Jalan Propinsi
45
Cikampek
Jalan Kota
158
Perhatian
Jalan Kota
46
Cilacap Barat
Jalan Kota
159
Perhubungan Udara
Jalan Kota
47
Cilacap Timur
Jalan Kota
160
Perintis Kemerdekaan
Jalan Propinsi
48
Ciledug
Jalan Kota
161
Perjuangan
Jalan Kota
49
Ciliwung
Jalan Kota
162
Pertahanan
Jalan Kota
50
Cimahi
Jalan Kota
163
Pertempuan
Jalan Propinsi
51
Cimanuk
Jalan Kota
164
Perwira
Jalan Kota
52
Cipanas
Jalan Kota
165
PKO
Jalan Kota
53
Cipto
Jalan Kota
166
Platina 1
Jalan Kota
54
Cirebon
Jalan Propinsi
167
Prof H.M Yamin
Jalan Propinsi
55
Cisadane
Jalan Kota
168
Pukat 5
Jalan Kota
56
Citanduy
Jalan Kota
169
Pulang Parang
Jalan Kota
57
Citarum
Jalan Kota
170
Pulau Bayu
Jalan Kota
58
Danau Singkarak
Jalan Propinsi
171
Pulau Jawa
Jalan Kota
59
Darusalam
Jalan Kota
172
Pulau Krakatau
Jalan Kota
60
Deli
Jalan Kota
173
Pulau Parang
Jalan Kota
61
Diponegoro
Jalan Propinsi
174
Pulau Tarakan
Jalan Kota
62
Djamin Ginting
Jalan Propinsi
175
Purwosari
Jalan Kota
63
Doktor Mansyur
Jalan Propinsi
176
Putri Hijau
Jalan Propinsi
64
Dosomuko
Jalan Kota
177
Putri Merak Jingga
Jalan Propinsi
65
Flamboyan
Jalan Kota
178
R.W. Mongonsidi
Jalan Kota
66
Gagak Hitam
Jalan Propinsi
179
Rajawali
Jalan Kota
67
Gaharu
Jalan Propinsi
180
Raya Pelabuhan
Jalan Propinsi
68
Gajah Mada
Jalan Propinsi
181
Raya Sunggal
Jalan Kota
69
Gaperta
Jalan Propinsi
182
Riau
Jalan Kota
70
Garuda
Jalan Kota
183
Rokan
Jalan Kota
(45)
72
GB Yosua
Jalan Kota
185
S. Parman
Jalan Propinsi
73
Gedung Arca
Jalan Kota
186
S. Parman
Jalan Propinsi
74
Gereja
Jalan Propinsi
187
Sakti Lubis
Jalan Kota
75
Gg. Bahagia
Gang
188
Saudara
Jalan Kota
76
Gg. Cempaka
Gang
189
Sei Batang Hari
Jalan Propinsi
77
Gg. Mesjid
Gang
190
Sei Kera
Jalan Kota
78
Gg. Puskesmas
Gang
191
Sekip
Jalan Propinsi
79
Glugur
Jalan Propinsi
192
Selat Laut
Jalan Kota
80
Gudang
Jalan Propinsi
193
Selebes
Jalan Kota
81
Gunung Karakatau
Jalan Kota
194
Senian
Jalan Kota
82
Guru Patimpus
Jalan Propinsi
195
Sentosa
Jalan Kota
83
H.M. Yamin
Jalan Propinsi
196
Serdang
Jalan Kota
84
Hasanudin
Jalan Propinsi
197
Serma Hanafiah
Jalan Kota
85
Hayam Wuruk
Jalan Kota
198
Setia Budi
Jalan Propinsi
86
Hiu
Jalan Kota
199
Sido Luhur
Jalan Kota
87
HM Jhoni
Jalan Kota
200
Sidorukun
Jalan Kota
88
Imam Bonjol
Jalan Kota
201
Simpang Paya Rumput
Jalan Kota
89
Indragiri
Jalan Kota
202
Sisingamangaraja
Jalan Propinsi
90
Indrapura
Jalan Kota
203
Stasiun
Jalan Propinsi
91
Indrapura 2
Jalan Kota
204
Stasiun Kereta Api
Jalan Propinsi
92
Industri Estate
Jalan Kota
205
Sudirman
Jalan Propinsi
93
Irian Barat
Jalan Propinsi
206
Sulawesi
Jalan Propinsi
94
Istiqomah
Jalan Kota
207
Sumatera
Jalan Propinsi
95
Jawa
Jalan Kota
208
Suratman
Jalan Kota
96
Jemadi
Jalan Kota
209
Sutomo
Jalan Propinsi
97
Juanda
Jalan Propinsi
210
Sutomo Ujung
Jalan Propinsi
98
Juanda 1
Jalan Kota
211
Sutrisno
Jalan Propinsi
99
Juanda Baru
Jalan Propinsi
212
Syah Budin Yatim
Jalan Kota
100
Kapten Maulana Lubis
Jalan Propinsi
213
Syukur
Jalan Kota
101
Kapten Muslim
Jalan Propinsi
214
T. Amir Hamzah
Jalan Propinsi
102
Kapten Sumarsono
Jalan Propinsi
215
Taman Makam Pahlawan
Jalan Kota
103
Karo
Jalan Kota
216
Temenung
Jalan Kota
104
Karya
Jalan Propinsi
217
Tenggiri
Jalan Kota
105
Karya Selangun
Jalan Propinsi
218
Titi Papan
Jalan Kota
106
Kasuari
Jalan Kota
219
Tongkol
Jalan Kota
107
Kayu Putih
Jalan Kota
220
Tritura
Jalan Propinsi
108
KCC Bromo
Jalan Kota
221
Ujung Baru
Jalan Propinsi
109
Kejaksaan
Jalan Propinsi
222
Veteran
Jalan Kota
110
Kenanga Raya
Jalan Kota
223
Wahidin
Jalan Kota
111
KH. Wahid Hasyim
Jalan Kota
224
Wilem Iskandar
Jalan Propinsi
112
Kolonel Bejo
Jalan Propinsi
225
Yos Sudarso
Jalan Propinsi
113
Komplek Pemuda
Jalan Kota
226
Zainul Arifin
Jalan Kota
(46)
Tabel 3.5e Network
Nama Kolom
Tipe Data
Ukuran
Fungsi
Gid
Int
4
Menyatakan nomor ID nama jalan
namajalan
varchar
250
Menyatakan nama jalan
Jenis
varchar
250
Menyatakan jenis jalan
the_geom
geometry
Menyatakan geometri
Id
Int
4
Menyatakan no urut
startpoint
geometry
Menyatakan point awal pada geometri
endpoint
geometry
Menyatakan point akhir pada geometri
shape_leng
double precision
Menyatakan rentang geometri
start_id
integer
4
Menyatakan nilai id awal
end_id
integer
4
Menyatakan nilai id akhir
Pada tabel netrwork berisi nama jalan berjumlah 696, jumlah nama jalan lebih banyak karena
nama jalan yang ada pada tabel database ditampilkan berdasarkan tiap persimpangan, maka akan
terdapat beberapa nama jalan yang sama namun memiliki start id dan end id yang berbeda.
Adapun representasi tabel network dapat dilihat pada tabel 3.5f berikut :
(47)
(48)
Tabel 3.5g Tabel Node
Nama Kolom
Tipe Data
Ukuran
Fungsi
Id
Int
4
Menyatakan nomor ID nama jalan
the_geom
Geometry
Menyatakan geometri
3.6
Perancangan Antarmuka
Antarmuka (
interface
) merupakan suatu media komunikasi antar pengguna dengan aplikasi yang
dibangun. Berikut adalah perancangan antarmuka dari aplikasi yang akan dibangun.
3.6.1
Perancangan Antarmuka Situs Pengunjung
Berikut ini adalah rancangan antarmuka pada situs pengunjung di Sistem Informasi Geografis
untuk mencari rute terpendek menuju Pelabuhan Belawan.
Gambar 3.6.1 Perancangan Antarmuka SIG Berbasis Web
HEADER
1 2 3 4 5 6 7 8 9 10
Layers
Navigasi Peta
(49)
Keterangan :
1.
Get Printable Page
2.
Measure
3.
Buffer
4.
Zoom
5.
Zoom to rectangle
6.
Zoom In
7.
Zoom Out
8.
Select Mode
9.
Pan Mode
(1)
}
function saveReply() {
if(http.readyState == 4){
var response = http.responseText; if(response == 0){
//document.location = "featureedit.php?issave=1&SESSION="+sess+"&MAPNAME="+mapn+"&SEL
ECTION="+sels;
document.getElementById('responsave').innerHTML = 'Data telah disimpan..!';
} else {
document.getElementById('responsave').innerHTML = response+'Terjadi kesalahan saat menyimpan data!';
} }
}
Kode Program Ajaxlist.js
var xmlHttp;
function getXMLHttpRequest(){ var xmlHttp=null;
try{// Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); }catch(e){
try{ // Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp; }
function showLayer(){
xmlHttp=getXMLHttpRequest(); if(xmlHttp==null){
alert("Browser anda tidak mendukung Ajax"); return;
}
var url="getLayer.php"//?SESSION=" + get_url_parameter("SESSION") + "&MAPNAME=" + get_url_parameter("MAPNAME");
xmlHttp.onreadystatechange=function(){ if (xmlHttp.readyState==4){
document.getElementById("layer").innerHTML=xmlHttp.response Text;
}else if(xmlHttp.readyState==3){
document.getElementById("layer").innerHTML="<img src='images/loader.gif' />Loading...";
} }
xmlHttp.open("GET",url,true); xmlHttp.send(null);
(2)
}
function showAttribute(){
xmlHttp=getXMLHttpRequest(); if(xmlHttp==null){
alert("Browser anda tidak mendukung Ajax"); return;
}
var url="getAttribute.php";
xmlHttp.onreadystatechange=function(){ if (xmlHttp.readyState==4){
document.getElementById("txtAttribute").innerHTML=xmlHttp.r esponseText;
}else if(xmlHttp.readyState==3){
document.getElementById("txtAttribute").innerHTML="<img src='images/loader.gif' />Loading...";
} }
xmlHttp.open("GET",url,true); xmlHttp.send(null);
}
Kode Program Thumbnailviewer.js
var thumbnailviewer={
enableTitle: false, //Should "title" attribute of link be used as description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for footer interface
defineLoading: '<img src="images/loader.gif" /> Loading Image...', //Define HTML for "loading" div
/////////////No need to edit beyond here/////////////////////////
scrollbarwidth: 16,
opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
targetlinks:[], //Array to hold links with rel="thumbnail"
createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>'+this.definefooter+'</div>')
document.write('<div id="thumbLoading">'+this.defineLoading+'</div>') this.thumbBox=document.getElementById("thumbBox")
this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image
this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched
this.standardbody=(document.compatMode=="CSS1Compat")?
document.documentElement : document.body //create reference to common "body" across doctypes
(3)
centerDiv:function(divobj){ //Centers a div element on the page var ie=document.all && !window.opera
var dom=document.getElementById
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight var
docheightcomplete=(this.standardbody.offsetHeight>this.standard
body.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objwidth=divobj.offsetWidth //width of div element var objheight=divobj.offsetHeight //height of div element
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px" divobj.style.visibility="visible"
},
showthumbBox:function(){ //Show ThumbBox div
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div this.centerDiv(this.thumbBox)
if (this.enableAnimation){ //If fading animation enabled this.currentopacity=0.1 //Starting opacity value
this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20) }
},
loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"
if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already
this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox
var imageHTML='<img src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />' //Construct HTML for shown
image
if (this.enableTitle && link.getAttribute("title")) //Use title attr of the link as description?
imageHTML+='<br />'+link.getAttribute("title")
this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown
this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself
if (this.featureImage.complete) thumbnailviewer.showthumbBox() else{
(4)
this.featureImage.onload=function(){ //When target image has completely loaded
thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world! }
}
if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
this.featureImage.src=link.getAttribute("href")
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over
} },
setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per the passed in value setting (0 to 1 and in between)
var targetobject=this.featureImage
if (typeof targetobject.style.opacity=="string") //Standard opacity syntax targetobject.style.opacity=value
else if (typeof targetobject.style.MozOpacity=="string") //Old Mozilla syntax targetobject.style.MozOpacity=value
else if (targetobject.filters && targetobject.filters[0]){ //IE syntax if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100 else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")" }
else //Non of the above, stop opacity animation this.stopanimation()
},
opacityanimation:function(){ //Gradually increase opacity function this.setimgopacity(this.currentopacity)
this.currentopacity+=0.1 if (this.currentopacity>1) this.stopanimation()
},
stopanimation:function(){
if (typeof this.opacitytimer!="undefined") clearInterval(this.opacitytimer)
},
closeit:function(){ //Close "thumbbox" div function this.stopanimation()
this.thumbBox.style.visibility="hidden" this.thumbImage.innerHTML=""
this.thumbBox.style.left="-2000px" this.thumbBox.style.top="-2000px" },
cleanup:function(){ //Clean up routine on page unload this.thumbLoading=null
(5)
this.featureImage=null this.thumbImage=null
for (var i=0; i<this.targetlinks.length; i++) this.targetlinks[i].onclick=null
this.thumbBox=null },
dotask:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype if (target.addEventListener)
target.addEventListener(tasktype, functionref, false) else if (target.attachEvent)
target.attachEvent(tasktype, functionref) },
init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail" if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if
statement
pagelinks[i].onclick=function(){
thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image return false
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement } //END FOR LOOP
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible")
thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")
} //END init() function
}
thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer thumbnailviewer.dotask(window, function(){thumbnailviewer.init()}, "load")
//Initialize script on page load
thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()}, "unload")
(6)