BAB IV PERANCANGAN SISTEM 4.1 Perancangan sistem Pada bagian ini akan dijelaskan beberapa tahapan untuk membuat sebuah aplikasi mulai dari alur aplikasi, perancangan antar muka, perancangan arsitektural, perancangan prosedural, perancangan sistem menggunakan UML termasuk beberapa diagram yang terdapat di dalamnya ini bisa di bagi dua yaitu: 1. User berinteraksi dengan sistem melalui aplikasi yang telah berjalan di Smartphone. 2. Aplikasi menerima inputan yang selanjutnya di eksekusi untuk di lakukan proses enkripsi atau dekripsi. Gambar 4.1 Arsitektur Proses 4.1.1 Model Pengembangan Sistem Pengembangan sistem aplikasi ditujukan untuk menghasilkan sebuah aplikasi enkripsi dengan menggunakan antar muka. Dalam proses sistem ini dapat dikelompokkan menjadi tiga proses utama, yaitu input atau masukan, proses, dan output. Didalam sistem aplikasi ini dapat mengenkripsi kata (alphabet) dan juga melakukan dekripsi pesan yang dimasukkan oleh pengguna. Berikut diagram blok dari sistem yang dikembangkan. 58
Gambar 4.2 Blok Diagram Aplilkasi 4.2 Perancangan Proses Perancangan proses digunakan untuk menggambarkan sejumlah proses terstruktur dalam sistem, berorientasikan pada aliran proses yang terjadi. Sistem yang dipakai adalah menggunakan sistem UML (Unified Modeling Language). Adapun struktur diagram pada aliran proses aplikasi enkripsi atau dekripsi Caesar Cipher terdiri dari: a. Use Case Diagram, menggambarkan suatu urutan interaksi antara satu atau lebih aktor dan sistem. Dalam fase requirements, model use case menggambarkan sistem sebagai sebuah kotak hitam dan interaksi antara aktor dan sistem dalam suatu bentuk naratif, yang terdiri dari input user dan respon respon sistem. Aktor mempresentasikan orang yang akan mengoperasikan atau orang yang berinteraksi dengan sistem aplikasi. b. Activity Diagram, pada dasarnya Activity Diagram sering digunakan oleh flowchart. Diagram Aktivitas berfokus pada aktifitas aktifitas yang terjadi terkait dalam suatu proses tunggal yang memodelkan perilaku use case dan objek didalam sistem aplikasi. 59
c. Sequence Diagam, menjelaskan secara detil urutan proses yang dilakukan dalam sistem aplikasi untuk mencapai tujuan dari use case interaksi yang terjadi antar class, operasi apa saja yang terlibat, urutan antar operasi, dan informasi yang diperlukan oleh masing masing operasi. d. Flowchart, menggambarkan proses kerja Enkripsi atau Dekripsi dari metode Caesar Cipher. 4.2.1 Use Case Diagram Use Case Diagram merupakan interaksi atau dialog antara sistem dan aktor, termasuk pertukaran pesan dan tindakan yang dilakukan oleh sistem. Sistem memberikan tinjauan grafis dari aktor, use case, dan interaksi diantara keduanya didalam sistem yang dibuat. Use case diagram aplikasi di bagi menjadi dua, use case diagram enkripsi dan use case diagram dekripsi. Berikut merupakan diagram use case dari aplikasi. Gambar 4.3 Use Case Diagram Enkripsi Dalam gambar diatas dapat dijelaskan sebagai berikut, tanda panah dari aktor ke sistem menandakan bahwa aktor melakukan interaksi dengan sistem. Interaksi yang pertama ialah aktor atau user memilih menu enkripsi, setelah itu 60
aktor mengetik pesan, setelah itu aktor mengetik kunci dan yang terakhir aktor mengeksekusi tombol enkripsi perintah untuk dijalankan ke sistem aplikasi. Gambar 4.4 Use Case Diagram Dekripsi Dalam gambar diatas dapat dijelaskan sebagai berikut, tanda panah dari aktor ke sistem menandakan bahwa aktor melakukan interaksi dengan sistem. Interaksi yang pertama ialah aktor atau user memilih menu dekripsi, setelah itu aktor mengetik pesan, setelah itu aktor mengetik kunci dan yang terakhir aktor mengeksekusi tombol dekripsi perintah untuk dijalankan ke sistem aplikasi. 4.2.1.1 Skenario Use Case Skenario use case bertujuan untuk mendeskripsikan atau menjelaskan diagram use case. Pada diagram use case diatas dapat dibagi menjadi dua skenario yaitu skenario use case enkripsi dan skenario use case dekripsi pesan. Berikut adalah skenario use case dari diagram use case pada Gambar 4.3 1. Skenario Use Case Enkripsi pesan Tabel 4.1 Skenario Use Case Enkripsi Pesan 61
Nama Tujuan Aktor Kondisi Awal Kunci Kondisi Akhir Deskripsi Enkripsi Pesan Agar pesan plaintext berubah menjadi Ciphertext User Teks Terang Masukan sandi Pesan berubah menjadi sandi Caesar Cipher (Ciphertext) Meliputi semua proses yang menggambarkan kejadian user melakukan aktifitas enkripsi pesan Skenario Aksi Reaksi Sistem 1. User Memilih Menu Enkripsi 1. Aplikasi menampilkan halaman enkripsi 2. Ketikkan Pesan 2. - 3. Ketikkan Kunci 3. - 4. User Mengeksekusi perintah 4. Aplikasi membaca masukan pesan, membaca nilai kunci dan menampilkan hasil enkripsi pesan. 2. Skenario Use Case Dekripsi pesan Tabel 4.2 Skenario Use Case Dekripsi Pesan Nama Dekripsi pesan 62
Tujuan Agar pesan Ciphertext berubah menjadi Plaintext Aktor Kondisi Awal Kunci Kondisi Akhir User Teks Sandi Masukan sandi Pesan berubah menjadi teks terang (Plaintext) yang mempunyai arti/makna Deskripsi Meliputi semua proses yang menggambarkan kejadian user melakukan aktifitas dekripsi pesan Skenario Aksi 1. User Memilih Menu Dekripsi Reaksi Sistem 1. Aplikasi menampilkan halaman dekripsi 2. Ketikkan Pesan 2. - 3. Ketikkan Kunci 3. - 4. User Mengeksekusi Perintah 4. Aplikasi membaca masukan pesan, membaca nilai kunci dan menampilkan hasil dekripsi pesan. 4.2.2 Activity Diagram Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang, bagaimana masing masing alir berawal, keputusan 63
yang mungkin terjadi, dan bagaimana mereka berakhir. Activity diagram dapat menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi. Berikut Activity diagram yang menggambarkan proses enkripsi dan dekripsi yang terjadi dalam sistem. 4.2.2.1 Activity Diagram Proses Enkripsi Pesan Gambar 4.5 Activity Diagram Enkripsi 64
Dari gambar activity diagram 4.5 menjelaskan proses dimulai dimana user berinteraksi dengan aplikasi, selanjutnya user diminta untuk memilih menu enkripsi, lalu user diminta untuk mengetikkan pesan, mengetikkan kunci, menekan tombol enkripsi dan selanjutnya sistem akan menyimpan inputan tersebut. Jika user tidak menginputkan pesan dan kunci maka akan muncul peringatan Error, plainteks dan kunci tidak boleh kosong. dan sistem akan kembali ke menu enkripsi. Setelah user melakukan eksekusi maka sistem akan memproses inputan pesan sesuai dengan algoritma yang telah ditentukan dan selanjutnya menampilkan hasil pesan kedalam result textarea. 65
4.2.2.2 Activity Diagram Proses Dekripsi Pesan Gambar 3.6 Activity Diagram Dekripsi Gambar 4.6 Activity Diagram Dekripsi Dalam activity diagram untuk proses dekripsi, pada dasarnya apa yang di lakukan sistem adalah sama seperti pada activity diagram untuk proses enkripsi. yang membedakan pada activity diagram ini adalah perubahan nama menu ketika user memilih menu dekripsi. 66
4.2.3 Sequence Diagram Sequence diagram merupakan diagram untuk menjelaskan proses yang ada dalam use case diagram. Sequence diagram dapat menggambarkan jalannya suatu proses yang melibatkan objek dari class dalam aplikasi. Untuk lebih lengkapnya kita bisa melihat sequence diagram dibawah ini. 4.2.3.1 Sequence Diagram Enkripsi Pesan Sequence diagram enkripsi pesan di mulai ketika user membuka antar muka aplikasi. Dan dilanjutkan user memilih menu enkripsi, kemudian sistem menampilkan halaman enkripsi, lalu user mengetikkan pesan, mengetikkan kunci, jika pesan dan kunci telah dimasukkan maka user melanjutkan dengan menekan tombol enkripsi. Tetapi bila salah satu pesan dan kunci belum ditentukan maka akan muncul peringatan plainteks dan kunci tidak boleh kosong. dan sistem akan kembali ke menu enkripsi. Akan tetapi jika pesan dan kunci sudah terisi maka sistem akan menampilkan hasil dari proses enkripsi. Berikut sequence diagram enkripsi pesan. 67
Gambar 4.7 Sequence Diagram Enkripsi 68
4.2.3.2 Sequence Diagram Dekripsi Pesan Sequence diagram dekripsi pesan pada dasarnya sama dengan sequence diagram enkripsi pesan, hanya kebalikan dari proses enkripsi. sequence diagram di mulai ketika antar muka aplikasi, yang membedakan pada sequence ini adalah perubahan nama menu ketika user memilih menu dekripsi. Untuk lebih jelasnya bisa dilihat pada gambar berikut ini. Gambar 4.8 Sequence Diagram Dekripsi 69
4.2.4 Flowchart Flowchart merupakan kerangka kerja yang menunjukkan alir (flow) didalam program atau prosedur sistem secara logika. Bagan alir digunakan terutama untuk alat bantu komunikasi dan untuk dokumentasi. Berikut merupakan flowchart dari aplikasi enkripsi dan dekripsi. Jenis-jenis flowchart diantaranya : flowchart sistem, flowchart dokumen, flowchart skematik, flowchart program dan flowchart proses. Gambar 4.9 Flowchart Proses Enkripsi dan Dekripsi Caesar Cipher 70
4.3 Perancangan Antar Muka Perancangan antarmuka merupakan rancangan desain awal dari aplikasi yang dibangun. Perancangan antar muka mendeskripsikan rencana tampilan dari setiap tampilan yang akan digunakan pada Aplikasi Enkripsi dan Dekripsi menggunakan Algoritma Caesar Cipher Dalam Bentuk QR Code Berbasis Android. 4.3.1 Rancangan Antar Muka Tampilan Icon dan Nama Aplikasi icon dan nama aplikasi adalah tahap awal perancangan tampilan aplikasi, dimana sebuah aplikasi yang ditampilkan oleh smartphone untuk membuka aplikasi kehalaman enkripsi dan dekripsi menggunakan algoritma caesar cipher. Gambar 4.10 Rancangan Tampilan Icon Aplikasi Pada gambar diatas merupakan rancangan pemberian icon dan nama pada aplikasi. Icon dan nama aplikasi ini untuk membuka aplikasi enkripsi dan dekripsi menggunakan algoritma Caesar cipher. 71
Di halaman Enkripsi ini terdapat nama aplikasi, plaintext, key dan tombol Enkripsi dibagian bawah kanan. Gambar 4.11 Rancangan Halaman Enkripsi Di Halaman Enkripsi ini pengguna mengetikkan pesan kedalam kolom (Plaintext) dan mengetikkan kunci kedalam kolom (Key) berupa alfabet (a,b,c,,,,z). lalu pilih tombol enkripsi dibagian bawah pojok kanan untuk mengeksekusi plaintext menjadi ciphertext. Ciphertext inilah yang akan menjadi Quick Response Code (QR Code). Setelah mendapatkan ciphertext yang menjadi QR Code, maka pengguna dapat membaca QR Code dengan Camera QR Code Scanner untuk mengambil data pada QR Code, lalu pengguna memilih menu dekripsi untuk mengembalikan ciphertext ke teks terang (plaintext). 72
Di halaman Dekripsi ini terdapat Nama aplikasi, Ciphertext, QR Code Scanner, key dan Tombol Dekripsi dibagian bawah kanan. Gambar 4.12 Rancangan Halaman Dekripsi Pengguna sebelumnya telah membuat pesan di halaman enkripsi, dan sekarang pengguna ingin membuat pesan yang telah di enkripsi di kembalikan menjadi teks terang (plaintext), pada proses dekripsi pengguna terlebih dahulu membaca QR Code dengan QR Code Scanner yang ada pada halaman Dekripsi. Setelah pengguna melalukan scanner maka data hasil enkripsi yang ada pada QR Code sudah ke input secara otomatis kedalam kolom ciphertext, kemudian pengguna mengetikkan kunci dan selanjutnya melakukan proses dekripsi dengan cara menekan tombol dekripsi untuk melakukan proses dari ciphertext ke teks terang (plaintext). 73