ANALISA DAN PERANCANGAN APLIKASI CHATTING

BERBASIS WEB MENGGUNAKAN FLASH CS3

Halaman Judul

Naskah Publikasi

diajukan oleh

Mohamad Fauzi Haryadi

06.11.1100

kepada

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AMIKOM

YOGYAKARTA

2010

i

Lembar Pengesahan

ii

ANALISYS AND DESIGN WEB BASED CHATTING

APPLICATION USING FLASH CS2

Abstract

ANALISA DAN PERANCANGAN APLIKASI CHATTING

BERBASIS WEB MENGGUNAKAN FLASH CS3

Mohamad Fauzi Haryadi

Jurusan Teknik Informatika

STMIK AMIKOM YOGYAKARTA

ABSTRACT

Use of the Internet media as one tool to communicate is highly developed rapidly at

this time. The need for information, be very meaningful to some people in this period. One

application that is used to exchange information among friends and relatives is a chat

application.

Desktop-based chat applications can be encountered anywhere, and can be

downloaded free of charge from its developers. However, with so rapid as the

development of this, many users switch to choose to use web-based applications,

because of the high portability, and its use is easy.

With the web-based chat application, users can communicate anytime and from

anywhere, provided that it has an internet connection. No longer knew the difference

operating system is used, because only with a browser already installed, you can directly

perform the data exchange process, whether it be text, audio and video

Keyword: Chatting, private chat, FMS, Flash, web base

1

1. Pendahuluan

Perkembangan dunia telekomunikasi di dunia berkembang pesat seiring dengan

semakin banyaknya penggunaan fasilitas internet di hampir seluruh lapisan masyarakat

dunia. Tidak dapat dipungkiri jikalau dengan internet ikut memberikan andil yang besar

dalam perkembangan komunikasi jarak jauh.

Berbagai macam model alat komunikasi dapat kita jumpai, baik yang berupa fisik

(hardware) atau berupa aplikasi (software). Aplikasi yang paling sering digunakan untuk

bertukar informasi adalah aplikasi chatting. Dengan aplikasi ini, kita bisa terhubung

dengan siapa saja dibelahan bumi ini, hanya dengan bermodalkan akses internet.

Banyak pengembang melihat kesempatan ini, oleh karena itu dapat kita jumpai banyak

sekali aplikasi chatting berbagai model dengan fitur-fitur dan penggunaan teknologi

terbaru yang dikembangkan.

Pada dasarnya ada dua model aplikasi chatting yang banyak kita jumpai, yaitu

aplikasi chatting berbasis desktop, maupun aplikasi chatting berbasis web. Jika

dibangdingkan dengan aplikasi berbasis desktop, ada beberapa keunggulan yang bisa

kita dapatkan dari aplikasi berbasis web, diantaranya portabilitasnya yang sangat tinggi

karena dapat digunakan dari mana saja dan kapan saja. Selain itu, aplikasi berbasis web

dapat dijalankan di sistem operasi manapun, sehingga penggunaannya bersifat universal.

Dalam penggunaannya hanya dibutuhkan sebuah web browser yang telah terinstall flash

player plugin.

2. Landasan

2.1 Pengertian Chatting

Chatting dalam bahasa Indonesia berarti ngobrol atau berbicara dua arah

antara satu atau beberapa orang. Di dalam dunia komputer, chatting berarti berbicara

dengan orang lain dengan menggunakan komputer. Suara yang dihasilkan, biasanya

digantikan dengan teks yang diketik. Namun dengan berkembangnya multimedia

dengan komputer, chatting tidak hanya dengan menggunakan teks, tapi bisa juga

dengan menggunakan suara dan video. Lebih sempit lagi, pengertian chatting di

dalam dunia Internet. Di sini pengertian chatting adalah menggunakan Internet untuk

berbicara dengan orang lain.

Menurut jumlah orang yang berbicara, chatting dapat dibagi menjadi dua,

yaitu group chat dan private chat. Group chat adalah chatting yang melibatkan lebih

dari dua orang. Biasanya orang-orang ini berkumpul di dalam suatu chat room atau

channel, tempat di mana mereka bisa berinteraksi. Apabila satu orang mengirimkan

suatu pesan, maka seluruh orang yang berada di chat room atau channel tersebut

2

bisa membacanya. Sedangkan private chat tidak demikian. Private chat hanya

melibatkan dua orang. Jadi hanya ada orang tertentu yang dapat membaca pesan

kita.

2.2 Pengertian Streaming

Streaming adalah proses pengiriman data kontinyu atau secara terus-

menerus, yang dilakukan secara broadcast melalui internet untuk ditampilkan ke

aplikasi streaming pada komputer, dan streaming pun bisa dilakukan secara live atau

real time. Streaming sendiri memiliki dua jenis, yakni streaming audio dan streaming

video. Pengertian streaming audio itu sendiri untuk mendengarkan siaran secara live

melalui internet. Tetapi tidak mendownload terlebih dahulu lalu menyimpannya di

komputer, dengan streaming ini dapat mendengarkan tanpa harus mendownloadnya.

Streaming video menggunakan protokol RTMP seperti yang digunakan pada

Real dan Flash Media Server. Penggunaan teknologi ini meluas dikarenakan protokol

ini bisa memberikan livestreaming untuk keperluan live broadcasting. Teknologi inilah

yang biasa digunakan untuk video tele conference. Sedangkan saat ini penggunaan

video pada web merupakan trend yang sedang meningkat di internet.

2.3 Adobe Flash Media Server

Flash Media Server (FMS) adalah properti eksklusif dan server media dari

Adobe Systems (awalnya sebuah produk Macromedia). Server ini bekerja dengan

runtime flash player untuk menciptakan media driven, multiuser RIA (Rich Internet

Applications). Server menggunakan ActionScript 1, sebuah bahasa scripting yang

berbasis ECMAScript, untuk logika sisi server. Sebelum versi 2, itu dikenal sebagai

Flash Communication Server.

2.3.1 Penggunaan

1. Memungkinkan streaming video yang disimpan pada server, dan dapat

dikirim kepada flash klien.

2. Komunikasi secara realtime, sebuah aplikasi yang memerlukan kerjasama

antara beberapa klien, seperti chat room atau permainan multiplayer.

2.3.2 Fungsi

Flash Media Server adalah sebuah hub atau penghubung. Aplikasi

berbasis Flash terhubung ke hub menggunakan protocol Real Time Messaging

Protocol (RTMP). Server dapat mengirim dan menerima data ke dan dari

pengguna yang berhubungan dengan web yang telah di install flash player.

3

Klien yang saling terhubung dapat membuat Remote Procedure Call (RPC)

atau prosedur panggilan secara remote di sisi server dan server dapat

memanggil method pada klien tertentu.

SharedObject dapat digunakan untuk menyinkronkan struktur data yang

rumit dan memanggil method remote pada beberapa klien dalam satu

panggilan dengan cara memiliki klien yang.telah terdaftar di SharedObject.

Standar objek ActionScript diangkut melintasi NetConnection menggunakan

Action Message Format (AMF) yang ditangani secara transparan oleh server

dan klien flash.

Server juga memungkinkan pengguna untuk menerima dan

mempublikasikan net stream. Saat melihat net stream klien bisa membuatnya

sendiri untuk disimpan dalam format Flash Video (FLV) dan memutar videonya.

Adobe Flash Media Server

2.4 Protokol

Protokol adalah kesepakatan, yang spesifiknya di topik jaringan adalah

kesepakatan mengenai cara pertukaran data lewat jaringan. Supaya data bisa

ditransfer, antara pengirim dan penerima harus ada kesepakatan bagaimana

menginterpretasi impuls listrik yang dikirimkan di kabel/sinyal. Protokol mengatur

koneksi atau komunikasi data antar device berbeda

2.4.1 HTTP

Hypertext Transfer Protocol (HTTP) adalah sebuah protokol jaringan

lapisan aplikasi yang digunakan untuk sistem informasi terdistribusi, kolaboratif,

