id_inbox
int11 unsigned
auto_increment id_file
int11 id_user
int11
4. Nama Tabel
: outbox Primary Key
: id_outbox Foreign Key
: id_file, id_user Tipe File
: File Master
field type
attributes extra
id_outbox int11
unsigned auto_increment
id_file int11
id_user int11
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.
80
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.
81
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.
82
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
83
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
84
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.
85
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.
86
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.
87
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.
88
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
89
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.
90
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.
91
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.
92
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.
93
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.
94
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
95
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
96
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.
97
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.
98
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.
99
Logo acrypt cs
about
foto
Nama : zaenal muttaqin Nim : 2040 9100 2553
Jurusan : teknik informatika Fakultas : sains dan tekologi
e-mail : jayker85gmail.com
Ucapan terima kasih
footer
Gambar 4.35. Rancangan halaman about
4.5.5. State Transition Diagram