Pada Bab IV ini akan dijelaskan perancangan aplikasi pengiriman pesan teks ber-markup via Short Message Service (SMS).

Transkripsi

1 BAB IV PERANCANGAN Pada Bab IV ini akan dijelaskan perancangan aplikasi pengiriman pesan teks ber-markup via Short Message Service (SMS). 4.1 Subsistem Pengirim Pesan (Sender) Dari hasil analisis pada Bab III, didapatkan kelas-kelas yang menyusun subsistem aplikasi pengirim pesan (sender) adalah MessageEditor, MarkupCreator, MessageCompressor, DestNumberForm, dan MessageSender. Tabel IV-1 menunjukkan deskripsi untuk masing-masing kelas. Tabel IV-1 Rancangan Kelas Aplikasi Pengirim Pesan No Nama Kelas Deskripsi 1 MessageEditor Kelas yang berfungsi menyediakan tempat bagi pengguna menulis pesan teks dengan berbagai style yang mungkin 2 MarkupCreator Kelas yang membagkitkan tag-tag yang merepresentasikan style teks yang dimaksud oleh pengguna 3 MessageCompressor Kelas yang bertanggung jawab melakukan kompresi terhadap pesan teks yang akan dikirim 4 DestNumberForm Kelas form untuk memasukkan nomor tujuan penerima pesan teks 5 MessageSender Kelas yang bertanggung jawab melakukan pengiriman pesan Kelas MessageEditor Kelas MessageEditor berfungsi menyediakan tempat bagi pengguna untuk menulis pesan teks dengan berbagai style yang mungkin. Pada implementasinya, kelas MessageEditor merupakan turunan kelas Canvas pada MIDP 2.0 Java 2 Micro Edition. Oleh karena itu, kelas MessageEditor akan melakukan override metode-metode dari kelas Canvas diantaranya adalah keypressed(), keyreleased(), paint(), dan repaint(). MessageEditor menyimpan string pesan yang akan dikirim oleh MessageSender. MessageEditor memiliki sebuah kursor untuk menunjukkan posisi dimana pengguna menuliskan teks. IV-1

2 IV-2 MessageEditor menyimpan current information dari pesan teks yang ditulis oleh pengguna. Current information tersebut meliputi: 1. Posisi kursor 2. Jenis font yang sedang digunakan 3. Ukuran font yang sedang digunakan 4. Style yang sedang digunakan 5. Warna yang sedang digunakan 6. Current character yaitu karakter yang terakhir kali ditulis dalam MessageEditor Current information tersebut akan dikirim kepada MarkupCreator untuk membangkitkan tag-tag markup yang sesuai Kelas MarkupCreator Kelas MarkupCreator berfungsi untuk menyisipkan tag-tag pada pesan teks yang ditulis pada MessageEditor. Ketika pengguna memilih suatu atribut tertentu untuk pesan teks (baik berupa font face, font size, font color, maupun font style), MarkupCreator akan menyisipkan tag yang sesuai pada pesan teks yang akan dikirim Kelas MessageCompressor Kelas MessageCompressor bertanggung jawab melakukan kompresi terhadap pesan teks yang akan dikirim. Kelas MessageCompressor memiliki metode compressmessage() yang berisi algoritma kompresi teks. MessageCompressor mendapat input string dari MessageEditor dan akan menghasilkan pesan teks yang telah terkompresi. Output dari kompresi ini akan dikirim oleh MessageSender Kelas DestNumberForm Kelas DestNumberForm merupakan kelas turunan dari kelas Form yang dibuat untuk memasukkan nomor tujuan pengiriman pesan teks. Kelas ini akan memiliki atribut phonenumber dan akan memiliki metode getphonenumber(). Nomor tujuan pengiriman pesan teks yang terdapat pada kelas ini akan digunakan oleh MessageSender untuk melakukan pengiriman pesan.