dan menggunakan hypermedia. Penggunaannya banyak pada pengambilan

sumber daya yang saling terhubung dengan tautan, yang disebut dengan

dokumen hiperteks, yang kemudian membentuk World Wide Web (WWW) pada

tahun 1990 oleh fisikawan Inggris, Tim Berners-Lee. Hingga kini, ada dua versi

mayor dari protokol HTTP, yakni HTTP/1.0 yang menggunakan koneksi

terpisah untuk setiap dokumen, dan HTTP/1.1 yang dapat menggunakan

koneksi yang sama untuk melakukan transaksi. Dengan demikian, HTTP/1.1

bisa lebih cepat karena memang tidak usah membuang waktu untuk

pembuatan koneksi berulang-ulang.

2.4.2 RTMP

Real time messaging protocol atau bisa disebut RTMP merupakan sebuah

protokol yang diciptakan oleh Macromedia (sekarang Adobe) yang biasa

digunakan proses streaming audio, video dan data di dunia internet, yang

digunakan antara flash player dan server.

4

Pada awalnya, RTMP merupakan sebuah protokol yang hanya bisa

digunakan dibawah keluarga Adobe system, protokol ini sudah bisa digunakan

untuk publik, sehingga bisa digunakan oleh pengembang yang lain.

Gambar 2.1 Proses pengiriman data dari protokol berbeda

3. Analisis (Proses Penelitian)

Analisis sistem merupakan proses untuk menemukan, memperbaiki, memodelkan

dan menspesifikasikan sebuah perangkat lunak yang akan dikembangkan.

3.1 Evaluasi Persyaratan

3.1.1 Persyaratan Fungsional

Persyaratan fungsional untuk perangkat lunak bisa dinyatakan dalam

sejumlah cara. Berikut persyaratan yang akan user temui nantinya ketika

menggunakan aplikasi chatting yang sedang dikembangkan ini:

1. Semua user harus melalui tahap login terlebih dahulu, untuk memberikan

identitas pada masing-masing pengguna.

2. Sistem akan menyediakan fasilitas streaming audio video, sehingga

pengguna dapat melalukan percakapan secara private kepada pengguna

lain. Percakapan ini pun dapat dilakukan jika ada persetujuan dari dua

pihak, jika tidak maka user hanya dapat menggunakan fasilitas group chat,

dimana semua pengguna dapat membaca pesan teks yang dikirim.

3. Tidak ada pembatasan untuk menggunakan aplikasi ini, setiap pengguna

dapat melakukan percakapan secara private ke lebih dari satu orang.

5

3.1.2 Persyaratan Non Fungsional

Persyaratan non-fungsional, persyaratan ini digunakan untuk

mendefinisikan batasan pada sistem seperti kemampuan piranti I/O dan

representati data yang dipakai pada interface sistem.

Klasifikasi persyaratan non-fungsional ada 3 yaitu :

1. Persyaratan Produk.

Spesifikasi produk yang ditetapkan dalam rancangan aplikasi ini adalah

aplikasi akan berfungsi sebagai aplikasi alternatif yang memberikan pilihan

kepada pengguna jika tidak ingin menggunakan aplikasi berbasis desktop,

sehingga memudahkan pengguna melakukan komunikasi dengan fitur

video call dari mana pun dan kapan pun.

Adapun persyaratan hardware yang ditetapkan dalam proses perancangan

aplikasi chatting berbasis web ini adalah tidak terlalu tinggi, karena

sebagian besar proses kerja sistem dilakukan oleh server.

2. Persyaratan Organisasi. Persyaratan yang berasal dari kebijakan dan

prosedur pada organisasi. Kebijakan yang dibuat adalah bahwa aplikasi ini

hanya bersifat alternatif, sehingga pengguna tidak perlu melakukan

registrasi ke sistem, pengguna boleh menggunakan fitur private chat

dengan siapapun yang dikehendakinya.

3. Persyaratan eksternal.

Nama user bersifat volatile, maksudnya identitas pengguna yang sudah

login tidak akan tersimpan secara permanen, ketika user melakukan logout

