Perancangan Antarmuka Interface ANALISIS DAN PERANCANGAN

30 Universitas Sumatera Utara Gambar 3.13 Pseudocode Dekripsi Vigenere

3.3. Perancangan Antarmuka Interface

Perancangan antarmuka interface merupakan bagian yang penting dalam membangun sebuah sistem. Antarmuka yang dirancang harus memperhatikan kenyamanan dan kemudahan pengguna dalam menjalankan sistem. 3.3.1. Screen launcher Screen launcher merupakan gambar yang muncul saat sistem dibuka pertama kali. Screen launcher akan digunakan untuk menampilkan logo aplikasi saat sistem sedang melakukan proses untuk menampilkan halaman pengamanan. Rancangan screen launcher dapat dilihat pada Gambar 3.14. Kamus : ciphertext1, key1, key, plaintext : string pesan, i, j, k : integer Algoritma : Input ciphertext1 Input key1 For i=0; iciphertext1.length; i++ j = i key1.length key += key1.charAtj EndFor For i=0; iciphertext1.length; i++ j = int ciphertext1.charAti k = {int} key.charAti If j = k pesan = j-32 - k-32 95 Else pesan = j-32 + 95 – k-32 95 EndIf EndFor pesan += 32 ciphertext += char pesan EndFor return plaintext Universitas Sumatera Utara 31 Universitas Sumatera Utara Gambar 3.14 Rancangan Screen Launcher 3.3.2. Halaman pengamanan Halaman pengamanan merupakan halaman yang ditampilkan setelah screen launcher. Halaman ini akan digunakan untuk memasukkan plaintext, key1 dan key2, melakukan proses enkripsi, serta menampilkan ciphertext2. Rancangan halaman Pengamanan dapat dilihat pada Gambar 3.15. Universitas Sumatera Utara 32 Universitas Sumatera Utara Gambar 3.15 Rancangan Halaman Pengamanan Pada Gambar 3.15 ditunjukkan bahwa halaman pengamanan terdiri dari beberapa komponen, yaitu Tab, Button, CheckBox, EditText dan TextView. Keterangan komponen tersebut dapat dilihat pada Tabel 3.3. Tabel 3.3 Keterangan Gambar Rancangan Halaman Pengamanan No Keterangan 1 Tab Pengamanan untuk menampilkan halaman pengamanan 2 Tab Pengungkapan untuk menampilkan halaman pengungkapan 3 Button Bantuan untuk menampilkan halaman bantuan 4 Button Tentang untuk menampilkan halaman tentang 5 Button Reset untuk mengosongkan semua kolom masukkan 6 Button Enkripsi untuk memulai proses enkripsi 7 CheckBox Lihat Kunci 1 untuk menampilkan atau menyembunyikan key1 8 CheckBox Lihat Kunci 2 untuk menampilkan atau menyembunyikan key2 9 EditText Kunci 1 untuk memasukkan key1 10 EditText Kunci 2 untuk memasukkan key2 11 EditText Plaintext untuk memasukkan plaintext 12 TextView Ciphertext untuk menampilkan ciphertext2 Universitas Sumatera Utara 33 Universitas Sumatera Utara 3.3.3. Halaman pengungkapan Halaman pengungkapan merupakan halaman yang ditampilkan saat pengguna menekan Tab Pengungkapan. Halaman ini akan digunakan untuk memasukkan ciphertext2, key1 dan key2, melakukan proses dekripsi serta menampilkan plaintext. Rancangan halaman pengungkapan dapat dilihat pada Gambar 3.16 Gambar 3.16 Rancangan Halaman Pengungkapan Pada Gambar 3.16 ditunjukkan bahwa halaman pengungkapan terdiri dari beberapa komponen, yaitu Tab, Button, CheckBox, EditText dan TextView. Keterangan komponen tersebut dapat dilihat pada Tabel 3.4. Universitas Sumatera Utara 34 Universitas Sumatera Utara Tabel 3.4 Keterangan Gambar Rancangan Halaman Pengungkapan No Keterangan 1 Tab Pengamanan untuk menampilkan halaman pengamanan 2 Tab Pengungkapan untuk menampilkan halaman pengungkapan 3 Button Bantuan untuk menampilkan halaman bantuan 4 Button Tentang untuk menampilkan halaman tentang 5 Button Reset untuk mengosongkan semua kolom masukkan 6 Button Dekripsi untuk memulai proses dekripsi 7 CheckBox Lihat Kunci 1 untuk menampilkan atau menyembunyikan key1 8 CheckBox Lihat Kunci 2 untuk menampilkan atau menyembunyikan key2 9 EditText Kunci 1 untuk memasukkan key1 10 EditText Kunci 2 untuk memasukkan key2 11 EditText Ciphertext untuk memasukkan ciphertext2 12 TextView Plaintext untuk menampilkan plaintext 3.3.4. Halaman bantuan Halaman bantuan merupakan halaman yang ditampilkan saat pengguna menekan Button Bantuan. Halaman ini akan digunakan untuk membantu pengguna dalam menjalankan sistem. Rancangan halaman bantuan dapat dilihat pada Gambar 3.17. Universitas Sumatera Utara 35 Universitas Sumatera Utara Gambar 3.17 Rancangan Halaman Bantuan Pada Gambar 3.17 ditunjukkan bahwa halaman bantuan terdiri dari beberapa komponen, yaitu Button, TextView dan FrameLayout. Keterangan komponen tersebut dapat dilihat pada Tabel 3.5. Tabel 3.5 Keterangan Gambar Rancangan Halaman Bantuan No Keterangan 1 Button Kembali untuk kembali ke halaman pengamanan 2 Button Penggunaan untuk memberikan informasi penggunaan aplikasi 3 Button Algoritma untuk memberikan informasi algoritma yang digunakan 4 TextView Judul untuk menampilkan judul halaman 5 TextView Bantuan untuk menampilkan informasi yang dipilih 6 FrameLayout Komponen untuk menampilkan informasi komponen pada halaman pengamanan atau pengungkapan 3.3.5. Halaman tentang Halaman tentang merupakan halaman yang ditampilkan saat pengguna menekan Button Tentang. Halaman ini akan digunakan untuk menampilkan informasi tentang pembuat sistem. Rancangan halaman tentang dapat dilihat pada Gambar 3.18. Universitas Sumatera Utara 36 Universitas Sumatera Utara Gambar 3.18 Rancangan Halaman Tentang Pada Gambar 3.17 ditunjukkan bahwa halaman tentang terdiri dari beberapa komponen seperti Button, TextView dan ImageView. Keterangan komponen tersebut dapat dilihat pada Tabel 3.6. Tabel 3.6 Keterangan Gambar Rancangan Halaman Tentang No Keterangan 1 Button Kembali untuk kembali ke halaman pengamanan 2 TextView Judul untuk menampilkan judul halaman 3 ImageView untuk menampilkan informasi pembuat aplikasi Universitas Sumatera Utara Universitas Sumatera Utara

BAB 4 IMPLEMENTASI DAN PENGUJIAN