3. kelurahan
Varchar 20
4. Keterangan
Text 5.
Id_admin integer
1 Foreign Key Dari Tabel
admin
3.7 Perancangan Menu
Dalam perancangan sebuah program diperlukan suatu struktur menu yang memaparkan menu dan sub menu yang akan dibangun. Berikut adalah gambar
perancangan menu admin dan juga perancangan menu pengunjung.
Halaman Utama
Sekolah Map
Grade login
Data Sekolah Data Map
Data Grade Sistem Informasi
Geografis Monografi
Pendidikan
gambar 3.12 menu admin
Sistem Informasi Geografis
Monografi Pendidikan
Home SMP
SMA
Map SMP Map SMA
SMK UNIVERSITAS
Pencarian Rute
Map SMK Map Universitas
Gambar 3.13 Perancangan menu Pengunjung
3.8 Perancangan Antarmuka
Perancangan antarmuka merupakan suatu media yang menghubungan antara user dengan aplikasi yang dibangun. Maka dalam perancangan suatu aplikasi haruslah
perancangan antarmuka itu dimengerti oleh user, sehingga user tidak mendapatkan kesulitan ketika menjalankan aplikasi itu.
Perancangan Antarmuka Halaman Login Admin
Logo F1
1. E_username 2. E_password
Teks Teks
3. Masuk 4. Batal
Navigasi
1. 1 untuk memasukan username
2. 2 untuk memasukan password
3. Klik 3 untuk masuk ke halaman utama
4. Klik 4 jika ingin membatalkan
Font : Courier New Ukuran : 18
Warna : hitam,putih,abu-abu,
gambar 3.14 Login admin
Halaman Utama Admin
5. Sekolah
8. Keluar Logo
F2
6. Tabel_map Teks
7. Grade
Navigasi
1. Klik 5 untuk masuk ke Form sekolah
2. Klik 6. untuk masuk Ke Form tabel_map
3. Klik 7 untuk masuk ke Form grade
4. Klik 8 jika ingin Keluar Dari Aplikasi
Font : Courier New Ukuran : 18
Warna : hitam,putih,abu-abu,
gambar 3.15 Halaman Utama Admin
M1 x
? Apakah Anda Ingin Keluar Dari Aplikasi Ini?
Ya Tidak
gambar 3.16 pesan ingin keluar aplikasi
Halaman Sekolah
5.1 Tambah Sekolah
5.2 Edit Sekolah
Header F3
Navigasi
1. Klik 5.1 untuk Tambah Data sekolah
2. Klik 5.2 untuk Edit Data Sekolah
3. Klik 5.3 untuk Hapus Data Sekolah
4. Klik 5.4 untuk Print Data Sekolah
Font : Courier New Ukuran : 18
Warna : hitam,putih,abu-abu, Isi Tabel Sekolah
5.3 Hapus Sekolah
5.4 Print 5.5 Navigasi data tabel
5.6 Pencarian 5.7
Kembali 5. Klik 5.5 untuk Mengatur
data tabel sekolah 6. Klik 5.6 Untuk mencari
data sekolah 7. Klik 5.7 Untuk kembali
ke menu utama
gambar 3.17 Halaman Sekolah
F3.1
Navigasi
1. Klik 5.1.1 Isikan data- data sekolah
2. Klik 5.1.2 untuk MenyimpanData Sekolah
3. Klik 5.1.3 untuk membatalkan pengisian
Font : Courier New Ukuran : 18
Warna : hitam,putih,abu-abu, 5.1.3 Batal
5.1.2 Simpan 5.1.1 Field-field tabel
sekolah
g ambar 3.18 form tambah data sekolah
F3.2
Navigasi
1. Klik 5.1.1 Isikan data- data sekolah
2. Klik 5.1.2 untuk MenyimpanData Sekolah
3. Klik 5.1.3 untuk membatalkan pengisian
Font : Courier New Ukuran : 18
Warna : hitam,putih,abu-abu, 5.1.3 Batal
5.1.2 Simpan 5.1.1 Field-field tabel
sekolah
gambar 3.19 form edit data sekolah
M2 Anda Belum Memilih Tingkat Sekolah
Ok
gambar 3.20 alert belum memilih tingkat sekolah
M3 Kode Sekolah Sudah Ada
Ok
gambar 3.21 alert kode sekolah ada
M4 Nama Sekolah Harus Diisi
Ok
gambar 3.22 Alert sekolah harus diisi
M5 x
? Apakah Anda Ingin Membatalkan Pengisian Data?
Ya Tidak
gambar 3.23 Alert pembatalan Pengisan Data
M6 x
? Apakah Anda yakin data ini
akan dihapus? Ya
Tidak
gambar 3.24 Alert Penghapusan data sekolah
M7 Anda salah Dalam Melakukan Pencarian
Ok
gambar 3.25 Kesalahan dalam Pencarian
M8 Data Yang Anda Cari Tidak Ada
Ok
gambar 3.26 Alert Pencarian Data Tidak Ada
F4.2
Navigasi
1. Klik 6.1.1 Isikan data- data Map
2. Klik 6.1.2 untuk MenyimpanData Map
3. Klik 6.1.3 untuk membatalkan pengisian
Font : Courier New Ukuran : 18
Warna : hitam,putih,abu-abu, 6.1.3 Batal
6.1.2 Simpan 6.1.1 Field-field tabel_map
gambar 3.27 Form Edit Data Sekolah
M9 Anda Belum Mengisi id_map
Ok
gambar 3.28 Alert belum Mengisi id_map
M10 Id_sekolah masih kosong
Ok
gambar 3.29 Alert Kode id_Sekolah kosong
M11 Sekolah Tidak terdaftar
Ok
gambar 3.30 Alert Sekolah Tidak Terdaftar
M12 x
? Apakah Anda Ingin Membatalkan Pengisian Data?
Ya Tidak
gambar 3.31 Alert pembatalan Pengisan Data
M13 x
? Apakah Anda yakin data ini
akan dihapus? Ya
Tidak
Gambar 3.32 Alert Penghapusan data map
M7 Anda salah Dalam Melakukan Pencarian
Ok
Gambar 3.33 Alert Kesalahan dalam Pencarian
M8 Data Yang Anda Cari Tidak Ada
Ok
gambar 3.34 Alert Pencarian Data Tidak Ada
Halaman Utama Website
Pencarian
Header
Menu
Menu Sisi Judul Website
Teks Gambar Peta Bandung
Link Terkait
Footer Font : Verdana
Ukuran :judul :18 isi = 12 Warna : putih, hitam, biru
FP 1
gambar 3.35 Halaman Utama Website
Perancangan Antarmuka Halaman SMP Sekolah Menengah Pertama
Font : Verdana Ukuran :judul :18 isi = 12
Warna : putih, hitam, biru Pencarian
Header
Menu
Menu Sisi Judul Website
Judul Halaman SMP
Link Terkait
Footer Isi Tabel Nama -nama Sekolah SMP Negeri Kota Bandung
Tabel Nama-nama SMP Negeri Kota Bandung Pencarian
FP 2
Gambar 3.36
Halaman SMP
Perancangan Antarmuka Isi Halaman SMP Sekolah Menengah Pertama
Font : Verdana Ukuran :judul :18 isi = 12
Warna : putih, hitam, biru Pencarian
Header
Menu
Menu Sisi Judul Website
Judul Halaman SMP
Link Terkait
Footer Gambar Peta Sekolah SMP dari Google map
FP 3
Gambar 3.51 Halaman isi SMP
Perancangan Antarmuka Halaman SMA Sekolah Menengah Atas
Font : Verdana Ukuran :judul :18 isi = 12
Warna : putih, hitam, biru Pencarian
Header
Menu
Menu Sisi Judul Website
Judul Halaman SMA
Link Terkait
Footer Isi Tabel Nama -nama Sekolah SMA Negeri Kota Bandung
Tabel Nama-nama SMA Negeri Kota Bandung Pencarian
FP 4
Gambar 3.52 Halaman SMA
Perancangan Antarmuka Isi Halaman SMA Sekolah Menengah Atas
Font : Verdana Ukuran :judul :18 isi = 12
Warna : putih, hitam, biru Pencarian
Header
Menu
Menu Sisi Judul Website
Judul Halaman SMA
Link Terkait
Footer Gambar Peta Sekolah SMA dari Google map
FP 5
Gambar 3.53 Halaman Isi SMA
Perancangan Antarmuka Halaman SMK Sekolah Menengah Kejuruan
Font : Verdana Ukuran :judul :18 isi = 12
Warna : putih, hitam, biru Pencarian
Header
Menu
Menu Sisi Judul Website
Judul Halaman SMK
Link Terkait
Footer Isi Tabel Nama -nama Sekolah SMK Negeri Kota Bandung
Tabel Nama-nama SMK Negeri Kota Bandung Pencarian
FP 6
Gambar 3.54 Halaman SMK
Perancangan Antarmuka Isi Halaman SMK Sekolah Menengah Kejuruan
Font : Verdana Ukuran :judul :18 isi = 12
Warna : putih, hitam, biru Pencarian
Header
Menu
Menu Sisi Judul Website
Judul Halaman SMK
Link Terkait
Footer Gambar Peta Sekolah SMK dari Google map
FP 7
Gambar 3.55 Halaman Isi SMK
Perancangan Antarmuka Halaman Universitas
Font : Verdana Ukuran :judul :18 isi = 12
Warna : putih, hitam, biru Pencarian
Header
Menu
Menu Sisi Judul Website
Judul Halaman Universitas
Link Terkait
Footer Isi Tabel Nama -nama Sekolah Universitas Kota Bandung
Tabel Nama-nama Universitas Kota Bandung Pencarian
FP 8
Gambar 3.56 Halaman Universitas
Perancangan Antarmuka Isi Halaman Universitas
Font : Verdana Ukuran :judul :18 isi = 12
Warna : putih, hitam, biru Pencarian
Header
Menu
Menu Sisi Judul Website
Judul Halaman Universitas
Link Terkait
Footer Gambar Peta Sekolah Universitas dari Google map
FP 9
Gambar 3.57 Halaman Isi Universitas
3.9 Perancangan Prosedural
Kategori