Perancangan Layar Kios Informasi

69

4.2.1. Perancangan Layar Kios Informasi

Tampilan merupakan salah-satu hal yang penting dalam merancang sebuah aplikasi. Perancangan tampilan ini diperlukan untuk mengetahui seperti apa bentuk tampilan yang akan digunakan pada aplikasi. Aplikasi dengan tampilan yang menarik dan user friendly tentunya akan memberikan nilai tambah pada aplikasi itu sendiri. Perancangan layar ini bertujuan untuk memberikan rancangan layar-layar menu pada aplikasi kios informasi.

4.2.1.1. Perancangan Layar Utama Kios Informasi

Gambar 4.10. Gambar Menu Utama Pada gambar Layar Menu Utama menggambarkan rancangan Layar beranda. Yang terdiri dari : - Logo - Header Logo HEADER ADV1 ADV2 ADV3 APLIKASI 70 - Tiga Iklan - Aplikasi

4.2.1.2. Perancangan Layar Menu Utama Aplikasi

Gambar 4.11. Rancangan Tampilan Aplikasi Pada rancangan layar pilihan Aplikasi, terdapat 2 buah tombol form yaitu: 1. Tex box “Halte Awal” yang berfungsi untuk mengisi halte awal. 2. Tex box “Halte Tujuan” yang berfungsi untuk mengisi halte tujuan. 3. Tombol “Cari” yang berfungsi untuk mengeksekusi program apabila halte awal dan halte tujuan sudah dimasukkan. Logo HEADER ADV1 ADV2 ADV3 Halte Awal Halte Tujuan Cari Reset 71 4. Tombol “Reset” yang berfungsi untuk mengeksekusi program mengosongkan semua isi text box halte awal dan text box halte tujuan.

4.2.1.3. Perancangan Layar Adiministrator Kios Informasi

a. Layar Login Admin Gambar 4.12. Layar Login Admin Pada rancangan layar Login terdapat 2 buah tombol, dan 2 buah text box, yaitu: 1. Tombol “Login” yang berfungsi untuk mengeksekusi jika admin sudah memasukan nama dan password yang benar. 2. Tombol “Cancel” yang berfungsi untuk membatalkan admin memasuki layar maintenance database kios informasi Mal Grage. 3. Tex box “Username” yang berfungsi untuk mengisi nama user. 72 4. Tex box “Password” yang berfungsi untuk mengisi password. b. Layar TambahEdit Data Hale c. Gambar 4.13. Layar TambahEdit Data Hale Pada rancangan layar TambahEdit Data Hale, terdapat 6 buah tombol, 4 buah text box 1. Tombol “Data halte” yang berfungsi untuk menampilkan tambahedit data hale. 2. Tombol “Data pintu transit” yang berfungsi untuk menampilkan data trnsit, tambah.jalur transit pada setiap koridor. 3. Tombol “Ganti password” yang berfungsi untuk menampilkan ubah nama user dan ubah password. 4. Tombol “Hapus Data” yang berfungsi untuk menghapus data yang sudah ada. Kode halte Nama halte Koridor TambahEdit Data Halte Data halte Data pintu transit Ganti password Admin 73 5. Tom bol “Data Baru” yang berfungsi untuk meambahkan data yang baru. 6. Tombol “Cari” yang berfungsi untuk melakukan pencarian berdasarkan kode yang sudah dimasukan dalam text book. 7. Text Box “Kode halte” yang berfungsi untuk mengisi kode halte. 8. Text box “Nama halte” yang berfungsi untuk mengisi nama halte. 9. Text box “Koridor” yang berfungsi untuk mengisi koridor berapa yang diisi. 10. Text box “cari nama halte” yang berfungsi untuk menuliskan nama halte yang akan dicari. 74 d. Layar Data Transit Gambar 4.14. Layar Data Transit Pada rancangan layar Data Transit, terdapat 5 buah tombol, 6 buah text box 1. Tombol “Data halte” yang berfungsi untuk menampilkan tambahedit data hale. 2. Tombol “Data pintu transit” yang berfungsi untuk menampilkan data trnsit, tambah.jalur transit pada setiap koridor. 3. Tombol “Ganti password” yang berfungsi untuk menampilkan ubah nama user dan ubah password. Koridor1 Koridor2 Route Data Transit Data halte Data pintu transit Ganti password Admin Koridor1 Koridor2 Route 75 4. Tombol “Hapus Data” yang berfungsi untuk menghapus data yang sudah ada. 5. Tombol “Simpan” yang berfungsi untuk menyimpan data yang baru. 6. Text Box “Koridor 1” yang berfungsi untuk mengisi koridor 1. 7. Text Box “Koridor 2” yang berfungsi untuk mengisi koridor 2. 8. Text Box “Route” yang berfungsi untuk mengisi rute. 9. Text Box “Koridor 1” yang berfungsi untuk melihat data koridor 1. 10. Text Box “Koridor 2” yang berfungsi untuk melihat data koridor 2. 11. Text Box “Route” yang berfungsi untuk melihat data rute. 76 e. Layar ganti password admin Gambar 4.15. Layar ganti password admin Pada rancangan layar ganti password admin, terdapat 5 buah tombol, 3 buah text box 1. Tombol “Data halte” yang berfungsi untuk menampilkan tambahedit data hale. 2. Tombol “Data pintu transit” yang berfungsi untuk menampilkan data trnsit, tambah.jalur transit pada setiap koridor. 3. Tombol “Ganti password” yang berfungsi untuk menampilkan ubah nama user dan ubah password. 4. Tombol “Cancel” yang berfungsi untuk membatalkan input data. 5. Tombol “Simpan” yang berfungsi untuk menyimpan data yang baru. Edit password Data halte Data pintu transit Ganti password Admin Ubah nama Ubah password Nama Password Nama user baru 77 6. Text Box “Nama” yang berfungsi untuk mengisi nama yang lama. 7. Text Box “Password” yang berfungsi untuk mengisi password yang lama. 8. Text Box “Nama user baru” yang berfungsi untuk mengisi nama user yang baru atau merubah nama lama ke yang baru.

4.2.2. State Transition Diagram STD