maka secara otomatis data berupa nama user akan dihapus.

Data history yang dilakukan pada saat chatting akan tetap tersimpan di

server secara utuh, untuk menghapusnya diperlukan langkah manual yang

hanya bisa dilakukan oleh admin.

3.2 Pemodelan

3.2.1 Use Case Diagram

Berfungsi untuk memodelkan aplikasi berorientasi obyek, karena Use

Case merupakan gambaran level tinggi dari apa yang akan sistem kerjakan,

tanpa peduli tentang bagaimana sistem akan melakukannya secara detil. Use

case juga menyediakan hasil yang dapat diukur ke pemakai atau sistem

eksternal.

Berikut gambar Use casse diagram dari aplikasi chatting.

6

Gambar 3.1 Use case diagram aplikasi chatting

Deskripsi dari gambar diatas :

User, dalam hal ini yang berfungsi sebagai actor harus melakukan proses

login terlebih dahulu. Tampilan login akan muncul ketika user mengakses

sebuah alamat situs yang telah ditentukan. Pada saat login, uses akan diminta

untuk memasukkan nama yang akan digunakan sebagai identitas atau

pengenal ketika akan saling bertukar data (pesan teks, video ataupun audio).

Proses validasi akan dilakukan ketika user akan login, hal ini dimaksudkan agar

tidak ada nama user yang bernilai “null” atau kosong. Jika tidak ada masalah

dengan proses validasi, maka dari tampilan login, user akan diarahkan menuju

tampilan utama aplikasi chatting.

Aplikasi ini sendiri memiliki spesialisasi untuk fitur chatting-nya, yang

pertama adalah group chat, dan yang kedua adalah private chat. Perbedaan

utama dari masing-masing fitur diatas adalah dari fungsi dan penggunaanya.

Dilihat dari fungsi, group chat bisa digunakan untuk berbagi informasi keseluruh

user yang sedang online, sangat cocok digunakan untuk broadcast message

atau text conference. Dari sisi penggunaanya, setiap user diperbolehkan

menggunakan fitur ini tanpa ada batasan apapun, dan tanpa memerlukan

kondisi tertentu. Berbeda dengan group chat, private chat disediakan untuk

memberikan layanan komunikasi data yang lebih bersifat pribadi, beserta

penambahan fitur video dan audio streaming. Untuk penggunaannya, user

harus melakukan request kepada user lain yang ingin diajak bertukar informasi

secara pribadi. Jika diterima, maka user akan dapat menggunakan fitur ini,

sedangkan jika ditolak user tidak dapat melakukan private chat, dan akan

kembali ke tampilan group chat.

7

Selain fungsi login, tentu saja fungsi logout juga harus ada. Logout

berfungsi untuk menonaktifkan user dari penggunaan aplikasi dan layanan yang

disediakan. Jika ingin menggunakannya kembali, user silahkan melakukan

proses login ulang seperti langkah yang telah dijelaskan sebelumnya.

3.2.2 Class Diagram

Setelah case-case ditentukan, langkah selanjutnya adalah menentukan

class-class yang ada pada sistem aplikasi chatting.

Gambar 3.2 Class Diagram aplikasi chatting

Dari gambar diatas dapat kita lihat bahwa hanya ada beberapa class

pada aplikasi chatting, yaitu class user, class koneksi, dan class stream. Class

user hanya memiliki atribut userId atau nama pengguna dengan panjang

karakter tidak lebih dari delapan.

Metode-metode yang ada pada class user adalah login, chatting, request

private call dan video call. Class koneksi dibutuhkan untuk membantu user agar

dapat menjalin komunikasi antar klien yang sama-sama mengakses protokol

yang sama.

Sedangkan pada Class stream, metode yang digunakan adalah

netsream(), berfungsi untuk mengirim data baik berupa audio maupun video

secara kontinyu kealamat klien yang dituju, dan metode sharedObject (),

dibutuhkan untuk proses pertukaran data antara klien.

3.2.3 Sequence Diagram

Sequence diagram ini dibuat untuk merepresentasikan aliran pesan

