Perancangan Web

3.3 Perancangan Web

Pada bagian ini akan dibahas mengenai proses perancangan aplikasi web dengan mempertimbangkan kebutuhan-kebutuhan atau spesifikasi yang telah ditetapkan pada tahap analisis sistem. Dalam perancangan aplikasi ini dibagi menjadi dua bagian yaitu gambaran awal aplikasi peta dan gambaran awal aplikasi web.

3.3.1 Gambaran Aplikasi Peta

Gambaran aplikasi dibagi menjadi dua buah yaitu gambaran visualisasi data, gambaran query peta.

a. Gambaran Visualisasi Data

Gambaran ini berfungsi untuk memvisualisasikan peta digital dari kontur kota, profil kota, jalan, sungai, potensi pertanian, potensi pariwisata, potensi perindustrian beserta atribut-atribut peta seperti peta referensi, navigasi, dan legenda. Modul ini dibangun dengan menggunakan aplikasi Chameleon sebagai media untuk mengeksekusi peta sehingga dapat tampil pada media website . Chameleon adalah framework yang dapat digunakan dengan baik pada webGis. Dapat digunakan secara berdampingan atau full integrated dengan dengan Mapserver berdasarkan spesifikasi yang ditentukan oleh Open Geospatial Consortium (OGC). Fungsi Chameleon sebagai sebuah produk dari Open Source yang dibangun dengan bahasa pemprograman PHP. Chameleon memberikan akses yang sederhana ke beberapa fitur yang hanya bisa diakses dalam MapScript dimana telah disediakan sebuah script yang telah jadi sebagai komponen yang dapat di gunakan. Dengan Chameleon seorang yang bukan programmer memungkinkan untuk memasukan komponen pada applikasi web SIG.

Alur proses ini dapat dilihat pada gambar 3.1 :

Data Base Peta

Gambar 3.1 Alur proses visualisasi data Peta

b. Gambaran Query Peta Modul ini berfungsi untuk menangani proses query yang dilakukan pengguna pada saat mengklik salah satu titik yang ada ada muka peta. Hasil dari query ini adalah berupa informasi mengenai titik, garis atau poligon pada peta tersebut. Informasi yang ditampilkan dalam aplikasi ini meliputi informasi mengenai jalan, sungai, profil kota dan informasi potensi kota. Modul ini dibangun dengan menggunakan tool yang sudah terdapat dalam Chameleon.

Alur kerja gambaran ini dapat dilihat pada gambar 3.2 :

Query User pada peta

Data Base Peta

Gambar 3.2 Alur kerja gambaran query posisi

3.3.2 Perancangan Basis Data

Sebelum merancang basis data maka perlu dibuat terlebih dahulu data flow digram , yang menjelaskan tentang fungsi-fungsi dan alur kerja yang terdapat dalam sistem informasi tersebut secara logika. Data flow diagram akan dapat menginterpretasikan Logical Model dari suatu sistem.

Beberapa simbol yang digunakan dalam DFD antara lain:

Simbol

Nama Simbol

Keterangan

Merupakan kegiatan atau

0 pekerjaan yang dilakukan oleh orang atau mesin komputer,

Proses (Process)

Proses

dimana aliran data masuk,

ditranformasikan ke aliran data keluar.

Komponen yang berfungsi untuk

Penyimpanan

menyimpan data/file adalah fungsi

1 Data Store

Data (Data Store)

yang mentransformasikan data secara umum.

Merupakan sumber atau tujuan

Sumber data /

dari arus data yang dapat

Sumber Data

tujuan data

digambarkan secara fisik, (Entity) seseorang atau sekelompok orang

atau system lain.

Disimbolkan dengan anak panah,

Aliran Data

dimana arus data mengalir (Flowline) diantara proses, simpangan data,

kesatuan luar, kesatuan ruang.

Gambar 3.3 Simbol dalam DFD

3.3.3 Context Diagram

Context Diagram pencemaran lingkungan merupakan gambaran secara umum untuk mengidentifikasikan komponen-komponen sistem informasi yang ada Kota Blitar secara terinci.

Pada sistem informasi geografis profil darah Kota Blitar, diagram arus datanya dapat dilihat pada gambar 3.4.

input profil 1 lihat profil input peta industri

isi_tanam_modal input peta pertanian

lihat berita input peta pariwisata

tulis komentar input berita

SIG PROFIL

input fasilitas lihat peta

DAERAH

tampil peta industri tampil berita

tampil profil tampil peta pertanian tampli fasilitas tampil peta pariwisata

Admin

tampil peta fasilitas tampil peta

Pengguna

tampil profil tanam_modal

tampil komentar

tampil berita

Gambar 3.4 Contex Diagram

Pada Konteks Diagram diatas dapat dilihat bahwa proses yang terjadi dalam aplikasi SIG profil daerah Kota Blitar melibatkan dua sumber atau tujuan data yaitu pengguna, dan admin.

1. Admin Bagian admin bertugas mengelola profil, menambah peta fasilitas, menambah

peta pertanian, menambah peta periwisata, menambah peta perindustrian, dan menambah database peta.

2. Pengguna Sementara pengguna dari aplikasi ini dapat memproleh informasi tentang profil

Kota Blitar yang ditampilkan dengan memilih menu yang sudah disediakan. Menu yang disediakan meliputi profil potensi kota, berita terbaru tentang Kota Blitar, melihat peta beserta informasinya, dan memberikan komentar.

3.3.4 Data Flow Diagram (DFD)

1. DFD Level 1 Diagram alur data level 1 pada gambar 3.5 memuat proses-proses inti yang ada didalam sistem, yaitu proses administrasi, proses login, proses informasi, dan proses penampilan peta.

input profil input peta industri

Login Admin tampil profil

input berita

tampil komentar

input peta pertanian

Admin

Konfirmasi Login Admin tampil berita tanam_modal

input peta pariwisata Pengguna input fasilitas

tampil peta

tampli fasilitas

1 tampil peta fasilitas

Login

tampil peta industri

Administrasi

tampil berita tampil profil

tampil peta pertanian tampil peta pariwisata

10 Tanam modal

simpan_tanam_modal

lihat berita Lihat Peta Umum Simpan User

info_tanam_modal

