Perancangan Sistem

1.7 Perancangan Sistem

Untuk merancang sebuah sistem aplikasi, diperlukan pemilihan editor yang tepat dan mudah. Editor yang digunakan untuk pembuatan sistem aplikasi kemananan pesan teks dan penyaringan pesan teks berbasis web chat ini adalah dengan menggunakan notepad ++.

Penulis memilih menggunakan notepad++., karena penulis merasa pengguanaan editor ini lebih mudah dan sederhana. Selain didukung dengan tampilan yang mudah difahami, juga fitur-fitur yang dibutuhkan untuk pembuatan code yang sudah terintegrasih dengan bahasa pemrograman php. Sehingga, penulis tidak merasa ada kesusahan yang berarti dalam pembuatan sistem aplikasi.

Sebelum merancang design interface dan membuat sistem aplikasi dengan menggunakan editor, terlebih dahulu telah dibuat perancangan Flowchart dan perancangan aplikasi. Untuk lebih mudah difahami, gambaran tahapan perancangan sistem aplikasi dapat dilihat sebagai berikut:

Perancangan Perancangan Flowchart

Aplikasi

Perancangan Database dan Design

Pembuatan Aplikasi

Tahap Pengujian Aplikasi

Gambar 3.10: Tahap Pembuatan Sistem

3.4.1 Rancangan Database

Kebutuhan tabel data akan simulasi sistem ini meliputi table use dan table chatting. Pada sebuah basis data dan seluruh record data, tabel-tabel ditempatkan pada sebuah basis data tersebut yang bernama db_chating sehingga sebelum masuk kehamalan web page maka akan mengambil data dari tabel user.

Tabel 3.2: Tabel User Nama Fields

Tipe Data

11 Tabel user berguna untuk menyimpan semua data user yang menggunakan sistem ini agar user yang dapat mengakses data dari server serta sebagai pengenal untuk user name (nama pengguna) sehingga user yang masuk akan dapat mengirim dan menerima pesan berdasarkan data yang tersimpan dalam database.

Varchar

Tabel 3.3: Tabel Chatting Nama Fields

Tipe Data

20 Tabel chatting berguna untuk menyimpan semua data-data yang sedang

Pesan

Varchar

melakukan chatting. Mulai dari data pengirim dan penerima pesan, data pesan diterima dan dikirim dan waktu pengiriman pata tabel chatting hanya dikhususkan untuk penerapan algoritma (cara kerja sistem) yang diteliti atau dipersiapkan.

Tabel 3.4: Tabel Saring Nama Fields

Ukuran id

Tipe Data

int

10 Tabel saring berguna untuk penyaringan pesan, sedangkan kata yang tidak terdapat pada records atau fields data tabel saring, maka penyaringan tidak dapat berjalan.

Teks_saring

varchar

Kemudian penulis menjelaskan proses relasi antar tabel pada chatting dengan tujuan penyimpanan data agar saling terhunbung dangan data lainy sesuai dengan konsep databases, adapun relasi dari proses chatting adalah seperti gambar berikut:

Gambar 3.11: Relasi Antar Records Data

3.4.2 Perancangan Output

Dalam rancangan output, dibahas mengenai halaman-halaman yang digunakan dalam pembuatan aplikasi. Dalam rancangan output terdapat satu halaman daftar, yaitu halaman untuk mendaftar user (pengguna) baru, satu halaman untuk login (masuk) yaitu halaman untuk masuk kehalaman utama, yaitu halaman untuk mengirim dan menerima pesan berbasis web chat.

Pada bagian perancangan ini, dilengkapi dengan rancangan user interface, yang menjadi acuan dalam Penerapan dengan menggunakan bahasa pemrograman PHP.

1. Halaman Registrasi User Halaman ini digunakan untuk melakukan proses registrasi pengguna untuk dapat melakukan chatting.

Gambar 3.12: Halaman Registrasi User Keterangan:

a. Text user name: Berfungsi memasukan username dan tanda pengenal saat registrasi user.

b. Text password: Berfungsi memasukan password saat registrasi user.

c. Tombol registrasi: Berfungsi untuk registrasi user.

d. Tombol reset: Berfungsi untuk menghapus user dan password.

2. Halaman Login Web Chat Halaman ini digunakan untuk melakukan proses login, berikut gambar

login web chat:

c d Gambar 3.13: Halaman Login

Keterangan:

a. Text user name: Berfungsi memasukan username dan tanda pengenal saat login kemenu utama chatting.

b. Text password : Berfungsi memasukan password saat registrasi user chatting.

c. Tombol login: Berfungsi login user chatting.

d. Tombol reset: Berfungsi menghapus user dan Password.

3. Halaman Utama Web Chat Halaman menu utama digunakan untuk melakukan proses chatting dengan komputer yang melakukan berbagi pesan dengan web chat. Sama seperti hamalan aplikasi web chat secara umum, akan tetapi pada proses aplikasi ini ada perubahan yaitu saat pengiriman harus memasukan kunci pesan menjadi sarat pesan terkirim sebelum pengiriman sistem akan melakukan pengiriman pesan kumudian dilakukan pengamanan pesan dengan menyandikan pesan dengan algoritama yang telah ditetapkan, pada saat terkirim penerima memasukan kunci pembuka pesan yang telah sama-sama telah diketahui.

Aplikasi bertujuan untuk penerapan algortima hill chiper pada keamanan pesan dan penerapan algoritma boyer moore untuk penyaringan pesan teks beberbasis aplikasi web chat, sehingga antara pengirim dan penerima pesan yakin jika pesan tetap terjaga dengan aman dan pesan disaring.

Adapun halaman pengiriman pesan pada aplikasi sebagai berikut:

Kunci Kirim

Pesan Terkirim

Gambar 3.14: Halaman Utama Web Chat Kirim Pesan Keterangan:

a. User Koneksi: Berguna untuk menampilkan semua user yang sedang melakukan koneksi.

b. List chatting: Untuk menampilkan pesan terkirim dan diterima dalam list (daftart) chat.

c. Teks kirim: Teks Kirim untuk input pengiriman pesan.

d. Teks kunci: Teks kunci untuk kata sandi saat mengirim pesan.

Kemudian berikut gambar rancang halaman untuk penerimaan pesan:

Kunci Buka

Pesan Diterima Pesan Terkirim

Gambar 3.15: Halaman Utama Web Chat Keterangan: