BAB III ANALISIS DAN PERANCANGAN APLIKASI. Aplikasi chatting mobile phone yang menggunakan NetBeans IDE 6.0 yang di

Transkripsi

1 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.

2 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 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.

3 Tabel 3.1 Spesifikasi naratif untuk Use Case Melakukan Pendaftaran. Nama Use Case Deskripsi Singkat Aktor Pra Kondisi Melakukan Pendaftaran Use Case ini memungkinkan pengguna telepon genggam untuk melakukan pendaftaran yang ada pada Aplikasi chatting mobile Pengguna Telepon Genggam. Aplikasi chatting mobile phone tersebut telah dipasang (installed / embedded) pada telepon genggam. Tindakan Utama 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. Tindakan alternatif - Pasca Kondisi 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 Melakukan log-in Deskripsi Singkat Use Case ini memungkinkan pengguna telepon genggam untuk melakukan login yang ada pada Aplikasi chatting mobile Aktor Pengguna Telepon Genggam. Pra Kondisi Aplikasi chatting mobile phone tersebut telah dipasang (installed / embedded) pada telepon genggam. Tindakan Utama 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. Tindakan alternatif - Pasca Kondisi Jika Use Case berhasil dijalankan maka aplikasi berjalan dan user dapat memilih dan melihat list users yang terdapat pada layar aplikasi tersebut.

4 Tabel 3.3 Spesifikasi naratif untuk Use Case Melakukan Chatting. Nama Use Case Melakukan Chatting. Deskripsi Singkat Use Case ini memungkinkan pengguna telepon genggam untuk melakukan Chatting dengan user lain. Aktor Pengguna Telepon Genggam. Pra Kondisi Aplikasi chatting mobile phone tersebut telah dipasang (installed / embedded) pada telepon genggam. Tindakan Utama 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 Tindakan alternatif - Pasca Kondisi 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 Menambah Teman Deskripsi Singkat Use Case ini memungkinkan pengguna telepon genggam untuk menambah teman. Aktor Pengguna Telepon Genggam. Pra Kondisi Aplikasi chatting mobile phone tersebut telah dipasang (installed / embedded) pada telepon genggam. Tindakan Utama 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. Tindakan alternatif - Pasca Kondisi Jika Use Case berhasil dijalankan maka aplikasi berjalan dan pengguna telepon genggam dapat menambah teman berdasarkan username 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

5 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 Activity Diagram Melakukan Pendaftaran. Pengguna Telepon Aplikasi chatting mobile Memasukkan nama, username, Memilih Menu Daftar Menampilkan Jendela Aplikasi Pendaftaran Menampilkan info pendaftaran Menampilkan Jendela Aplikasi Gambar 3.2 Activity Diagram Melakukan Pendaftaran Aplikasi chatting mobile

6 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 Activity Diagram Melakukan login. Pengguna Telepon Genggam Aplikasi chatting mobile phone Memasukkan username dan password Menampilkan Jendela Aplikasi login Memilih Menu Login Menampilkan info login Menampilkan Daftar Teman Gambar 3.3 Activity Diagram Melakukan Login Aplikasi chatting mobile 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.

7 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 Memilih Emoticon Menampilkan Jendela Aplikasi Emoticon list Memilih Menu OK Mengetik pesan ke textfield Menampilkan kode Emoticon ke textfield Memilih tombol Send Menampilkan Pesan ke layar Gambar 3.4 Activity Diagram Melakukan Chatting Aplikasi chatting mobile Pada gambar 3.4 diatas aktifitas dimulai jika pengguna telepon genggam sudah memilih salah satu user dan memilih menu chat. Pengguna telepon

8 genggam juga dapat memilih emoticon yang diinginkan untuk ditampilkan ke layar pada waktu melakukan chatting Activity Diagram Menambah Teman. Pengguna Telepon Genggam Aplikasi chatting mobile phone Menampilkan Jendela Aplikasi daftar teman Memilih menu tambah teman Memasukkan Username Menampilkan Jendela Aplikasi Tambah Teman Memilih tombol tambah Menampilkan Jendela Aplikasi Daftar Teman Gambar 3.5 Activity Diagram Memilih list users Aplikasi chatting mobile 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.