lihat profil

Informasi

1 User

isi_tanam_modal

Baca Data User

lihat peta tulis komentar

Simpan Berita

2 Berita

Ambil Data Berita

3 Profil

Simpan Profil

Ambil Data Profil

Simpan Komentar

8 Komentar

Ambil Data Komentar

4 Peta Industri

Simpan Peta Industri

Ambil Data Peta Industri

Simpan Peta Pariwisata

5 Peta Pariwisata

Ambil Data Peta Pariwisata

Proses Peta Simpan Peta Pertanian

6 Peta Pertanian

Ambil Data Peta Pertanian

Simpan Peta Fasilitas

9 peta fasilitas

Ambil Data Peta Fasilitas

Gambar 3.5 DFD Level 1 Proses Peta

Dalam level 1 SIG profil Kota Blitar terdapat empat proses yang dilakukan oleh admin dan pengguna.

a. Proses 1 adalah administrator yang menangani manajemen data yang akan ditampilkan dalam website. Data-data disimpan dalam database yang ada. Admin melakukan input data yaitu data profil, data peta fasilitas, data peta industri, data peta pertanian, data peta pariwisata, dan data tentang berita terkini. Administrator memberikan laporan ke admin berupa tampilan dari data-data yang dimasukkan, kemudian melakukan penyimpanan ke tabel database .

b. Proses 2 yaitu informasi. Ini merupakan proses yang menangani semua informasi yang akan ditampilkan dalam website. Informasi tersebut diambil dari database untuk disajikan kepada pengguna yang mengakses halaman tersebut. Selain pengguna melihat semua informasi yang ada, pengguna juga dapat memberikan komentar.

c. Proses 3 yaitu login user. Proses ini digunakan untuk mengecek login user untuk mendapatkan hak akses untuk mengelola content database. Setiap kali user melakukan login, data yang dimasukkan akan dicek dengan data yang ada dalam database. Apabila data tersebut sama dengan database, maka user dapat akses untuk mengelola content database. Namun, apabila tidak sama, maka sistem akan menolak user tersebut untuk masuk kedalam sistem.

d. Proses 4 yaitu proses peta, ini merupakan proses yang menangani semua yang berhubungan dengan peta yang ditampilkan dalam website. Admin dapat d. Proses 4 yaitu proses peta, ini merupakan proses yang menangani semua yang berhubungan dengan peta yang ditampilkan dalam website. Admin dapat

2. DFD Level 2

tampil peta industri

Proses Peta Industri

Simpan Peta Industri

4 Peta Industri

input peta industri

3 Profil

tampil profil

Proses Profil

Simpan Profil

input profil

tampil peta pertanian

Proses Peta

6 Peta Pertanian

input peta pertanian

Pertanian

Simpan Peta Pertanian

tampil peta pariwisata

8 Proses Peta

Simpan Peta Pariwisata

5 Peta Pariwisata

input peta pariwisata

Pariwisata

Admin

input fasilitas

Simpan Peta Fasilitas

9 peta fasilitas

Proses Peta

tampil peta fasilitas

Fasilitas

Input Komentar

Simpan Komentar

8 Komentar

Tampil Komentar

Proses Komentar

1 User

Input User

Proses User

Simpan User

Tampil User

input_tanam_modal

10 Tanam modal

Prcs_346

simpan_tanam_modal

tampil_modal 3

2 Berita

input berita

Proses Berita

Simpan Berita

tampil berita

Gambar 3.6 DFD Level 2 SIG Proses Profil Kota

Pada DFD level 2 proses peta SIG Proses Profil Kota ini merupakan pengembangan dari proses peta yang terdapat pada DFD level 1. Disini dijelaskan lebih terperinci mengenai alus semua proses profil kota mulai dari proses berita, proses profil, proses komentar, proses user, proses peta fasilitas, proses peta industri, proses peta pertanian, dan proses peta perindustrian. Setiap proses melakukan penyimpanan ke databese.

3.3.5 Entity Relationship Diagram (ERD)

Entity Relationship Diagram (ERD) adalah sebuah diagram yang menggambarkan hubungan atau relasi antar Entity, dan setiap Entity terdiri atas satu atau lebih atribut yang mempresentasikan seluruh kondisi (fakta) dari yang kita tinjau.

Diagram relasi entitas (entity relationship diagram-ERD) seperti ditunjukkan oleh namanya, berhubungan dengan data didalam entitas dan hubungan antar entitas. Ketika pengguna dan spesialis informasi mulai untuk berkomunikasi tentang kebutuhan data untuk suatu sistem informasi, mereka akan berbicara mengenai pengumpulan field-field data yang saling berhubungan daripada field-field data individu. Kumpulan konseptual field-field data yang saling berhubungan ini disebut entitas (entities). Meskipun secara intuitif kita akan langsung tertarik untuk menganggap entitas sebagai tabel-tabel, kita tidak dapat melakukannya. Tabel merupakan hasil dari pemecahan entitas menjadi unit-unit berukuran lebih kecil yang mengkuti aturan-aturan struktur basis data. Suatu entitas dapat berubah menjadi satu Diagram relasi entitas (entity relationship diagram-ERD) seperti ditunjukkan oleh namanya, berhubungan dengan data didalam entitas dan hubungan antar entitas. Ketika pengguna dan spesialis informasi mulai untuk berkomunikasi tentang kebutuhan data untuk suatu sistem informasi, mereka akan berbicara mengenai pengumpulan field-field data yang saling berhubungan daripada field-field data individu. Kumpulan konseptual field-field data yang saling berhubungan ini disebut entitas (entities). Meskipun secara intuitif kita akan langsung tertarik untuk menganggap entitas sebagai tabel-tabel, kita tidak dapat melakukannya. Tabel merupakan hasil dari pemecahan entitas menjadi unit-unit berukuran lebih kecil yang mengkuti aturan-aturan struktur basis data. Suatu entitas dapat berubah menjadi satu

Gambar ERD Sistem Informasi Geografis untuk mengetahui profil potensi Kota Blitar keseluruhan.

mast er_produksi_pertanian

mast er_jumlah_industri

id_produksi

s erial

c har(25) mast er_pert anian id_industri

mast er_jenis_indus tri

gid3

