3.2 Perancangan Aplikasi
3.2.2 Perancangan Story Board
3.2.3.2 Perancangan Story Board Web
Berikut ini adalah perancangan layar web yang dapat dibuka oleh
admin, head officer,customer service dan customer. Perancangan yang
A. Perancangan Layar Web Login
Gambar 3.37 Perancangan Layar Web Login
Perancangan layar Web Login terdiri dari:
• Layar Web Login dapat di akses oleh admin, head officer, dan customer service.
• Logo aplikasi.
• TextBox UserID, agar user bisa mengisi ID, apabila Head Officer ingin melakukan log in, harus pastikan admin telah
melakukan registrasi ID bagi Head Officer. Jika Customer
service ingin melakukan log in, harus pastikan Head Officer telah melakukan registrasi ID bagi customer service.
• Password, agar user dapat mengisi password.
• Button Submit, untuk mengecek data yang di input telah
B. Perancangan Layar Admin Home
Gambar 3.38 Perancangan Layar Admin Home
Perancangan layar Admin Home terdiri dari:
• Layar ini hanya bisa diakses oleh admin.
• Logo aplikasi.
• Button Log Out, untuk keluar dari aplikasi website.
• Label Date, untuk melihat tanggal pada saat website
sedang diakses.
• Button Register the instance and the Head Officer, untuk
meregistrasi Head Officer dan meregistrasi instansi
• Label Copyright, untuk mencantumkan hak cipta bagi web application.
C. Perancangan Layar Register The Instance
Gambar 3.39 Perancangan Layar Register The Instance
Perancangan layar Register The Instance terdiri dari:
• Layar ini hanya bisa diakses oleh admin.
• Logo aplikasi.
• Label Date, untuk melihat tanggal pada saat website
sedang diakses.
• Button Back to home, untuk kembali ke layar admin Home.
• Button Log Out, untuk keluar dari aplikasi website.
• TextBox Instance Address, untuk memasukan alamat
instansi.
• ComboBox Instance Type, untuk memilih salah satu dari
tipe instansi yang tersedia yaitu pemerintahan, perbankan, dan telekomunikasi.
• TextBox Instance Phone, untuk memasukan nomer telepon
instansi.
• TextBox Instance Description, untuk memasukan deskripsi
mengenai profile instansi yang terkait.
• TextBox Head Office Name, untuk memasukan nama head officer.
• Password, untuk memasukan password yang akan dipakai
oleh Head Officer.
• TextBox Head Officer Email, untuk memasukan email head officer.
• Button Submit, untuk mengecek data yang di input telah
benar agar head officer bisa terdaftar dengan sukses.
• Label Copyright, untuk mencantumkan hak cipta bagi web application.
D. Perancangan Layar Notification Register Instance Success
Gambar 3.40 Perancangan Layar Notification Registration Instance Success
Perancangan Layar Notification Registration Instance Success terdiri dari:
• Alert Registration was successful, untuk memberikan notifikasi
bahwa proses meregistrasi instansi telah dilakukan dengan sukses.
• Button Ok, untuk kembali ke layar Home.
• TextView Instance Name, Instance ID, Head Officer Name, Head Officer ID, Head Officer Password, untuk menampilkan Nama
instansi, ID instansi, Nama Head Officer, ID Head Officer, dan
E. Perancangan Layar Head Officer Home
Gambar 3.41 Perancangan Layar Head Officer Home
Perancangan layar Head Officer Home terdiri dari:
• Layar ini hanya bisa diakses oleh Head Officer.
• Logo aplikasi.
• Button Study Case Problem, untuk mempelajari permasalahan yang dimiliki oleh customer mengenai Instansi terkait.
• Log Out, untuk keluar dari aplikasi website.
• Label Date, untuk melihat tanggal pada saat website
sedang diakses.
• Button register the customer service, untuk meregistrasi customer service.
• Label Copyright, untuk mencantumkan hak cipta bagi web application.
F. Perancangan Layar Register Customer Service
Gambar 3.42 Perancangan Layar Register Customer Service
Perancangan layar Register Customer Service terdiri dari:
• Layar ini hanya bisa diakses oleh Head Officer.
• Logo aplikasi.
• Label Date, untuk melihat tanggal pada saat website
sedang diakses.
• Button Back to home, untuk kembali ke layar Head Officer Home.
• Button Study Case Problem, untuk mempelajari permasalahan yang dimiliki oleh customer mengenai instansi terkait..
• Button Log Out, untuk keluar dari aplikasi website.
• TextBox Customer Service Name, untuk mengisi nama customer service.
• PasswordField, untuk mengisi password customer service. • ComboBox Gender, untuk memilih jenis kelamin customer
service.
• Button Submit, untuk mengecek data yang di input telah
benar agar customer service bisa terdaftar dengan sukses.
• Label Copyright, untuk mencantumkan hak cipta bagi web application.
G. Perancangan Layar Notification Registration Customer Service
Success
Gambar 3.43 Perancangan Layar Notification Registration Customer Service Success
Perancangan Layar Notification Registration Customer Service
Success terdiri dari:
• Alert Registration was successful, untuk memberikan
notifikasi bahwa proses meregistrasi customer service telah dilakukan dengan sukses.
• Button Ok, untuk kembali ke layar Home.
• TextView Customer Service Name, Customer Service ID, Customer Service Password, untuk menampilkan Nama customer service, ID customer service, dan Password customer service yang telah sukses terdaftar.
H. Perancangan Layar Study Case Problem
Gambar 3.44 Perancangan Layar Study Case Problem
Perancangan layar Study Case Problem terdiri dari:
• Layar ini hanya bisa diakses oleh Head Officer.
• Logo aplikasi.
• Label Date, untuk melihat tanggal pada saat website sedang diakses.
• Button Back to home, untuk kembali ke layar Head Officer Home.
• Button Study Case Problem, untuk mempelajari permasalahan yang dimiliki oleh customer mengenai Instansi terkait..
• Button Log Out, untuk keluar dari aplikasi website.
• TextBox Keyword, untuk memasukan kata kunci
berdasarkan ID customer service.
• Button Search, untuk melakukan pencarian sesuai kata
kunci.
• Label Subject, menampilkan subject keluhan customer • Label Problem, menampilkan rincian permasalahan
customer
• Label Response, menampilkan saran sebagai solusi bagi
permasalahan customer
• Label Post on (date), untuk menampilkan pada tanggal
berapa permasalahan diinput.
• Label By (ID customer service), untuk menampilkan ID customer service yang menginput data.
I. Perancangan Layar Customer Service Home
Gambar 3.45 Perancangan Layar Customer Service Home
Perancangan layar Customer Service Home terdiri dari:
• Layar ini hanya bisa diakses oleh Customer Service.
• Logo aplikasi.
• Button Log Out, untuk keluar dari aplikasi website.
• Label Date, untuk melihat tanggal pada saat web sedang
diakses.
• Button open queue, untuk membuka antrian.
• Label Copyright, untuk mencantumkan hak cipta bagi web application.
J. Perancangan Layar Queue Manager
Gambar 3.46 Perancangan Layar Queue Manager
Perancangan layar Queue Manager terdiri dari:
• Label Date, untuk melihat tanggal pada saat web sedang
diakses.
• Label Time, untuk melihat waktu pada saat web
sedang diakses
• TextBox Subject, untuk mengisi subject
permasalahan yang dialami oleh customer.
• TextBox Problem, untuk mengisi definisi
permasalahan yang dialami oleh customer.
• TextBox Response, untuk mengisi respon dari customer service terhadap permasalahan yang dialami oleh customer.
• Label Queue Active, untuk menampilkan nomor
antrian yang telah dilayani.
• Label Queue Number, untuk menampilkan nomor
antrian yang sedang dilayani.
• Button Clear Queue, untuk menghapus antrian. • Button Next, untuk melayani customer berikutnya. • Button Close Queue, untuk mengakhiri layanan. • Button Submit, untuk menyimpan data yang akan
diinput.
K. Perancangan Layar Choose Instance
Gambar 3.47 Perancangan Layar Web Choose Instance
• Choose Instance hanya dapat di akses oleh karyawan
instansi sesuai dengan instansi terkait untuk memungkinkan layar web customer dapat dibuka.
• Logo aplikasi.
• Combo Box Select The Instance, untuk memilih instansi • Button Enter, untuk masuk ke layar form pick queue.
L. Perancangan Layar Form Pick Queue
Gambar 3.48 Perancangan Layar Form Pick Queue
Perancangan layar Form Pick Queue terdiri dari:
• Layar Form Pick Queue hanya dapat di akses oleh
customer yang berada di instansi. • Logo aplikasi.
• TextBox Username, agar customer bisa mengisi username. • Password, agar user dapat mengisi password.
• Button Submit, untuk mengecek data yang di input telah
benar agar bisa masuk ke layar Home.
• Button Sign Up here, agar customer dapat melakukan
proses registrasi.
M. Perancangan Layar Register Form
Gambar 3.49 Perancangan Layar Register Form
Perancangan layar Register Form terdiri dari:
• Layar ini hanya bisa diakses oleh customer yang berada di instansi.
• Logo aplikasi.
• EditText Name, untuk memasukan nama baru customer
• Password, untuk memasukan password yang customer
miliki sebelumnya.
• Confirm Password, untuk mengkonfirmasi kesamaan
bahwa password yang diisi sebelumnya telah benar.
• EditText Email, untuk memasukan email yang dimiliki
oleh customer.
• EditText Phone Number, untuk memasukan nomor
telephone yang dimiliki oleh customer.
• Combo Box Month, Date, dan Year, untuk memungkinkan customer untuk mengisi tanggal, bulan, dan tahun
kelahirannya.
• Combo Box Male dan Female, agar customer dapat
memilih jenis kelamin pria atau wanita.
• TextBox Address, agar customer dapat memasukan alamat. • Button Submit, untuk mengecek data yang di input telah
N. Perancangan Layar Customer Registration Success
Gambar 3.50 Perancangan Layar Customer Registration Success
Perancangan Layar Customer Registration Success terdiri dari:
• Alert Registration Success, untuk memberitahu customer bahwa proses registrasi sukses dilakukan.
O. Perancangan Layar Pick Queue Success
Gambar 3.51 Perancangan Layar Pick Queue Success
Perancangan Layar Pick Queue Success terdiri dari:
• Alert Your queue number, untuk menampilkan peringatan
nomor antrian sukses dilakukan.
• View queue number, untuk menampilkan nomor antrian
yang di dapat.