Halaman daftar Uji tampilan sistem Uji tampilan sistem

Untuk perangkat lunak, yang dapat mendukung agar aplikasi dapat berjalan adalah sebagai berikut: 1. Operating system Microsoft Windows 7, Windows 8, 2. Browser, seperti Mozilla Firefox, Google Chrome, dan lain-lain, 3. PHP 5.3.1, 4. MySQL 5.1.41, 5. Web Server Apache 2.2.14.

4.2 Antarmuka Pengguna

User Interface Setelah melewati tahap analisis perancangan antarmuka pengguna, rancangan digunakan sebagai acuan untuk peng-coding-an halaman-halaman pada perangkat lunak. Rencana pengujian sistem yang akan diuji dapat dilihat pada Tabel 4.1 berikut. Tabel 4.1 Tabel Rencana Pengujian 4.2.1 Tampilan Halaman Login Halaman utama yang telah dilakukan peng-coding-an ditunjukkan pada Gambar 4.1 berikut. No. Komponen Sistem yang Diuji Butir Uji 1. Halaman login Mencoba menu yang ada pada halaman login yaitu : form input “username”,form input “password”,tombol “enter”,dan tombol “daftar”.

2. Halaman daftar

Mencoba menu yang ada pada halaman daftar yaitu : form input “daftar”,tombol “daftar”,dan tombol”cancel”. 3. Halaman home Mencoba menu yang ada pada halaman home yaitu : tombol “ home”,tombol ”compose”,tombol “inbox”,tombol”sent email”,dan tombol “logout”. Universitas Sumatera Utara Gambar 4.1 Tampilan halaman Login Halaman login seperti yang ditunjukkan pada Gambar 4.1, telah diberikan satu buah tombol yang dapat digunakan oleh pengguna untuk masuk ke halaman home. Tabel 4.2 Tabel Hasil Evaluasi pada Tampilan Halaman login No. Sasaran Pengujian Hasil yang Diharapkan Hasil Pengujian Status

1. Uji tampilan sistem

ketika dieksekusi Menampilkan halaman login Menampilkan halaman login Berhasil 2. Uji pemilihan tombol Enter Memposes dan menampilkan halaman home Memposes dan menampilkan halaman home Berhasil 4.2.2 Tampilan Halaman Daftar Halaman daftar email yang telah dilakukan peng-codiing-an ditunjukkan Gambar 4.2 berikut. Universitas Sumatera Utara Gambar 4.2 Tampilan halaman Daftar Email Halaman daftar email yang ditunjukkan pada gambar 4.2. telah diberikan dua buah tomboldaftar dan tombolcancel yang dapat digunakan oleh pengguna untuk memdaftar akun email baru. Setelah pen-coding-an telah selesai dilakukan, maka selanjutnya dilakukanlah evaluasi terhadap tampilan halaman login. Hasil proses evaluasi dapat Tabel 4.3 Tabel Hasil Evaluasi pada Tampilan Halaman Daftar Email No. Sasaran Pengujian Hasil yang Diharapkan Hasil Pengujian Status

1. Uji tampilan sistem

ketika dieksekusi Menampilkan halaman Menampilkan halaman daftar Berhasil 2. Uji pemilihan tombol Enter dan tombol cancel Memposes dan menampilkan halaman silahkan login Memposes dan menampilkan halaman silahkan login Berhasil 4.2.3 Tampilan Halaman Home Halaman home berisi tampilan sistem berupa header, menu, footer.Pada bagian header terdapat keterangan sistem.Pada bagian menu terdapat tombol home, tombol Universitas Sumatera Utara compose , tombol inbox, tombol send email dan tombol logout. Pada bagian footer terdapat bagian pembuat sistem. Halaman home yang telah dilakukan peng-coding- an ditunjukkan pada Gambar 4.3. Gambar 4.3 Tampilan halaman Home Tabel 4.4 Tabel Hasil Evaluasi pada Tampilan Halaman Home No . Sasaran Pengujian Hasil yang Diharapkan Hasil Pengujian Status 1 Uji tampilan halaman home Menampilkan “Header”,”Menu”, ”Footer” ” Menampilkan “Header”,”Menu”,”Footer” Berhasil 2 Uji pemilihan Tombol Proses tombol“home”, “Compose”,”Inbox”, “Send box”,dan “Logout” Proses tombol“home”, “Compose”,”Inbox”,“Send box”,dan “Logout”” Berhasil 4.2.4 Tampilan Halaman Compose Pada halaman ini disediakan tombol compose untuk membuat pesan. Dan kolom input untuk memasukan tujuan, subject, isi email, kunci transposisi pertama, subsititusi vigenere pertama, kunci transposisi kedua, subsititusi kedua, kunci transposisi ke Universitas Sumatera Utara tiga,dan subsititusi ketiga. Kemudian terdapat tombol proses untuk mengenkripsi file teks yang akan dikirim. Dan terdapat tombol send untuk mengirim pesan. Gambar 4.4 Tampilan halaman Compose Setelah pen-coding-an telah selesai dilakukan, maka selanjutnya dilakukanlah evaluasi terhadap tampilan halaman home. Hasil proses evaluasi dapat dilihat pada Tabel 4.5 berikut. Tabel 4.5 Tabel Hasil Evaluasi pada Tampilan Halaman Compose No. Sasaran Pengujian Hasil yang Diharapkan Hasil Pengujian Status 1 Uji tampilan halaman compose Menampilkan kolom input untuk “memasukan tujuan”, “subject”,” isi email”,” kunci Menampilkan kolom input untuk “memasukan tujuan”, “subject”,” isi email”,” kunci Berhasil Universitas Sumatera Utara transposisi pertama ”, “subsititusi vigenere pertama ”,” kunci transposisi kedua ”, “subsititusi kedua”, “kunci transposisi ke tiga ,”dan “subsititusi ketiga ” transposisi pertama ”, “subsititusi vigenere pertama ”,” kunci transposisi kedua ”, “subsititusi kedua”, “kunci transposisi ke tiga ,”dan “subsititusi ketiga ” 2 Uji pemilihan Tombol Proses tombol “Proses”,dan “Send” Proses tombol “Proses”,dan “Send” Berhasil Universitas Sumatera Utara Gambar 4.5 Tampilan halaman Proses Enkripsi Tampilan halaman diatas menunujukkan output dari proses enkripsi pesan teks yang akan dikirim. Setelah pen-coding-an telah selesai dilakukan, maka selanjutnya dilakukanlah evaluasi terhadap tampilan halaman proses enkripsi. Hasil proses evaluasi dapat dilihat pada Tabel 4.6 berikut. Universitas Sumatera Utara Tabel 4.6 Tabel Hasil Evaluasi pada Tampilan halaman proses enkripsi No. Sasaran Pengujian Hasil yang Diharapkan Hasil Pengujian Status 1 Uji tampilan halaman compose Menampilkan kolom output Menampilkan kolom output Berhasil 2 Uji pemilihan Tombol Proses tombol “Send” Proses tombol “Send” Berhasil 4.2.5. Tampilan Halaman Inbox Halaman ini menampilkan pesan email yang masuk. Dapat dilihat pada Gambar 4.6 Gambar 4.6 Tampilan halaman Inbox Setelah pen-coding-an telah selesai dilakukan, maka selanjutnya dilakukanlah evaluasi terhadap tampilan halaman inbox. Hasil proses evaluasi dapat dilihat pada Tabel 4.7 berikut. Universitas Sumatera Utara Tabel 4.7 Tabel Hasil Evaluasi pada Tampilan halaman inbox No. Sasaran Pengujian Hasil yang Diharapkan Hasil Pengujian Status 1 Uji tampilan halaman inbox Menampilkan Icon “Delete “dan Icon Surat Menampilkan Icon ” Delete” dan Icon Surat Berhasil 2 Uji pemilihan Icon Proses Icon “Delete”dan Icon Surat Proses Icon “Delete”dan Icon Surat Berhasil 4.2.6 Tampilan Halaman Dekripsi Halaman ini menampilkan pesan email yang akan di deskripsikan. Dapat dilihat pada Gambar 4.7 Gambar 4.7 Tampilan halaman Dekripsi Setelah pen-coding-an telah selesai dilakukan, maka selanjutnya dilakukanlah evaluasi terhadap tampilan halaman dekripsi. Hasil proses evaluasi dapat dilihat pada Tabel 4.8 berikut. Universitas Sumatera Utara Tabel 4.8 Tabel Hasil Evaluasi pada Tampilan halaman proses enkripsi No. Sasaran Pengujian Hasil yang Diharapkan Hasil Pengujian Status 1 Uji tampilan halaman dekripsi Menampilkan kolom Dari, Subject Menampilkan kolom Dari, Subject Berhasil 2 Uji pemilihan Tombol Proses tombol “Dekripsi” Proses tombol “Dekripsi” Berhasil Jika icon email diklik maka akan muncul tombol dekripsi, pengguna harus menekan tombol dekripsi agar pesan teks yang telah dienkripsi kembali ke chiperteks yang asli. Universitas Sumatera Utara Gambar 4.8 Tampilan halaman hasil Teks Dekripsi Setelah pen-coding-an telah selesai dilakukan, maka selanjutnya dilakukanlah evaluasi terhadap tampilan halaman dekripsi. Hasil proses evaluasi dapat dilihat pada Tabel 4.9 berikut Universitas Sumatera Utara Tabel 4.9 Tabel Hasil Evaluasi pada Tampilan halaman proses dekripsi No. Sasaran Pengujian Hasil yang Diharapkan Hasil Pengujian Status 1 Uji tampilan halaman dekripsi Menampilkan kolom output Menampilkan kolom output Berhasil 2 Uji pemilihan Tombol Proses tombol “Dekripsi” Proses tombol “Dekripsi” Berhasil 4.2.7 Tampilan Halaman Send Email Halaman ini menampilkan laporan email yang sudah terkirim. Dapat dilihat pada Gambar 4.9 Gambar 4.9 Tampilan halaman Send Email Setelah pen-coding-an telah selesai dilakukan, maka selanjutnya dilakukanlah evaluasi terhadap tampilan halaman sent email. Hasil proses evaluasi dapat dilihat pada Tabel 4.10 berikut : Universitas Sumatera Utara Tabel 4.10 Tabel Hasil Evaluasi pada Tampilan halaman sent email No. Sasaran Pengujian Hasil yang Diharapkan Hasil Pengujian Status 1 Uji tampilan halaman Sent Email Menampilkan No,To,Subject,Isi Email Menampilkan No,To,Subject,Isi Email Berhasil 2 Uji pemilihan Icon Proses Icon “Surat”dan”Delete” Proses Icon “Surat”dan”Delete” Berhasil

4.3 Pengujian Sistem Secara Menyeluruh