antara actor dan objek-objek yang ada. Dengan demikian akan terlihat dengan

jelas aliran pesan yang ada dalam sistem aplikasi chatting, seperti yang

tergambar dibawah ini.

8

Gambar 3.3 Sequence Diagram

4. Hasil Penelitian

4.1 Perancangan Sistem

4.1.1 Merancang Login Screen

Berfungsi untuk mendata nama pengguna, sehingga pengguna yang lain

dapat mengetahui nama siapa saja yang menggunakan aplikasi ini.

Gambar 4.1 Rancang model login screen

4.1.2 Merancang Main screen

Main screen atau dalam bahasa Indonesia yang berarti tampilan utama,

memiliki beberapa bagian penting untuk untuk melakukan proses chating. Ada

dua komponen utama yang biasa kita jumpai pada berbagai aplikasi chatting

yaitu chat area dan daftar pengguna.

9

Gambar 4.2 Rancang model Main Menu

4.1.3 Merancang Private Chat

Sesuai dengan namanya, layanan private chat disediakan guna

memberikan fasilitas kepada pengguna untuk melakukan komunikasi secara

pribadi (private) sehingga pengguna yang lain tidak dapat mendengar atau

membaca isi pesan yang dikirim.

Untuk dapat menggunakan fasilitas ini, nantinya pengguna hanya perlu

meminta persetujuan (melakukan request) ke pengguna yang lain, jika disetujui

maka private chat dapat dilakukan, sebaliknya jika di tolak (ignore) maka

pengguna hanya dapat memanfaatkan group chat yang telah disediakan pada

tampilan utama dari aplikasi ini.

Gambar 4.3 Rancang model private chat

10

4.2 Pembahasan

Dalam pengembangannya dibutuhkan sebuah aplikasi Adobe Flash CS3 dan

sebuah komponen komunikasi. Komponen ini nantinya berfungsi untuk membantu

proses pembuatan aplikasi sehingga lebih mudah dan cepat. Awal pembuatan

aplikasi dimulai dari halaman login. Untuk halaman login, penggunaan text tool dan

push button saja sudah cukup, tinggal menambahkan beberapa kalimat sebagai

kalimat sapaan. Langkah selanjutnya adalah pembuatan frame tampilan utama.

Penggunaan komponen komunikasi dapat dimulai dari sini.

Gambar 4.4 Komponen komunikasi

Komponen yang akan digunakan adalah chat, PeopleList dan UserColor.

Masing-masing memiliki fungsinya tersendiri.

Nama Komponen Keterangan

Chat Membuat antarmuka pesan berbasis teks untuk Flash

movie

PeopleList Menampilkan semua nama pengguna yang terhubung ke

Flash Media Server

UserColor Memungkinkan setiap pengguna untuk memilih warna

untuk mewakili identitasnya dalam komponen chat dan

komponen kursor

Kemudian, buat tampilan halaman utama seperti pada gambar dibawah ini

11

Gambar 4.5 Tampilan utama aplikasi chatting

Tiga komponen diatas, bisa dapat langsung digunakan dengan hanya

menambahkan beberapa baris skrip seperti dibawah ini.

chat.connect(client_nc)

peopleList.connect(client_nc)

mycolor.connect(client_nc)

Namun, terlebih dahulu sudah menempatkan file server script pada Flash Media

Server. Ini berfungsi untuk mendefinisikan semua komponen yang telah digunakan

dalam pembuatan aplikasi..

Gambar 4.6 File server yang telah diupload

Jika file server telah diupload, maka langkah selanjutnya adalah menempatkan

alamat tersebut pada klien server, sehingga bisa me-load file server script tadi.

client_nc.connect("rtmp://clkwp75f.rtmphost/chat ",

username.text);

12

Langkah selanjutnya adalah menambahkan event untuk melakukan request kepada

pengguna lain. Sebelum menambahkan action untuk mengatur proses request,

terlebih dahulu kita perlu menambahkan sedikit listing program pada “peopleList”

komponen, yang berguna memberikan aksi ketika nama pengguna di klik atau di