serial

id_kelurahan

c har(25)

c har(25) nama_indus tri

c har(25) id_pert anian serial nama_produk si

id_kelurahan

char(25)

id_prod_pertanian

c har(25)

id_indus tri1

char(25)

bany ak_produksi

c har(25)

nama_indus tri

char(25)

tanggal

c har(25) nama_tanaman char(25)

the_geom

geometry

bulan

c har(25)

c har(25)

bulan

char(25)

mast er_jalan

tahun

char(25)

gid2 serial

mast er_objek_wis ata

nm_jln char(50)

gid4

s erial

the_geom geometry

nmobjek

c har(50)

nm_k elurahan

c har(50)

mast er_tanam_modal

gambar

c har(100)

kode serial

nama_inv estor char(30) mast er_f as ilit as

alamat _inv es tor char(40) gid1

the_geom

geometry

desk rips i

tex t

no_telepon char(13) id

s erial

mast er_adminis trasi

kat egori

c har(100)

kec amat an char(40) k et erangan

jumlah_modal char(14) the_geom

nm_k elura

char(20)

status char(40)

nama_kec

char(20)

ket erangan text

id_kec

smallint

maat er_user1

mast er_berita id_kategori_objek

mast er_objek

id_kel

smallint

id_us er

serial

id_berita s erial jnobjek

serial

the_geom

geometry

pass word

char(50)

char(25)

user_nam e

char(100)

id_kategori integer

email

char(100)

judul text

lev el

char(5)

is i_berita text gambat

c har(100)

mast er_prof il

tanggal c har(25)

id_prof il

serial

prof il

mast er_hubungi

is i_prof il

text

id_hubungi

serial

mast er_kategori_berita

nama

id_kategori1 integer

email

char(100) kat egori char(100)

char(50)

char(100) inf o_indus tri

s ubjek

inf o_kelurahan

pesan

text

id_kelurahan1 char(25)

tanggal

char(25)

nama_industri1 char(25)

id_keurahan

char(25)

alamat char(100)

jumah_penduduk

char(25)

k ary awan char(25)

bek erja

char100

produk _hasil char(25)

pengangguran

char(25)

s arjana

char(25)

inf o_pencaharian

produk _perhari char(25)

s lta

char(25)

id_keurahan1

char(25)

pemas aran char(25)

Gambar 3.7 Entity Relationship Diagram (ERD)

3.4 Desain Database

Dalam pembuatan program ini dibutuhkan desain database untuk menyimpan data yang akan digunakan dalam proses sistem informasi geografis profli daerah Kota Blitar. Desain database ini menjelaskan tabel-tabel dan field-field yang digunakan. Berikut adalah tabel yang diguakan untuk proses Sistem Informasi Geografis Profil Daerah Kota.

1. Tabel Master Administrasi

Tabel 3.1 Tabel Master Administrasi

No Nama Field

Type Data

Menyimpan kode sebagai primary key dan unik untuk kode no urut

Menyimpan data area 3. nm_kelura

2. Area

numeric

Menyimpan data kelurahan 4. nama_kec

char(20)

Menyimpan data kecamatan 5. id_kec

char(20)

Menyimpan kode letak kecamatan 6. id_kel

smallint

Menyimpan kode letak kelurahan 7. the_geom

smallint

Geometry

Menyimpan data titik poligon

2. Tabel Master Berita

Tabel 3.2 Tabel Master Berita

No Nama Field

Type Data

Fungsi

1. id_berita

serial

Menyimpan kode sebagai primary key dan unik untuk kode berita

2. id_kategori

integer

Menyimpan kode untuk membedakan setiap kategori

3. Judul

Menyimpan data dari judul berita 4. isi_berita

text

Menyimpan data isi berita 5. Gambar

text

Menyimpan data gambar 6. Tanggal

char (100)

char (14)

Menyimpan data tanggal

3. Tabel Master Fasilitas

Tabel 3.3 Tabel Master Fasilitas

No Nama Field

Type Data

Menyimpan kode sebagai primary key dan unik untuk kode fasilitas

Menyimpan dataid 3. keterangan

2. Id integer

char (25)

Menyimpan data keterangan fasilitas

4. the_geom

geometry

Menyimpan data titik poligon

4. Tabel Master Hubungi

Tabel 3.4 Tabel Master Hubungi

No Nama Field

Type Data

Fungsi

1. id_hubungi

serial

Menyimpan kode sebagai primary key dan unik untuk kode hubungi

Menyimpan data nama 3. Email

2. Nama

char (50)

Menyimpan data email 4. Subjek

char (100)

Menyimpan data subjek 5. Pesan

char (100)

Menyimpan data text 6. Tanggal

text

char (14)

Menyimpan data tanggal

5. Tabel Master Jalan

Tabel 3.5 Tabel Master Jalan

No Nama Field

Type Data

Menyimpan kode sebagai primary key dan unik untuk kode jalan

2. nm_jln

Menyimpan data nama jalan 3. the_geom

char(50)

geometry

Menyimpan data titik poligon jalan

6. Tabel Master Jenis Industri

Tabel 3.6 Tabel Master Jenis Industri

No Nama Field

Type Data

Fungsi

1. id_industri

char(25)

Menyimpan kode sebagai primary key dan unik untuk kode jenis industri

2. nama_industri

char(25)

Menyimpan data nama jenis industri

3. nama_produksi

char(25)

Menyimpan data nama jenis produksi

7. Tabel Master Jumlah Industri

Tabel 3.7 Tabel Master Jumlah Industri

No Nama Field

Type Data

Menyimpan kode sebagai primary key dan unik untuk kode jumlah industri

2. id_kelurahan

Menyimpan data kelurahan 3. id_industri

char(25)

Menyimpan data jumlah industri 4. nama_industri

char(25)

char(25)

Menyimpan data nama jumlah industri

5. the_geom

geometry

Menyimpan data titik poligon jumlah industri

6. tanggal

Menyimpan data tanggal 7. bulan

char (25)

Menyimpan data bulan 8. tahun

char (25)

char (25)

Menyimpan data tahun

8. Tabel Master Kategori Berita

Tabel 3.8 Tabel Master Kategori Berita

No Nama Field

Type Data

Fungsi

