Rancangan Halaman Login Rancangan Halaman Register Rancangan Halaman Kontak Rancangan Halaman Item Kontak Klik

Start Apakah kunci sudah tersedia? Membangkitkan kunci Rabin Enkripsi pesan Rabin Menerima pesan Apakah kunci sudah tersedia? Membangkitkan kunci RSA Enkripsi pesan RSA Mengirim pesan Mengirim pesan Menerima pesan Dekripsi pesan Rabin Mengirim pesan Menerima pesan Dekripsi pesan RSA Input pesan plaintext Ciphertext 1 Ciphertext 2 Ciphertext 3 Plaintext End PENGIRIM PENERIMA Pass Protocol 1 Pass Protocol 2 Pass Protocol 3 Tidak YA Tidak YA Gambar 3.9. Flowchart Sistem

3.4 Perancangan Sistem

3.4.1 Rancangan Halaman Login

Halaman login adalah halaman yang pertama kali muncul ketika pengguna menjalankan aplikasi tetap belum masuk ke dalam sistem. Melalui halaman login, pengguna dapat melakukan registrasi melalui tombol register. Rancangan halaman login dapat dilihat pada Gambar 3.10 dan keterangan gambar dapat dilihat pada Tabel 3.13. Tabel 3.13. Keterangan Halaman Login No. Jenis Objek Keterangan 1. EditText Input email 2. EditText Input kata sandi 3. Button Untuk masuk ke sistem menggunakan email dan password 4. Button Google sign in button, untuk masuk ke sistem menggunakan akun google. 5. Button Untuk pindah ke halaman register Gambar 3.10. Rancangan Halaman Login

3.4.2 Rancangan Halaman Register

Halaman register tampil setelah pengguna menekan tombon register pada halaman login. Rancangan halaman register dapat dilihat pada Gambar 3.11 dan keterangan gambar dapat dilihat pada Tabel 3.14 Tabel 3.14. Keterangan Halaman Register No. Jenis Objek Keterangan 1. EditText Input email 2. EditText Input kata sandi 3. EditText Input ulangi kata sandi 4. Button Untuk masuk ke sistem menggunakan email dan password 5. Button Google sign in button, untuk masuk ke sistem menggunakan akun google. 6. Button Untuk pindah ke halaman register Gambar 3.11. Rancangan Halaman Register

3.4.3 Rancangan Halaman Kontak

Halaman kontak tampil setelah pengguna berhasil masuk ke dalam sistem, baik itu dengan login ataupun register terlebih dahulu. Rancangan halaman kontak dapat dilihat pada Gambar 3.12 dan keterangan gambar dapat dilihat pada Tabel 3.15 Tabel 3.15. Keterangan Halaman Kontak No. Jenis Objek Keterangan 1. TabLayout Tab menu kontak dan daftar chat room 2. RecyclerView List tempat menampilkan semua kontak pengguna 3. ImageView Gambar profil pengguna 4. TextView Nama pengguna 5. TextView Status pengguna Gambar 3.12. Rancangan Halaman Kontak

3.4.4 Rancangan Halaman Item Kontak Klik

Halaman item kontak klik adalah sebuah ModalDialog yang tampil pada saat pengguna mengklik salah satu item kontak. Rancangan halaman item kontak klik dapat dilihat pada Gambar 3.13 dan keterangan gambar dapat dilihat pada Tabel 3.16 Tabel 3.16. Keterangan Rancangan Halaman Item Kontak Klik No. Jenis Objek Keterangan 1. ModalDialog Modal yang menampilkan data kontak 2. ImageView Gambar profil pengguna 3. TextView Nama pengguna 4. ImageView Button untuk masuk ke dalam chat room Gambar 3.13. Rancangan Halaman Item Kontak Klik

3.4.5 Rancangan Halaman Daftar Chat