pilih. Berikut listing programnya.

this.setSize(this._width, this._height);

people_lb.setChangeHandler("myFunction");

function myFunction(comp){

_parent.invite(comp.getSelectedItem().label);

}

Jika listing diatas telah dimasukkan, maka langkah selanjutnya membuat fungsi

invite. Merupakan fungsi yang dibuat dengan menggunakan parameter

guestUsername. Logikanya, jika pengguna melakukan request lebih dari satu kali

terhadap pengguna yang sama, sedangkan request pertama belum ditanggapi,

maka pengguna tersebut akan diberi peringatan “You have pending request”. Jika

pengguna mencoba mengundang dirinya sendiri untuk melakukan private chat tentu

saja ini tidak diperbolehkan, oleh karena itu akan ditemui pesan bahwa Anda tidak

dapat mengundang diri Anda sendiri atau “You couldn't invite yourself”.

Berikut skrip yang telah dibuat guna melakukan event diatas.

function invite(guestUsername) {

if(thinking || invitation) {

trace(thinking+" or "+invitation._currentframe)

status.text = "You have pending requests !!"

return;

}

if (_global.username==guestUsername){

attachMovie("thinking", "thinking", 101, {_x:45,

_y:40, message:"You couldn't invite yourself !!"});

thinking.gotoAndPlay("Answer")

return;

}

for(i in inRoom) {

if(inRoom[i]==guestUsername){

avisa =

(!this["newRoom_"+guestUsername])?attachMovie("thinking",

"thinking", 101, {_x:45, _y:25, message:"This user didn't

close previous private chat"}) : attachMovie("thinking",

"thinking", 101, {_x:45, _y:25, message:"You're in a private

room with this user"});

thinking.gotoAndPlay("Answer")

return;

}

}

13

this.attachMovie("thinking", "thinking", 101, {_x:45,

_y:25});

client_nc.call("invite", null, _global.username,

guestUsername);

}

5. Kesimpulan

Berikut beberapa kesimpulan yang dapat penulis petik dan pelajari adalah:

1. Aplikasi yang telah dibuat hanya akan berfungsi jika kita telah memiliki Flash Media

Server sebagai server realtime messaging protocol. Tanpa adanya server ini

otomatis program tidak dapat dijalankan, karena dalam penggunaannya aplikasi

perlu melakukan koneksi ke server terlebih dahulu untuk mendefinisikan setiap

komponen dan skrip yang telah dibuat pada flash movie.

2. Web browser yang telah terinstal plugin Adobe flash player sangat diperlukan guna

dapat mengakses aplikasi ini. Karena file yang akan di load nantinya berformat .swf,

yang artinya hanya dapat dijalankan diatas Adobe flash player.

14

Daftar Pustaka

Unified Modelling Language (UML). (2008, 03 November Senin). Retrieved November 20,

2010, from www.iratyasningrum-uml.blogspot.com: http://iratyasningrum-

uml.blogspot.com/2008/11/unified-modeling-language.html

Crugnola, A. (n.d.). Basic Flash MX/MySQL chat. Retrieved Oktober 12, 2010, from

www.sephiroth.it: http://www.sephiroth.it/tutorials/flashPHP/flash_chat/index.php

Giacomo Guilizzoni, B. L. (February 2005). Flash Communication Server. United States

of America: O'Reilly.

Pamungkas, S. (2008, Desember 10). Chat tanpa internet. Retrieved Oktober 2, 2010,

from SisInfo Web Center: http://www.si-

mercubuana.comli.com/index.php?pilih=news&mod=yes&aksi=lihat&id=26

Sommerville, I. (2001). Software Engineering. In S. H.M. Wibi Hardani (Ed.), Rekayasa

Perangkat Lunak (M. Dra. Yuhilza Hanum, Trans., 6th ed.). Penerbit Erlangga.

Wikipedia. (n.d.). Adobe Flash Media Server. Retrieved Oktober 10, 2010, from

Wikipedia.org: http://en.wikipedia.org/wiki/Adobe_Flash_Media_Server