1. id_kategori

integer

Menyimpan kode sebagai primary key dan unik untuk kode kategori berita

2. kategori

char(100)

Menyimpan data nama kategori berita

9. Tabel Master Pertanian

Tabel 3.9 Tabel Master Pertanian

No Nama Field

Type Data

Fungsi

1. id_pertanian

serial

Menyimpan kode sebagai primary key dan unik untuk kode pertanian

2. nama_tanaman

char(25)

Menyimpan data nama tanaman pertanian

10. Tabel Master Produksi Pertanian Tabel 3.10 Tabel Master Produksi Pertanian

No Nama Field

Type Data

Fungsi

1. id_produksi

Serial

Menyimpan kode sebagai primary key dan unik untuk kode produksi pertanian

2. id_kelurahan

Menyimpan data nama kelurahan 3. id_pertanian

char(25)

Menyimpan data nama pertanian 4. banyak_produksi

char(25)

Menyimpan data nama produksi 4. tanggal

char(25)

Menyimpan data nama tanggal 6 bulan

char(25)

Menyimpan data nama bulan 7. tahun

char(25)

char(25)

Menyimpan data nama tahun

11. Tabel Master Profil

Tabel 3.11 Tabel Master Profil

No Nama Field

Type Data

Fungsi

1. id_profil

serial

Menyimpan kode sebagai primary key dan unik untuk kode profil

2. profil

Menyimpan data profil 3. gambar

char(100)

Menyimpan data hambar 4. isi_profil

char(100)

text

Menyimpan data isi profil

12. Tabel Master Objek

Tabel 3.12 Tabel Master Objek

No Nama Field

Type Data

Fungsi

1. id_kategori

serial

Menyimpan kode sebagai primary key dan unik untuk kode objek

2. jnobjek

char(25)

Menyimpan data objek

13. Tabel Master Objek Wisata

Tabel 3.13 Tabel Master Objek Wisata

No Nama Field

Type Data

Menyimpan kode sebagai primary key dan unik untuk kode objek wisata

2. nmobjek

char(50)

Menyimpan data jenis objek wisata

3. nm_kelurahan

Menyimpan data nama kelurahan 4. gambar

char(50)

char(50)

Menyimpan data gambar objek wisata

5. the_geom

geometry

Menyimpan data titik objek wisata

6. deskripsi

text

Menyimpan data deskripsi objek wisata

7. kategori

char(20)

Menyimpan data kategori

14. Tabel Master User1

Tabel 3.14 Tabel Master User1

No Nama Field Type Data Fungsi 1. id_user

serial

Menyimpan kode sebagai primary key dan unik untuk kode id user

2. Password

Menyimpan data password 3. user_name

char(50)

Menyimpan data user name 4. Email

char(100)

Menyimpan data email 5. Level

char(100)

char(5)

Menyimpan data level

15. Tabel Master tanam modal Tabel 3.15 Tabel Master tanam_modal

No Nama Field Type Data Fungsi 1. kode

serial

Menyimpan kode sebagai primary key dan unik untuk kode id user

2. nama_investor

char(30)

Menyimpan data nama investor

3. alamat_investor

Menyimpan data alamat 4. no_telepon

char(40)

Menyimpan data telepon 5. Kecamatan

char(13)

char(40)

Menyimpan data kecamatan yang dipilih investor

6. jumlah_modal

char(14)

Menyompan data jumlah modal yang ditanam

7. Status

char(40)

Menyimpan data status pengiriman uang

8. Keterangan

text

Menyimpan data keterangan

16. Master info industri Tabel 3.16 Tabel Master info_industri

No Nama Field Type Data Fungsi 1. id_kelurahan

char(25)

Menyimpan kode sebagai primary key dan unik untuk kode id kelurahan

2. nama_industri

char(25)

Menyimpan data nama industri

Menyimpan data alamat 4. karyawan

3. alamat

char(100)

Menyimpan data karyawan 5. produk_hasil

char(25)

char(25)

Menyimpan data produk hasil

6. produk_perhari

char(25)

Menyompan data prduk perhari

7. pemasaran

char(255)

Menyimpan data pemasaran

17. Master info kelurahan Tabel 3.17 Tabel Master info_kelurahan

No Nama Field Type Data Fungsi 1. id_kelurahan

char(25)

Menyimpan kode sebagai primary key dan unik untuk kode id kelurahan

2. jumah penduduk

Menyimpan data penduduk 3. bekerja

char(25)

char(100)

Menyimpan data penduduk yang bekerja

4. pengangguran

char(25)

Menyimpan data pengangguran

5. sarjana

char(25)

Menyimpan data penduduk sarjana

6. Slta

char(25)

Menyimpan data penduduk slta

7. Sltp

char(25)

Menyimpan data penduduk sltp

8. Sd

char(25)

Menyimpan data penduduk sd

18. Master info pencaharian Tabel 3.18 Tabel Master info pencaharian

No Nama Field Type Data Fungsi 1. id_kelurahan

char(25)

Menyimpan kode sebagai primary key dan unik untuk kode id kelurahan

2. Pencaharian

char(25)

Menyimpan data pencaharian

3. Jumlah

char(100)

Menyimpan data semua jumah penduduk

BAB IV

HASIL DAN PEMBAHASAN

4.1 Implementasi

Bab ini akan membahas tentang pengujian dan analisa hasil program yang telah dibuat. Tujuan dari pegujian ini adalah untuk mengetahui apakah aplikasi yang telah dibuat sesuai dengan perancangannya. Selain itu juga untuk mengetahui detail jalannya aplikasi serta kesalahan yang ada untuk pengembangan dan perbaikan lebih lanjut. Pada proses pengembangan aplikasi SIG Profil Daerah ini membutuhkan beberapa peralatan, baik berupa perangkat keras maupun perangkat lunak.

4.1.1 Ruang Lingkup Perangkat Keras

Dalam pengembangan SIG Profil Daerah Kota Blitar ini menggunakan perangkat keras Laptop Acer Aspire 5052ANWXMi dengan spesifikasi sebagai berikut :

1. Prosesor AMD Turion (2,2Ghz) 2. RAM 1536 MB 3. Hardisk Dengan Kapasitas 80 GB 4. Monitor 14,2” WXGA Acer Crystal Brite LCD resolusi 1280 x 800 pixels. 5. Keyboard 6. Mouse USB