9 Diagram flowchart juga dapat diterapkan untuk menggambarkan suatu tahapan penyelesaian masalah secara sederhana, terurai, rapi dan jelas dengan menggunakan simbol - simbol yang standar. Tahap penyelesaian masalah yang disajikan harus jelas, sederhana, efektif dan tepat, seperti pada gambar 3.6. di bawah ini diagram flowchart untuk memulai Aplikasi chatting mobile Tampilkan Jendela Pendaftaran Ya START Pilih menu Daftar Baru Gambar 3.6 Flowchart diagram untuk memulai Aplikasi chatting mobile Pilih Menu Pendaftaran Ya Jendela Login Pada gambar 3.6. diatas merupakan flowchart Logindari program Aplikasi chatting mobile phone pada saat start, memilih menu daftar baru atau menu Tampilkan Tidak Melakukan Cek Username Pesan Error login, memulai aplikasi, aplikasi dimulai sampai aplikasi berakhir. Tidak Tampilkan Melakukan Login Ya Tampilkan Pesan Berhasil Mendaftar Tidak Cek Validasi data Tidak Pemodelan Class Diagram Pilih Menu Class adalah sebuah spesifikasi yang jika diinstansiasi akan menghasilkan sebuah objek dan merupakan inti dari pengembangan dan desain berorientasi Teman objek. Class menggambarkan keadaan (atribut/properti) suatu sistem, sekaligus menawarkan layanan untuk memanipulasi END keadaan tersebut (metoda/fungsi). Ya Ya Cek Permintaan Teman Tidak Tampilkan Daftar Ya Tampilkan List Permintaan Teman 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).

10 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.

11 Gambar 3.7 Class Diagram Aplikasi chatting mobile 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

12 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 Tampil Result Tampil Result Login Tampil Result Akses Data() Result Validasi Gambar 3.9 Sequence Diagram mengakses menu Login

13 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

14 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 Perancangan Jendela Utama pada Aplikasi chatting mobile Apabila pengguna telepon genggam memasuki jendela menu Aplikasi chatting mobile Disain antar muka dari jendela Utama Aplikasi chatting mobile phone ditunjukan oleh gambar berikut ini. Mobile Phone Chat o o Login Daftar Baru Pilih Gambar Jendela Utama Aplikasi chatting mobile Perancangan Jendela Login pada Aplikasi chatting mobile Disain antar muka dari jendela Login Aplikasi chatting mobile phone ditunjukan oleh gambar berikut ini.

15 LogIn Username Password Login Gambar Jendela Login Aplikasi chatting mobile 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 Info Data Tidak valid Perancangan Jendela Pendaftaran pada Aplikasi chatting mobile Disain antar muka dari jendela Pendaftaran Aplikasi chatting mobile phone ditunjukan oleh gambar berikut ini.

16 Daftar Baru Nama Username Password Verify Password Daftar Gambar Jendela Pendaftaran Aplikasi chatting mobile $ 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 tetapi jika username belum ada yang pakai dan semua data valid, maka tampil info seperti pada gambar INFO Username sudah ada yang pakai, cobalah dengan username lainnya!!! OK Gambar Info Data Tidak valid

17 INFO Pendaftaran Berhasil!!! OK Gambar Info Pendaftaran berhasil Perancangan Jendela Info Permintaan Pertemanan pada Aplikasi chatting mobile Disain antar muka dari jendela Permintaan Pertemanan Aplikasi chatting mobile phone ditunjukan oleh gambar berikut ini. Permintaan Pertemanan o Nama o Nama o Nama o Nama Terima Tolak Menu Gambar Jendela Permintaan Pertemanan Aplikasi chatting mobile Perancangan Jendela Daftar Teman pada Aplikasi chatting mobile Disain antar muka dari jendela Daftar Teman Aplikasi chatting mobile phone ditunjukan oleh gambar berikut ini.

18 Daftar Teman Online o Nama o Nama Offline o Nama o Nama Chat Tambah Teman Log Off Menu Gambar Jendela Daftar Teman Aplikasi chatting mobile Perancangan Jendela Tambah Teman pada Aplikasi chatting mobile Disain antar muka dari jendela Tambah Teman Aplikasi chatting mobile phone ditunjukan oleh gambar berikut ini. Tambah Teman Masukkan Username Kembali Tambah Gambar Jendela Tambah Teman Aplikasi chatting mobile

19 3.3.7 Perancangan Jendela Chat Room pada Aplikasi chatting mobile Disain antar muka dari jendela Chat Room Aplikasi chatting mobile phone ditunjukan oleh gambar berikut ini. Chat Room Nama1 : <pesan> Nama2 : <pesan> Emoticon Daftar Teman Kirim Menu Gambar Jendela Chat Room Aplikasi chatting mobile Perancangan Jendela Emoticon List pada Aplikasi chatting mobile Disain antar muka dari jendela Emoticon List Aplikasi chatting mobile phone ditunjukan oleh gambar berikut ini. Emoticon List Kembali Gambar Jendela Emoticon List Aplikasi chatting mobile OK