113
23. Skala peta. Skala merupakan perbandingan antara peta yang di tampilkan di website dengan kondisi sebenarnya di lapangan.
4.5 Model Deployment
Perancangan Arsitektural dari model ini dapat dilihat pada Gambar 4.35,
dimana semua komponen yang akan melakukan komunikasi, disinkronisasi dan bagaimana mereka saling berbagi satu dengan yang lainnya.
Gambar 4.35 Deployment Diagram
4.6 Model Implementasi Implementation
Pada tahap ini prosedur yang dilakukan untuk menyelesaikan sistem sesuai dengan model perancangan yang disetujui.
4.6.1 Sarana Pendukung Aplikasi SIMTEDA
Aplikasi SIMTEDA ini dikembangkan dengan menggunakan hardware dan software yang akan dijelaskan berikut :
114
3. Hardware Perangkat keras yang digunakan adalah PC Personal Computer yang
terhubung dengan jaringan, baik jaringan internet maupun local. Spesifikasi perangkat keras harus dipenuhi untuk pengembangan
perangkat lunak yang dirancang adalah minimal dapat menjalankan perangkat lunak sesuai kebutuhan.Perangkat yang dibutuhlkan sangat
bergantung pada kebutuhan aplikasi itu sendiri. 4. Software
g. Sistem operasi komputer : Linux, Windows, Mac OS X, Solaris. h. Program MapGuide Open Source 2.2 dan program SIG pendukung
lainnya. i.
PHP-win32 1.4.11 dan MySQL 5.0.45 j.
Text editor : Macromedia Dreamweaver, notepad, homesite dan lainnya.
k. Browser internet : Ms. Internet Explorer, Mozilla, Opera.
4.6.2 Implementasi Sistem
Dalam implementasinya, sistem ini dapat berjalan pada browser Internet Explorer, Mozilla Firefox dan Opera. Dalam pengujian menggunakan jaringan,
sistem ini telah diujikan pada sistem operasi yaitu Microsoft Windows XP Service Pack 2.
Pada Gambar 4.36 merupakan gambar implementasi pada sistem operasi
Microsoft Windows XP dengan Browser Internet Explorer:
115
Gambar 4.36 Implementasi SIMTEDA pada Lingkungan Windows XP
dengan Browser Intenet Explorer 6.0
4.6.2.1 Preview User Sistem
Berikut merupakan menu-menu yang terdapat dalam aplikasi SIMTEDA yang digunakan oleh masyarakat umum:
1. Menu HOME
Menu ini merupakan penjelasan tentang Sistem Informasi Tempat Ibadah di Kecamatan Serpong
.
116
Gambar 4.37 Tampilan Menu Home
2. Menu PROFIL
Menu ini merupakan penjelasan dari seputar Kecamatan Serpong.
Gambar 4.38 Tampilan Menu Profil
3. Menu BERITA
Menu ini merupakan penjelasan tentang info dan berita-berita terbaruter-update dan artikel-artikel yang tersedia, serta User juga
dapat melihat mengirim Comment apa saja tentang berita tersebut.
117
Gambar 4.39 Tampilan Menu Berita
Gambar 4.40 Artikel-artikel
Gambar 4.41 Form Comment
118
4. Menu GALERI
Menu ini merupakan galeri atau gambar Masjid dan Musholla di Kecamatan Serpong serta disajikan dalam bentuk flash.
Gambar 4.42 Tampilan Menu Galeri
5. Menu PETA
Pada Gambar 4.43 merupakan gambar menu peta. Menu peta
merupakan menu yang menampilkan peta vektor, dalam menu ini User dapat mengakses informasi tentang peta SIMTEDA.
119
Gambar 4.43 Tampilan Menu Peta
Berikut merupakan penjelasan dari menu Peta : a. Bottom
print dapat dilihat pada Gambar 4.44. Dan apabila diklik create page, maka akan terlihat pada Gambar
4.45.
Gambar 4.44 Bottom Print
119
Gambar 4.43 Tampilan Menu Peta
Berikut merupakan penjelasan dari menu Peta : a. Bottom
print dapat dilihat pada Gambar 4.44. Dan apabila diklik create page, maka akan terlihat pada Gambar
4.45.
Gambar 4.44 Bottom Print
119
Gambar 4.43 Tampilan Menu Peta
Berikut merupakan penjelasan dari menu Peta : a. Bottom
print dapat dilihat pada Gambar 4.44. Dan apabila diklik create page, maka akan terlihat pada Gambar
4.45.
Gambar 4.44 Bottom Print
120
Gambar 4.45 Tampilan Directory Download
b. Bottom
Measure digunakan untuk mengukur jarak yang
diinginkan. Dapat dilihat pada Gambar 4.46 merupakan jarak
antara satu musholla pada musholla yang lain dengan skala 1:25772.30.
Gambar 4.46 Pengukuran Jarak Melalui Measure
120
Gambar 4.45 Tampilan Directory Download
b. Bottom
Measure digunakan untuk mengukur jarak yang
diinginkan. Dapat dilihat pada Gambar 4.46 merupakan jarak
antara satu musholla pada musholla yang lain dengan skala 1:25772.30.
Gambar 4.46 Pengukuran Jarak Melalui Measure
120
Gambar 4.45 Tampilan Directory Download
b. Bottom
Measure digunakan untuk mengukur jarak yang
diinginkan. Dapat dilihat pada Gambar 4.46 merupakan jarak
antara satu musholla pada musholla yang lain dengan skala 1:25772.30.
Gambar 4.46 Pengukuran Jarak Melalui Measure
121
c. Bottom
Buffer digunakan untuk menyeleksi jarak terdekat dari area yang dipilih dengan skala 1:25772.30, misalnya saya
ambil Masjid Baitul Ma mur dengan jarak 1 mil dan setelah mengklik done maka akan muncul area mana saja yang
terseleksi jarak 1 Mil dari Masjid tersebut.
Gambar 4.47 Daerah yang Terseleksi
d. Menu Zoom merupakan menu untuk menampilkan zoom
sebelum, sesudah, dan standar zoom.
Gambar 4.48 Zoom
e. Bottom
Zoom In digunakan untuk membesarkan ukuran peta .
121
c. Bottom
Buffer digunakan untuk menyeleksi jarak terdekat dari area yang dipilih dengan skala 1:25772.30, misalnya saya
ambil Masjid Baitul Ma mur dengan jarak 1 mil dan setelah mengklik done maka akan muncul area mana saja yang
terseleksi jarak 1 Mil dari Masjid tersebut.
Gambar 4.47 Daerah yang Terseleksi
d. Menu Zoom merupakan menu untuk menampilkan zoom
sebelum, sesudah, dan standar zoom.
Gambar 4.48 Zoom
e. Bottom
Zoom In digunakan untuk membesarkan ukuran peta .
121
c. Bottom
Buffer digunakan untuk menyeleksi jarak terdekat dari area yang dipilih dengan skala 1:25772.30, misalnya saya
ambil Masjid Baitul Ma mur dengan jarak 1 mil dan setelah mengklik done maka akan muncul area mana saja yang
terseleksi jarak 1 Mil dari Masjid tersebut.
Gambar 4.47 Daerah yang Terseleksi
d. Menu Zoom merupakan menu untuk menampilkan zoom
sebelum, sesudah, dan standar zoom.
Gambar 4.48 Zoom
e. Bottom
Zoom In digunakan untuk membesarkan ukuran peta .
122
f. Bottom
Zoom Out digunakan untuk mengecilkan ukuran peta .
g. Bottom
Select digunakan untuk memilih tools yang diinginkan.
h. Bottom
Pan digunakan untuk menggeser peta kearah kiri, kanan, atas, bawah, ataupun diagonal.
i. Zoom Full Extend digunakan untuk membesarkan atau
mengecilkan area peta.
Gambar 4.49 Zoom Full Extend
j. Tampilan peta interaktif setelah layer diaktifkan dan dapat
dilihat pada Gambar 4.50.
122
f. Bottom
Zoom Out digunakan untuk mengecilkan ukuran peta .
g. Bottom
Select digunakan untuk memilih tools yang diinginkan.
h. Bottom
Pan digunakan untuk menggeser peta kearah kiri, kanan, atas, bawah, ataupun diagonal.
i. Zoom Full Extend digunakan untuk membesarkan atau
mengecilkan area peta.
Gambar 4.49 Zoom Full Extend
j. Tampilan peta interaktif setelah layer diaktifkan dan dapat
dilihat pada Gambar 4.50.
122
f. Bottom
Zoom Out digunakan untuk mengecilkan ukuran peta .
g. Bottom
Select digunakan untuk memilih tools yang diinginkan.
h. Bottom
Pan digunakan untuk menggeser peta kearah kiri, kanan, atas, bawah, ataupun diagonal.
i. Zoom Full Extend digunakan untuk membesarkan atau
mengecilkan area peta.
Gambar 4.49 Zoom Full Extend
j. Tampilan peta interaktif setelah layer diaktifkan dan dapat
dilihat pada Gambar 4.50.
123
Gambar 4.50 Tampilan Peta Interaktif
k. Bottom
hide dan show digunakan untuk menampilkan
dan menyembunyikan keterangan.
Gambar 4.51 Hide Keterangan
124
Gambar 4.52 Show Keterangan
l. Bottom
Home digunakan untuk menampilkan halaman awal aplikasi.
Gambar 4.53 Tampilan Home
124
Gambar 4.52 Show Keterangan
l. Bottom
Home digunakan untuk menampilkan halaman awal aplikasi.
Gambar 4.53 Tampilan Home
124
Gambar 4.52 Show Keterangan
l. Bottom
Home digunakan untuk menampilkan halaman awal aplikasi.
Gambar 4.53 Tampilan Home
125
m. Bottom Back digunakan untuk menjalankan program ke
posisi sebelumnya. n.
Bottom Next digunakan untuk mengembalikan program
setelah melakukan back.
o.
Gambar 4.54 merupakan menu tasks yang terdiri dari Home,
Pencarian, Buffer, dan Measure.
Gambar 4.54 Menu Tasks
p. Gambar 4.55 Menu Pencarian Masjid atau Musholla di setiap
kelurahan
Gambar 4.55 Menu Pencarian
q. Gambar 4.56 merupakan Hasil dari Menu Pencarian.
125
m. Bottom Back digunakan untuk menjalankan program ke
posisi sebelumnya. n.
Bottom Next digunakan untuk mengembalikan program
setelah melakukan back.
o.
Gambar 4.54 merupakan menu tasks yang terdiri dari Home,
Pencarian, Buffer, dan Measure.
Gambar 4.54 Menu Tasks
p. Gambar 4.55 Menu Pencarian Masjid atau Musholla di setiap
kelurahan
Gambar 4.55 Menu Pencarian
q. Gambar 4.56 merupakan Hasil dari Menu Pencarian.
125
m. Bottom Back digunakan untuk menjalankan program ke
posisi sebelumnya. n.
Bottom Next digunakan untuk mengembalikan program
setelah melakukan back.
o.
Gambar 4.54 merupakan menu tasks yang terdiri dari Home,
Pencarian, Buffer, dan Measure.
Gambar 4.54 Menu Tasks
p. Gambar 4.55 Menu Pencarian Masjid atau Musholla di setiap
kelurahan
Gambar 4.55 Menu Pencarian
q. Gambar 4.56 merupakan Hasil dari Menu Pencarian.
126
Gambar 4.56 Hasil Pencarian
r. Gambar 4.57 merupakan gambar Legenda, layer yang dipilih,
dan Tooltip layer yang di sentuh.
Gambar 4.57 Keterangan Layer Legenda
127
Gambar 4.58 Keterangan Layer Musholla
Gambar 4.59 Hasil Tooltip
s. Gambar 4.60
merupakan keterangan koordinat, jumlah penyeleksian layer, skala dan luas peta pada saat melakukan
penyeleksian di area peta dengan menggunakan select mode.
Gambar 4.60 Keterangan Koordinat, Jumlah Seleksi, Skala dan Luas Peta
128
4.6.2.2 Preview Administrator Sistem Staf Teknis
Dalam pengeditan data, baik konten penjelasan dari menu-menu di atas maupun data atribut peta dibutuhkan seseorang yang memiliki otorisasi, oleh
karena itu pada aplikasi SIMTEDA terdapat User administrator untuk melakukan pengudatean data.
Berikut merupakan penjelasan cara pengupdatean masing- di atas Username
admin dan password admin .Pada Gambar 4.61 merupakan
gambar aplikasi web dalam jendela administrator masing menu. Untuk masuk ke dalam mode administrator masukan Username dan password dalam User
login.Dalam aplikasi staf teknis.
Gambar 4.61 Aplikasi Dalam Jendela Administrator Staf
Teknis
129
1. Menu Data Berita
Admin dapat meng-update berita-berita terbaru tentang Masjid dan
Musholla di Kecamatan Serpong. Pada Gambar 4.62 yaitu gambar Lihat,
Input, Edit dan Hapus Berita.
Gambar 4.62 Menu Lihat Berita
Gambar 4.63 Menu Edit Berita
130
Gambar 4.64 Menu Input Berita
Gambar 4.65 Menu Hapus Berita
131
2. Menu Data Kritik dan Saran
Pada Gambar 4.66 merupakan Lihat Data dan Hapus Data User yang
mengirimkan Kritik dan Saran di web ini.
Gambar 4.66 Menu Lihat Data Kritik dan Saran
Gambar 4.67 Menu Hapus Data Kritik dan Saran
132
3. Update Peta
Gambar 4.68 merupakan tampilan awal dari menu admin dalam meng-
update peta.
Gambar 4.68 Tampilan Awal Peta
4. Update Atribut Manajemen Peta
Sebelum kita mengupdate Manajemen Peta, lihat dahulu previewnya.
Pada Gambar 4.69 merupakan preview dari Manajemen Peta
Gambar 4.69 Preview Manajemen Peta
133
a. Menu Input Data Masjid Baru
Pada Gambar 4.70 merupakan input data masjid baru.
Gambar 4.70 Tampilan Input Data Masjid Baru
Setelah mengklik tombol simpan, maka akan menampilkan bahwa
pemasukan masjid baru berhasil. Dan akan terlihat pada Gambar 4.71.
Gambar 4.71 Tampilan Input Berhasil
b. Menu Ubah dan Hapus Data Masjid Pada gambar dibawah ini merupakan Ubah dan Hapus data Masjid.
134
Gambar 4.72 Menu Edit dan Hapus Data Masjid Di pojok kanan ada link Ubah dan Hapus . Klik link Ubah untuk
mengubah data masjid apabila admin ingin merubahnya sesuai dengan
keakurasian data yang diperoleh di lapangan. Dan klik Hapus data
masjid apabila data tersebut tidak sesuai.
135
Gambar 4.73 Menu Edit Data Masjid
Gambar 4.74 Tampilan Hapus Berhasil
c. Menu Input Data Musholla Baru
Pada Gambar 4.75 merupakan input data musholla baru.
136
Gambar 4.75 Tampilan Input Data Musholla Baru
Setelah mengklik tombol simpan, maka akan menampilkan bahwa
pemasukan musholla baru berhasil. Dan akan terlihat pada Gambar 4.76.
Gambar 4.76 Tampilan Input Berhasil
137
d. Menu Ubah dan Hapus Data Musholla
Pada Gambar 4.77 merupakan Ubah dan Hapus data Musholla.
Gambar 4.77 Menu Edit dan Hapus Data Musholla Di pojok kanan ada link Ubah dan Hapus . Klik link Ubah untuk
mengubah data mushollla apabila admin ingin merubahnya sesuai
dengan keakurasian data yang diperoleh di lapangan. Dan klik Hapus
data musholla apabila data tersebut tidak sesuai.
138
Gambar 4.78 Menu Edit Data Musholla
Gambar 4.79 Tampilan Hapus Berhasil
139
4.7 Model Pengujian Testing