4.1.2 Ruang Lingkup Perangkat Lunak

Perangkat lunak yang digunakan untuk pengembangan aplikasi ini antara lain : 1. Sistem Operasi Windows XP Profesional SP2

2. Chameleon 2.5 3. P H P 4. MapSever 1.6 5. Apache 2.2.7 6. PostgreSQL 8.2.5 7. MapLab 8. Macromedia Dreamweaver CS3

4.1.3 Implementasi Peta

Website sistem informasi geografis ini menggunakan framework Chameleon sebagai media untuk menampilkan peta. Untuk menampilkan peta dari ArcView pada web diperlukan proses konversi data terlebih dahulu. Data yang berhubungan dengan pemetaan merupakan hasil konfersi dari data tipe SHP yang berasal dari ArcView ke tag SQL dengan bantuan aplikasi shp2pgsql. Data peta dari ArcView tersebut minimal terdiri dari tiga data peta yaitu *.shp, *.shx, dan *.dbf. Sehingga data dari ArcView akan tersimpan dalam bentuk taq SQL dan semua data peta yang beripe poin, line dan polygon akan di rubah kedalam format WKB (Well Known Binary). Proser konversi data melalui command prompt dengan cara masuk terlebih dahulu ke folder “bin” pada PosgreSQL yang ada di program file dan sebelum di konversi copy terlebih dahulu file peta dari ArcView ke folder bin.

Gambar 4.1 Diagram Konversi Data

4.1.4 Implementasi Desain Interface

Pada sub bab ini akan dilakukan implementasi dari desain interface yang telah dibahas pada bab 3. Berdasarkan desain interface yang telah dibahas pada bab 3, maka akan dibagi menjadi dua bagian yaitu halaman utama dan halaman sysadmin .

1. Halaman Utama Hasil implementasi interface pada halaman utama berdasarkan perancangan pada bab 3 seperti terlihat pada gambar 4.2 dibawah ini.

Gambar 4.2 Halaman Utama

Halaman utama website ini adalah untuk menampilkan berbagai menu informasi yang ada dalam sistem informasi geografis profli daerah Kota Blitar. Pada halaman ini terdiri dari beberapa menu utama antara lain:

a. Beranda Halaman ini adalah halaman yang pertama kali muncul ketika user maupun admin mengakses website, yang berisi tentang tujuan dan manfaat dari sistem informasi geografis profil daerah Kota Blitar.

b. Profil Tombol profil ini memuat tentang gambaran umum profil daerah kota yang didalamnya berisi gambar gedung pemerintahan kota dan penjelasan letak Kota Blitar, seperti pada gambar 4. 3 dibawah ini.

Gambar 4. 3 Profil Kota Gambar 4. 3 Profil Kota

4 dibawah ini.

Gambar 4. 4 Berita

d. Contact User Halaman ini menyajikan halaman pesan untuk pengguna dan tidak perlu melakukan proses login, dimana pesan tersebut langsung masuk ke admin seperti pada gambar 4. 5 dibawah ini.

Gambar 4. 5 Contact User

e. Login

Gambar 4. 6 Login

Tombol login hanya dapat diakses oleh sysadmin,semua data yang ada pada web ini di olah, di kontrol oleh admin melalui tombol ini.

f. Pertanian

Gambar 4. 7 Aplikasi Pertanian

Untuk melihat data pertanian Kota Blitar maka user harus mengisi form pertanian dengan lengkap seperti yang ada pada gambar 4. 7 aplikasi pertanian di atas.

g. Pariwisata

Gambar 4. 8 Aplikasi Pariwisata

Aplikasi Pariwisata merupakan form yang digunakan untuk melihat wisata-wisata setiap kecamatan ataupun kelurahan yang ada di Kota Blitar. Pengguna dapat langsung mengklik nama kelurahan.

h. Industri

Gambar 4. 9 Aplikasi Industri

Dalam aplikasi industri ini, sistem kerja program hampir sama dengan aplikasi petanian yaitu user harus mengisi form pertanian dengan lengkap seperti yang ada pada gambar 4. 9 aplikasi industri di atas.

Untuk melihat keterangan lebih lengkap mengenai pertumbuhan industri dan penduduk setempat, dapat dilihat seperti pada gambar di bawah ini.

Gambar 4. 10 Perkembangan Industri Dan Penduduk

Analisis perkembangan industri ini berdasarkan informasi tiap-tiap kelurahan, industri yang ada di kelurahan tersebut di data mulai dari nama, alamat, jumlah pekerja, produksi per hari, dan pemasarannya.

Penduduk yang ada di kelurahan tersebut pun juga di data mulai dari banyaknya penduduk, penduduk yang bekerja dan pengangguran kemudian di prosentase mana yang lebih manyak. Menampilkan mata pencaharian penduduk seperti tani, niaga, dan guru. Menghitung tenaga terdidik dari penduduk yang tidak berpendidikan, SD, SLTP, SLTA, dan Sarjana.

i. GIS (Peta Kota Blitar)

Gambar 4. 11 GIS Kota Blitar

Pada halaman ini memuat tampilan peta Kota Blitar, yang didalamnya terdapat semua informasi tentang profil kota, fasilitas, jalan kota, industri dan objek wisata. Untuk membedakan setiap legend pada peta maka untuk fasilitas menggunakan tanda gedung, pabrik dengan tanda bulet silang merah, dan untuk objek wisata menggunakan bulet warna hijau, seperti pada gambar 4.11 di atas.

Untuk melihat peta lebih terperinci, klik tanda detail kemudian pilih bulet daerah yang ada pada peta, seperti petunjuk gambar di bawah ini.

detail

Gambar 4. 12 Detail Peta

Gambar 4. 13 Keterangan Peta

Dibawah ini merupakan source program untuk menampilkan peta umum Sistem Informasi Geografis profil daerah Kota Blitar.

<?php

include( "../../htdocs/chameleon.php" );

$szTemplate = "./blitar.php"; $szMapFile = "../map/blitar.map";

class SampleApp extends Chameleon

