BAB IV PEMBAHASAN DAN IMPLEMENTASI
4.5. Fase Perancangan ( Workshop Design )
4.5.4. Perancangan Antarmuka
Dalam perancangan antarmuka aplikasi keamanan data yang berbasis client server ini, dibuat beberapa form yang akan ditampilkan.
1. Perancangan Halaman Login
Halaman login merupakan tampilan untuk login.
Pengguna telah terdaftar diharuskan untuk mengisikan username dan password.
Logo acrypt cs Please login image username : password : enter sign up image footer
Gambar 4.15. Rancangan halaman login
Apabila pengguna belum terdaftar, dapat mendaftar terlebih dahulu dengan mengklik tombol “sign up”. Hal ini mencegah aplikasi agar tidak diakses oleh sembarang orang.
sign up
clear Logo acrypt cs Sign up image Fullname : username : password : confirm password : security question question : answer : image
enter word above :
login
footer
Gambar 4.16. Rancangan halaman sign up
2. Perancangan Halaman Utama (Home)
Halaman Home merupakan tampilan utama yang di dalamnya terdapat sembilan link utama yang masing- masing mempunyai fungsi sebagai berikut :
1. Encrypt : menampilkan halaman enkripsi.
2. Decrypt : menampilkan halaman dekripsi.
3. Inbox : menampilkan halaman kotak masuk.
4. Outbox : menampilkan halaman kotak keluar.
5. My key : menampilkan halaman untuk melihat kunci
privat dan mengubah pasangan kunci. Halaman ini dilindungi dengan pertanyaan pengaman yang dibuat saat sign up.
6. Change password : menampilkan halaman untuk mengubah password login.
7. About : menampilkan halaman profil pembuat aplikasi.
8. Help : menampilkan halaman bantuan aplikasi.
9. Logout : keluar dari account.
Logo acrypt cs
Keterangan inbox baru
Keterangan menu (saat mouseover) Keterangan menu (saat mouseover) Menu utama footer
Gambar 4.17. Rancangan halaman utama
3. Perancangan Halaman Encrypt
Halaman enkripsi akan muncul jika user memilih menu “encrypt” pada halaman utama. Terdapat enam halaman dalam rancangan halaman encrypt, yaitu:
a. Rancangan halaman input jumlah file
Halaman input jumlah file merupakan halaman awal dari proses enkripsi. User memilih jumlah file yang akan dienkripsi pada halaman ini.
Logo acrypt cs
encryption
Number of file : Combo box enter cancel
footer
Gambar 4.18. Rancangan halaman input file enkripsi
b. Rancangan halaman input file
Halaman input file merupakan halaman kedua dari proses enkripsi. Terdapat input file yang akan
dienkripsi. Halaman menyediakan input file
sebanyak 5 file. User dapat memilih file dengan mengklik tombol browse. Untuk menghindari
kesalahan, user tidak dapat mengetikkan sendiri file yang akan dienkripsi.
Logo acrypt cs
encryption
File 1 : enter
: :
Browse..
File n : enter Browse..
next clear all cancel
footer
Gambar 4.19. Rancangan halaman input file enkripsi
c. Halaman cek file
Halaman ini menampilkan sementara file-file yang akan dienkripsi.
Logo acrypt cs encryption File 1 File name : File type : File size : Status : : : : File n File name : File type : File size : Status : next cancel footer
Gambar 4.20. Rancangan halaman cek file
d. Halaman input password.
Halaman ini meminta user untuk memasukkan password berupa string yang akan digunakan untuk enkripsi file pada halaman sebelumnya.
Logo acrypt cs
encryption input string for AES password encryption :
next cancel
footer
Gambar 4.21. Rancangan halaman input password
e. Halaman pilih tujuan (penerima).
Sebenarnya halaman ini meminta user untuk memasukkan kunci publik penerima pesan. Tetapi
untuk mencegah kesalahan input, aplikasi
menyediakan form yang memudahkan user untuk memilih tujuan (penerima pesan). Setelah button
encrypt diklik, proses enkripsi akan dimulai.
Logo acrypt cs encryption Select receiver o Username 1 o Username 2 : : o Username n
next
cancel footer
Gambar 4.22. Rancangan halaman pilih tujuan
f. Halaman encryption complete
Halaman ini muncul setelah proses enkripsi selesai. Halaman ini menginformasikan file hasil enkripsi, ukuran file, waktu enkripsi, dan user penerima.
Logo acrypt cs
encryption
Encryption complete for these file File 1 File name : File size : Process time : : : : File n File name : File size : Process time : finish footer
Gambar 4.23. Rancangan halaman encryption complete
4. Perancangan Halaman Decrypt
Halaman dekripsi akan muncul jika user memilih menu “decrypt” pada halaman utama. Terdapat lima halaman dalam rancangan halaman decrypt, yaitu:
a. Rancangan halaman pilih file
Halaman pilih file merupakan halaman awal dari proses dekripsi. Terdapat checkbox untuk memilih file yang akan didekripsi. User diizinkan memilih paling banyak 10 file. Jika user memilih lebih dari
10 file, maka file ke 11 dan seterusnya akan diabaikan. Logo acrypt cs decryption Record 1 Record 2 : : : : Record n decrypt cancel footer
Gambar 4.24. Rancangan halaman pilih file
b. Halaman cek file
Halaman ini menampilkan sementara file-file yang akan didekripsi.
Logo acrypt cs decryption File 1 File name : File size : Sender : Date : : : : File n File name : File size : Sender : Date : next cancel footer
Gambar 4.25. Rancangan halaman cek file
c. Halaman input private key
Halaman ini meminta user untuk memasukkan kunci private miliknya. Kunci private ini akan digunakan untuk dekripsi password pada file yang terenkripsi. Setelah button decrypt diklik, proses dekripsi akan dimulai.
Logo acrypt cs
decryption Your private key:
next clear
cancel
footer
Gambar 4.26. Rancangan halaman input private key
d. Halaman decryption complete.
Halaman ini menginformasikan file hasil dekripsi, ukuran file, dan waktu dekripsi.
Logo acrypt cs
decryption
Decryption complete for these file File 1 File name : File size : Process time : : : : File n File name : File size : Process time : finish footer
Gambar 4.27. Rancangan halaman decryption complete
5. Perancangan Halaman Inbox
Halaman inbox akan muncul jika user memilih menu “inbox” pada halaman utama. Halaman ini menampilkan semua file terenkripsi yang telah dikirimkan oleh user lain kepadanya. User dapat langsung mendekripsi file dari halaman ini. Tetapi user hanya dapat mendekripsi satu file pada satu waktu. User juga dapat menghapus file tersebut.
No Filename Filesize Sender Date Action
Record 1 decrypt
Logo acrypt cs
inbox
delete
Record 2 decrypt delete
: : : :
Record n decrypt delete
footer
Gambar 4.28. Rancangan halaman inbox
6. Perancangan Halaman Outbox
Halaman outbox akan muncul jika user memilih menu “outbox” pada halaman utama. Halaman ini menampilkan semua file terenkripsi yang telah dikirimkan oleh user ini kepada user lain. User dapat menghapus file tersebut.
Logo acrypt cs
outbox
No Filename Filesize Receiver Date Action
Record 1 delete
Record 2 delete
: : : :
Record n delete
footer
Gambar 4.29. Rancangan halaman outbox
7. Perancangan Halaman My Key
Halaman my key akan muncul jika user memilih menu “my key” pada halaman utama. Halaman ini memberi kesempatan user untuk melihat kunci privat (jika user lupa) dan merubah pasangan kuncinya. Halaman ini dilindungi pertanyaan pengaman yang dibuat saat sign up. Jika pertanyaan dijawab dengan benar, maka private key akan muncul dan memberikan link untuk mengubah pasangan kuncinya. Jika user memilih link tersebut, maka aplikasi akan langsung membangkitkan pasangan kunci publik dan kunci private jika inbox user dalam keadaan kosong. Jika inbox tidak kosong, maka user harus
menghapus dulu seluruh file yang ada di inbox-nya. User juga dapat merubah lagi pasangan kuncinya dengan me- refresh halaman ini. User harus langsung menyimpan kunci private yang telah ada.
Logo acrypt cs
My key
image
For security reason, you have to answer your security question to get your private key or change your key pair..
sequrity question
your answer : answer
enter
clear
cancel
footer
Gambar 4.30. Rancangan halaman my key (security question)
Logo acrypt cs
My key
image
your private key : new key
Please safely keep your private key..
change my key
footer
Gambar 4.31. Rancangan halaman my key (private key)
Logo acrypt cs
Change key
image
your key has been change ! refresh page for new key..
you have to save your private key : new key
footer
Gambar 4.32. Rancangan halaman generate key
8. Perancangan Halaman Change Password
Halaman change password akan muncul jika user memilih menu “change password” di halaman utama. Halaman ini memberi kesempatan user untuk merubah password loginnya.
Logo acrypt cs Change password image current password : new password : confirm password : save clear footer
Gambar 4.33. Rancangan halaman change password
9. Perancangan Halaman Help
Halaman help akan muncul jika user memilih menu “help” pada halaman utama. Halaman ini menampilkan semua bantuan yang mungkin diperlukan oleh user. Termasuk sedikit materi tentang metode yang digunakan dalam aplikasi ini.
Logo acrypt cs
help
Singkat tentang acrypt cs
Algoritma AES Algoritma RSA
Link bantuan
Gambar marquee
footer
Gambar 4.34. Rancangan halaman help 10. Perancangan Halaman About
Halaman about akan muncul jika user memilih menu “about” pada halaman utama. Halaman ini menampilkan beberapa informasi tentang pembuat aplikasi.
Logo acrypt cs
about
foto
Nama : zaenal muttaqin Nim : 2040 9100 2553 Jurusan : teknik informatika Fakultas : sains dan tekologi e-mail : jayker85@gmail.com
Ucapan terima kasih
footer
Gambar 4.35. Rancangan halaman about
