Perancangan Antarmuka Fase Perancangan

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