BAB III ANALISIS DAN DESAIN SISTEM
III.1. Analisis Masalah Rute jalur terpendek merupakan suatu persoalan untuk mencari lintasan menuju tempat ibadah yang dilalui dengan jumlah yang paling minimum. Maka dibutuhkan algoritma Dijkstra untuk mencari rute jalur terpendek Banyaknya penganut agama yang membutuhkan informasi mengenai data tempat ibadah yang terdekat termasuk data tempat ibadah maka perlu dibangun sebuah sistem informasi geografis yang dapat memudahkan konsumen dalam mencari lokasi tempat ibadah terdekat dikota Medan.
III.2. Algoritma Dijkstra Algoritma Dijkstra adalah suatu algoritma untuk menentukan jalur terpendek antar node dengan berdasar pada basis penghitungan "dari satu node menuju seluruh node". Algoritma Dijkstra termasuk dalam jenis algoritma Link State, yaitu memperhatikan total jarak dan rute yang akan dilalui. Pada dasarnya, terdapat beberapa notasi utama dalam pengerjaan Algoritma Dijkstra ini : 1. Inisialisasi
29
30
Untuk proses inisialisasi, dibentuk suatu array/himpunan N dengan anggota s (s adalah lambang untuk suatu node sumber). Nilai D adalah jarak yang akan tersedia pada tabel hasil algoritma, sementara C adalah nilai jarak pada map yang tersedia. Maka pada tahap inisialisasi ini nilai Dj (jarak pada hasil tabel antara node s dengan node j, dengan j tidak sama dengan s) dimasukkan nilai yang sebenarnya. Jika tidak tersambung secara langsung maka akan dianggap tak terdefinisi. Untuk jarak Ds tentu saja bernilai 0. 2. Temukan simpul tetangga (node selain sumber)
Kalau notasi ini apa artinya yaa... -_- saya lupa. Pokoknya nanti untuk perulangan tiap baris dimasukkan node i yang belum termasuk pada array/himpunan N untuk nanti node i tersebut dijadikan sebagai "perpanjangan" dari node s, dengan node i juga merupakan node tetangga dari node s. Node i yang dimasukkan pada himpunan N berdasarkan pada jarak terkecil dengan node s. Dan jika seluruh node sudah masuk dalam himpunan N, maka iterasi akan berhenti. 3. Update untuk setiap j ϵ N
Untuk setiap node j (dalam tabel hasil: tiap kolom) diperbaharui nilainya yang paling kecil yaitu membandingkan antara nilai Dj sebelumnya dengan hasil
31
penjumlahan (Di+Cij), yaitu penjumlahan jarak node s ke node i dengan jarak sebenarnya dari node i ke node j. Jaringan yang sama dengan yang ada pada postingan Bellman-Ford yang lalu : 1 M es jid
vihar a
2
4
7 3 Potensi
3
Mesjid 2
a rej Ge
Gambar III. 1. Algoritma Dijkstra untuk mencari path terpendek. Contoh Kasus : Untuk mempermudah, buatlah tabel seperti berikut ini: Misalnya kita akan menggunakan algoritma Dijkstra untuk mencari Jalur terpendek dari potensi. (Notasi dalam tabel algoritma Dijkstra memiliki format jalur terdekat, dimana jarak menunjukkan rute dari lokasi sebelumnya menuju lokasi selanjutnya. 1. Baris pertama masih berupa inisialisasi, yaitu potensi akan memiliki nilai jika tersambung langsung dan tidak memiliki nilai jika tidak tersambung langsung. Karena potensi kebetulan hanya memiliki 1 tetangga yaitu mesjid, maka nilai jarak = 2. Table dibawah ini :
32
Lokasi
Mesjid
Gereja
Vihara
Mesjid 2
Potensi
{potensi,Mesjid}=2
XXXXXXXXXX
XXXXXXXX
XXXXX
Mesjid sudah berperan sebagai "perpanjangan" lokasi sumber potensi, sehingga sekarang lokasi-lokasi yang terhubung dengan mesjid sudah bisa "dijangkau" oleh potensi via mesjid. Diketahui gereja dan vihara terhubung langsung dengan mesjid, sehingga rutenya ditulis (potensi-mesjid-gereja) dan (potensi-mesjidvihara).bisa dilihat di table dibawah ini : Lokasi
Mesjid
Gereja
Vihara
Mesjid 2
Potensi
{potensi,Mesjid}=2
XXXXXXXXXX
XXXXXXXX
XXXXX
Potensi,mesjid
{potensi,Mesjid}=2
{potensi,Mesjid,Gereja}=5
{potensi,Mesjid,Vihara}=3
XXXXX
Untuk langkah selanjutnya dipilih jarak yang telah tersambung dengan jarak lainnya namun belum masuk dalam himpunan jarak. Diketahui yaitu gereja dan vihara. Jarak yang dipilih adalah gereja menuju vihara. Sehingga didapat dilihat di tabel berikut. Lokasi
Mesjid
Gereja
Vihara
Mesjid 2
Potensi
{potensi,Mesjid}=2
XXXXXXXXXX
XXXXXXXX
XXXXX
Potensi,mesjid
{potensi,Mesjid}=2
{potensi,Mesjid,Gereja}=5
{potensi,Mesjid,Vihara}=3
XXXXX
Gereja,Vihara
XXXXXXX
XXXXXXXXX
{Gereja,Vihara}=7
XXXXX
(Perbandingan jarak ke jarak) : Potensi Mesjid = 2 Mesjid Gereja = 3 Mesjid Vihara = 1 Gereja Vihara = 7 Potensi ke Gereja
: jalurnya {Potensi,Mesjid,Gereja}2+3=5
Potensi ke Vihara
:
jalurnya
yang
di
pilih
{Potensi,Mesjid,Vihara}2+1=3
paling
Minimum
33
III.3. Desain Sistem Baru Desain Sistem Baru menggunakan bahasa pemodelan UML yang terdiri dari Usecase Diagram, Class Diagram, Activity Diagram dan Sequence Diagram. III.3.1. Usecase Diagram Secara garis besar, bisnis proses sistem yang akan dirancang digambarkan dengan usecase diagram yang terdapat pada Gambar III.1 : Sistem Informasi Geografis Pencarian Rute Jalur Terpendek Tempat Ibadah dengan Algoritma Dijkstra.
Login Home
<extends> Data Ibadah
<extends>
Upload Gambar
<extends>
Upload Thumbnail Peta Ibadah
Buku Tamu
Konten
User
Administrator
Daftar Ibadah
Jarak Ibadah
Gambar III.2. Use Case Diagram Sistem Geografis Lokasi Tempat Ibadah Medan
III.3.2. Class Diagram Rancangan kelas-kelas yang akan digunakan pada sistem yang akan dirancang dapat dilihat pada gambar III.2 :
34
Lokasi - Kode_Lokasi ; int - Nama_Lokasi ; Varchar - Jenis ; Varchar - Alamat ;text - Gambar ; int - Lon ; double - Lat ; double - Keterangan ;text
gambar - id ; inr - name ; text - type ; varchar - size ; int - content ; longbob
jalan
jarak
- Kode_Jalan ; int - Nama_Jalan ; varchar - Tipe_Jalan;varchar - Lon;double - Lat;double
+Tambah +Reset +Cari Data
- Kode_Tempat ; int - jarak_mil ; double - jarak_KM ; double - waktu_tempuh;double
using using using Connection using
konten
ConnectionManager()
komentar using
- Kode_Komentar ; int - Nama; varchar - Email ; varchar - Tanggal ;dateline - Pesan ; text
using
using
thumbnail - id ;int - name ;text - type ; varchar - size ; int - content ; longlob
- Kode_Konten ;int - Tanggal ; timestamp - Terbit ; varchar - Judul ; text - Isi ;text - Thumbnail; int
using user - Id_User ; int - Username ; varchar - Password ; varchar - Nama ; varchar
Gambar III.3. Class Diagram Sistem Informasi GIS Lokasi Tempat Ibadah
III.3.3. Activity Diagram Bisnis proses yang telah digambarkan pada use case diagram di atas dijabarkan dengan activity diagram : 1.
Activity Diagram Melihat Peta Aktivitas melihat peta diterangkan dalam langkah-langkah state, dimulai dari
kegiatan melihat panel peta kemudian mencari Artikel Lokasi Tempat Ibadah, selanjutnya menekan tombol atau link yang ada pada peta dan yang terakhir melihat informasi yang di sajikan dalam peta yang ditunjukkan pada gambar III.3:
35
Halaman Utama
Click Peta Ibadah
Click Salah Satu marka Ibadah
Melihat Informasi Lokasi Ibadah
Gambar III.4. Activity Diagram Melihat Peta
2.
Activity Diagram Login Administrator Website Aktvitas proses login admin diterangkan dalam langkah-langkah state,
dimulai dari memasukkan username, memasukkan password, jika profil valid maka sistem akan mengaktifkan menu administrator, sedangkan jika tidak valid, maka tampilkan pesan kesalahan yang ditunjukkan pada gambar III.4:
Memasukkan Username Memasukkan Password
Valid
Aktifkan Menu Administrator
invalid
Menampilkan Pesan Error
Gambar III.5. Activity Diagram Login Admin
36
3.
Activity Diagram Mengolah Data Lokasi Tempat Ibadah Aktivitas proses mengolah data Lokasi Tempat Ibadah diterangkan dalam
langkah-langkah state yang ditunjukkan pada gambar III.5:
Memilih aksi pada form data Ibadah
Pencarian
Tambah
Ediit
Hapus
Memilih Pencarian
Mengisi Data
Memilih Data
Memilih Data
Mengetik Kata Kunci
Menyimpan Data
Mengubah Data
Konfirmasi Penghapusan
Menekan Enter
Menekan Tombol Simpan
Menyimpan Data
Menghapus Data
Tidak
Ya
Gambar III.6. Activity Diagram Mengolah Data Lokasi Tempat Ibadah 4.
Activity Diagram Mengolah Data Buku Tamu Aktvitas proses mengolah data Buku Tamu diterangkan dalam langkah-
langkah state yang ditunjukkan pada gambar III.6:
Memilih aksi pada form Buku Tamu
Tambah
Hapus
Mengisi Data
Memilih Data
Menyimpan Data
Konfirmasi Penghapusan
Menekan Tombol Kirim
Tidak Ya
Menghapus Data
Gambar III.7. Activity Diagram Mengolah Data Buku Tamu
37
5.
Activity Diagram Mengolah Data Blog Aktvitas proses mengolah data Blog diterangkan dalam langkah-langkah state
yang ditunjukkan pada gambar III.7:
Memilih aksi pada form Blog
Pencarian
Tambah
Edit
Hapus
Memilih Pencarian
Mengisi Data
Memilih Data
Memilih Data
Mengetik Kata Kunci
Menyimpan Data
Mengubah Data
Konfirmasi Penghapusan
Menekan Enter
Menekan Tombol Simpan
Menyimpan Data
Menghapus Data
Tidak
Ya
Gambar III.8. Activity Diagram Mengolah Data Blog
6.
Activity Diagram Mengolah Upload Gambar Aktvitas proses mengolah data upload gambar diterangkan dalam langkah-
langkah state yang ditunjukkan pada gambar III.8:
Memilih aksi pada form upload gambar
Upload
Chose File
Memilih data
Memilih Data Konfirmasi Penghapusan
Memilih gambar Menekan Tombol upload
Hapus
Download
Menekan Tombol download
Tidak Ya
Menghapus Data
Gambar III.9. Activity Diagram Mengolah Data Upload Gambar
38
7.
Activity Diagram Mengolah Upload Thumbnail Aktvitas proses mengolah data upload thumbnail diterangkan dalam langkah-
langkah state yang ditunjukkan pada gambar III.9:
Memilih aksi pada form upload thumbnail
Upload
Chose File
Memilih data
Memilih Data Konfirmasi Penghapusan
Memilih thumbnail Menekan Tombol upload
Hapus
Download
Menekan Tombol download
Tidak Ya
Menghapus Data
Gambar III.10. Activity Diagram Mengolah Data Upload Thumbnail
III.3.4. Sequence Diagram Rangkaian kegiatan pada setiap terjadi event sistem digambarkan pada sequence diagram berikut: 1.
Sequence Diagram pada Form Peta Serangkaian kegiatan saat terjadi event pada form peta dapat dilihat pada
gambar III.10 :
39
User
Form Peta
Main form
Tampilkan Menu ()
Menu () click form Peta () Koneksi database ()
Gambar III.11. Sequence Diagram Form Peta
2.
Sequence Diagram pada Form Login Serangkaian kegiatan saat terjadi event pada form login dapat dilihat pada
gambar III.11 :
Administrator Website
Main form
Form Login
Proses Login
Halaman Administrator
Tampilkan Fom ()
Menu () click form login
Validasi nama dan password ()
Invalid () Login sukses ()
Gambar III.12. Sequence Diagram Form Login 3.
Sequence Diagram pada Form Data Tempat Ibadah Serangkaian kegiatan saat terjadi event pada form Tempat Ibadah dapat
dilihat pada gambar III.12 :
40
Administrator Website
Main form
Form Data ibadha
Proses
Dealer
Tampilkan Fom ()
Menu () click form dealer () update data () Koneksi database () deletel data ()
Koneksi database ()
Close form () Update data dealer
Gambar III.13. Sequence Diagram Form Tempat Ibadah 4.
Sequence Diagram pada Form Data Konten Serangkaian kegiatan saat terjadi event pada form data konten dapat dilihat
pada gambar III.13 :
Administrator Website
Main form
Form konten
Konten
Proses
Tampilkan Fom ()
Menu () click form Blog () update data () Koneksi database () deletel data ()
Close form ()
Koneksi database () Update data konten
Gambar III.14. Sequence Diagram Form Data Konten 5.
Sequence Diagram pada Form Data Buku Tamu Serangkaian kegiatan saat terjadi event pada form buku tamu dapat dilihat
pada gambar III.14 :
41
Administrator Website
Main form
Form Data Buku Tamu
Buku tamu
Proses
Tampilkan Fom ()
Menu () click form Buku Tamu () update data () Koneksi database () deletel data ()
Koneksi database ()
Close form ()
Update data buku tamu
Gambar III.15. Sequence Diagram Form Buku Tamu 6.
Sequence Diagram pada Form Upload Gambar Serangkaian kegiatan saat terjadi event pada form upload gambar dapat dilihat
pada gambar III.15 :
Administrator Website
Main form
Form Upload Gambar
gambar
Proses
Tampilkan Fom ()
Menu () click form Upload Gambar () upload data () Koneksi database () download data ()
Koneksi database ()
deletel data ()
Close form ()
Koneksi database () Update data gambar
Gambar III.16. Sequence Diagram Form Upload Gambar 7.
Sequence Diagram pada Form Upload Thumbnail Serangkaian kegiatan saat terjadi event pada form upload thumbnail dapat
dilihat pada gambar III.16 :
42
Administrator Website
Main form
Form Upload Thumbnail
thumbnail
Proses
Tampilkan Fom ()
Menu () click form Upload Thumbnail () upload data () Koneksi database () download data ()
deletel data ()
Close form ()
Koneksi database () Koneksi database () Update data thumbnail
Gambar III.17. Sequence Diagram Form Upload Thumbnail III.4. Desain Database Desain database terdiri dari tahap merancang kamus data, melakukan normalisasi tabel, merancang struktur tabel, dan membangun Entity Relationship Diagram (ERD). 1. Normalisasi Normalisasi merupakan sebuah daftar yang terorganisasi dari elemen data yang berhubungan dengan sistem, dengan definisi yang tepat dan teliti sehingga pemakai dan analis sistem akan memiliki pemahaman yang umum mengenai input, output, dan komponen penyimpan. Kamus data penyimpanan sistem yang akan dirancang dapat dilihat sebagai berikut : a. Gambar = @Id + Name + Type + Size + Content. b. Tempat Ibadah = @Kode_Tempat + Nama_Tempat_Ibadah + Alamat + Gambar + Lon + Lat + Keterangan. c. Jalan = @Kode_Jalan + Nama_Jalan + Tipe_Jalan + Lon + Lat. d. Jarak = @Kode_Tempat + Jarak_Mil + Jarak_Km + Waktu_Tempuh.
43
e. Komentar = @Kode_Komentar + Nama + Email + Tanggal + Pesan. f. Konten = @Kode_Konten + Tanggal + Terbit + Judul + Isi + Thumbnail. g. Thumbnail = @Id + Name + Type + Size + Content. h. User = @Id_User + Username + Password + Nama.
III.4.1. Desain Tabel Setelah melakukan tahap normalisasi, maka tahap selanjutnya yang dikerjakan yaitu merancang struktur tabel pada basis data sistem yang akan dibuat, berikut ini merupakan rancangan struktur tabel tersebut: a. Struktur Tabel Gambar Tabel gambar digunakan untuk menyimpan data id, name, type, size, content, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.1 di bawah ini : Tabel III.1 Rancangan Tabel Gambar Nama Database
abdi_rumah_ibadah
Nama Tabel
Gambar
No
Nama Field
Tipe Data
Boleh Kosong
Kunci
1.
Id
int(11)
Tidak
Primary Key
2.
Name
Text
Tidak
-
3.
Type
varchar(30)
Tidak
-
4.
Size
int(11)
Tidak
-
5.
content
longblob
Tidak
-
44
b. Struktur Tabel Jalan Tabel jalan digunakan untuk menyimpan data Kode_Jalan, Nama_Jalan, Tipe_Jalan, Lon, Lat, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.2 di bawah ini: Tabel III.2 Rancangan Tabel Jalan Nama Database
abdi_rumah_ibadah
Nama Tabel
jalan
No
Nama Field
Tipe Data
Boleh Kosong
Kunci
1.
Kode_Jalan
int(5)
Tidak
Primary Key
2.
Nama_Jalan
varchar(30)
Tidak
-
3.
Tipe_Jalan
varchar(10)
Tidak
-
4.
Lon
double
Tidak
-
5.
Lat
double
Tidak
-
c. Struktur Tabel Jarak Tabel jarak digunakan untuk menyimpan data Kode_Tempat, Jarak_Mil, Jarak_Km, Waktu_Tempuh, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.3 di bawah ini: Tabel III.3 Rancangan Tabel Jarak Nama Database
abdi_rumah_ibadah
Nama Tabel
jarak
No
Nama Field
Tipe Data
Boleh Kosong
Kunci
1.
Kode_Tempat
int(5)
Tidak
-
2.
Jarak_Mil
double
Tidak
-
3.
Jarak_Km
double
Tidak
-
4.
Waktu_Tempuh
double
Tidak
-
45
d. Struktur Tabel Komentar Tabel komentar digunakan untuk menyimpan data Kode_Komentar, Nama, Email, Tanggal, Pesan, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.4 di bawah ini: Tabel III.4 Rancangan Tabel Komentar Nama Database
abdi_rumah_ibadah
Nama Tabel
komentar
No
Nama Field
Tipe Data
Boleh Kosong
Kunci
1.
Kode_Komentar
int(5)
Tidak
Primary Key
2.
Nama
varchar(25)
Tidak
-
3.
Email
varchar(25)
Tidak
-
4.
Tanggal
datetime
Tidak
-
5.
Pesan
text
Tidak
-
e. Struktur Tabel Konten Tabel konten digunakan untuk menyimpan data Kode_Konten, Tanggal, Terbit, Judul, Isi, Thumbnail, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.5 di bawah ini: Tabel III.5 Rancangan Tabel Konten Nama Database
abdi_rumah_ibadah
Nama Tabel
konten
No
Nama Field
Tipe Data
Boleh Kosong
Kunci
1.
Kode_Konten
int(11)
Tidak
Primary Key
2.
Tanggal
timestamp
Tidak
-
3.
Terbit
varchar(6)
Tidak
-
4.
Judul
text
Tidak
-
46
5.
Isi
text
Tidak
-
6.
Thumbnail
int(11)
Tidak
Foreign Key
f. Struktur Tabel Lokasi Tabel
lokasi
digunakan
untuk
menyimpan
data
Kode_Tempat,
Nama_Lokasi, Jenis, Alamat, Gambar, Lon, Lat, Keterangan, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.6 di bawah ini: Tabel III.6 Rancangan Tabel Lokasi Nama Database
abdi_rumah_ibadah
Nama Tabel
lokasi
No
Nama Field
Tipe Data
Boleh Kosong
Kunci
1.
Kode_Tempat
int(5)
Tidak
Primary Key
2.
Nama_Lokasi
varchar(25)
Tidak
-
3.
Jenis
varchar(25)
Tidak
-
4.
Alamat
text
Tidak
-
5.
Gambar
int(11)
Tidak
Foreign Key
6.
Lon
double
Tidak
-
7.
Lat
double
Tidak
-
8.
Keterangan
text
Tidak
-
g. Struktur Tabel Thumbnail Tabel thumbnail digunakan untuk menyimpan data id, name, type, size, content, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.7 di bawah ini :
47
Tabel III.7 Rancangan Tabel Thumbnail Nama Database
abdi_rumah_ibadah
Nama Tabel
thumbnail
No
Nama Field
Tipe Data
Boleh Kosong
Kunci
1.
Id
int(11)
Tidak
Primary Key
2.
name
Text
Tidak
-
3.
type
varchar(30)
Tidak
-
4.
Size
int(11)
Tidak
-
5.
content
Longblob
Tidak
-
h. Struktur Tabel User Tabel user digunakan untuk menyimpan data Id_User, Username, Password, Nama, selengkapnya mengenai struktur tabel ini dapat dilihat pada tabel III.8 di bawah ini: Tabel III.8 Rancangan Tabel User Nama Database
abdi_rumah_ibadah
Nama Tabel
User
No
Nama Field
Tipe Data
Boleh Kosong
Kunci
1.
Id_User
int(11)
Tidak
Primary Key
2.
Username
varchar(12)
Tidak
Unique
3.
Password
varchar(12)
Tidak
-
4.
Nama
varchar(25)
Tidak
-
III.5. Desain User Interface Tahap perancangan berikutnya yaitu desain user interface yang meliputi desain output sistem, desain input sistem, dan desain database.
48
III.5.1. Analisis Input Analisis sistem input yang sedang berjalan pada sistem yang lama adalah data Tempat Ibadah dan data alamat Tempat Ibadah yang akan dipasarkan dalam bentuk brosur yang akan disebarkan kepada masyarakat. Berikut adalah gambar Tempat Ibadah di salah satu cabang kota medan.
Gambar III.18. Iklan Tempat Ibadah
49
III.5.2. Analisis Process Proses yang terjadi pada sistem yang dijelaskan pada langkah-langkah: Sistem Informasi Geografis Pencarian Rute Jalur Terpendek Tempat Ibadah dengan Algoritma Dijkstra.
Admin
Masyarakat
MULAI
Papan Iklan / Brosur Tempat Ibadah
Papan Iklan / Brosur Tempat ibadah
Mengingat Alamat
Mengunjungi Tempat Ibadah
Mengunjungi Tempat Ibadah
Phase
SELESAI
Gambar III.19. Flow Of Document Lokasi Tempat Ibadah Penjelasan FOD : 1. Masyarakat mendapatkan informasi mengenai lokasi Tempat Ibadah yang berada di kota Medan. 2. Kemudian Masyarakat mengingat atau mencatat alamat lokasi Tempat Ibadah tersebut. 3. Setelah
mendapatkan
informasi
Lokasi
Tempat
Ibadah,
Masyarakat
melakukan pengunjungan ke lokasi Lokasi Tempat Ibadah yang mereka ketahui.
50
III.5.3. Analisis Output Output yang dihasilkan dari sistem adalah informasi-informasi tempat Lokasi Tempat Ibadah yang ada di kota dan mengunjungi Lokasi Tempat Ibadah yang di inginkan maka Masyarakat akan mendapatkan jasa pelayanan sesuai dengan kebutuhan Masyarakat yang diberikan oleh pihak Lokasi Tempat Ibadah yang bersangkutan. Tabel.III.9. Daftar Tempat Ibadah Nama Tempat No
Alamat Lengkap Ibadah
1.
2.
3.
4.
5.
Longitudinal
Latitude
51
III.5.4. Desain Output Berikut ini adalah rancangan tampilan desain peta yang akan dihasilkan oleh sistem: 1. Rancangan Form Peta Form peta berfungsi untuk menampilkan lokasi – lokasi Tempat Ibadah Tempat Ibadah yang disajikan dalam bentuk peta, rancangan dapat dilihat pada gambar berikut :
Gambar III.20. Desain Tampilan Peta
2. Rancangan Form Daftar Tempat Ibadah Form daftar Tempat Ibadah berfungsi untuk menampilkan informasi – informasi Tempat Ibadah Tempat Ibadah yang disajikan dalam bentuk tabel, rancangan dapat dilihat pada gambar berikut :
52
Gambar III.21. Desain Tampilan Daftar Tempat Ibadah
III.5.5. Desain Input Berikut ini adalah rancangan atau desain input sebagai antarmuka pengguna: 1.
Desain Form Login Desain form login dapat dilihat pada gambar III.20 :
Gambar III.22. Desain Form Login
53
2.
Desain Form Data Lokasi Tempat Ibadah Desain form Data Lokasi Tempat Ibadah dapat dilihat pada gambar III.21 :
Gambar III.23. Desain Form Lokasi Tempat Ibadah
54
3.
Desain Form Data Konten Desain form Data Konten dapat dilihat pada gambar III.22 :
Gambar III.24. Desain Form Data Konten
4.
Desain Form Data Pangkalan Buku Tamu Desain form Data Pangkalan Buku Tamu dapat dilihat pada gambar III.23 :
Gambar III.25. Desain Form Buku Tamu
55
5.
Desain Form Data Upload Gambar Desain form Data upload gambar dapat dilihat pada gambar III.24 :
Gambar III.26. Desain Form Data Upload Gambar
6.
Desain Form Data Upload Thumbnail Desain form Data upload thumbnail dapat dilihat pada gambar III.25 :
Gambar III.27. Desain Form Data Upload Thumbnail