25

SISTEM INFORMASI GEOGRAFIS PROFIL KABUPATEN KULON PROGO

BERBASIS WEB

Oleh : Nur Akhwan (12090672)

A. PENDAHULUAN

1.1. Latar Belakang

Perkembangan teknologi khususnya internet telah menyebabkan proses

pertukaran dan penyebaran informasi dapat dilakukan dengan cepat, dan

jangkauan wilayah yang sangat luas. Teknologi website sebagai salah satu hasil

dari teknologi internet, merupakan salah satu layanan yang berkembang pesat, dan

juga digunakan oleh banyak orang saat ini. Hal ini didukung oleh perkembangan

perangkat lunak pendukung web, seperti bahasa pemrograman PHP, HTML,

Javascript, yang telah mengubah kemampuan web yang dahulu hanyalah website

statis, namun kini telah memungkinkan interaksi dinamis, antara pengguna dan

web.

Walaupun demikian, ternyata informasi yang disajikan sebuah website,

secara umum hanya menggambarkan potensi daerah yang disajikan dalam bentuk

teks dan gambar pada halaman web. Informasi lain seperti lokasi tempat wisata,

lokasi instansi pemerintah, lokasi sekolah, jalur jalan masih sangat minim dan

kurang interaktif. Alhasil pengunjung merasa jenuh untuk membaca informasi

tersebut dan sulit membayangkan keadaan sebenarnya.

Perkembangan dunia website, yaitu dengan munculnya sistem informasi

geografis (SIG) memungkinkan informasi potensi daerah dapat ditampilkan tidak

hanya dalam bentuk tekstual, namun juga secara visual yang sangat interaktif.

Penyampaian informasi secara visual ini memberikan pemahaman yang

lebihkepada pengunjung karena lebih menarik dan tidak membosankan daripada

yang hanya menampilkan teks dan gambar saja.

Integrasi teknologi SIG dan web ke dalam aplikasi sistem informasi profil

daerah, memungkinkan semua informasi yang akan ditampilkan dapat

26

divisualisasikan secara interaktif ke dalam website yang dapat diakses oleh

pengunjung di dunia, tanpa ada batasan waktu dan wilayah.

1.2. Rumusan Masalah

Berdasarkan latar belakang di atas, maka rumusan masalah dalam penelitian

ini adalah merancang sebuah media informasi yang dapat menampilkan profil

Kabupaten Kulon Progo berbasis web dengan menggunakan konsep Sistem

Informasi Geografis.

1.3. Tujuan

Tujuan dari penelitian ini adalah membangun sistem informasi profil

Kabupaten Kulon Progo yang berbasis web dengan menggunakan konsep Sistem

Informasi Geografi sehingga informasi mengenai profil Kabupaten Kulon Progo

dapat dipahami dengan mudah.

1.4. Manfaat

Manfaat yang ingin diperoleh dari penelitian ini adalah sebagai berikut :

1. Membantu masyarakat untuk memperoleh informasi tentang profil

Kabupaten Kulon Progo dengan cepat dan mudah

2. Membantu pemerintah memperkenalkan profil Kabupaten Kulon Progo

kepada masyarakat global.

3. Meningkatkan dan mengembangkan kemampuan diri dalam lingkungan

yang sesuai dengan disiplin ilmu yang dipelajari.

1.5.Batasan Masalah

Batasan masalah dalam penelitian ini adalah membanguan Sistem Informasi

Geografis dengan media website, dan menampilkan profil dan potensi setiap

kecamatan dan desa di Kabupaten Kulon Progo, dalam bentuk peta wilayah

Kabupaten Kulon Progo.

27

B. PERANCANGAN

1.1. Rancangan Tampilan Utama Halaman Web

4.1.1. Halaman awal website

Dalam halaman awal website ini menampilkan peta Sistem Informasi

Geografis Profil Kabupaten Kulon Progo. Pengguna dapat memilih layer yang

akan diaktifkan melalui menu legenda. Perintah Zoom In, Zoom Out dan Panning

