BAB III ANALISIS DAN PERANCANGAN APLIKASI
3.1
Analisis
Tahapan analisis merupakan tahapan yang paling awal dalam membuat sebuah perangkat lunak. Pada tahapan ini dilakukan perancangan terhadap ‘Aplikasi chatting mobile phone’ yang menggunakan NetBeans IDE 6.0 yang di dalamnya terdapat MIDP 2.0 (Mobile Information Device Profile), MIDP 2.0 ini mendukung aplikasi multimedia pada ponsel. Berikut ini adalah penjelasan tentang analisis yang akan dilakukan : 1. Koneksi Server Pada aplikasi ini koneksi ke server menggunakan GPRS. Oleh karena itu, konfigurasi gprs pada ponsel yang nantinya akan di pasang aplikasi ini harus sudah benar. 2. Penggunaan Emoticon Pada aplikasi ini emoticon yang digunakan masih terbatas, yakni hanya menggunakan 5 buah emoticon. Hal ini disebabkan oleh keterbatasan memori MIDP dan CLDC.
3.2
Perancangan Aplikasi Pada bagian ini akan dijelaskan secara rinci perancangan ‘Aplikasi
chatting mobile phone’ meliputi Use Case Diagram, Activity Diagram, Class Diagram, dan Sequence Diagram.
3.2.1 Pemodelan Use Case Diagram
Diagram use case sangat membantu menganalisa kebutuhan - kebutuhan dari aplikasi yang akan dibuat. Karena diagram use case memperlihatkan apa yang dilakukan oleh pengguna telepon genggam terhadap sistem. Diagram use case dari ‘Aplikasi chatting mobile phone’ dapat dilihat pada gambar 3.1. Melakukan Pendaftaran
Melakukan login Pengguna Telepon Genggam Melakukan Chatting
Menambah Teman
Gambar 3.1 Use Case Diagram ‘Aplikasi chatting mobile phone’.
Dari gambar 3.1. dapat dilihat bahwa terdapat hanya satu user (selanjutnya akan disebut dengan pengguna telepon genggam) yang berhubungan dengan sistem pada telepon genggam dan terdapat empat use case yaitu melakukan pendaftaran, melakukan login, melakukan chatting, menambah teman.
Tabel 3.1 Spesifikasi naratif untuk Use Case Melakukan Pendaftaran. Nama Use Case Deskripsi Singkat
Aktor Pra Kondisi Tindakan Utama
Tindakan alternatif Pasca Kondisi
Melakukan Pendaftaran Use Case ini memungkinkan pengguna telepon genggam untuk melakukan pendaftaran yang ada pada ‘Aplikasi chatting mobile phone’. Pengguna Telepon Genggam. ‘Aplikasi chatting mobile phone’ tersebut telah dipasang (installed / embedded) pada telepon genggam. 1. Pengguna Telepon Genggam memasukkan nama, username, password, dan verifikasi Password. 2. Pengguna Telepon Genggam memilih menu daftar untuk melakukan pendaftaran. 3. Pengguna telepon genggam menekan tombol menu keluar untuk keluar dari aplikasi. Jika Use Case berhasil dijalankan maka aplikasi berjalan dan user dapat melakukan login.
Tabel 3.2 Spesifikasi naratif untuk Use Case Melakukan log-in. Nama Use Case Deskripsi Singkat
Aktor Pra Kondisi Tindakan Utama
Tindakan alternatif Pasca Kondisi
Melakukan log-in Use Case ini memungkinkan pengguna telepon genggam untuk melakukan login yang ada pada ‘Aplikasi chatting mobile phone’. Pengguna Telepon Genggam. ‘Aplikasi chatting mobile phone’ tersebut telah dipasang (installed / embedded) pada telepon genggam. 4. Pengguna Telepon Genggam memasukkan username dan password. 5. Pengguna Telepon Genggam memilih menu login untuk memverifikasi username dan password yang dimasukkan. 6. Pengguna telepon genggam menekan tombol menu keluar untuk keluar dari aplikasi. Jika Use Case berhasil dijalankan maka aplikasi berjalan dan user dapat memilih dan melihat list users yang terdapat pada layar aplikasi tersebut.
Tabel 3.3 Spesifikasi naratif untuk Use Case Melakukan Chatting. Nama Use Case Deskripsi Singkat Aktor Pra Kondisi Tindakan Utama
Tindakan alternatif Pasca Kondisi
Melakukan Chatting. Use Case ini memungkinkan pengguna telepon genggam untuk melakukan Chatting dengan user lain. Pengguna Telepon Genggam. ‘Aplikasi chatting mobile phone’ tersebut telah dipasang (installed / embedded) pada telepon genggam. 1. Pengguna Telepon Genggam mengetik kata-kata yang ingin disampaikan. 2. Pengguna Telepon Genggam menekan tombol menu Emoticon untuk memilih emoticon yang diinginkan. 3. Pengguna Telepon Genggam menekan tombol menu OK untuk mengirim Jika Use Case berhasil dijalankan maka aplikasi berjalan dan Pengguna Telepon Genggam akan dapat melakukan chatting dengan user lain dan bisa memasukkan emoticon.
Tabel 3.2 Spesifikasi naratif untuk Use Case Menambah Teman. Nama Use Case Deskripsi Singkat Aktor Pra Kondisi Tindakan Utama
Tindakan alternatif Pasca Kondisi
Menambah Teman Use Case ini memungkinkan pengguna telepon genggam untuk menambah teman. Pengguna Telepon Genggam. ‘Aplikasi chatting mobile phone’ tersebut telah dipasang (installed / embedded) pada telepon genggam. 1. Pengguna Telepon Genggam memasukkan username 2. Pengguna Telepon Genggam menekan tombol menu tambah untuk menambahkan username tersebut menjadi teman. 3. Pengguna Telepon Genggam menekan tombol menu kembali jika tidak jadi untuk menambah teman. Jika Use Case berhasil dijalankan maka aplikasi berjalan dan pengguna telepon genggam dapat menambah teman berdasarkan username.
3.2.2 Pemodelan Activity Diagram
Activity Diagram dapat menunjukkan konteks use case dan juga rincian bagaimana
sebuah
use
case
yang
rumit
berjalan.
Activity
diagram
menggambarkan langkah yang mana yang harus dijalankan secara berurutan dan langkah mana yang bisa dijalankan secara bersamaan serta menggambarkan
berbagai alir aktivitas dalam sistem yang sedang dirancang, bagaimana masing masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi. Activity diagram merupakan state diagram khusus, di mana sebagian besar state adalah action dan sebagian besar transisi di-trigger oleh selesainya state sebelumnya (internal processing). Oleh karena itu activity diagram tidak menggambarkan behaviour internal sebuah sistem (dan interaksi antar subsistem) secara eksak, tetapi lebih menggambarkan proses-proses dan jalur-jalur aktivitas dari level atas secara umum. Sebuah aktivitas dapat direalisasikan oleh satu use case atau lebih. Aktivitas menggambarkan proses yang berjalan, sementara use case menggambarkan bagaimana aktor menggunakan sistem untuk melakukan aktivitas.
3.2.2.1 Activity Diagram Melakukan Pendaftaran. Pengguna Genggam
Telepon
Aplikasi phone
chatting
mobile
Menampilkan Jendela Aplikasi Pendaftaran Memasukkan nama, username, password Memilih Menu Daftar
Menampilkan info pendaftaran
Menampilkan Jendela Aplikasi Login
Gambar 3.2 Activity Diagram Melakukan Pendaftaran ‘Aplikasi chatting mobile phone’.
Pada gambar 3.2. diatas aktifitas dimulai jika pengguna telepon genggam sudah memilih program ‘Aplikasi chatting mobile phone’ yang sudah terpasang atau terinstall pada telepon genggam. Setelah memilih program aplikasi dan aplikasi tersebut telah berjalan, maka pengguna telepon genggam akan melihat tampilan utama lalu memilih menu pendaftaran.
3.2.2.2 Activity Diagram Melakukan login. Pengguna Telepon Genggam
Aplikasi chatting mobile phone
Menampilkan Jendela Aplikasi login Memasukkan username dan password
Memilih Menu Login
Menampilkan info login
Menampilkan Daftar Teman
Gambar 3.3 Activity Diagram Melakukan Login ‘Aplikasi chatting mobile phone’. Pada gambar 3.3. diatas aktifitas dimulai jika pengguna telepon genggam sudah memilih program ‘Aplikasi chatting mobile phone’ yang sudah terpasang atau terinstall pada telepon genggam. Setelah memilih program aplikasi dan aplikasi tersebut telah berjalan, maka pengguna telepon genggam akan melihat tampilan utama lalu memilih menu login.
3.2.2.3 Activity Diagram Melakukan Chatting Pengguna Telepon Genggam
Aplikasi chatting mobile phone
Menampilkan Daftar Teman
Memilih Teman
Memilih Menu Chat Menampilkan Jendela Aplikasi Chat Room
Memilih Menu Emoticon Menampilkan Jendela Aplikasi Emoticon list Memilih Emoticon
Memilih Menu OK Menampilkan kode Emoticon ke textfield Mengetik pesan ke textfield
Memilih tombol Send Menampilkan Pesan ke layar
Gambar 3.4 Activity Diagram Melakukan Chatting ‘Aplikasi chatting mobile phone’. Pada gambar 3.4 diatas aktifitas dimulai jika pengguna telepon genggam sudah memilih salah satu user dan memilih menu chat. Pengguna telepon
genggam juga dapat memilih emoticon yang diinginkan untuk ditampilkan ke layar pada waktu melakukan chatting.
3.2.2.4 Activity Diagram Menambah Teman. Pengguna Telepon Genggam
Aplikasi chatting mobile phone
Menampilkan Jendela Aplikasi daftar teman
Memilih menu tambah teman Menampilkan Jendela Aplikasi Tambah Teman Memasukkan Username
Memilih tombol tambah Menampilkan Jendela Aplikasi Daftar Teman
Gambar 3.5 Activity Diagram Memilih list users ‘Aplikasi chatting mobile phone’. Pada gambar 3.5 diatas aktifitas dimulai jika pengguna telepon genggam sudah terverifikasinya username dan password pada waktu melakukan login. Penambahan teman ini berdasarkan username dari user yang akan dijadikan teman.
Diagram flowchart juga dapat diterapkan untuk menggambarkan suatu tahapan penyelesaian masalah secara sederhana, terurai, rapi dan jelas dengan menggunakan simbol - simbol yang START standar. Tahap penyelesaian masalah yang disajikan harus jelas, sederhana, efektif dan tepat, seperti pada gambar 3.6. di bawah ini diagram Tampilkan flowchart untuk memulai ‘Aplikasi chatting mobile phone’. Jendela Pendaftaran
Ya
Pilih menu Daftar Baru
Tidak
Gambar 3.6 Flowchart diagram untuk memulai ‘Aplikasi chatting mobile phone’. Melakukan Pendaftaran
Pilih Menu Login
Tampilkan Jendela Login
Pada gambar 3.6. diatas merupakan flowchart dari program ‘Aplikasi Ya
chatting mobile phone’ pada saat start, memilih menu daftar baru atau menu Tampilkan Pesan Error
Tidak
Cek Username
login, memulai aplikasi, aplikasi dimulai sampai aplikasi berakhir. Melakukan Login Ya Tidak Tidak Tampilkan Pesan Berhasil Mendaftar
Cek Validasi data
Ya
3.2.3 Pemodelan Class Diagram Pilih Menu
Cek Permintaan Teman
Ya
Tampilkan List Permintaan Teman
Class adalah sebuah spesifikasi Keluar yang jika diinstansiasi akan menghasilkan Tidak
sebuah objek dan merupakan inti dari pengembangan dan desain berorientasi Ya
Tampilkan Daftar Teman
objek. Class menggambarkan keadaan (atribut/properti) suatu sistem, sekaligus END keadaan tersebut (metoda/fungsi). menawarkan layanan untuk memanipulasi
Gambar 3.6 Diagram Flowchart Aplikasi Chating Mobile Phone Secara Umum Class diagram juga menggambarkan struktur dan deskripsi class, package dan objek beserta hubungan satu sama lain seperti isi, pewarisan, asosiasi, dan lain-lain (Dharwiyanti dan Wahono:2003, P5).
Class memiliki tiga area pokok : 1. Nama (dan stereotype) 2. Atribut 3. Metoda
Atribut dan metoda dapat memiliki salah satu sifat berikut : 1. Private, tidak dapat dipanggil dari luar class yang bersangkutan. 2. Protected, hanya dapat dipanggil oleh class yang bersangkutan dan anak-anak yang mewarisinya. 3. Public, dapat dipanggil oleh siapa saja. Class dapat merupakan implementasi dari sebuah interface, yaitu class abstrak yang hanya memiliki metoda. Interface tidak dapat
langsung
diinstansiasikan, tetapi harus diimplementasikan dahulu menjadi sebuah class. Dengan demikian interface mendukung resolusi metoda pada saat run-time. Untuk class diagram ‘Aplikasi chatting mobile phone’ dapat dilihat pada gambar 3.7. di bawah ini.
Gambar 3.7 Class Diagram ‘Aplikasi chatting mobile phone’.
3.2.4 Pemodelan Sequence Diagram
Sequence diagram menggambarkan interaksi antar objek di dalam dan di sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang digambarkan terhadap waktu. Sequence diagram terdiri atas dimensi vertikal (waktu) dan dimensi horizontal (objek-objek yang terkait). Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah - langkah yang dilakukan sebagai respons dari sebuah event (proses) untuk menghasilkan output tertentu (Dharwiyanti dan Wahono, 2003:8). Pada ‘Aplikasi chatting mobile phone’ ini terdapat hanya satu user yang selanjutnya disebut sebagai pengguna telepon genggam. Pengguna telepon genggam harus membuka ‘Aplikasi chatting mobile phone’ terlebih dahulu agar bisa menggunakan aplikasi tersebut. Apabila pengguna telepon genggam berhasil
membuka aplikasi tersebut barulah pengguna telepon genggam tersebut dapat memilih dan menggunakan menu - menu yang ada pada aplikasi tersebut. Adapun menu – menu yang ada pada aplikasi tersebut adalah menu pendaftaran, login , chatting, tambah teman, dan Emoticon. Berikut ini adalah sequence diagram untuk mengakses menu Pendaftaran, login , chatting, dan Tambah Teman yang dapat dilihat pada gambar 3.8, gambar 3.9, gambar 3.10, dan pada gambar 3.11 di bawah ini.
Pengguna Telepon Genggam
Aplikasi
Menu Utama
Menu Pendaftaran
Data User
Membuka Aplikasi Mengakses Menu Daftar Baru Daftar Simpan Data()
Gambar 3.8 Sequence Diagram mengakses menu Pendaftaran
Pengguna Telepon Genggam
Aplikasi
Menu Utama
Menu Login
Data User
Membuka Aplikasi Mengakses Menu Login Login
Tampil Result
Akses Data()
Tampil Result Tampil Result
Result Validasi
Gambar 3.9 Sequence Diagram mengakses menu Login
Pengguna Telepon Genggam
Menu Chat Room
Data User
Chat
Melakukan Chat Cek User() Result Cek User()
Validasi Cek User
Simpan Chat
Tampilkan Pesan Tampilkan Pesan
Gambar 3.10 Sequence Diagram mengakses menu Chatting
Pengguna Telepon Genggam
Menu Chat Room
Data User
Object2
Menambah Teman Cek User() Result Cek User()
Validasi Cek User
Simpan data Friend()
Gambar 3.11 Sequence Diagram mengakses menu Tambah Teman
3.3
Perancangan Antarmuka
Perancangan antarmuka dibutuhkan dalam rekayasa perangkat lunak agar aplikasi yang dibangun mudah digunakan oleh pengguna (user friendly). Untuk itu perlu diciptakan suatu antarmuka pengguna yang baik. Pada ‘Aplikasi chatting mobile phone’ yang akan dibangun, terdapat delapan buah jendela. Jendela-jendela tersebut yaitu jendela utama, jendela login, jendela pendaftaran, jendela info permintaan pertemanan, jendela daftar teman, jendela tambah teman, jendela chat room, dan jendela Emoticon List. Pada subbab berikut akan dijelaskan mengenai perancangan dari jendela-jendela tersebut. 3.3.1 Perancangan Jendela Utama pada ‘Aplikasi chatting mobile phone’. Apabila pengguna telepon genggam memasuki jendela menu ‘Aplikasi chatting mobile phone’. Disain antar muka dari jendela Utama ‘Aplikasi chatting mobile phone’ ditunjukan oleh gambar 3.12. berikut ini. Mobile Phone Chat® o
Login
o
Daftar Baru
Keluar
Pilih
Gambar 3.12. Jendela Utama ‘Aplikasi chatting mobile phone’.
3.3.2 Perancangan Jendela Login pada ‘Aplikasi chatting mobile phone’. Disain antar muka dari jendela Login ‘Aplikasi chatting mobile phone’ ditunjukan oleh gambar 3.13. berikut ini.
LogIn Username Password
Keluar Keluar
Login
Gambar 3.13. Jendela Login ‘Aplikasi chatting mobile phone’. Ketika pengguna telepon genggam sudah memasukkan Username dan Password lalu memilih menu Login. Maka aplikasi akan memeriksa ke dua data tersebut. Jika data tidak valid, maka akan tampil info seperti yang ditunjukkan oleh gambar 3.14 dan jika data valid maka akan masuk ke jendela selanjutnya.
INFO Username dan Password Tidak Valid, Ulangi Kembali !!!
OK
Gambar 3.14. Info Data Tidak valid 3.3.3 Perancangan Jendela Pendaftaran pada ‘Aplikasi chatting mobile phone’. Disain antar muka dari jendela Pendaftaran ‘Aplikasi chatting mobile phone’ ditunjukan oleh gambar 3.15. berikut ini.
Daftar Baru Nama Username Password Keluar Verify Password
Keluar
Daftar
Gambar 3.15. Jendela Pendaftaran‘Aplikasi chatting mobile $phone’.
Ketika pengguna telepon genggam sudah mengisi semua data dan memilih menu daftar. Maka aplikasi akan mengakses data tersebut, jika username sudah ada yang pakai maka tampil info seperti pada gambar 3.16. tetapi jika username belum ada yang pakai dan semua data valid, maka tampil info seperti pada gambar 3.17.
INFO Username sudah ada yang pakai, cobalah
dengan
username
lainnya !!! OK
Gambar 3.16. Info Data Tidak valid
INFO
Pendaftaran Berhasil !!!
OK
Gambar 3.17. Info Pendaftaran berhasil.
3.3.4 Perancangan Jendela Info Permintaan Pertemanan pada ‘Aplikasi chatting mobile phone’. Disain antar muka dari jendela Permintaan Pertemanan ‘Aplikasi chatting mobile phone’ ditunjukan oleh gambar 3.18. berikut ini. Permintaan Pertemanan o
Nama
o
Nama
o
Nama
o Nama Keluar Terima Tolak Keluar
Menu
Gambar 3.18. Jendela Permintaan Pertemanan ‘Aplikasi chatting mobile phone’. 3.3.5 Perancangan Jendela Daftar Teman pada ‘Aplikasi chatting mobile phone’. Disain antar muka dari jendela Daftar Teman ‘Aplikasi chatting mobile phone’ ditunjukan oleh gambar 3.19. berikut ini.
Daftar Teman Online o
Nama
o
Nama
Keluar
Offline o
Nama
o
Nama
Chat Tambah Teman Log Off Keluar
Menu
Gambar 3.19. Jendela Daftar Teman ‘Aplikasi chatting mobile phone’. 3.3.6 Perancangan Jendela Tambah Teman pada ‘Aplikasi chatting mobile phone’. Disain antar muka dari jendela Tambah Teman ‘Aplikasi chatting mobile phone’ ditunjukan oleh gambar 3.20. berikut ini. Tambah Teman Masukkan Username
Keluar Kembali
Tambah
Gambar 3.20. Jendela Tambah Teman ‘Aplikasi chatting mobile phone’.
3.3.7 Perancangan Jendela Chat Room pada ‘Aplikasi chatting mobile phone’. Disain antar muka dari jendela Chat Room ‘Aplikasi chatting mobile phone’ ditunjukan oleh gambar 3.21. berikut ini. Chat Room Nama1 :
Nama2 : Keluar
Emoticon Daftar Teman Kirim
Menu
Gambar 3.21. Jendela Chat Room ‘Aplikasi chatting mobile phone’.
3.3.8 Perancangan Jendela Emoticon List pada ‘Aplikasi chatting mobile phone’. Disain antar muka dari jendela Emoticon List ‘Aplikasi chatting mobile phone’ ditunjukan oleh gambar 3.22. berikut ini. Emoticon List
Keluar Kembali
OK
Gambar 3.22. Jendela Emoticon List ‘Aplikasi chatting mobile phone’.