function SampleApp() {

parent::Chameleon();

$this->moMapSession = new MapSession_RW; $this->moMapSession->setTempDir(

Di bawah ini merupakan source untuk manampilkan layer fasilitas.

LAYER

NAME "Fasilitas" GROUP "Point"

STATUS OFF

DATA "the_geom FROM fasilitass USING UNIQUE gid"

TYPE POINT CONNECTIONTYPE POSTGIS CONNECTION "user=postgres dbname=blitar

host=localhost port=5432 password=root"

LABELITEM "keterangan"

PROJECTION "proj=latlong"

END CLASS

NAME "blitar"

TEMPLATE "ttt_query.html"

LABEL

TYPE TRUETYPE FONT "sans"

Di bawah ini merupakan source untuk manampilkan layer industri.

LAYER

NAME "Pabrik/Industri" GROUP "Point" STATUS DEFAULT DATA "the_geom FROM jumlah_industri USING UNIQUE gid"

TYPE POINT CONNECTIONTYPE POSTGIS CONNECTION "user=postgres dbname=blitar host=localhost

port=5432 password=root"

LABELITEM "nama_industri" PROJECTION

"proj=latlong"

END CLASS

NAME "industri"

TEMPLATE "ttt_query.html"

LABEL

TYPE TRUETYPE

Di bawah ini merupakan source untuk manampilkan layer objek wisata.

LAYER

NAME "Objek Wisata"

GROUP "point"

STATUS ON DATA "the_geom FROM tmobjekwst USING UNIQUE gid" TYPE POINT

CONNECTIONTYPE POSTGIS

CONNECTION "user=postgres dbname=blitar

host=localhost port=5432 password=root" LABELITEM "nmobjek"

METADATA

"DESCRIPTION" "Wisata" "RESULT_FIELDS" "nmobjek"

"GROUP" "point"

"LAYER" "Wisata" END PROJECTION

"proj=latlong"

END

CLASS

Di bawah ini merupakan source untuk manampilkan layer peta blitar.

LAYER

NAME "peta blitar"

GROUP "poligon" STATUS ON DATA "the_geom FROM administrasi USING UNIQUE gid"

TYPE POLYGON

CONNECTIONTYPE POSTGIS

CONNECTION "user=postgres dbname=blitar host=localhost port=5432 password=root"

LABELITEM "nm__kelura" METADATA

"DESCRIPTION" "peta_blitar"

"GROUP" "polygon"

"LAYER" "peta_blitar"

END PROJECTION

"proj=latlong"

END

CLASS CLASS

Gambar 4. 14 Tanam Modal

2. Halaman Sysadmin Pada halaman ini hanya bisa di akses oleh administrator dan petugas saja, Hasil implementasi interface halaman sysadmin berdasarkan perancangan pada bab 3 seperti terlihat pada gambar 4.15 di bawah ini.

Gambar 4.15 Halaman Sysadmin

4.2 Uji Coba Sistem

Pengujian dilakukan untuk mengetahui apakah aplikasi yang telah dibangun dapat berjalan dengan baik dan memenuhi spesifikasi yang telah ditentukan. Sebelum melakukan uji coba sistem, terlebih dahulu mengumpulkan data-data hasil survey di lapangan yang selanjutnya dilakukan uji coba program dengan memasukkan data-data yang ada.

4.2.1 Pengujian Sistem Secara Umum

Sebelum memulai untuk menjalankan aplikasi yang telah dibuat, karena untuk uji coba aplikasi ini dijalankan di komputer lokal maka kita harus memastikan bahwa server lokal MapServer 2.2.7 telah aktif dan berjalan dengan normal. Hal ini sangat penting karena aplikasi hanya dapat jalan jika web sever lokal juga jalan (aktif). Setelah web server telah aktif, maka kita buka browser

Internet Explore atau browser yang lainnya dan kita ketikkan alamat URL sebagai berikut : http://localhost/blitar . Jika setelah mengakses halaman tersebut didapatkan tampilan halaman utama, artinya sistem dapat berjalan dengan lancar, kemudian dapat dilanjutkan dengan pengujian program.

4.2.2 Functional Testing

Setelah dilakukan pengujian tehadap komponen-komponen yang mendukung jalannya aplikasi ini, selanjutya dilakukan pengujian terhadap fungsi atau kegunaan dari semua bagian dalam aplikasi. Pengujian ini dilakukan terhadap fungsi-fungsi pemrosesan data, diantaranya adalah :

1. Pemrosesan Input Hasil Survei Pertanian Pada proses ini akan dilakukan uji coba terhadap fungsi input hasil survei

pertanian yang kemudian disimpan dalam tabel analisis pertanian. Pengujian dilakukan dengan memasukkan variable yang telah disediakan, setelah diisi lengkap kemudian klik tombol “Simpan” untuk menyimpanya. Proses input hasil survei pertanian dapat dilihat pada gambar 4.16 di bawah ini.

Gambar 4.16 Input Hasil Survei Pertanian

Setelah data di masukkan maka akan muncul halaman baru seperti pada gambar grafik 4.17 di bawah ini:

Gambar 4.17 Grafik Pertanian

2. Pemrosesan Input Hasil Survei Pariwisata

Gambar 4.18 Input Hasil Survei Pariwisata

Pengujian dilakukan dengan memasukkan variable yang telah disediakan, setelah diisi lengkap kemudian klik tombol “Simpan” untuk menyimpanya. Proses Pengujian dilakukan dengan memasukkan variable yang telah disediakan, setelah diisi lengkap kemudian klik tombol “Simpan” untuk menyimpanya. Proses

Gambar 4.19 Print Pariwisata

3. Pemrosesan Input Hasil Survei Industri Proses ini akan dilakukan uji coba terhadap fungsi input hasil survei

industri yang kemudian disimpan dalam tabel analisis industri. Pengujian dilakukan dengan memasukkan variable yang telah disediakan, setelah diisi lengkap kemudian klik tombol “Simpan” untuk menyimpanya. Proses input hasil survei industri dapat dilihat pada gambar di bawah ini:

Gambar 4.20 Input Hasil Survei Industri

Gambar 4.21 Grafik Industri

Sysadmin juga memiliki form untuk input anaisis pertumbuhan industri yang ada di tiap kelurahan, tingkat pertumbuhan, dan pendidikan penduduk yang ada di wiayah tersebut seperti pada urutan gambar di bawah ini.

Gambar 4.22 Data Jenis Industri

Gambar 4.23 Aset Pertumbuhan Industri

Gambar 4.24 Data Informasi Industri

Gambar 4.25 Data Informasi Kelurahan

Gambar 4.26 Data Informasi Pencaharian

4.3 Pembahasan

Sistem Informasi Geografis merupakan aplikasi web yang tergolong baru, sedikit sekali orang yang mengetahui dan membuat aplikasi seperti ini. Karena ilmu seperi ini masih tergolong ilmu yang langka, kami akan menyampaikan ilmu ini sesuai dengan hadist Nabi yaitu :

, yang artinya “sampaikan dariku walau 1 ayat” , diriwayatkan oleh (HR. Tirmidzi). Penelitian dan pembuatan aplikasi ini dibuat agar para masyarakat awam setidaknya tahu tentang ilmu seperti ini, meskipun hanya dasarnya saja.

Dari hasil yang telah diperoleh dari penelitian ini, aplikasi Sistem Informasi Geografis Profil Daerah kota Blitar nantinya akan lebih mempermudah masyarakat ataupun Pemerintah Daerah

dalam memonitoring dan mengembangkan Kota Blitar menjadi lebih baik. Kemudahan yang didapat yaitu masyarakat dapat melihat semua profil kota tanpa harus datang ke tempat yang ingin dilihat, sementara Pemerintah Daerah dapat lebih mudah mengontrol dalam perkembangan dan kemajuan kota tanpa turun ke lapangan langsung. Senada dalam memonitoring dan mengembangkan Kota Blitar menjadi lebih baik. Kemudahan yang didapat yaitu masyarakat dapat melihat semua profil kota tanpa harus datang ke tempat yang ingin dilihat, sementara Pemerintah Daerah dapat lebih mudah mengontrol dalam perkembangan dan kemajuan kota tanpa turun ke lapangan langsung. Senada

I5 9G H"

8G B G >

8C G “Allah menghendaki kemudahan bagimu, dan tidak menghendaki kesukaran

(JB

bagimu. Dan hendaklah kamu mencukupkan bilangannya dan hendaklah kamu mengagungkan Allah atas petunjuk-Nya yang diberikan kepadamu, supaya kamu bersyukur.” (QS Al Baqarah 2: 185)

Ayat di atas menggambarkan bagaimana kemudahan itu dianjurkan oleh Allah SWT kepada manusia. Contoh lain dalam kaitannya dengan ayat diatas yaitu pada pengembangan aplikasi ini nantinya diharapkan dapat lebih rinci, nyata dan lebih baik. Sesuai penjelasan di atas, pengembangan aplikasi ini juga terkait dengan sosok manusia ulu al-albab. Sosok manusia ulu al-albab adalah orang yang mengedepankan dzikir, fikir dan amal shaleh. Serta dapat diartikan juga manusia yang berpandangan bahwa tidak terdapat kekuatan dimuka bumi ini selain Allah SWT. Pengertian ini tertuang dalam firman Allah SWT dalam Al- Qur’an Surat Ali ‘imran Ayat 190-191 yang berbunyi :

4M (? D> L (

$ )# : " - %

)# ! 'G%

I5 4/ < ! D;=

“Sesungguhnya dalam penciptaan langit dan bumi, dan silih bergantinya malam dan siang terdapat tanda-tanda bagi orang-orang yang berakal. (191). (yaitu) orang-orang yang mengingat Allah sambil berdiri atau duduk atau dalam keadaan berbaring dan mereka memikirkan tentang penciptaan langit dan bumi (seraya berkata): "Ya Tuhan Kami, Tiadalah Engkau menciptakan ini dengan sia- sia, Maha suci Engkau, Maka peliharalah Kami dari siksa neraka.” (QS Al Baqarah 2: 185)

Memahami arti sosok manusia ulu al-albab dan arti ayat diatas, seorang manusia ulu al-albab dalam menghadapi persoalan hidup tentunya tidak akan ceroboh. Manusia tersebut akan melihat persoalan itu dari berbagai segi keilmuan atau bisa diartikan mengklasifikasikannya dan mencari rujukan sumber hukum pada Al-Qur’an dan Hadist. Dalam hal ini, Sistem Informasi Geografis merupakan pencapaian dari manusia mau berfikir, berusaha dengan petunjuk Al-Qur’an dan Hadist sehingga dalam melihat suatu daerah cukup dengan aplikasi seperti ini.

BAB V PENUTUP

5.1 Kesimpulan

Penelitian yang dilakukan di Kantor Badan Pemerintahan Dan Pengembangan Daerah Kota Blitar (BAPPEDA), bahwa dengan adanya aplikasi Sistem Informasi Geografis Profil Daerah Kota ini, akan mempermudah untuk menginformasikan dan memonitoring semua daerah yang ada. Karena dengan peta digital dalam bentuk database akan lebih mudah diolah dari pada peta digital yang dalam bentuk gambar digital biasa

Dari aplikasi ini nantinya dapat menampilkan peta Kotamadya Blitar, yang didalamnya terdapat semua informasi tentang profil, potensi kota sehingga lebih mudah dalam melihat perkembangan setiap kelurahan di kawasan kota.

5.2 Saran

Penulis tahu dalam aplikasi Sistem Informasi Geografis untuk mengetahui Profil Daerah Kota Blitar ini masih banyak terdapat kelemahan dan kekurangan. Oleh sebab itu penulis mengharapkan untuk penelitian selanjutnya sistem ini dapat dikembangkan menjadi lebih bermanfaat dan lebih baik lagi.

DAFTAR PUSTAKA

Abdullah bin Muhammad. 2006.Tafsir Ibnu Kasir. Jakarta: Pustaka Iman Syafi’i. Allamah Kamal Faqih dan Tim Ulama. 2004. Tafsir Nurul Quran: Sebuah Tafsir

Sederhana Menuju Cahaya Al-Quran . Jakarta: Al-Huda Al-Sheikh, Bin Ishak, Bin Abdurahman, Bin Muhammad, Abdullah, 2003, Tafsir Ibnu Katsir. Pustaka Iman Asy-Syafi’i. Muhardin. Endy, 2003, PHP Programming Fundamental dan MySQL Fundamental , ArtiVisi Intermedia. Nuryadin, Ruslan. 2005. Panduan MapServer. Bandung: Informatika. Pendit, Nyoman S. 2003. Ilmu Pariwisata sebuah pengantar perdana. Jakarta:

PT. Pradnya Pramita. Penyusun, Tim. 2008. DDA Blitar dalam angka. Blitar: Bappeda. Prahasta, Eddy. 2002. Tutorial ArcView. Bandung: Informatika. Prahasta, Eddy. 2006. Membangun Aplikasi Web-based GIS Dengan MapSever.

Bandung: Informatika. Sidik, Betha. 2001. Pemprograman Web Dengan PHP. Bandung:Informatika. Syafii, M, 2005. Aplikasi Database Dengan PHP 5 MySQL PostgreSQL Oracle.

Yogyakarta: Andi Offesed. Tim Penyusun. 2005. Apliksi Server Database Postgresql. Jakarta:Dian Rakyat Utami, Ema. 2006. RDBMS dengan PostgreSQL di GNU/Linux. Yogyakarta:

Andi Offsed.

LAMPIRAN FILE MAP PETA KOTA BLITAR

MAP NAME "Blitar" STATUS ON EXTENT 624753.5 9100392 632170.291798 9109377 SIZE 575 475 #SHAPEPATH "../blitar" SYMBOLSET "../etc/symbols.sym" FONTSET "../etc/fonts.txt" IMAGECOLOR 255 255 255

UNITS DD WEB IMAGEPATH "/ms4w/tmp/ms_tmp/" IMAGEURL "/ms_tmp/" METADATA END

END

REFERENCE STATUS ON IMAGE "images/index.jpg" SIZE 125 100 EXTENT 624753.5 9100392 632170.291798 9109377 COLOR -1 -1 -1 OUTLINECOLOR 45 0 199

END QUERYMAP

STATUS ON COLOR 73 0 221 STYLE HILITE END

PROJECTION "proj=latlong" ""

END LEGEND

STATUS ON KEYSIZE 18 12 LABEL

TYPE BITMAP SIZE MEDIUM COLOR 0 0 89

END END SCALEBAR

STATUS ON COLOR 255 255 255 OUTLINECOLOR 0 0 0 BACKGROUNDCOLOR 0 0 0 IMAGECOLOR 255 255 255 UNITS KILOMETERS INTERVALS 5 SIZE 150 5 LABEL

SIZE SMALL

COLOR 0 0 0 END END

LAYER NAME "peta blitar" GROUP "poligon" STATUS ON DATA "the_geom FROM administrasi USING UNIQUE gid" TYPE POLYGON CONNECTIONTYPE POSTGIS CONNECTION "user=postgres dbname=blitar host=localhost

port=5432 password=root" LABELITEM "nm__kelura" METADATA

"DESCRIPTION" "peta_blitar" "GROUP" "polygon" "LAYER" "peta_blitar"

END PROJECTION

"proj=latlong" END CLASS

NAME "peta_blitar" LABEL TYPE TRUETYPE FONT "sans" SIZE MEDIUM MINSIZE 8 MAXSIZE 9

COLOR 255 50 0 POSITION AUTO END STYLE

COLOR 255 200 200 OUTLINECOLOR 0 200 200 SIZE 5

END END END

LAYER NAME "jalan" GROUP "line" STATUS OFF DATA "the_geom FROM jalan USING UNIQUE gid" TYPE LINE CONNECTIONTYPE POSTGIS CONNECTION "user=postgres dbname=blitar host=localhost

port=5432 password=root" LABELITEM "nm_jln" PROJECTION

"proj=latlong" END CLASS

NAME "jalan" STYLE

COLOR 0 0 0 END END END

LAYER NAME "Objek Wisata" GROUP "point"

STATUS ON DATA "the_geom FROM tmobjekwst USING UNIQUE gid" TYPE POINT CONNECTIONTYPE POSTGIS CONNECTION "user=postgres dbname=blitar host=localhost

port=5432 password=root" LABELITEM "nmobjek" METADATA

"DESCRIPTION" "Wisata" "RESULT_FIELDS" "nmobjek" "GROUP" "point" "LAYER" "Wisata"

END PROJECTION

"proj=latlong" END CLASS

NAME "Wisata" TEMPLATE "ttt_query.html"

LABEL TYPE TRUETYPE FONT "sans" SIZE MEDIUM MINSIZE 7 MAXSIZE 8 POSITION AUTO

END STYLE

SYMBOL 2 COLOR 100 255 0 SIZE 20 MINSIZE 12 MAXSIZE 13

END END END

LAYER NAME "Pabrik/Industri" GROUP "Point" STATUS DEFAULT DATA "the_geom FROM jumlah_industri USING UNIQUE gid" TYPE POINT CONNECTIONTYPE POSTGIS CONNECTION "user=postgres dbname=blitar host=localhost

port=5432 password=root" LABELITEM "nama_industri" PROJECTION

"proj=latlong" END CLASS

NAME "industri" TEMPLATE "ttt_query.html" LABEL

TYPE TRUETYPE FONT "sans" SIZE MEDIUM MINSIZE 7 MAXSIZE 8 POSITION AUTO

END STYLE

SYMBOL 3 COLOR 255 0 0 SIZE 10 MINSIZE 12 MAXSIZE 13

END END END

LAYER

NAME "Fasilitas" GROUP "Point" STATUS OFF DATA "the_geom FROM fasilitass USING UNIQUE gid" TYPE POINT CONNECTIONTYPE POSTGIS CONNECTION "user=postgres dbname=blitar host=localhost

port=5432 password=root" LABELITEM "keterangan" PROJECTION

"proj=latlong" END CLASS

NAME "blitar" TEMPLATE "ttt_query.html" LABEL

TYPE TRUETYPE FONT "sans" SIZE MEDIUM MINSIZE 8 MAXSIZE 9 POSITION AUTO

END STYLE

SYMBOL 4 COLOR 110 0 0 SIZE 10 MINSIZE 12 MAXSIZE 13

END END END

END