berada di kolom Toolbox. Tampilan halaman utama SIG Profil Kabupaten Kulon

Progo seperti digambarkan pada gambar 4.1 berikut ini.

Logo

Kulon

Progo

Peta Profil Kabupaten Kulon Progo Powered by pMapper

Legenda

- Legenda 1

- Legenda 2

- Legenda 3

Reference Map

X : 123, Y : 123

[koordinat] Footer web

Gambar 4.1 Tampilan halaman utama SIG Profil Kabupaten Kulon Progo

link

Zoom

slider

To

ol

bo

x

PETA

26

4.1.2. Halaman web profil kecamatan

Halaman ini akan muncul jika pengguna memilih label nama kecamatan pada

legenda. Web profil kecamatan berbentuk halaman web dinamis, tanpa

menggunakan peta. Tampilan halaman web profil kecamatan dirancang dalam 2

(dua) kolom, sebelah kiri sebagai isi website, dan sebelah kanan adalah menu

website. Rancangan tampilan halaman web profil kecamatan tertera dalam gambar

4.2 di bawah ini.

Beranda | Kontak kami | Web GIS Kec. Samigaluh | Web GIS Profil Kab. Kulon Progo

Logo

Kulon Progo

Profil Kecamatan Kabupaten Kulon Progo

Berita | Galeri Foto | Profil | Potensi | Data Primer

\\

Slider banner Keterangan

banner

Selamat datang di Kec. ....

.. pencarian .. cari

Agenda Kec.

Isi agenda

Link Kecamatan Lain

Footer Website

Gambar 4.2 Rancangan tampilan halaman web profil kecamatan

4.1.3. Halaman admin

Halaman admin akan muncul jika admin berhasil login. Adapun tampilan

halaman login seperti digambarkan pada gambar 4.3. Setelah berhasil login

halaman admin akan ditampilkan dengan layout 2 kolom, sebelah kanan adalah

menu admin, dan sebelah kiri adalah isi. Rancangan layout halaman admin tertera

dalam gambar 4.4 di bawah ini.

Kec. 1 Kec. 2

27

Gambar 4.3 Rancangan layout halaman login admin

Header admin

Admin Data SIG

- Menu 1

- Menu 2

- dst

Admin Data Website

- Menu 1

- Menu 2

- Dst

Nama Menu

Footer Website

Gambar 4.4 Rancangan layout halaman admin

4.2. Diagram Arus Data

Langkah-langkah pembuatan DFD sebagai berikut:

a. Identifikasikan terlebih dahulu semua kesatuan luar (external entities) yang

terlibat di sistem, yaitu :

1. Pengunjung / User.

Setiap orang yang dikategorikan sebagai pengunjung/user adalah orang yang

menggunakan sistem informasi geografis ini dan wewenangnya hanya

melihat/membaca data.

2. Admin

Admin merupaka orang yang bertugas mengelola data sistem informasi

geografis, yaitu data attributnya.

b. Identifikasikan semua input dan output yang terlibat dengan kesatuan luar.

28

Dalam sistem informasi geografis ini, entitas admin memberikan data ke

sistem berupa data desa, kantor kecamatan, data pasar, data sekolah, data wisata,

data agenda, data berita, data galeri album, data galeri gambar, data profil

kecamatan, data potensi kecamatan, dan data puskesmas. Sedangkan data yang dia

terima adalah infomasi data desa, kantor kecamatan, data pasar, data sekolah, data

wisata, data agenda, data berita, data galeri album, data galeri gambar, data profil

kecamatan, data potensi kecamatan, dan data puskesmas. Sedangkan pengunjung

menerima informasi berupa data desa, kantor kecamatan, data pasar, data sekolah,

data wisata, data agenda, data berita, data galeri album, data galeri gambar, data

profil kecamatan, data potensi kecamatan, dan data puskesmas.

c. Diagram konteks.

Setelah melakukan analisa entitas luar yang terlibat, beserta data-data yang

terlibat dengan entitas, maka didapatkan diagram konteks sebagai berikut :

Gambar 4.5 Diagram konteks

