Bab 3 Analisis dan Perancangan
3.6 Perancangan Interface
Dalam sebuah sistem, perancangan interface merupakan hal yang sangat penting. Perancangan interface yang baik akan mendukung interaksi yang baik pula, sehingga dalam penggunaannya User akan terbantu dalam menyelesaikan masalah dari penggunaan sistem tersebut.
3.6.1 Perancangan Interface Login Server
Gambar 3.9 merupakan gambar form Server yang digunakan untuk memulai aplikasi chat room.
Gambar 3.9 Layout Login Frame Server
Pada layout login form Server diatas terdapat tiga buah label yaitu Username, email dan password. Administrator harus mengisi textfield yang tersedia sesuai dengan labelnya masing-masing. Pada form juga terdapat dua Jbutton, yaitu Jbutton OK dan Jbutton Clear. Jbutton OK berfungsi untuk memanggil form Servercontroller.java yang juga berfungsi membuka port untuk melakukan aktifitas chat. Hal ini dapat terjadi apabila administrator mengisikan seluruh data yang diperlukan dengan benar. Jbutton Clear berfungsi untuk mengosongkan seluruh textfield yang telah terisi.
Username Email
Password
3.6.2 Perancangan Interface ServerController
Pada Servercontroller terdapat textarea message dimana administrator dapat melihat segala aktifitas percakapan dari seluruh User yang telah bergabung. Selain itu juga terdapat User list untuk mengetahui daftar User yang telah bergabung pada room tertentu, pada webchat ini tersedia lima room yang masing telah diberi label room masing-masing.
Pada bagian bawah layout Servercontroller terdapat sebuah textfield sebagai tempat untuk mengetikkan pesan dari Server dan terdapat sebuah Jbutton Send, yaitu tombol yang berfungsi untuk mengirimkan pesan yang telah di ketikkan pada textfield. Gambar 3.10 adalah perancangan layout Servercontroller.
Gambar 3.10 Layout Servercontroller
Pada bagian atas form terdapat tiga menu yaitu:
Channel : pada menu ini terdapat tiga sub menu yaitu:
- Ban Channel sub menu ini berfungsi untuk mencekal seluruh User yang terdapat pada suatu room.
- Join Channel sub menu ini berfungsi untuk melakukan join yaitu menggabungkan diri yaitu admin ke sebuah room yang diinginkan.
Channel User Connection
Textarea Message Room1
Room2 Room3 Room4 Room5 Textfield Send User list User list User list User list User list
- Part Channel sub menu ini berfungsi untuk memberikan informasi di room mana administrator berada.
User : pada menu ini terdapat empat sub menu yaitu:
- Kick User sub menu ini berfungsi untuk mengusir User tertentu yang dikehendaki pada suatu room.
- Private Chat sub menu ini berfungsi untuk melakukan percakapan pribadi antara administrator dengan User yang diinginkan.
- End Private sub menu ini berfungsi untuk mengakhiri percakapan pribadi. - Invite User sub menu ini berfungsi untuk mengundang seorang User untuk
bergabung pada room berbeda.
Connection : pada menu ini terdapat dua sub menu yaitu:
- Current Port sub menu ini berfungsi untuk memberikan informasi port mana yang sedang digunakan dalam aktifitas chat.
- Logout sub menu ini berfungsi untuk mematikan Server yang secara otomatis akan menutup koneksi bagi User pengguna web chat.
3.6.3 Perancangan Interface Client
Pada layout interface Client terdapat dua buah textarea, yang pertama textarea message untuk membaca segala aktifitas percakapan yang dilakukan oleh setiap User pada suatu room, dan Userlist yang berisi daftar User yang sedang bergabung.
Di bawah dua textarea terdapat login area yang terdiri dari label Username, textfield, label room selection dan lima radio button yang dapat dipilih untuk dapat bergabung pada room yang diinginkan, serta sebuah Jbutton Login. Jika login berhasil maka login area menjadi inaktif dan User list akan berisikan Username yang digunakan. Login area dapat menjadi aktif kembali apabila melakukan logout yang terdapat pada menu Connection. Gambar 3.11 merupakan layout interface Client.
Gambar 3.11 Layout Interface Client
Pada dasar layout Client terdapat textfield untuk mengetikkan pesan yang akan dikirimkan kepada User lain dan sebuah Jbutton Send yang berfungsi untuk mengirimkan pesan yang telah ditulis pada textfield. Pengiriman pesan juga dapat dilakukan dengan menekan tombol enter di keyboard untuk memudahkan interaksi User.
Pada layout interface Client terdapat empat buah menu yaitu:
Channel : pada menu ini terdapat dua sub menu yaitu:
- Join Channel sub menu ini berfungsi untuk melakukan join yaitu menggabungkan diri yaitu User ke sebuah room yang diinginkan.
- Part Channel sub menu ini berfungsi untuk memberikan informasi di room mana User berada.
User : pada menu ini terdapat tiga sub menu yaitu:
- Private Chat sub menu ini berfungsi untuk melakukan percakapan pribadi antar User yang diinginkan.
- End Private sub menu ini berfungsi untuk mengakhiri percakapan pribadi. Channel User Connection Zoom
Textarea User List
Username Room Selection Room1 Room2 Room3 Room4 Room5 Login
- Invite User sub menu ini berfungsi untuk mengundang seorang User untuk bergabung pada room berbeda.
Connection : pada menu ini terdapat sub menu yaitu:
- Logout sub menu ini berfungsi untuk memutuskan hubungan ke Server.
Zoom : pada menu ini terdapat empat sub menu yaitu:
- Normal sub menu ini berfungsi menampilkan ukuran font normal.
- Zoom 2x sub menu ini berfungsi untuk menampilkan font yang telah diperbesar 2x.
- Zoom 3x sub menu ini berfungsi untuk menampilkan font yang telah diperbesar 3x.
- Zoom 4x sub menu ini berfungsi untuk menampilkan font yang telah diperbesar 4x.
Pada layout interface Client terdapat dua buah textarea, yang pertama textarea message untuk membaca segala aktifitas percakapan yang dilakukan oleh setiap User pada suatu room, dan Userlist yang berisi daftar User yang sedang bergabung.
Di bawah dua textarea terdapat login area yang terdiri dari label Username, textfield, label room selection dan lima radio button yang dapat dipilih untuk dapat bergabung pada room yang diinginkan, serta sebuah Jbutton Login. Jika login berhasil maka login area menjadi inaktif dan User list akan berisikan Username yang digunakan. Login area dapat menjadi aktif kembali apabila melakukan logout yang terdapat pada menu Connection.
Pada dasar layout Client terdapat textfield untuk mengetikkan pesan yang akan dikirimkan kepada User lain dan sebuah Jbutton Send yang berfungsi untuk mengirimkan pesan yang telah ditulis pada textfield. Pengiriman pesan juga dapat dilakukan dengan menekan tombol enter di keyboard untuk memudahkan interaksi User.