Kemudian ubah blok-blok P kedalam bentuk abjad P1 = 68 = D
P2 = 65 = A P3 = 83 = S
P4 = 65 = A P5 = 82 = R
Setelah sistem berhasil mendapatkan pesan asli hasil dari proses dekripsi, pesan asli tersebut akan ditampilkan oleh sistem secara otomatis kedalaman halaman
chat pada penerima pesan.
3.4 Perancangan Sistem
Pada penelitian ini perancangan sistem terbagi dua yakni menjelaskan tentang kebutuhan perangkat lunak yang digunakan dalam perancangan sistem NIC
Messenger dan perancangan antar muka sistem yang nantinya akan digunakan pada
setiap halaman NIC Messenger.
3.4.1 Kebutuhan Perangkat Lunak
Adapun aplikasi NIC Messenger ini dibangun dengan menggunakan bahasa pemrograman Javascript, Ajax dan HTML untuk aplikasi pada sisi pengguna yang
berjalan pada sistem operasi Android, dan menggunakan bahasa pemrograman PHP versi 5.3 pada sisi server, serta menggunakan DBMS MySQL untuk pengelolaan
database .
3.4.2 Perancangan Antar Muka Sistem
Perancangan sistem diperlukan agar sistem yang dibangun sesuai dengan yang diharapkan. Dengan adanya rancangan antar muka bertujuan untuk memudahkan
pengguna dalam pemakaian sistem. Berikut ini adalah beberapa rancangan low fidelity interface
pada NIC Messenger:
Universitas Sumatera Utara
A. Form Registrasi Berikut ini adalah rancangan dari form registrasi :
Gambar 3.16 Form Registrasi
Pada 3.16 diatas dapat dilihat bahwa terdapat enam input box yang harus diisi dan dua command button yaitu: fullname, username, email, phone number, password,
retype password, submit dan reset.
Keterangan: A. Fullname, nama lengkap user pengguna yang akan memakai software
messenger ini.
B. Username, sebagai identitas pengguna yang unik antara satu pengguna dengan pengguna lainnya pada saat aktifitas login.
C. Email, untuk mengirimkan link aktifasi akun. D. Phone number, untuk informasi tambahan bagi pengguna kepada pengguna
lainnya. E. Password, untuk aktifitas login.
F. Retype password, untuk menguji apakah password yang telah diinputkan telah sesuai dengan yang diinginkan oleh pengguna agar tidak terjadi
kekeliruan. G. Submit, tombol untuk mengirim informasi dari form registrasi kepada
sistem untuk disimpan kedalam database. H. Reset, tombol untuk mengosongkan semua input box.
A B
C D
E F
G H
Universitas Sumatera Utara
B. Form Login Berikut ini adalah rancangan dari form login :
Gambar 3.17 Form Login
Pada gambar 3.17 dapat dilihat bahwa terdapat dua input box dan dua command button
yaitu: username, password, submit dan reset. Keterangan:
A. Username, untuk melakukan authentifikasi pengguna kedalam sistem. B. Password, untuk melakukan authentifikasi pengguna kedalam sistem.
C. Submit, tombol untuk mengirim kombinasi username dan password kepada
sistem untuk diproses. D. Reset, tombol untuk mengosongkan semua input box.
C. Halaman Utama Pada halaman utama terdapat empat tombol untuk bernavigasi yaitu: Option, Chat,
NIC dan List. Tombol option berfungsi untuk menampilkan opsi untuk logout, tombol chat
berfungsi untuk menampilkan daftar percakapan, tombol NIC berfungsi untuk menampilkan daftar teman, dan tombol List berfungsi untuk menampilkan daftar
pengguna NIC.
Gambar 3.18 Halaman Utama
A B
C D
Universitas Sumatera Utara
Pada gambar 3.18 dapat dilihat bahwa halaman utama menampilkan halaman chat
, yaitu halaman yang menampilkan daftar dari teman yang pernah mengirim pesan kepada si pengguna. Pada halaman ini nantinya juga akan menampilkan jumlah pesan
yang telah terkirim dan diterima antara pengguna dan teman pengguna.
D. Halaman Daftar Teman Berikut ini adalah rancangan dari halaman daftar teman:
Gambar 3.19
Halaman Daftar Teman
Keterangan: A. Option, tombol yang berfungsi untuk menampilkan fitur logout dan
informasi tentang aplikasi. B. NIC, judul dari halaman yang sedang aktif saat ini.
C. Kolom yang digunakan untuk menampung seluruh daftar teman. D. NIC, tombol dari menu NIC yang berfungsi untuk menampilkan seluruh
teman. E. Chat, tombol dari menu Chat yang berfungsi untuk menampilkan seluruh
percakapan pada teman. F. List, tombol dari menu List yang berfungsi untuk menampilkan seluruh
pengguna NIC Messenger.
A B
C
D E
F
Universitas Sumatera Utara
Pada gambar 3.19 dapat dilihat bahwa halaman NIC hanya menampilkan daftar dari pengguna yang telah terhubung dengan si pengguna. Pengguna hanya perlu
memilih salah satu teman dari halaman NIC untuk mengirimkan pesan, dan juga dapat menghapus teman yang telah dipilih dari pertemanan. Jika koneksi antara pengguna
dan teman tersebut telah terhapus dari database, maka semua pesan antara mereka berdua juga telah terhapus dari database.
E. Halaman Hapus Teman Berikut ini adalah rancangan dari halaman hapus pertemanan:
Gambar 3.20 Halaman Hapus Teman
Keterangan: A. Pesan peringatan yang akan ditampilkan kepada pengguna ketika pengguna
ingin menghapus pertemanan dari seseorang. B. Yes, tombol konfirmasi menyetujui sistem untuk menghapus pertemanan
dari seorang teman. C. No, tombol pembatalan untuk menghapus pertemanan dari seorang teman,
dan kembali ke halaman sebelumnya.
A B
C
Universitas Sumatera Utara
F. Halaman Daftar Pengguna Berikut ini adalah rancangan dari halaman daftar pengguna
Gambar 3.21
Halaman Daftar Pengguna
Keterangan: A. Option, tombol yang berfungsi untuk menampilkan fitur logout dan
informasi tentang aplikasi. B. NIC, judul dari halaman yang sedang aktif saat ini.
C. Kolom yang digunakan untuk menampung seluruh daftar teman. D. NIC, tombol dari menu NIC yang berfungsi untuk menampilkan seluruh
teman. E. Chat, tombol dari menu Chat yang berfungsi untuk menampilkan seluruh
percakapan pada teman. F. List, tombol dari menu List yang berfungsi untuk menampilkan seluruh
pengguna NIC Messenger.
Pada gambar 3.21 dapat dilihat bahwa halaman list berfungsi untuk menampilkan seluruh pengguna NIC Messenger, fitur ini berguna untuk
menghubungkan antara satu user dengan user lainnya yang belum berteman.
A B
C
D E
F
Universitas Sumatera Utara
G. Form Tambah Teman Berikut ini adalah rancangan dari halaman tambah teman:
Gambar 3.22
Halaman Tambah Teman
Keterangan: A. Pesan peringatan yang akan ditampilkan kepada pengguna ketika pengguna
ingin menghapus pertemanan dari seseorang. B. Yes, tombol konfirmasi menyetujui sistem untuk menghapus pertemanan
dari seorang teman. C. No, tombol pembatalan untuk menghapus pertemanan dari seorang teman,
dan kembali ke halaman sebelumnya.
Dari gambar 3.22 dapat dilihat program menampilkan kotak peringatan kecil untuk meminta persetujuan pengguna. Untuk menambahkan teman, pengguna harus
memilih salah satu pengguna pada halaman daftar pengguna, kemudian akan muncul pilihan untuk menambahkan sebagai teman. Jika user memilih Yes pada kotak
peringatan kecil tersebut maka secara otomatis sistem akan mengambil id_user dan id_teman baru kemudian melakukan query penambahan teman kedalam database.
A B
C
Universitas Sumatera Utara
H. Form Chat Berkut ini adalah rancangan dari halaman form chat:
Gambar 3.23 Halaman Form Chat
Keterangan: A. Back, tombol yang berfungsi untuk kembali ke halaman sebelumnya
B. Nama penerima, nama dari penerima pesan. C. Delete, tombol yang berfungsi untuk menghapus seluruh pesan antara
pengguna dan si penerima. D. Kolom yang berfungsi untuk menampung seluruh pesan antara pengguna
dan si penerima. E. Text box, kotak pesan untuk menuliskan pesan yang akan dikirim.
F. Tombol yang berfungsi untuk mengirimkan pesan kepada penerima.
Dari gambar 3.23 dapat dilihat bahwa form chat akan menampilkan pesan yang dikirim dan diterima antar pengirim dan penerima, pada halaman chat terdapat
tombol send untuk mengirim pesan, tombol delete yang berfungsi untuk menghapus seluruh pesan antara sender dan receiver dan tombol back untuk kembali ke halaman
daftar teman.
A B
C
D
E F
Universitas Sumatera Utara
3.5 Perancangan Database