d. Diagram Berjenjang.

Gambar 4.6 Diagram berjenjang

29

e. DFD Level 0

Gambar 4.7 DFD Level 0

30

31

f. DFD Level 1 Proses 1.0

Gambar 4.8 DFD Level 1 proses 1.0

32

g. DFD Level 1 Proses 2.0

Gambar 4.9 DFD level 1 proses 2.0

33

4.3. Langkah-Langkah Perancangan Database

Langkah-langkah merancang database pada sistem informasi geografis profil

Kabupaten Kulon Progo berbasis web dengan menggunakan tehnik ERD adalah

sebagai berikut :

1. Identifikasikan setiap entitas yang terlibat

Entitas yang terlibat dalam sistem informasi geografis profil Kabupaten

Kulon Progo adalah sebagai berikut :

a. Desa

b. Kantor_kec

c. Pasar

d. Sekolah

e. Wisata

f. Puskesmas

g. Web_agenda

h. Web_berita_kec

i. Web_galeri_album

j. Web_galeri_gambar

k. Web_profil_kec

l. Web_potensi_kec

m. Web_ref_kec

n. Web_admin

2. Identifikasikan setiap kerelasian berikut jenisnya yang terjadi di antara entitas

Relasi yang terjadi antara entitas di dalam sistem informasi geografis profil

Kabupaten Kulon Progo adalah sebagai berikut :

Tabel 4.1 Tabel relasi antar entitas

Entitas 1 Relasi Entitas 2 Kardinalitas

Web_ref_kec Mempunyai Desa One to many

Web_ref_kec Mempunyai Kantor_kec One to many

Web_ref_kec Mempunyai Pasar One to many

Web_ref_kec Mempunyai Sekolah One to many

Web_ref_kec Mempunyai Wisata One to many

Web_ref_kec Mempunyai Puskesmas One to many

Web_ref_kec Mempunyai Web_agenda One to many

Web_ref_kec Mempunyai Web_berita_kec One to many

Web_ref_kec Mempunyai Web_profil_kec One to many

Web_ref_kec Mempunyai Web_potensi_kec One to many

Web_ref_kec Mempunyai Web_galeri_album One to many

Web_galeri_album Mempunyai Web_galeri_gambar One to many

34

3. Gambarkan simbol-simbol entitas, atribut, dan kerelasian antar entitas

sedemikian sehingga simbol kerelasian dapat digambarkan dengan jelas dan

tidak saling bertabrakan.

Untuk melengkapi setiap entitas, makan diberikan atribut kepada setiap

entitas, yaitu sebagai berikut :

Tabel 4.2 Pemetaan atribut dengan entitasnya

Entity Attribut

Desa Gid, id_kec, nama, kepala_des, the_geom, pddk_l, pddk_p, pedukuhan, luas

Kantor_kec Gid, nama, id_kec, the_geom, deskripsi Pasar Gid, nama, id_kec, the_geom, deskripsi Sekolah Gid, nama, id_kec, the_geom, alamat, jml_siswa, kepsek, tipe Wisata Gid, nama, id_kec, deskripsi, the_geom, retribusi Puskesmas Gid, nama, id_kec, the_geom, deskripsi Web_agenda Id, id_kec, waktu, deskripsi, tempat Web_berita_kec Id, id_kec, judul, isi, gambar, tgl_post, pub, hits Web_galeri_album Id, id_kec, nama, tgl_post Web_galeri_gambar Id, id_album, file Web_profil_kec Id, id_kec, batas_wilayah, selayang_pandang, struktur_org,

visi_misi Web_potensi_kec Id, id_kec, nama, isi Web_ref_kec Id, nama, alamat_kantor, camat, url

Selanjutnya hasil gambar ERD adalah seperti pada gambar 4.10 berikut ini

35

Gambar 4.10 Diagram akhir Entity Relationship Diagram

4.4. Flowchart Sistem

36

4.5. Flowchart Program

4.5.1. Flowchart program halaman utama

Gambar 4.11 Flowchart Sistem

