Perancangan Sistem dan Antarmuka Pemakai

3.5. Perancangan Sistem dan Antarmuka Pemakai

Perancangan perangkat lunak keamanan pesan teks pada email terdiri dari penggambaran atau perencanaan dari beberapa elemen dalam pengembangan aplikasi. Aplikasi ini digunakan untuk mengamankan enkripsi pesan teks lewat email. Aplikasi ini menerapkan algoritma RSA dan TTVC untuk mengamankan pesan teks. 3.5.1. Perancangan Database Database pada aplikasi ini berfungsi untuk tempat penyimpanan data-data antara lain tabel pesan dan table tabeluser. a. Tabel pesan Tabel ini berfungsi sebagai penyimpanan pesan antar user. Struktur tabel ini dapat dilihat pada Tabel 3.1 Table 3.1 Tabel pesan No Nama Field Tipe Ukuran Keterangan 1. Idpeasan Int 20 Nomor Id Pesan primary key 2. Userid Varchar 20 Nomor Id User 3. Kepada Varchar 50 Email Tujuan 4. Subject Varchar 50 Subject pesan 5. Encrypted Text - Pesan yang dienkripsi 6. Ekey1 Int 3 Kunci transposisi 1 7. Ekey2 Int 3 Kunci transposisi 2 8. Ekey3 Int 3 Kunci transposisi 3 9. Esubs1 Text - Kunci subsitusi 1 Universitas Sumatera Utara 10. Esubs2 Text - Kunci subsitusi 2 11. Esubs3 Text - Kunci subsitusi 3 b. Tabel table user Tabel ini berfungsi sebagai tempat penyimpanan daftar user pada sistem. Struktur tabel ini dapat dilihat pada Tabel 3.2 Table 3.2 Tabel table user No Nama Field Tipe Ukuran Keterangan 1. User_id Varchar 20 Nomor Id User 2. Name Varchar 50 Nama User 3. Password Varchar 50 Password User 4. Email Varchar 50 Nama email user 5. Level Varchar 15 Membedakan User 3.5.2. Perancangan Relasi Antar Tabel Rancangan relasi antar tabel berfungsi untuk menampilakn informasi relasi dependence antara tabel pada database. Rancangan relasi antar tabel dapat dilihat seperti Gambar 3.3 Universitas Sumatera Utara pesan PK idpesan userid kepada subject encrypted ekey1 ekey2 ekey3 esubs1 esubs2 esubs3 tabeluser PK userid name password email level FK1 idpesan Gambar 3.4 Relasi Database 3.5.3. Rancangan Halaman Login Rancangan halaman login berfungsi sebagai halaman utama untuk masuk ke sistem. Bentuk rancangan halaman login dapat dilihat seperti pada Gambar 3.4 berikut. Gambar 3.5 Rancangan Halaman Login 1. password 2. username 3. enter 4. daftar Universitas Sumatera Utara Rancangan halaman login pada Gambar 3.4 terdapat empat komponen penting pada antarmuka, yaitu input form 1 dan 2 yang berfungsi untuk menampung username dan password dari pengguna, tombol masuk 3 yang menunjukkan ke halaman home jika proses validasi username dan password benar, dan link daftar 4 yang berfungsi menunjukkan halaman daftar untuk user yang belum terdaftar. 3.5.4. Rancangan Halaman Daftar Rancangan halaman daftar berfungsi untuk menampilkan input form untuk mendaftar pada sistem. Bentuk rancangan Home terlihat seperti pada Gambar 3.5. Gambar 3.6 Rancangan Halaman Daftar Rancangan halaman daftar pada Gambar 3.5 terdapat tujuh komponen penting pada antarmuka, yaitu input form1 sampai 5 yang menggambarkan sistem menampung informasi seperti nama, user id, password, konfirmasi password, dan email sebagai parameter yang akan disimpan kedalam sistem, tombol “daftar”6 1. Name 6. daftar 7. cancel 2. User Id 3. Password 4. Konfirmasi Password 5. Email Universitas Sumatera Utara untuk melakukan proses daftar, tombol ”cancel” 7 untuk membatalkan proses pendaftaran. 3.5.5. Rancangan Halaman Home Rancangan halaman home berfungsi sebagai halaman utama untuk masuk ke sistem. Bentuk rancangan halaman login dapat dilihat seperti pada Gambar 3.6 berikut. Gambar 3.7 Rancangan Halaman Home Rancangan halaman home pada Gambar 3.6 pada halaman home terdapat 7 komponen penting pada antarmuka, yaitu 1 header berfungsi sebagai nama dari sistem, 2 tombol home untuk melakukan proses kembali ke halaman utama, 3 tombol compose untuk melakukan proses pengisian email, 4 tombol inbox untuk melakukan proses pesan yang masuk, 5 tombol sent email untuk melakukan proses 1.Header 2.Home 3.Compose 4.Inbox 5.Sent Email 6.Log out 7.view Universitas Sumatera Utara laporan surat yang terkirim. 6 tombol log out untuk melakukan proses keluar dari sistem.7 view kotak untuk menampilkan proses keseluruhan proses tombol sistem. 3.5.6. Rancangan Halaman Compose Rancangan halaman compose berfungsi sebagai halaman untuk membuat pesan teks yang akan diproses menjadi teks yang telah terenkripsi. Bentuk rancangan halaman compose dapat dilihat seperti pada Gambar 3.7 berikut. Gambar 3.8 Rancangan Halaman Compose 12.send 11.proses 2.to 3.subject 4.isi email 5.kunci transposisi 1 6.subsititusi vigenere 1 7.kunci transposisi 2 8.subsititusi vigenere 2 9.kunci transposisi 3 1.compose 10. subsititusi vigenere 3 Universitas Sumatera Utara Rancangan halaman home pada Gambar 3.7 pada halaman compose terdapat 12 komponen penting pada antarmuka, yaitu 1 tombol compose untuk melakukan proses pengisian email, 2 field tujuan berfungsi untuk mengisi alamat yang dituju, 3 field subject berfungsi untuk menulis subject surat, 4 field teks email berfungi untuk menampung pesan teks, 5 field kunci transposisi pertama berfungsi untuk memasukkan kunci pertama . 6 field substitusi vigenere pertama berfungsi untuk menampilkan hasil dari transposisi pertama . 7 field kunci transposisi kedua berfungsi untuk memasukkan kunci kedua.8 field substitusi vigenere kedua berfungsi untuk menampilkan hasil dari transposisi kedua .9 field kunci transposisi ketiga berfungsi untuk memasukkan kunci ketiga.10 field substitusi vigenere ketiga berfungsi untuk menampilkan hasil dari transposisi tiga. 11 tombol proses berfungsi untuk melakukan proses teks asli asli menjadi teks yag terenkripsi. 12 tombol send berfungsi untuk mengirim pesan. 3.5.7. Rancangan Halaman inbox Rancangan halaman inbox berfungsi sebagai halaman untuk melihat pesan yamg ada di dalam sistem. Bentuk rancangan halaman compose dapat dilihat seperti pada Gambar 3.8 berikut. Gambar 3.9 Rancangan Halaman Inbox 1.Inbox 2.No 3.Dari 4.Subject 5.Isi Email Universitas Sumatera Utara Rancangan halaman home pada Gambar 3.8 pada halaman inbox terdapat 5 komponen penting pada antarmuka, yaitu 1 tombol inbox untuk melakukan proses pesan yang ada didalam sistem, 2 field No berfungsi untuk melihat urutan pesan yang ada didalam inbox, 3 field Dari berfungsi untuk memberikan informasi asal pesan, 4 field subject berfungsi untuk menulis subject surat. 5 field isi email berfungsi untuk melihat pesan teks yang ada didalam email. 3.5.8. Rancangan Halaman Sent Email Rancangan halaman inbox berfungsi sebagai halaman untuk melihat sent email yamg ada di dalam sistem. Bentuk rancangan halaman compose dapat dilihat seperti pada Gambar 3.9 berikut. Gambar 3.10 Rancangan Halaman Sent Email Rancangan halaman home pada Gambar 3.9 pada halaman sent email terdapat 4 komponen penting pada antarmuka, yaitu 1 tombol sent email untuk melakukan proses laporan surat yang terkirim, 2 field No berfungsi untuk melihat urutan pesan yang ada didalam inbox, 3 field To berfungsi untuk memberikan informasi tujuan pesan z, 4 field subject berfungsi untuk menulis subject surat. 5 field isi email berfungsi untuk melihat pesan teks yang ada didalam email 1.Sent Email 2.No 3.To 3.Subject 4.Isi Email Universitas Sumatera Utara 3.5.9. Rancangan Halaman Log Out Gambar 3.11 Rancangan Halaman Log Out Rancangan halaman home pada Gambar 3.10 pada halaman Log Out terdapat 1 komponen penting pada antarmuka, yaitu tombol log out untuk melakukan proses keluar dari sistem. 1.Log Out Universitas Sumatera Utara BAB 4 IMPLEMENTASI DAN PENGUJIAN SISTEM Pada bab ini akan dijelaskan tahapan selanjutnya dalam pengembangan aplikasi yaitu tahap implementasi dan pengujian sistem. Di sini akan dijelaskan tentang proses pengimplementasian algoritma ke dalam sistem dan melakukan pengujian dari sistem yang dikembangkan.

4.1. Spesifikasi Perangkat Keras dan Perangkat Lunak