3 IV Kelas MessageSender Kelas MessageSender bertanggung jawab melakukan pengiriman pesan. MessageSender memiliki metode send(). Pesan yang dikirim oleh MessageSender merupakan binary message. Pesan dikirim melalui port tertentu sehingga MessageSender memiliki sebuah atribut mport. 4.2 Subsistem Penerima Pesan (Receiver) Dari hasil analisis pada Bab III, didapatkan kelas-kelas yang menyusun aplikasi penerima pesan (receiver) adalah MessageReceiver, MessageDecompressor, dan MessageViewer. Tabel IV-2 menunjukkan rancangan subsistem Penerima Pesan. Tabel IV-2 Rancangan Kelas Aplikasi Penerima Pesan No Nama Kelas Deskripsi 1 MessageReceiver Kelas yang bertanggung jawab terhadap penerimaan pesan yang masuk ke handset 2 MessageDecompressor Kelas yang bertanggung jawab melakukan dekompresi pesan sehingga diperoleh pesan seperti semula 3 MessageViewer Kelas yang bertanggung jawab membaca dan menampilkan pesan teks sebagaimana yang dikirimkan oleh pengirim pesan Kelas MessageReceiver Kelas MessageReceiver bertanggung jawab menerima pesan yang masuk ke handset. Pesan yang diterima merupakan pesan teks. Pesan teks yang diterima akan diberikan kepada MessagetDecompressor untuk dilakukan dekompresi Kelas MessageDecompressor Kelas MessageDecompressor bertanggung jawab melakukan dekompresi terhadap pesan teks yang diterima oleh MessageReceiver. MessageDecompressor memiliki metode decompressmessage() untuk melakukan dekompresi pesan teks yang diperoleh dari MessageReceiver. Hasil dekompresi akan diberikan kepada MessageViewer untuk ditampilkan kepada pengguna Kelas MessageViewer Kelas MessageViewer bertanggung jawab membaca pesan teks, menerjemahkan markup, lalu menampilkan pesan teks sebagaimana yang dikirim oleh pengirim pesan. Sama halnya dengan MessageEditor, MessageViewer ini merupakan turunan kelas Canvas yang telah disediakan oleh MIDP 2.0 Java 2 Micro Edition. Oleh karena itu, kelas

4 IV-4 MessageViewer akan melakukan override terhadap metode-metode yang dimiliki Canvas diantaranya paint()dan repaint(). 4.3 Kelas-kelas List Pada aplikasi pengiriman pesan teks ber-markup via SMS ini terdapat beberapa kelas yang merupakan turunan kelas List pada J2ME. Kelas-kelas List tersebut digunakan untuk menyimpan dan menampilkan variasi-variasi huruf yang akan dipilih oleh pengguna. Tabel IV-3 Tabel Kelas List No Nama Kelas Deskripsi 1 MenuList Kelas List menu messaging yang terdiri dari write message dan inbox 2 MessageList List pesan yang masuk pada inbox aplikasi 3 StyleList List berbagai style huruf yang didukung oleh aplikasi 4 SizeList List berbagai ukuran huruf yang didukung oleh aplikasi 5 FaceList List berbagai tipe font yang didukung oleh aplikasi 6 ColorList List berbagai warna huruf yang didukung oleh aplikasi 7 SmileyList List smiley yang dapat ditambahkan pada pesan 4.4 Kelas Messenger Kelas MIDlet pada aplikasi pengiriman pesan teks format ber-markup ini adalah kelas Messenger. Messenger merupakan kelas utama dari aplikasi pengiriman pesan teks bermarkup via SMS. Karena kelas ini merupakan kelas turunan dari kelas MIDlet maka kelas ini melakukan override terhadap metode-metode startapp(), pauseapp(), serta destroyapp(). Diagram kelas perancangan untuk aplikasi pengiriman pesan teks bermarkup via SMS ditampilkan pada Gambar IV Kelas RecordStore Kelas RecordSore merupakan kelas yang digunakan untuk melakukan penyimpanan data persisten pada platform J2ME. Pada aplikasi pengiriman pesan teks ber-markup ini, kelas RecordStore digunakan untuk menyimpan pesan teks yang masuk pada inbox aplikasi. Data yang disimpan pada RecordStore dalam hal ini adalah pesan teks dan alamat pengirim pesan teks tersebut.