Flowchart program halaman utama

Gambar 4.12 Flowchart halaman utama program

37

4.5.2. Flowchart program halaman profil kecamatan

program halaman profil kecamatan

Gambar 4.13 Flowchart program halaman profil kecamatan

38

4.5.3. Flowchart program halaman admin data attribut peta

Gambar 4.14 Flowchart program halaman admin data atribut peta

Flowchart program halaman admin data attribut peta

Gambar 4.14 Flowchart program halaman admin data atribut peta

39

4.5.4. Flowchart program halaman kelola data agenda

Gambar 4.15 Flowchart program halaman k

4.5.5. Flowchart program halaman kelola data berita

Gambar 4.16 Flowchart program halaman kelola data berita

4.5.6. Flowchart program halaman kelola data galeri album

40

Flowchart program halaman kelola data agenda

Gambar 4.15 Flowchart program halaman kelola data agenda

Flowchart program halaman kelola data berita

Gambar 4.16 Flowchart program halaman kelola data berita

Flowchart program halaman kelola data galeri album

40

elola data agenda

Gambar 4.16 Flowchart program halaman kelola data berita

Gambar 4.17 Flowchart program halaman kelola data album gambar

4.5.7. Flowchart program halaman kelola data profil kecamatan

41

Gambar 4.17 Flowchart program halaman kelola data album gambar

program halaman kelola data profil kecamatan

41

Gambar 4.17 Flowchart program halaman kelola data album gambar

program halaman kelola data profil kecamatan

Gambar 4.18 Flowchart program halaman kelola data profil kecamatan

4.5.8. Flowchart program halaman kelola data potensi kecamatan

Gambar 4.19 Flowchart program halaman kelola data potensi kecamatan

4.6. Rancangan Halaman Input

Sebelum memasuki halaman input data atau halaman admin, admin harus melalui proses

login. Admin harus memasukkan username dan password yang sesuai, agar bisa masuk ke

sistem. Usename dan password yang dimasukkan admin bertipe teks dengan

42

Gambar 4.18 Flowchart program halaman kelola data profil kecamatan

Flowchart program halaman kelola data potensi kecamatan

Gambar 4.19 Flowchart program halaman kelola data potensi kecamatan

Halaman Input

Sebelum memasuki halaman input data atau halaman admin, admin harus melalui proses

login. Admin harus memasukkan username dan password yang sesuai, agar bisa masuk ke

sistem. Usename dan password yang dimasukkan admin bertipe teks dengan

42

Gambar 4.18 Flowchart program halaman kelola data profil kecamatan

Flowchart program halaman kelola data potensi kecamatan

Gambar 4.19 Flowchart program halaman kelola data potensi kecamatan

Sebelum memasuki halaman input data atau halaman admin, admin harus melalui proses

login. Admin harus memasukkan username dan password yang sesuai, agar bisa masuk ke

sistem. Usename dan password yang dimasukkan admin bertipe teks dengan panjang

43

43

maksimal 20 karakter. Adapun tampilan form login adalah seperti pada gambar 4.21, berikut

ini.

Gambar 4.20 Form login

a. Rancangan form input data desa

Setelah berhasil login, maka akan ditampilkan halaman beranda admin. Untuk mengelola

data desa, admin dapat memilih menu “Desa”. Adapun desain rancangan form input data desa

adalah sebagaimana gambar 4.22.

Gambar 4.21 Form edit data desa

b. Rancangan form input data kantor kecamatan

Form ini digunakan untuk memberikan input data atribut kantor kecamatan ke database.

Data yang diinputkan antara lain nama dengan tipe data text maksimal 50 karakter, dan

deskripsi yang bertipe data text dengan panjang maksimal 250 karakter. Rancangan formnya

adalah seperti gambar 4.23 berikut ini.

Gambar 4.22 Form edit data kantor kecamatan

c. Rancangan form edit data puskesmas

44

44

Data puskesmas akan diinputkan melalui form ini. Data yang diinputkan antara lain

nama dengan tipe data text maksimal 50 karakter, dan deskripsi yang bertipe data text dengan

