4.2.5 Sequence Diagram
1. Sistem Login
User
Gambar 4.4 Sequence Diagram Sistem Login User Admin
Gambar 4.5 Sequence Diagram Sistem Login Admin
2. Sistem Registrasi
User
User User Display
pilih registrasi input data registrasi
Register
validasi data registrasi add user baru
registrasi sukses registrasi sukses
Gambar 4.6 Sequence Diagram Sistem Registrasi User Admin
Admin Admin Display
pilih add user input data user
Add User
validasi data user add user baru
registrasi sukses registrasi sukses
Gambar 4.7 Sequence Diagram Sistem Registrasi User oleh
Admin
3. Sistem Comment
User
Gambar 4.8 Sequence Diagram Sistem Comment User Admin
Gambar 4.9 Sequence Diagram Sistem Comment Admin
4. Sistem Add Friend
User
Gambar 4.10 Sequence Diagram Sistem Add Friend User Admin
Gambar 4.11 Sequence Diagram Sistem Add Friend User oleh Admin
5. Sistem Delete Friend
User
Gambar 4.12 Sequence Diagram Sistem Delete Friend User Admin
Gambar 4.13 Sequence Diagram Sistem Delete Friend User oleh Admin
6. Sistem Ubah Password
User
Gambar 4.14 Sequence Diagram Sistem Ubah Password User Admin
Gambar 4.15 Sequence Diagram Sistem Ubah Password oleh Admin
7. Sistem Chatting
Gambar 4.16 Sequence Diagram Sistem Chatting User
8. Sistem Logout
User
Gambar 4.17 Sequence Diagram Sistem Logout User
Admin
Gambar 4.18 Sequence Diagram Sistem Logout
4.2.6 Database
4.2.6.1 Diagram Skema Database
MsFriend
PK,FK1 UserId
FriendId MsComment
PK CommentID
FK1 UserID Email
Komentar
MsUser
PK UserID Username
Password NIM
Email
IP IsLog
IsBusy
MsAddFriend
FK1 UserID
AddFriendID
Gambar 4.19 Diagram Skema Database
4.2.6.2 Penjelasan Skema Database Tabel 4.14 Tabel Skema Database
Nama Tabel Keterangan
MsUser Tabel ini menyimpan data-data user yang telah
registrasi MsFriend
Tabel ini menyimpan daftar teman yang user MsComment
Tabel ini menyimpan data komentar yang dikirim oleh user
4.2.6.3 Rancangan Database
1. Tabel MsUser
Tabel 4.15 Tabel MsUser
Nama Field Jenis
Keterangan UserID
Int 11 Primary Key
Username Varchar255
Password Varchar255
Email Varchar255
IP Varchar255
IsLog int1
IsBusy int1
2. Tabel MsFriend
Tabel 4.16 Tabel MsFriend
Nama Field Jenis
Keterangan UserID
Int11 Primary key dan Foreign Key
FriendId Varchar255
3. Tabel MsComment
Tabel 4.17 Tabel MsComment
Nama Field Jenis
Keterangan CommentID
Int11 Primary Key
UserID Int11
Foreign Key Email
Varchar255 Komentar
Varchar150
4. Tabel MsAddFriend
Tabel 4.18 Tabel MsAddFriend
Nama Field Jenis
Keterangan UserID
Int11 Foreign Key
AddFriendID Varchar255
4.2.7 Perancangan Antarmuka
4.2.7.1 Perancangan Layar Mobile Login
Gambar 4.20 Rancangan Layar saat memulai aplikasi
Gambar 4.20 Merupakan rancangan layar saat user memulai aplikasi. Dalam layar ini terdapat field untuk memasukkan username dan password user.
Terdapat juga 32 buah softkey, yaitu: exit dan menu. Softkey exit digunakan untuk keluar dari aplikasi. Sedangkan softkey menu untuk menampilkan pilihan lain
yang terdapat di layar ini, yaitu: login, registrasi dan contact us. Login digunkan untuk masuk ke aplikasi. Registrasi digunakan untuk membuat user baru. Dan
contact us digunakan untuk mengirimkan pertanyaan atau komentar untuk admin.
Friends List
Gambar 4.21 Rancangan Layar List Teman User
Gambar 4.21 merupakan rancangan layar yang menampilkan daftar teman user yang telah didaftarkan sebelumnya. Pada layar ini juga dapat dilihat status
temannya, yaitu: offline, online, atau busy. Status offline berarti teman tersebut sedang tidak aktif. Status online berarti teman tersebut telah aktif. Sedangkan
status busy berarti teman tersebut sedang melakukan chatting. Pada layar ini terdapat 2 buah softkey, yaitu: Logout dan menu. Softkey logout digunakan untuk
kembali ke layar login. Dan Softkey menu untuk menampilkan pilihan lain yang terdapat di layar, yaitu: Chat, Add Friend, Delete Friend, dan Change Password.
Chat digunakan untuk memulai chatting dengan teman. Add Friend digunakan untuk menambah teman. Delete Friend digunakan untuk menghapus teman dari
list teman. Change Password digunakan untuk mengubah password.
Add Friend
Gambar 4.22 Rancangan Layar menambah teman
Gambar 4.22 merupakan rancangan layar untuk menambah teman user yang baru. Pada layar ini user dapat memasukkan username teman yang ingin
ditambah ke field username dan menekan softkey Ok. Softkey Cancel digunakan untuk membatalkan penambahan teman dan kembali ke layar sebelumnya.
Ubah Password
Gambar 4.23 Rancangan Layar untuk mengganti password
Gambar 4.23 Merupakan rancangan layar untuk mengubah password yang lama menjadi password baru. Untuk mengganti password user harus memasukkan
password lama ke dalam field Old Password dan password baru ke field New Password dan confirm Password. Password pada field New Password dan
Confirm Password harus sama. Setelah itu user dapat menekan softkey Ok untuk mengganti password atau softkey Cancel untuk membatalkan pergantian
password dan kembali ke halaman sebelumnya.
Chatting
Gambar 4.24 Rancangan Layar saat Melakukan Chatting
Gambar 4.24 Merupakan rancangan layar pada saat melakukan chatting. Pada layar ini terdapat 2 buah softkey, yaitu: Quit dan Chat. Softkey Quit
digunakan untuk keluar dari chatting dan softkey Chat digunakan untuk melakukan chatting.
4.2.7.2 Perancangan Layar Web Login
Gambar 4.25 Rancangan Layar Login Gambar 4.25 Layar ini merupakan layar yang pertama kali muncul ke
admin masuk ke halaman web. Di layar ini admin harus login terlebih dahulu dengan memasukkan username dan password dan menekan tombol login untuk
melanjutkan ke halaman berikutnya.
Home
Gambar 4.26 Rancangan Layar Database User
Gambar 4.26 Layar ini menampilkan data-data user yang telah melakukan registrasi. Terdapat data mengenai user berupa ID, Username, Password, NIM,
Email, IP user, Status Login dan Status Chat. Pada layar ini admin dapat melakukan penambahan user baru, melihat komentar dari user, melihat status add
user, pencarian user, edit user dan delete user.
Add User
Gambar 4.27 Rancangan Layar Penambahan user
Gambar 4.27 Pada layar ini admin dapat melakukan penambahan user dengan mengisi field yang tersedia, yaitu: Username, Password, NIM dan Email.
Setelah itu menekan tombol submit. Jika tombol cancel ditekan maka layar akan kembali ke halaman sebelumnya.
View Friends
Gambar 4.28 Rancangan Layar List Teman
Gambar 4.28 Pada layar ini admin dapat melihat list teman user yang dipilih. Selain itu, admin juga dapat menambah teman dan juga menghapus teman
dari list teman user. Admin juga dapat kembali ke halaman sebelumnya dengan menekan tombol back.
Add Friend
Gambar 4.29 Rancangan Layar penambahan teman
Gambar 4.29 Pada layar ini admin dapat menambah teman user yang dipilih dengan cara memasukkan username yang akan ditambah dan menekan
tombol add.
Edit User
Gambar 4.30 Rancangan Layar Edit User
Gambar 4.30 Pada layar ini admin dapat mengedit data-data user yang dipilih sebelumnya. Data-data yang dapat di edit adalah Username, Password,
NIM, E-mail, IP, Status Login dan Status Chat. Admin juga dapat kembali ke halaman sebelumnya dengan menekan tombol Cancel.
4.2.8 Langkah-langkah Pengujian Aplikasi untuk User dan Web untuk
Admin 4.2.8.1 Langkah-langkah Pemakaian Aplikasi untuk User
1. Login
Gambar 4.31 Layar Pilihan Login
Untuk melakukan login, user harus mengetik username dan password pada field yang telah disiapkan pada layar login dan memilih pilihan login.
Gambar 4.32 Layar Error Field Kosong
Jika username atau password belum terisi maka akan muncul peringatan bahwa field harus diisi.
Gambar 4.33 Layar Error Username atau Password Salah
Jika username atau password yang dimasukkan salah maka akan muncul peringatan bahwa username atau password salah.
Gambar 4.34 Layar Error Belum Verifikasi Account
Jika user belum melakukan verfikasi account yang dipakai dalam melakukan login, maka akan keluar peringatan untuk melakukan verifikasi
account melalui e-mail terlebih dahulu.
Gambar 4.35 Layar Error User telah Login
Jika user melakukan login dengan username yang sebelumnya telah melakukan login, maka akan muncul peringatan bahwa user telah melakukan
login.
2 Register
Gambar 4.36 Layar Pilihan Login
Untuk melakukan registrasi, user harus memilih pilihan register pada halaman login.
Gambar 4.37 Layar Form Register
Pada halaman register, user harus mengisi semua field yang ada.
Gambar 4.38 Layar Error Field Kosong
Jika ada field yang belum diisi maka akan muncul peringatan bahwa field masih belum diisi.
Gambar 4.39 Layar Error Format Password Salah
Jika format password bukan berupa huruf dan angka maka akan muncul peringatan bahwa format password salah.
Gambar 4.40 Layar Error Confirm Password Salah
Jika isi dari password dan confirm password tidak sama maka akan muncul peringatan bahwa confirm password salah.
Gambar 4.41 Layar Error Panjang NIM Salah
Jika panjang NIM yang dimasukkan salah maka akan muncul peringatan bahwa panjang NIM harus 10 digit.
Gambar 4.42 Layar Error Format E-mail Salah
Jika format e-mail yang dimasukkan salah, maka akan muncul peringatan bahwa format e-mail salah.
Gambar 4.43 Layar Error Username telah Dipakai
Jika username yang dipakai untuk registrasi telah dipakai sebelumnya maka akan muncul peringatan username telah dipakai.
Gambar 4.44 Layar Register Sukses
Jika registrasi sukses maka akan muncul peringatan bahwa registrasi sukses dan harus melakukan verifikasi melalui e-mail
.
Gambar 4.45 Layar Web Verifikasi Sukses
Jika user telah melakukan verifikasi melalui e-mail maka akan muncul tampilan verifikasi sukses dan user dapat menggunakan account tersebut untuk
login.
3 Contact Us
Gambar 4.46 Layar Pilihan Contact Us
Untuk melakukan contact us, user dapat memilih contact us pada halaman login.
Gambar 4.47 Layar Form Contact Us
Pada halaman contact us, user harus mengisi semua field yang tersedia untuk dapat melakukan contact us.
Gambar 4.48 Layar Error Field Kosong
Jika ada field yang belum diisi maka akan muncul peringatan bahwa field masih belum diisi.
Gambar 4.49 Layar Error Format E-mail
Jika format e-mail yang dimasukkan salah, maka akan muncul peringatan bahwa format e-mail salah.
Gambar 4.50 Layar Error Username tidak Ada
Jika user salah memasukkan username, maka akan muncul peringatan bahwa username tidak ada.
Gambar 4.51 Layar Kirim Komentar Sukses
Jika Pengiriman komentar sukses, maka akan muncul peringatan bahwa pengiriman sukses.
4 Chat
Gambar 4.52 Layar Pilihan Chat
Untuk melakukan chatting, user harus memilih teman yang ingin diajak chatting dan memilih pilihan chat pada halaman utama.
Gambar 4.53 Layar Error tidak Memilih Teman
Jika user belum memilih teman untuk melakukan chatting, maka akan muncul peringatan untuk memilih teman terlebih dahulu.
Gambar 4.54 Layar Konfirmasi Chat
Jika user telah mengundang user lain untuk melakukan chatting akan muncul pertanyaan kepada user lain untuk melakukan chat atau tidak.
Gambar 4.55 Layar Pilihan Send Message
Jika user telah setuju untuk melakukan chat, maka akan muncul halaman chatting. Untuk mengirim pesan kepada user lain, maka user harus memilih send
message yang terdapat di halaman chatting. Untuk keluar dari halaman chatting ini, user dapat menekan tombol quit.
Gambar 4.56 Layar Ketik Pesan
Halaman ini merupakan halaman yang muncul setelah memilih send message dan digunakan untuk mengetik pesan yang ingin dikirim. Untuk
mengirimkan pesan user dapat menekan tombol send dan untuk membatalkan pengiriman pesan, user dapat menekan tombol cancel.
5 View cam
Gambar 4.57 Layar Pilihan View cam
Untuk melihat gambar user lain melalui kamera, user dapat memilih view cam dari halaman chatting.
Gambar 4.58 Layar Pilihan User yang Ingin Dilihat Gambarnya
Pada halaman ini user dapat memilih user mana yang ingin dilihat gambarnya.
Gambar 4.59 Layar Konfirmasi Lihat Gambar
Jika user telah memilih teman yang ingin dilihat gambarnya maka akan muncul pertanyaan ya atau tidak untuk teman yang akan dilihat gambarnya.
Gambar 4.60 Layar Permintaan Lihat Gambar Ditolak
Jika teman yang ingin dilihat gambarnya memilih tidak, maka akan muncul peringatan bahwa teman yang ingin dilihat gambarnya menolak
memberikan izin.
Gambar 4.61 Layar Hasil Penangkapan Gambar
Jika teman yang ingin dilihat gambarnya memilih ya, maka kamera handphone user tersebut akan memotret gambarnya dan mengirimkan ke user
yang meminta gambar tersebut.
6 Add Member
Gambar 4.62 Layar Pilihan Add Member
Jika user yang sedang melakukan chatting ingin menambah teman dalam melakukan chatting. User dapat memilih add member pada halaman chatting.
Gambar 4.63 Layar Pilih Member Baru
Pada halaman ini user dapat memilih user yang ingin ditambahkan ke halaman chatting. User yang dapat dipilih adalah user yang online dan tidak
sedang melakukan chatting. User juga dapat membatalkan penambahan user dengan menekan cancel.
Gambar 4.64 Layar Error Tidak ada User yang Dipilih
Jika user tidak memilih teman sebelum menambah member baru, maka akan muncul peringatan untuk memilih teman terlebih dahulu.
Gambar 4.65 Layar Konfirmasi Add Member
Jika user menambah teman baru ke halaman chatting, maka akan muncul pertanyaan ya atau tidak untuk teman yang ditambah.
7 Add Friend
Gambar 4.66 Layar Pilihan Add Friend
Untuk menambah daftar teman, user dapat memilih add friend pada halaman utama.
Gambar 4.67 Layar Add Friend
Pada halaman ini user dapat memasukkan username teman yang ingin ditambah dalam daftar temannya dan menekan ok. Jika user ingin membatalkan
penambahan daftar teman dapat dilakukan dengan menekan tombol cancel.
Gambar 4.68 Layar Error Username Kosong
Jika user menekan tombol ok pada halaman add friend tanpa memasukkan username maka akan muncul peringatan bahwa username harus diisi.
Gambar 4.69 Layar Error Username tidak Ada
Jika username yang dimasukkan pada halaman add friend tidak terdaftar dalam database maka akan muncul peringatan bahwa username tidak ada.
Gambar 4.70 Layar Error Add Diri Sendiri
Jika user menambah dirinya sendiri pada halaman add friend maka akan muncul peringatan bahwa user tidak dapat menambah dirinya sendiri.
Gambar 4.71 Layar Error Username telah ditambah
Jika user yang menambah username yang telah menjadi temannya maka akan muncul peringatan bahwa teman tersebut sudah ada dalam daftar temannya.
Gambar 4.72 Layar Tambah Teman sukses
Jika tambah teman sukses maka akan muncul peringatan bahwa penambahan teman telah sukses.
Gambar 4.73 Layar Error Penambahan Teman
Jika user melakukan add friend lebih dari satu kali terhadap user yang belum melakukan approval maka akan muncul peringatan untuk menunggu
approval user tersebut.
Gambar 4.74 Layar Konfirmasi Penambahan teman
Jika ada user yang menambah user lain, maka akan ada konfirmasi ya atau tidak untuk menambah user tersebut menjadi temannya.
8 Delete Friends
Gambar 4.75 Layar Delete Friend
Untuk menghapus user dari daftar teman dapat dilakukan dengan memilih teman yang ingin dihapus dan memilih delete friend.
Gambar 4.76 Layar Error Tidak Ada Teman yang Dipilih
Jika tidak ada teman yang dipilih pada saat memilih delete friend maka akan muncul peringatan untuk memilih teman yang ingin dihapus.
Gambar 4.77 Layar Peringatan Penghapus User dari Daftar User Lain
Jika user telah menghapus user lain dari daftar temannya maka akan muncul peringatan kepada user lain bahwa user telah menghapusnya dari daftar
teman.
Gambar 4.78 Layar Penghapusan Teman Sukses
Jika penghapusan teman sukses maka akan muncul peringatan bahwa penghapusan teman sukses.
9 Ubah Password
Gambar 4.79 Layar Pilihan Change Password
Untuk mengubah password, user dapat memilih change password pada halaman utama.
Gambar 4.80 Layar Form Ubah Password
Pada halaman ini user harus mengiisi semua field yang ada dan isi dari new pass dan conf pass harus sama. User dapat membatalkan pengubahan
password dengan menekan tombol cancel.
Gambar 4.81 Layar Error Field Kosong
Jika masih ada field yang masih belum diisi pada halaman ubah password maka akan muncul peringatan bahwa semua field harus diisi.
Gambar 4.82 Layar Error Format Password
Jika format password tidak terdiri dari angka dan huruf maka akan muncul peringatan bahwa password harus mengandung angka dan huruf.
Gambar 4.83 Layar Error Konfirmasi Password Salah
Jika isi dari new pass dan conf pass tidak sama maka akan muncul peringatan bahwa konfirmasi password salah.
Gambar 4.84 Layar Error Password Lama Salah
Jika isi dari old pass tidak sama dengan yang ada di database maka akan muncul peringatan bahwa password lama salah.
Gambar 4.85 Layar Ubah Password Sukses
Jika pengubahan password sukses maka akan muncul peringatan bahwa pengubahan password sukses.
4.2.9 Langkah-langkah Pemakaian Web untuk Admin
Kategori