177 Gambar III. 64. Perancangan Halaman Peta.
T03
Logo DINAS PEMUDA OLAHRAGA
KEBUDAYAAN DAN PARIWISATA KABUPATEN
INDRAMAYU
1. 2. 3. 4. 5. 6. 7. 8. 9.
Peta
Navigasi Peta Layer Peta
Legenda Peta
Pencarian Rute Asal
Tujuan
Font : Times New Roman, Times, serif Ukuran : 11 dan 18
Warna : Kuning, Putih, Biru.
Keterangan : 1 Klik 1 menuju
halaman T01. 2 Klik 2 menuju
halaman T02. 3 Klik 3 menuju
T03 4 Klik 4 menuju
T04. 5 Klik 5 menuju
T04. 6 Klik 6 menuju
T04. 7 Klik 7 menuju
T04. 8 Klik 8 menuju
T04. 9 Klik 9 menuju
T05. 10 Klik 10 untuk
pencarian. 11 Klik 11 menuju
T06.
Cari
Pencarian Transportasi Asal
Tujuan
Cari
178 Gambar III. 65. Perancangan Halaman Pemuda, Olahraga, Kebudayaan, Pariwisata
dan Fasilita.
Pada Gambar III.27. ini digunakan untuk perancangan antarmuka pada tampilan halaman Pemuda, halaman Olahraga, halaman Kebudayaan, halaman
Pariwisata dan Fasilitas. Dimana pada Fasilitas terdapat halaman Hotel dan Penginapan, halaman Rumah Makan dan Café, halaman Cinderamata, halaman
Jadwal Bis dan travel dan Perbankan. T04
Logo DINAS PEMUDA OLAHRAGA
KEBUDAYAAN DAN PARIWISATA KABUPATEN
INDRAMAYU
1. 2. 3. 4. 5. 6. 7. 8. 9.
Isi
10. Search
Buku Tamu
11.
Republik Indonesia DPR RI
Pemprov. Jabar Depdagri.go.id
DPRD Indramayu
Font : Times New Roman, Times, serif Ukuran : 11 dan 18
Warna : Kuning, Putih, Biru.
Keterangan : 1 Klik 1 menuju
halaman T01. 2 Klik 2 menuju
halaman T02. 3 Klik 3 menuju
T03 4 Klik 4 menuju
T04. 5 Klik 5 menuju
T04. 6 Klik 6 menuju
T04. 7 Klik 7 menuju
T04. 8 Klik 8 menuju
T04. 9 Klik 9 menuju
T05. 10 Klik 10 untuk
pencarian. 11 Klik 11 menuju
T06.
179
Gambar III. 29. Perancangan Halaman Informasi Berita dan Agenda
Gambar III. 66. Perancangan Halaman Informasi Berita, Agenda.
Pada Gambar III.28. ini digunakan untuk perancangan antarmuka pada tampilan halaman Berita dan halaman Agenda.
T05
Logo DINAS PEMUDA OLAHRAGA
KEBUDAYAAN DAN PARIWISATA KABUPATEN
INDRAMAYU
1. 2. 3. 4. 5. 6. 7. 8. 9.
Isi
10. Search
Buku Tamu
11.
Republik Indonesia DPR RI
Pemprov. Jabar Depdagri.go.id
DPRD Indramayu
Font : Times New Roman, Times, serif Ukuran : 11 dan 18
Warna : Kuning, Putih, Biru.
Keterangan : 1 Klik 1 menuju
halaman T01. 2 Klik 2 menuju
halaman T02. 3 Klik 3 menuju
T03 4 Klik 4 menuju
T04. 5 Klik 5 menuju
T04. 6 Klik 6 menuju
T04. 7 Klik 7 menuju
T04. 8 Klik 8 menuju
T04. 9 Klik 9 menuju
T05. 10 Klik 10 untuk
pencarian. 11 Klik 11 menuju
T06.
180 Gambar III. 67. Perancangan Halaman Buku Tamu.
3.2.3.1.2. Perancangan Antarmuka Situs Admin
Berikut ini adalah rancangan antarmuka pada situs pengunjung di Sistem Informasi Geografis Kabupaten Indramayu di bidang Pemuda, Olahraga,
Kebudayaan dan Pariwisata berbasis web menggunakan SVG Viewer. T06
Logo DINAS PEMUDA OLAHRAGA
KEBUDAYAAN DAN PARIWISATA KABUPATEN
INDRAMAYU
1. 2. 3. 4. 5. 6. 7. 8. 9.
Nama :
Kota :
Email :
10. Search
Republik Indonesia DPR RI
Pemprov. Jabar Depdagri.go.id
DPRD Indramayu
Foto
Font : Times New Roman, Times, serif Ukuran : 11 dan 18
Warna : Kuning, Putih, Biru.
Keterangan : 1 Klik 1 menuju
halaman T01. 2 Klik 2 menuju
halaman T02. 3 Klik 3 menuju
T03 4 Klik 4 menuju
T04. 5 Klik 5 menuju
T04. 6 Klik 6 menuju
T04. 7 Klik 7 menuju
T04. 8 Klik 8 menuju
T04. 9 Klik 9 menuju
T05. 10 Klik 10 untuk
pencarian. 11 Klik 11 menuju
T06.
11.Simpan
181 Gambar III. 68. Perancangan Halaman Login Admin.
Gambar III. 69. Perancangan Halaman Admin.
T07
Font : Arial, Helvetica, sans-serif Ukuran : 11 dan 14
Warna : Hitam, Putih.
Keterangan : 1 Klik 1, bila
berhasil menuju T08
2 Klik 1, bila gagal muncul P01
Username Password
1. Login
T08
Logo
Isi Menu Admin 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
Font : Arial, Helvetica, sans-serif Ukuran : 11 dan 14
Warna : Putih, Abu-abu
Keterangan : 1 Klik 1 menuju
T07. 2 Klik 2 menuju
T08. 3 Klik 3 menuju
T09. 4 Klik 4 menuju
T09. 5 Klik 5 menuju
T09. 6 Klik 6 menuju
T09. 7 Klik 7 menuju
T09. 8 Klik 8 menuju
T09. 9 Klik 9 menuju
T09. 10 Klik 10 menuju
T09. 11 Klik 11 menuju
T09. 12 Klik 12 menuju
T09. 13 Klik 13 menuju
T09. 14 Klik 14 menuju
T09. 1. Logout
182
12 13 14
Gambar III. 33. Perancangan Halaman Daftar Data
Gambar III. 70. Perancangan Halaman Data Situs Admin.
Pada Gambar III.70. ini digunakan untuk perancangan antarmuka admin pada tampilan halaman Kegiatan Pemuda, halaman Olahraga, halaman
Kebudayaan, halaman Pariwisata, halaman Fasilitas, halaman Transportasi, T09
logo 15. Tambah Data
Font : Arial, Helvetica, sans-serif Ukuran : 11 dan 14
Warna : Putih, Abu-abu
Keterangan : 1 Klik 1 menuju
T07. 2 Klik 2 menuju
T08. 3 Klik 3 menuju
T09. 4 Klik 4 menuju
T09. 5 Klik 5 menuju
T09. 6 Klik 6 menuju
T09. 7 Klik 7 menuju
T09. 8 Klik 8 menuju
T09. 9 Klik 9 menuju
T09. 10 Klik 10 menuju
T09. 11 Klik 11 menuju
T09. 12 Klik 12 menuju
T09. 13 Klik 13 menuju
T09. 14 Klik 14 menuju
T09. 15 Klik 15 menuju
T10. 16 Klik 16, bila data
ada, menuju T09. Bila data tidak
ada, muncul P02 17 Klik 17 menuju
T13. 18 Klik 18 menuju
T11. 19 Klik 19 menuju
T12. 1. Logout
Daftar Data
Atribut Atribut
Atribut Atribut
Options 17 18 19
17 18 19 16.Search
e 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
183
halaman Data Jalan, halaman Data Kecamatan, halaman Data Angkot, halaman Data Trayek, halaman Agenda dan halaman Berita.
Gambar III. 71. Perancangan Halaman Tambah Data.
T10
Tambah Data
Font : Arial, Helvetica, sans-serif Ukuran : 11 dan 14
Warna : Putih, Abu-abu
Keterangan : 1 Klik 1 menuju
T07. 2 Klik 2 menuju
T08. 3 Klik 3 menuju
T09. 4 Klik 4 menuju
T09. 5 Klik 5 menuju
T09. 6 Klik 6 menuju
T09. 7 Klik 7 menuju
T09. 8 Klik 8 menuju
T09. 9 Klik 9 menuju
T09. 10 Klik 10 menuju
T09. 11 Klik 11 menuju
T09. 12 Klik 12 menuju
T09. 13 Klik 13 menuju
T09. 14 Klik 14 menuju
T09. 15 Klik 15, bila
berhasil menuju T09 dan muncul
P03. Bila tidak sesuai, muncul
pesan P04.Bila gagal, menuju
T09 dan muncul P05.
16 Klik 16 menuju T10.
1. Logout
Atribut Atribut
Atribut Atribut
15. SIMPAN 16. ULANG
2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
184 Gambar III. 72. Perancangan Halaman Edit Data.
T11
Edit Data
Font : Arial, Helvetica, sans-serif Ukuran : 11 dan 14
Warna : Putih, Abu-abu
Keterangan : 1 Klik 1 menuju
T07. 2 Klik 2 menuju
T08. 3 Klik 3 menuju
T09. 4 Klik 4 menuju
T09. 5 Klik 5 menuju
T09. 6 Klik 6 menuju
T09. 7 Klik 7 menuju
T09. 8 Klik 8 menuju
T09. 9 Klik 9 menuju
T09. 10 Klik 10 menuju
T09. 11 Klik 11 menuju
T09. 12 Klik 12 menuju
T09. 13 Klik 13 menuju
T09. 14 Klik 14 menuju
T09. 15 Klik 15 bila
berhasil menuju T09 dan muncul
P06. Bila tidak sesuai, muncul
P04. Bila gagal, menuju T09 dan
muncul P07.
16 Klik 16 menuju T11.
1. Logout
Atribut Atribut
Atribut Atribut
15. SIMPAN 16. ULANG
2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
185 Gambar III. 73. Perancangan Halaman Hapus Data.
Font : Arial, Helvetica, sans-serif Ukuran : 11 dan 14
Warna : Putih, Abu-abu
T12
Hapus Data
Font : Arial, Helvetica, sans-serif Ukuran : 11 dan 14
Warna : Putih, Abu-abu
Keterangan : 1 Klik 1 menuju
T07. 2 Klik 2 menuju
T08. 3 Klik 3 menuju
T09. 4 Klik 4 menuju
T09. 5 Klik 5 menuju
T09. 6 Klik 6 menuju
T09. 7 Klik 7 menuju
T09. 8 Klik 8 menuju
T09. 9 Klik 9 menuju
T09. 10 Klik 10 menuju
T09. 11 Klik 11 menuju
T09. 12 Klik 12 menuju
T09. 13 Klik 13 menuju
T09. 14 Klik 14 menuju
T09. 15 Klik 15, bila
berhasil, menuju T15 dan muncul
P08 dan P09.Bila gagal, menuju
T09 dan muncul P10
1. Logout
Atribut Atribut
Atribut Atribut
15. HAPUS
2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
186 Gambar III. 74. Perancangan Halaman Detail Data.
3.2.3.2. Perancangan Pesan
Berikut ini adalah perancangan pesan di Sistem Informasi Geografis Kabupaten Indramayu di bidang Pemuda, Olahraga, Kebudayaan dan Pariwisata
berbasis web menggunakan SVG Viewer. T13
Detail Data
Font : Arial, Helvetica, sans-serif Ukuran : 11 dan 14
Warna : Putih, Abu-abu
Keterangan : 1 Klik 1 menuju
T07. 2 Klik 2 menuju
T08. 3 Klik 3 menuju
T09. 4 Klik 4 menuju
T09. 5 Klik 5 menuju
T09. 6 Klik 6 menuju
T09. 7 Klik 7 menuju
T09. 8 Klik 8 menuju
T09. 9 Klik 9 menuju
T09. 10 Klik 10 menuju
T09. 11 Klik 11 menuju
T09. 12 Klik 12 menuju
T09. 13 Klik 13 menuju
T09. 14 Klik 14 menuju
T09. 1. Logout
Atribut Atribut
Atribut Atribut
Kembali 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
187
Maaf Data yang Anda Masukkan Salah Silakan Ulangi. .
P01 Data Tidak Ditemukan
P02 Data Berhasil Ditambah
P03 Silakan Diisi
P04 Data Gagal Ditambah
P05 Data Berhasil Diedit
P06 Data Gagal Diedit
P07 Anda yakin akan menghapus ?
P08 Data Berhasil Dihapus
P09 Data Gagal Dihapus
P10
Gambar III. 75. Perancangan pesan.
3.2.4. Jaringan Semantik
Jaringan semantik ini digunakan untuk menggambarkan keterhubungan dari navigasi menu dari satu halaman ke halaman yang lain. Keterhubungan dari
navigasi pada setiap menu dari sistem informasi geografis ini adalah sebagai berikut.
T01
T02
T03
T04
T05
T06
Gambar III. 76. Jaringan Semantik Pengunjung.
188
T08 T07
T09
T10 T11
T12 T13
P01 P02
P03, P04, P05 P04, P06, P07
P08, P09, P10
Gambar III. 77. Jaringan Semantik Admin.
3.2.5. Perancangan Prosedural
Langkah selanjutnya dalam perancangan yaitu merancang procedural yang akan diimplementasikan ke dalam sistem. Prosedural ini nantinya akan digunakan
sebagai algoritma dasar dalam mengkodekan prosedur yang ada. Adapun perancangan procedural sistem informasi geografis ini adalah
sebagai berikut. 1. Prosedur Login
Berikut ini adalah perancangan prosedur login pada Sistem Informasi Geografis Kabupaten Indramayu di bidang Pemuda, Olahraga, Kebudayaan dan
Pariwisata berbasis web menggunakan SVG Viewer.
189
Mulai
Input Username
Password Verivikasi
Username dan Password
Valid ?
Menampilkan Halaman Admin
Selesai
Tidak Ya
Gambar III. 78. Prosedur Login.
2. Prosedur Lupa Password Berikut ini adalah perancangan prosedur lupa password pada Sistem
Informasi Geografis Kabupaten Indramayu di bidang Pemuda, Olahraga, Kebudayaan dan Pariwisata berbasis web menggunakan SVG Viewer.