panjang maksimal 250 karakter. Rancangan formnya adalah seperti gambar 4.24 berikut ini.

Gambar 4.23 Form edit data puskemas

d. Rancangan form edit data pasar

Form ini digunakan untuk memberikan input data atribut pasar. Data yang diinputkan

antara lain nama dengan tipe data text maksimal 50 karakter, dan deskripsi yang bertipe data

text dengan panjang maksimal 250 karakter. Rancangan formnya adalah seperti gambar 4.25

berikut ini.

Gambar 4.24 Form edit data pasar

e. Rancangan form edit data sekolah

Data atribut sekolah yang ada di suatu kecamatan akan diedit melalui form ini. Data yang

diinputkan antara lain nama dengan tipe data text maksimal 50 karakter, kepala sekolah, tipe

data teks maksimal 50 karakter, alamat tipe data teks dengan panjang maksimal 150 karakter,

jumlah siswa dengan tipe data integer dengan maksimal panjang karakter yang diinputkan

sebanyak 6 karakter dan tingkat sekolah yang akan diinputkan dengan menggunakan

combobox yang berisi 3 pilihan, yaitu “SMP”, “SMA”, dan “SMK”. Adapun rancangan

tampilan form edit data sekolah adalah seperti gambar 4.26 berikut ini.

45

45

Gambar 4.25 Form edit data sekolah

f. Rancangan form edit data wisata

Form ini digunakan untuk men-edit data atribut tempat wisata. Data yang diinputkan

antara lain nama dengan tipe data text maksimal 50 karakter, deskripsi yang bertipe data text

dengan panjang maksimal 250 karakter serta tarip retribusi dengan tipe data teks maksimal 20

karakter.. Rancangan formnya adalah seperti gambar 4.27 berikut ini.

Gambar 4.26 Form edit data tempat wisata

g. Rancangan form tambah/edit data agenda

Data agenda akan ditambahkan atau diedit melalui form ini. Data yang diinputkan antara

lain tanggal, deskripsi dan tempat Adapun rancangan tampilan form edit data sekolah adalah

seperti gambar 4.28 berikut ini.

Gambar 4.27 Form edit data agenda

h. Rancangan form tambah/edit data berita

46

46

Form ini digunakan untuk menambahkan atau mengubah data berita. Data yang

diinputkan antara lain judul berita dengan tipe data teks maksimal 50 karakter, file gambar

dengan tipe data file maksimal 2 MB, dan isi berita dengan tipe data teks maksimal 20000

karakter. Rancangan formnya adalah seperti gambar 4.29 berikut ini.

Gambar 4.28 Form tambah/edit berita

i. Rancangan form tambah/edit data galeri album

Form ini digunakan untuk menambahkan atau mengubah data album foto. Data yang

diinputkan hanya nama album dengan tipe data teks maksimal 50 karakter. Rancangan

formnya adalah seperti gambar 4.30 berikut ini.

Gambar 4.29 Form tambah/edit album

j. Rancangan form input data gambar galeri

Form ini digunakan untuk menambahkan foto di dalam suatu album foto. Data yang

diinputkan berupa file gambar dengan maksimal 2 MB. Rancangan formnya adalah seperti

gambar 4.31 berikut ini.

Gambar 4.30 Form input data gambar galeri

k. Rancangan form input/edit data potensi kecamatan

47

47

Form ini digunakan untuk menambahkan atau mengubah data potensi yang dimiliki

sebuah kecamatan. Data yang diinputkan adalah nama potensi dan deskripsinya Rancangan

formnya adalah seperti gambar 4.32 berikut ini.

Gambar 4.31 Form tambah/edit potensi kecamatan

l. Rancangan form edit data profil kecamatan

Form ini digunakan untuk mengubah data profil suatu kecamatan. Data yang diinputkan

adalah batas wilayah, selayang pandang, struktur organisasi serta visi misi. Rancangan

formnya adalah seperti gambar 4.33 berikut ini.

Gambar 4.32 Form tambah/edit profil kecamatan