5 IV-5 MenuList MessageList StyleList SizeList FaceList ColorList SmileyList Messenger meditor mreceiver mdecompressor mviewer display port Messenger() startapp() pauseapp() destroyapp() MessageReceiver senderaddress messageconnection receive() MessageEditor currentchar currentface currentstyle currentcolor currentsize message curx cury cursor cmnext cmface cmsize cmstyle cmcolor MessageEditor() keypressed() paint() repaint() DestNumberForm phonenumber getphonenumber() MessageCompressor modelin compressmessage() copystream() MarkupCreator tagbold tagitalic tagunderlined tagfontface tagfontsize tagfontcolor tagfontstyle inserttag() MessageDecompressor modelout decompressmessage() copystream() MessageViewer message cmforward MessageSender adr port messageconnection send() RecordStore readmessage() paint() repaint() Gambar IV-1 Diagram Kelas Perancangan 4.6 Rancangan Antarmuka Rancangan antarmuka berikut ini terbagi atas rancangan antarmuka subsistem pengirim pesan dan rancangan antarmuka subsistem penerima pesan. Rancangan antarmuka subsistem pengirim pesan meliputi rancangan antarmuka message editor serta antarmuka terkait dengan menu-menu yang terdapat pada message editor. Menu-menu yang terdapat dalam message editor meliputi menu untuk memasukkan nomor tujuan pesan dan menu untuk melakukan mengubah setting huruf. Rancangan antarmuka penerima pesan sebatas rancangan bagaimana pesan ditampilkan Rancangan Antarmuka Aplikasi Pengirim (Sender) Ketika user membuka aplikasi pengirim pesan (sender), aplikasi akan menampilkan message editor dimana user dapat menulis pesan teks dengan variasi huruf yang diinginkan. Pada tampilan ini terdapat menu untuk lanjut pada pengiriman pesan (next), menentukan warna huruf (font color), menentukan style huruf (font style), menentukan jenis huruf (font face), serta menentukan ukuran huruf (font size), serta menu keluar (exit)

6 IV-6 dari program. Rancangan antarmuka aplikasi pengirim (sender) dapat dilihat pada Gambar IV-2 dan Gambar IV-3. Gambar IV-2 Rancangan Antarmuka Message Editor Pada ujung kanan atas ditampilkan informasi mengenai jumlah karakter pada pesan yang telah ditulis tersebut. Pada ujung kiri atas ditampilkan kursor yang menandakan tempat dituliskannya huruf. Seperti yang terlihat pada Gambar IV-2, pada saat pengguna menulis pesan pada message editor, pengguna dapat memilih menu sesuai kebutuhan. Pilihan Next akan berakibat layar menampilkan halaman untuk memasukkan nomor tujuan pesan dikirim seperti terlihat pada Gambar IV-3. Gambar IV-3 Rancangan Form Input Nomor Tujuan Pada bagian bawah form terdapat menu Option yang berisi dua buah alternatif yaitu menu Add From Contact dan menu Send. Menu Add From Contact adalah menu yang otomatis dihasilkan ketika membuat input teks yang bertipe phone number. Menu Send akan memanggil metode sendmessage() pada kelas MessageSender.

7 IV-7 Pilihan Font Color akan mengakibatkan layar menampilkan list warna yang mungkin. Rancangan list warna huruf dapat dilihat pada Gambar IV-4. Gambar IV-4 Rancangan List Warna Huruf Pilihan Font Style, Font Face, serta Font Size akan memiliki tampilan yang sama dengan tampilan antarmuka pilihan Font Color. Pada saat layar menampilkan list warna huruf, list style huruf, list jenis huruf, serta list ukuran huruf, jika pengguna menekan menu OK maka layar akan kembali menampilkan message editor Rancangan Antarmuka Subsistem Penerima (Receiver) Aplikasi penerima (receiver) akan menampilkan pesan yang diterima. Berikut ini Rancangan tampilan pesan yang diterima ditunjukkan oleh Gambar IV-5. Gambar IV-5 Rancangan Tampilan Pesan Diterima