SKRIPSI
Disusun Oleh:
YANICA ENDRA LAKSMANA
NPM. 0634210309
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
SKRIPSI
Diajukan Untuk Memenuhi Sebagai Persyaratan Dalam Memperoleh Gelar Sarjana Komputer
Program Studi Teknik Informatika
Disusun Oleh :
YANICA ENDRA LAKSMANA
NPM. 0634210309
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN“
RED5
Disusun Oleh :
YANICA ENDRA LAKSMANA
NPM. 0634210309
Telah Disetujui Untuk Mengikuti Ujian Negara Lisan Gelombang IV Tahun Akademik 2011 / 2012
Mengetahui,
Ketua Program Studi Teknik Informatika Fakultas Teknologi Industri
Universitas Pambangunan Nasional ”Veteran” Jawa Timur
Basuki Rahmat, S.Si, MT Pembimbing Utama
Nur Cahyo Wibowo, S.Kom, M.Kom NPT. 379 030 401 97
Pembimbing Pendamping
Disusun Oleh :
YANICA ENDRA LAKSMANA NPM. 0634210309
Telah Dipertahankan di Hadapan dan Diterima Oleh Tim Penguji Skripsi Program Studi Teknik Informatika Fakultas Teknologi Industri
Universitas Pembangunan Nasional “Veteran” Jawa Timur Pada Tanggal 15 April 2011
Pembimbing, Tim Penguji,
1.
Nur Cahyo Wibowo, S.Kom, M.Kom NPT. 379 030 401 97
1.
Nur Cahyo Wibowo, S.Kom, M.Kom NPT. 379 030 401 97
2.
Achmad Junaidi, S.Kom NPT. 378 110 401 99
2.
Ir. Kemal Wijaya, MTP NIP. 19590925 198703 1001 3.
Ir. Kartini, MT
NIP. 19611110 199103 2001
Mengetahui,
Dekan Fakultas Teknologi Industri
Universitas Pembangunan Nasional “Veteran” Jawa Timur
KETERANGAN REVISI
Mahasiswa dibawah ini :
Nama : Yanica Endra Laksmana NPM : 0634210309
Jurusan : Teknik Informatika
Telah mengerjakan revisi / tidak ada revisi *) PRA RENCANA ( DESIGN ) / SKRIPSI / TUGAS AKHIR. Ujian Gelombang IV, TA. 2011 – 2012,dengan judul:
PERANCANGAN DAN PEMBUATAN PERANGKAT LUNAK SISTEM VIDEO KONFERENSI BERBASIS WEB MENGUNAKAN TEKNOLOGI
RED5
Surabaya, 15 April 2011 Dosen penguji yang memerintahkan Revisi :
1. Nur Cahyo W.,S.Kom,M.Kom NPT. 379 030 401 97
( _________________________ ) 2. Ir. Kemal Wijaya, MTP
NIP. 19590925 198703 1001
( _________________________ ) 3. Ir. Kartini, MT
NIP. 19611110 199103 2001
ABSTRAK
Kemajuan dunia teknologi informasi yang begitu cepat ditunjang dengan penemuan dan inovasi telah membawa banyak perubahan dalam kehidupan manusia. Salah satu penggunaan teknologi informasi yang gencar di gunakan saat ini adalah memaksimalkan teknologi informasi sebagai alat komunikasi. Dengan memanfaatkan teknologi informasi sebagai media komunikasi memungkinkan seseorang dapat berkomunikasi sambil melihat lawan bicaranya. Salah satu perangkat yang membantu hal tersebut adalah webcam dan sebuah microphone. Dengan bantuan webcam dan microphone percakapan jarak jauh atau video conference dapat seakan-akan di lakukan seperti percakapan tatap muka biasa. Selain menggunakan webcam dan microphone diperlukan sebuah media server yang menjebatani komunikasi antara client.
Pada implementasinya digunakan software Adobe Flex Framework yang merupakan teknologi baru dari Adobe menggunakan bahasa MXML dan Actionscript 3.0. Dan dengan teknologi RED5 sebagai flash media server, adalah teknologi Open Source yang dapat berperan sebagai sebuah flash media server yang dapat melakukan streaming audio maupun video, shared object, recoreded client streams.
Berdasarkan hasil evaluasi dan percobaan yang telah dilakukan didapatkan sistem video konferensi yang memanfaatkan Red5 sebagai Flash Media Server yang berfungsi sebagai aplikasi video konferensi berbasis web. Dan jenis koneksi yang digunakan oleh client hanya sedikit berpengaruh pada traffic dan konsumsi memori pada server.
Kata kunci : Video Conference, Adobe Flex Framework, RIA (Rich Internet
KATA PENGANTAR
Segala puji dan syukur semata ditujukan ke hadirat ALLAH SWT yang telah memberikan rahmat dan hidayah-Nya sehingga memungkinkan penulis untuk menyelesaikan Tugas Akhir yang berjudul :
“PERANCANGAN DAN PEMBUATAN PERANGKAT LUNAK SISTEM
VIDEO KONFERENSI BERBASIS WEB MENGUNAKAN TEKNOLOGI RED5”
Mata Kuliah Tugas Akhir yang memiliki beban sebesar 4 satuan kredit disusun dan diajukan sebagai salah satu syarat untuk menyelesaikan program strata satu (S-1) pada jurusan Teknik Informatika di Universitas Pembangunan
Nasional “Veteran” Jatim.
Dalam penyusunan Tugas Akhir ini, Penulis berusaha untuk menerapkan ilmu yang telah didapat selama menjalani perkuliahan dengan tidak terlepas dari petunjuk, bimbingan, bantuan, dan dukungan berbagai pihak.
Dengan tidak lupa akan kodratnya sebagai manusia, Penulis menyadari bahwa dalam karya Tugas Akhir ini masih mengandung kekurangan di sana-sini sehingga dengan segala kerendahan hati Penulis masih dan insya Allah akan tetap terus masih mengharapkan saran serta kritik yang membangun dari rekan-rekan pembaca.
Surabaya, April 2011
UCAPAN TERIMA KASIH
Dengan tak bosannya mengucapkan syukur Alhamdulillah kepada Allah SWT, yang telah memberi terlalu banyak dari yang layak penulis terima, telah penulis curi sekelumit misteri-Mu, dan penulis kembalikan dalam bentuk buku ini. Di kesempatan ini, Penulis hendak menyampaikan rasa penghormatan yang setingginya serta rasa terima kasih kepada pihak-pihak yang telah memberi bantuan baik itu berupa moril maupun material dan langsung maupun tidak langsung kepada:
1. Bapak Ir.Sutiyono, MT, selaku Dekan Fakultas Teknologi Industri, semoga FTI dapat terus maju dan berkembang.
2. Bapak Basuki Rahmat, S.Si, MT, selaku Ketua Jurusan semoga Teknik Informatika semakin maju dan berkembang di bawah kepemimpinan beliau. 3. Bapak Nur Cahyo Wibowo S.Kom, M.Kom, selaku dosen pembimbing
pertama yang telah memberikan ide bagi pengerjaan tugas akhir serta memberikan banyak bimbingan dan masukan bagi tugas akhir ini.
4. Bapak Achmad Junaidi S.Kom, selaku dosen pembimbing kedua yang telah memberikan ide bagi pengerjaan tugas akhir serta memberikan banyak bimbingan dan masukan bagi tugas akhir ini.
6. Keluarga Om Budya Sasmita (Waybe Group) , Tante Rita, dek Putri, dek Lala, dek Abid dan Tante Yeni sekeluarga terima kasih untuk dukungan, semangat serta motivasi yang telah diberikan.
7. Bapak I Gede Susrama, ST, M.Kom, selaku KaLab Bahasa Pemrograman. 8. Semua dosen jurusan Teknik Informatika yang telah membagikan ilmunya
selama penulis menjalani masa perkuliahan.
9. Seluruh staf dan karyawan jurusan Teknik Informatika yang selalu siap membantu penulis dalam hal administrasi perkuliahan.
10.Mas Ali (WaybeCyber.com), terima kasih atas masukannnya selama di Tangerang.
11.Teman – teman yang ga bosan-bosannya ingetin TA ku (Hajar, Tias, Mamik), Bayu (akhirnya kita lulus juga), F.A.N ( thanks for everything ♥ ).
12.DYING ON SATURDAY band Endy, Asonx, Bamz, David and Dyingfever 13.Teman-teman di ”UKM Musik Satya Palapa” Radima, Dea, BoeBoe, Ilham,
Budi, Ambon, Rifki, Tile, Bayu, Vigie, Martin, Irul, Black, Santos dan semuanya yang tidak bisa disebutkan satu persatu.
14.THREEDAY band, David, Danar, Apri, Dicky, Mbak Dina dan semua yang di Jajag.
16.Teman-teman UNESA Ntinx, Zainal,Ucup ,Dedis , Teddy ,Wonk, Kaka, Rio Cilik, Rio Gede,Mega, Elly, Epha.
17.Teman – teman mantan Asisten laboratorium bahasa pemrograman yang selalu memberikan semangat dan motivasi dalam mengerjakan tugas akhir ini. 18.Terima kasih untuk semuanya yang telah memberikan Do’a dan motivasi
hingga terselesaikannya tugas akhir ini.
19.Teman-teman lain yang tidak dapat penulis sebutkan satu persatu dalam halaman ini.
DAFTAR ISI
ABSTRAK ... i
KATA PENGANTAR ... ii
UCAPAN TERIMA KASIH ... iii
DAFTAR ISI ... vi 2.1.1 Pengenalan Adobe Flex... 7
2.1.2 Sejarah Adobe Flex ... 8
2.1.3 Adobe Flex Framework... 9
2.1.4 Kelebihan Adobe Flex Framework ... 14
2.1.5 Rich Internet Applications (RIAs) ... 15
2.1.6 Adobe Flex Builder ... 16
2.1.7 Flash ... 17
Action Script 3 ... 18
2.2 2.2.1 Class and Object ... 19
2.2.2 Paket dan Namespace ... 20
PHP ... 22
2.3 2.3.1 Sejarah PHP ... 22
Protokol RTMP(Real Time Messaging Protocol) ... 23
2.4 2.4.1 Spesifikasi Protokol RTMP ... 25
Action Message Format(AMF) ... 25
2.5 Extensible Markup Language(XML) ... 26
2.6 Action Script ... 27
2.7 Red5 ... 28
2.8 2.8.1 Struktur Direktori Red5... 29
2.8.2 Berkas-berkas konfigurasi ... 30
2.8.3 Komunikasi Red5 ... 31
Perangkat Multimedia... 32 3.4.1 Desain Form Login ... 37
3.4.2 Form Register ... 38
3.4.3 Tampilan Utama ... 39
Desain Uji Performa ... 40
3.5 3.5.1 Uji Performa Traffic In, Out dan Memory Usage Client yang tehubung tanpa melakukan Video Conference dalam Koneksi Kabel dan Nirkabel ... 40
3.5.2 Uji Performa Memory Usage dan CPU Usage Client yang Terhubung dan Melakukan Video Conference ... 40
BAB IV ... 41
IMPLEMENTASI PERANGKAT LUNAK ... 41
Alat yang digunakan ... 41
4.1 4.1.1 Perangkat Lunak... 41
4.1.2 Perangkat Keras ... 42
4.2.1 Operasi Login dan Authentifikasi Login ... 43
4.2.2 Operasi Register ... 45
4.2.3 Operasi Membuat Koneksi ke Server dan Handlernya ... 46
4.2.4 Operasi Set client ID, Set client identifier dan Manajemen client .. 48
4.2.5 Operasi Inisialisasi SharedObject dan Userlist Synchronization pada Client Manajemen... 50
4.2.6 Operasi GetCamera, Microphone dan Stream video ... 52
4.2.7 Operasi Display dan Attachment User Stream... 53
4.2.8 Operasi Logout ... 54
Implementasi Apliklasi Desain Antarmuka ... 54
4.3 4.3.1 Form Login ... 55
4.3.2 Form Register ... 55
4.3.3 Form Video Konferensi... 56
BAB V ... 57
UJI COBA DAN ANALISA HASIL ... 57
Lingkungan Uji Coba ... 57
5.1 Uji Coba Sistem ... 58
5.2 5.2.1 Halaman Login ... 58
5.2.2 Halaman Registrasi ... 59
5.2.3 Halaman Utama ... 61
5.2.4 Percobaan 1 Melakukan Video Konferensi dengan 2 User ... 62
5.2.5 Percobaan 2 Melakukan Video Konferensi dengan 3 User ... 63
5.2.6 Percobaan 3 Melakukan Video Konferensi dengan 4 User ... 64
Uji Performa ... 65
5.3 5.3.1 Skenario... 66
5.3.2 Lingkungan Uji Coba ... 67
5.3.3 Pelaksanaan ... 68
BAB VI ... 75
KESIMPULAN DAN SARAN ... 75
Kesimpulan ... 75
6.1 Saran ... 75
DAFTAR GAMBAR
Gambar 2. 1 Logo Adobe Flex ... 7
Gambar 2. 2 Contoh Bahasa MXML ... 8
Gambar 2. 3 Alur Kerja Adobe Flex ... 16
Gambar 2. 4 Tampilan Adobe Flash Builder 4.0 ... 17
Gambar 2. 5 Contoh Koneksi RTMP ... 24
Gambar 2. 6 Contoh not well formed ... 27
Gambar 2. 7 Contoh well formed XML ... 27
Gambar 2. 8 Contoh Action Script 3.0 ... 28
Gambar 2. 9 Struktur Direktori Red5 ... 29
Gambar 3. 1 Arsitektur Sistem Video Conference ... 35
Gambar 3. 2 Arsitektur Sistem Red5 ... 36
Gambar 3. 3 Flowchart Sistem Video Conference... 37
Gambar 3. 4 Form Login ... 37
Gambar 3. 5 Form Register ... 38
Gambar 3. 6 Tampilan Utama Aplikasi ... 39
Gambar 4. 1 Operasi Validasi Login ... 43
Gambar 4. 2 Operasi Login Handler ... 44
Gambar 4. 3 Flowchart Operasi Login ... 44
Gambar 4. 4 Operasi Authentifikasi Login di Server ... 45
Gambar 4. 5 Operasi Register ... 46
Gambar 4. 6 Flowchart Operasi Register ... 46
Gambar 4. 7 Operasi untuk Membuka Koneksi ke Server... 47
Gambar 4. 8 Operasi Handler untuk Koneksi ke Server ... 48
Gambar 4. 9 Flowchart Koneksi ke Server ... 48
Gambar 4. 10 Flowchart Operasi SetClientID ... 49
Gambar 4. 11 Operasi Client Manajemen di Server ... 49
Gambar 4. 12 Operasi GetUserList di Server ... 50
Gambar 4. 13 Operasi SetClientID ... 50
Gambar 4. 16 Operasi Sinkronisasi ClientList ... 51
Gambar 4. 17 Flowchart Sinkronisasi ClientList ... 52
Gambar 4. 18 Operasi Get Camera, Get Microphone dan Stream Video ... 53
Gambar 4. 19 Operasi Display dan Attachment Client Stream ... 54
Gambar 4. 20 Operasi Logout ... 54
Gambar 4. 21 Form Login ... 55
Gambar 4. 22 Form Registrasi ... 55
Gambar 4. 23 Form Utama Video Konferensi ... 56
Gambar 5. 1 Server Linux Ubuntu 10.04 (Server RED5) ... 57
Gambar 5. 2 Halaman Login ... 58
Gambar 5. 3 Error Username atau Password Kosong ... 59
Gambar 5. 4 Error Username atau Password Salah ... 59
Gambar 5. 5 Form Halaman Registrasi ... 60
Gambar 5. 6 Registrasi Error Username atau Password Kosong ... 60
Gambar 5. 7 Registrasi Error Pasword1 dan Password2 Tidak Sama ... 60
Gambar 5. 8 Registrasi Error Username Sudah Ada... 61
Gambar 5. 9 Tampilan Halaman Utama ... 61
Gambar 5. 10 Request Webcam ... 62
Gambar 5. 11 Video Konferensi dengan 2 User Online ... 62
Gambar 5. 12 Video Konverensi dengan 3 User Online ... 63
Gambar 5. 13 Video Konferensi dengan 4 User Online ... 64
Gambar 5. 14 Aplikasi iftop ... 65
Gambar 5. 15 Aplikasi top ... 66
Gambar 5. 16 Grafik Traffic In, Out dan Memory Usage pada Jaringan Kabel ... 69
Gambar 5. 17 Grafik Traffic In, Out dan Memory Usage pada Jaringan Nirkabel 69 Gambar 5. 18 Grafik CPU Usage dan Memory Usage untuk 2 Peserta Konferensi ... 71
DAFTAR TABEL
Tabel 5. 1 Data Traffic dari Satu Client jika Menggunakan Jaringan Nirkabel dan Kabel ... 68 Tabel 5. 2 Tabel Rata-rata Traffic In, Out dan Memory Usage jika Client
Menggunakan Jaringan Kabel ... 70 Tabel 5. 3 Tabel Rata-rata Traffic In, Out dan Memory Usage jika Client
menggunakan Jaringan Nirkabel ... 70 Tabel 5. 4 Tabel CPU Usage dan Memory Usage untuk 2 Peserta Conference ... 71 Tabel 5. 5 Tabel CPU Usage dan Memory Usage untuk 3 Peserta Conference ... 71 Tabel 5. 6 Tabel CPU Usage dan Memory Usage untuk 4 Peserta Conference ... 72 Tabel 5. 7 Tabel Rata-rata CPU Usage dan Memory Usage untuk 2 Peserta
Conference ... 73
Tabel 5. 8 Tabel Rata-rata CPU Usage dan Memory Usage untuk 3 Peserta
Conference ... 73
Tabel 5. 9 Tabel Rata-rata CPU Usage dan Memory Usage untuk 4 Peserta
BAB I
PENDAHULUAN
Latar Belakang 1.1
Kemajuan dunia teknologi informasi yang begitu cepat ditunjang dengan penemuan dan inovasi telah membawa banyak perubahan dalam kehidupan manusia. Semakin banyak hal dan aspek dalam kehidupan yang menggunakan IT untuk menjalankan roda aktivitasnya. Salah satu penggunaan teknologi informasi yang gencar digunakan saat ini adalah memaksimalkan teknologi informasi sebagai alat komunikasi. Dengan memanfaatkan teknologi informasi sebagai media komunikasi memungkinkan seseorang dapat berkomunikasi sambil melihat lawan bicaranya. Salah satu perangkat yang membantu hal tersebut adalah webcam, speaker dan sebuah microphone. Dengan bantuan alat bantu tersebut percakapan jarak jauh dapat seakan-akan di lakukan seperti percakapan tatap muka biasa.
Dengan kemampuan dasarnya tersebut, Red5 dapat memfasilitasi sebuah aplikasi yang ditulis dengan bahasa pemrograman java yang berinteraksi dengan Action Script di sisi client yang nantinya mampu memberi solusi kendala yang di sebutkan di atas.
Rumusan Masalah 1.2
Permasalahan yang diangkat dalam tugas akhir ini adalah:
a. Bagaimana memanfaatkan teknologi yang sudah disediakan Red5 untuk dikembangkan menjadi sebuah sistem video conference?
b. Bagaimana tipe koneksi yang digunakan oleh client mempengaruhi performa dari jalannya sistem yang dibangun?
c. Bagaimana pengaruh dari sistem yang sedang berjalan terhadap penggunaan sumber daya di sisi server?
Batasan Masalah 1.3
Asumsi dan ruang lingkup permasalahan yang dibahas dalam Tugas Akhir ini adalah:
a. Memanfaatkan Teknologi Red5 sebagai flash media server yang terinstall di sistem operasi Linux Ubuntu Server 10.04.
c. System requirements untuk client adalah sebuah komputer yang terhubung dengan webcam, microphone dan speaker, juga dibutuhkan sebuah aplikasi web browser yang mendukung flash player.
Tujuan 1.4
Tujuan dari pembuatan tugas akhir ini adalah memanfaatkan teknologi Red5 untuk mengembangkan sebuah sistem video conference yang berbasis web. Dengan hadirnya ini, diharapkan akan membantu client ketika menginginkan percakapan atau komunikasi antara 2 atau lebih pihak lain.
Manfaat 1.5
Adapun manfaat yang dapat di ambil dari aplikasi yang dibangun pada tugas akhir ini adalah memberikan sumbangsih pemikiran dan aplikasi bagi masyarakat, khususnya yang sering memanfaatkan dan melakukan video conference.
Metodologi 1.6
Metodologi yang digunakan untuk menyelesaikan tugas akhir ini adalah sebagai berikut :
a. Studi Kepustakaan
b. Desain sistem
Tahap ini meliputi perancangan sistem dengan menggunakan studi literatur dan mempelajari konsep teknologi dari software yang ada. Tahap ini merupakan tahap
yang paling penting dimana bentuk awal aplikasi yang akan diimplementasikan didefinisikan. Pada tahapan ini dilakukan desain sistem, desain proses-proses yang ada.
c. Implementasi
Pada tahap ini dilakukan implementasi rancangan system yang telah dibuat. Tahapan ini merealisasikan apa yang terdapat pada tahapan sebelumnya menjadi sebuah aplikasi yang sesuai dengan apa yang direncanakan.
d. Uji Coba dan Evaluasi
Pada tahap ini, dilakukan uji coba terhadap aplikasi dan pengukuran kinerja dengan beberapa data yang melibatkan beberapa client untuk kemudian dilakukan perbaikan apabila terdapat kesalahan sehingga dapat dilakukan evaluasi terhadap hasil uji coba tersebut.
e. Penyusunan Laporan
Tahap ini dilakukan untuk membuat laporan dari semua dasar teori dan metode yang digunakan serta hasil-hasil yang diperoleh selama pengerjaan tugas akhir.
Sistematika Pembahasan 1.7
BAB II
TINJAUAN PUSTAKA
Adobe Flex 2.1
Adobe Flex adalah sebuah platform pengembang aplikasi yang dapat digunakan untuk membangun dan memelihara aplikasi web ekspresif yang menyebar secara konsisten di semua browser utama, desktop, dan sistem operasi. Flex adalah aplikasi berbasis web namun aplikasi ini memberikan tingkat interaktivitas yang mendalam dengan media yang kaya pengalaman yang membuat tampilan lebih seperti program desktop komputer daripada aplikasi web tradisional. Flex merupakan free open source framework yang sangat produktif dengan teknologi yang ideal untuk digunakan ketika ingin membuat visualisasi data yang kompleks, kerangka kinerja, pengalaman multimedia, dan banyak aplikasi lainnya interaktif. Bahasa berbasis standar dan model pemrograman yang mendukung pola desain umum. MXML, sebuah bahasa berbasis XML-deklaratif yang digunakan untuk menggambarkan tata letak UI (User Interface) dan perilaku. ActionScript merupakan sebuah bahasa pemrograman berorientasi objek yang kuat, digunakan untuk membuat logika klien.
Gambar 2. 1 Logo Adobe Flex
2.1.1 Pengenalan Adobe Flex
Adobe Flex sendiri digunakan untuk membuat sebuah aplikasi RIAs yang mampu berjalan di browser dengan atau pun berjalan sebagai aplikasi desktop. Jadi dengan sekali membuat aplikasi ini bisa menyajikan untuk orang yang terbiasa menggunakan aplikasi berbasis web dan untuk orang yang terbiasa menggunakan aplikasi desktop.
Adobe Flex mempermudah pembuatan aplikasi yang membutuhkan interaktifitas tinggi. Ini karena Adobe Flex mendukung pemrosesan data, event arsitektur yang baik, mempunyai beberapa komponen yang bisa memberikan
feedback kepada client. Dan layaknya flash, Adobe Flex juga mempermudah
dalam pembuatan transisi dan beberapa efek yang memukau.
Saat pengembangan maupun aplikasinya, Adobe Flex bisa mempercepat waktu pengembangan dan aplikasi yang di buat Adobe Flex ini tidak akan terlalu besar dan menghabiskan banyak memori karena Adobe Flex menggunakan Action
Script 3.0 bahasa pemrograman flash terbaru. Dengan AS3 ini aplikasi jadi lebih
Selain itu untuk pemrosesan data karena Adobe Flex menggunakan flash
player, maka transmisi data tidak akan banyak hilang atau terhambat dijalan dan
hasil informasi yang akan didapat oleh client akan lebih cepat. Adobe Flex secara terintegrasi telah bisa berkomunikasi dengan XML dan java object. Adobe Flex juga bisa langsung berkomunikasi dengan ColdFusion. AMFPHP merupakan jembatan antara PHP dan Adobe Flex yang bisaa dijadikan alternatif untuk komunikasi data. Pada Gambar 2.2 adalah contoh bahasa MXML yang digunakan:
Gambar 2. 2 Contoh Bahasa MXML
2.1.2 Sejarah Adobe Flex
lagi memerlukan izin untuk Flex Data Services, yang telah menjadi produk terpisah berganti merek sebagai LiveCycle Data Services.
Pada bulan Februari 2008, merilis Adobe Flex 3 SDK open source di bawah Mozilla Public License. Adobe Flash Player, runtime yang aplikasi Flex dilihat, dan Adobe Flex Builder, IDE dibangun di atas platform open source Eclipse dan digunakan untuk membangun aplikasi Flex, tetap berpemilik.
Pada tanggal 26 April 2007 Adobe mengumumkan niat untuk melepaskan Flex 3 SDK (tak termasuk IDE Flex Builder dan LiveCycle Data Services) di bawah syarat-syarat Mozilla Public License. Adobe merilis versi beta pertama dari Flex 3, nama kode Moxie, pada bulan Juni 2007. Tambahan utama termasuk integrasi dengan versi baru dari Adobe Creative Suite produk, dukungan untuk AIR (Adobe aplikasi desktop baru runtime). Tambahan yang lain sebagai pendukung adalah ekstensi Cold Fusion dan penambahan profil dan refactoring alat untuk IDE Flex Builder.
a. Pada bulan Oktober 2007, Adobe merilis versi beta kedua dari Flex 3. b. Pada tanggal 12 Desember 2007, Adobe merilis versi beta ketiga dari Flex c. Pada tanggal 25 Februari 2008, Adobe Flex 3 dirilis dan Adobe AIR 1.0. d. Pada tanggal 2 Juni 2010, Adobe Flex 4 dirilis.
2.1.3 Adobe Flex Framework
kontainer, dan manajer dirancang untuk memudahkan membangun Rich Internet Applications (RIAs). Library Class Flex ini terdiri dari kategori berikut:
a. Form kontrol
Form kontrol adalah kontrol standar seperti tombol, input teks, teks daerah, daftar, tombol radio, checkbox, dan combobox. Selain bentuk standar kontrol asing bagi pengembang HTML, pustaka kelas Flex juga mencakup kontrol seperti rich-text editor, pemilih warna, date selector, dan banyak lagi.
b. Menu kontrol
Flex menyediakan satu set menu kontrol seperti pop-up menu dan menu bar.
c. Komponen Media
Salah satu keunggulan dari aplikasi Flex adalah dukungan yang kaya media. Pustaka kelas Flex menyediakan seperangkat komponen untuk bekerja dengan media seperti gambar, audio, dan video.
d. Layout kontainer
absolut atau relatif koordinat sehingga dapat menyesuaikan dengan benar ke dimensi yang berbeda dalam Flash Player.
e. Data komponen dan data yang mengikat
Aplikasi Flex adalah aplikasi yang didistribusikan secara umum menjadikan prosedur remote panggilan ke layanan data yang berada di server. Komponen data terdiri dari konektor yang menyederhanakan prosedur panggilan, data model untuk menyimpan data yang akan dikembalikan, dan data fungsi mengikat secara otomatis data DNS bentuk asosiasi dengan model data.
f. Format dan validator
Data yang dikembalikan dari prosedur remote panggilan sering harus diformat sebelum mendapatkan ditampilkan kepada pengguna. Perpustakaan kelas Flex meliputi seperangkat fitur kuat dari format (format tanggal di berbagai representasi string, format nomor dengan presisi tertentu, format angka sebagai string nomor telepon, dll) untuk menyelesaikan tugas itu. Demikian juga, bila mengirim data ke layanan data dari input pengguna, perlu untuk dilakukan validasi data terlebih dahulu untuk memastikan sudah dalam bentuk yang benar.
g. Kursor manajemen
jaringan dan latensi, penting untuk memberitahu pengguna ketika klien sedang menunggu di respon dari layanan data. Manajemen kursor Flex memungkinkan aplikasi untuk mengubah tampilan kursor untuk memberitahu pengguna perubahan tersebut.
h. State manajemen
Sebuah aplikasi Flex akan sering memerlukan perubahan banyak tempat. Sebagai contoh, operasi standar seperti mendaftar untuk account baru atau melakukan pembelian biasanya membutuhkan beberapa layar. library class Flex menyediakan kelas untuk mengelola perubahan itu dalam state. Manajemen tempat bekerja tidak hanya di tingkat makro untuk perubahan layar, tetapi juga di tingkat mikro untuk perubahan negara dalam komponen individu. Misalnya, komponen tampilan produk bisa beberapa negara: keadaan dasar hanya menampilkan gambar dan nama, dan rincian negara yang menambahkan deskripsi, harga, dan ketersediaan pengiriman. Selain itu, Flex menyediakan kemampuan untuk dengan mudah menerapkan transisi sehingga perubahan state animasi. i. Efek
Aplikasi Flex tidak dibatasi oleh kendala aplikasi web tradisional. Sejak aplikasi Flex dijalankan dalam Flash Player, mereka bisa memanfaatkan fitur animasi Flash. Dengan demikian, perpustakaan kelas Flex memungkinkan beragam efek seperti memudar, membesarkan, mengaburkan, dan bersinar.
Sebagai tempat perubahan di dalam aplikasi Flex, fitur manajemen sejarah pustaka kelas Flex dimungkinkan untuk menavigasi dari negara bagian ke negara menggunakan bagian belakang dan tombol maju dari browser web.
k. Drag and drop manajemen
Pustaka kelas Flex menyederhanakan menambahkan fungsionalitas drag and drop untuk komponen dengan dibuat dalam satu bentuk, drag and drop pada komponen fungsionalitas pilih dan kelas manajer yang dimungkinkan dengan cepat menambahkan drag and drop pada komponen perilaku.
l. Alat tips
Gunakan fitur ini pustaka kelas Flex tips untuk menambah alat untuk unsur-unsur sebagai pengguna menggerakkan mouse ke atas. Alat tips berguna sebagai petunjuk maupun saran dalam menggunakan aplikasi tersebut.
m. Gaya manajemen
2.1.4 Kelebihan Adobe Flex Framework
Hal lain yang menarik terkait dengan pengembangan aplikasi Flex adalah: a. Kemudahan dalam melakukan layouting aplikasi dengan fitur drag and
drop komponen tersedianya panel properties dan event untuk masing-masing komponen, serta pengaturan posisi komponen dan tampilan aplikasi secara keseluruhan melalui fitur constraint.
b. Kemudahan koneksi ke sumber data dengan adanya fungsi terintegrasi untuk menyediakan RPC Service.
c. Konsep multilayer / page pada presentasi dengan menggunakann View States.
d. Kemudahan dalam membuat animasi transisi dan effect pada tiap-tiap komponen dan layer yang digunakan dalam pengembangan aplikasi yang lebih baik.
e. Compiler dan debugger yang terintegrasi dengan beberapa opsi pilihan output.
f. Cross platform yang dimiliki aplikasi web yang dapat benar-benar berubah menjadi aplikasi desktop.
g. Flex adalah teknologi masa depan dengan menunjukkan organisasi yang kompleks dan modern.
h. Flex bekerja pada semua platform utama dan pengguna tidak perlu menginstal apapun.
2.1.5 Rich Internet Applications (RIAs)
Istilah Rich Internet Application (RIA) diciptakan Macromedia dan ditulis pada tahun 2002 untuk menggambarkan model baru dalam pengembangan aplikasi yang memisahkan back-end layanan data dari klien front-end kaya. RIA adalah aplikasi berbasis web yang dirancang untuk menyediakan fungsionalitas yang hampir sama dengan aplikasi desktop. Satu dari pilar pembangunan RIA adalah kemampuan untuk asynchronously (proses yang beroperasi secara independen dari proses lainnya) beban data di dalam aplikasi. Wikipedia HTML halaman Web membutuhkan satu halaman penuh refresh untuk memuat data baru. RIAs, di sisi lain beban data asynchronous, yang berarti mereka dapat memuat potongan data tanpa harus me-refresh halaman dan mereka melacak negara aplikasi dalam memori.
Gambar 2. 3 Alur Kerja Adobe Flex
2.1.6 Adobe Flex Builder
Adobe Flex Builder adalah IDE (editor) yang dulunya bernama Adobe Flex Builder yang digunakan untuk membangun aplikasi Flex (Rich Internet
Application) yang berbasis Flash platform secara visual dengan menggunakan
MXML dan Action Script.
Adobe Flex Builder dapat digunakan untuk membuat aplikasi baik aplikasi berbasis web atau aplikasi yang berbasis desktop dengan memadukan kemampuan yang telah dikembangkan sebelumnya.
Adobe Flex Builder secara sederhana merupakan sebuah framework yang dapat digunakan untuk membuat RIA (Rich Internet Application) yang berbasis
Flash Player. Selain merupakan sebuah framework, Flex juga merupakan bahasa
baru yang dapat disebut dengan istilah MXML, Markup Language based on
Extensible Markup Language (XML). Layaknya XML, Flex yang merupakan
dasarnya menggunakan script XML dan Javascript. Gambar 2.4 adalah gambar tampilan dari Adobe Flex Builder.
Gambar 2. 4 Tampilan Adobe Flash Builder 4.0
2.1.7 Flash
Adobe flash (dahulu bernama Macromedia Flash) adalah platform multimedia yang awalnya dibeli oleh Macromedia dan saat ini dikembangkan dan didistribusikan oleh Adobe System. Sejak diperkenalkan pada tahun 1996, Flash telah menjadi metode popular untuk menambahkan animasi dan interaktifitas pada halaman web. Flash umum digunakan untuk membuat animasi iklan dan berbagai komponen halaman web yang mengintegrasikan video ke dalam halaman web.
Flash dapat memanipulasi vector dan raster grafis dan mendukung
yang disebut Action Script. Beberapa produk perangkat lunak, membuat atau menampilkan konten Flash, termasuk Adobe Flash Player, yang paling umum tersebut untuk web browser,beberapa ponsel dan perangkat elektronik lainnya (menggunakan Flash Lite). Adobe Flash Profesional digunakan untuk menciptakan konten untuk Adobe Engagement Platform, seperti aplikasi web, game dan film, dan konten untuk ponsel dan perangkat embedded lainya.
File flash memiliki format SWF, bisaanya disebut “Shockwave Flash”
movies, “Flash Film” atau “Flash Games” dan memiliki ekstensi .swf. flash
“diputar” dengan menggunakan standalone Flash Player atay dimasukkan ke
dalam sebuah Projector.
Dalam pengerjaan tugas akhir ini, digunakan Adobe Flex Builder atau sekarang disebut Adobe Flash Builder untuk menghasilkan sebuah berkas flash yang dikombinasikan dengan sebuah website dan nantinya mampu berjalan sebagai client dari sistem yang dikembangkan.
Action Script 3 2.2
ActionScript adalah bahasa pemrograman untuk Adobe ® Flash ® Player dan Adobe ® AIR ™ lingkungan run-time. Itu memungkinkan interaktivitas, penanganan data, dan banyak lagi di Flash, Flex, AIR dan konten dan aplikasi. ActionScript dijalankan oleh ActionScript Virtual Machine (AVM), yang merupakan bagian dari Flash Player dan AIR. ActionScript kode biasanya dikompilasi ke dalam format bytecode (semacam bahasa pemrograman yang tertulis dan dipahami oleh komputer) oleh kompilator, seperti yang dibangun ke
yang tersedia dalam Adobe ® Flex ™ SDK dan Flex Data Services ™. Bytecode ini tertanam dalam file SWF, yang dijalankan oleh Flash Player dan AIR. ActionScript 3,0 menawarkan model pemrograman kuat yang akan menjadi familiar bagi pengembang dengan pengetahuan dasar tentang pemrograman berorientasi obyek.
2.2.1 Class and Object
Dalam ActionScript 3.0, setiap objek didefinisikan oleh kelas. Kelas A dapat dianggap sebagai template atau cetak biru untuk mengetik objek. Definisi Kelas dapat mencakup variabel dan konstanta, yang memegang nilai-nilai data, dan metode, yang fungsi yang merangkum perilaku terikat kelas. Nilai-nilai yang disimpan dalam sifat dapat nilai primitif atau benda lainnya. nilai primitif adalah angka, string, atau nilai Boolean. ActionScript berisi sejumlah built-in kelas yang merupakan bagian dari bahasa inti. Beberapa dari built-in kelas, seperti Nomor, Boolean dan String, mewakili nilai-nilai primitif tersedia dalam ActionScript.Lainnya, seperti Array, Matematika, dan kelas XML, mendefinisikan objek yang lebih kompleks yang merupakan bagian dari standar ECMA-Script. Semua kelas, baik built-in atau user-defined, berasal dari kelas Objek. Untuk programmer Actionscript sebelumnya penting untuk dicatat bahwa tipe data obyek tidak lagi berupa default tipe data, meskipun semua kelas - kelas lain masih berasal darinya. Dalam ActionScript 2.0, dua baris kode berikut adalah setara karena kekurangan dari penjelasan jenis berarti bahwa variabel akan tipe Obyek:
ActionScript 3.0, bagaimanapun, memperkenalkan konsep variabel untyped, yang dapat ditunjuk dalam dua berikut cara:
var someObj: *;
var someObj;
Variabel untyped tidak sama sebagai variabel someobject. Perbedaan utama adalah bahwa variabel dapat untyped terus nilai khusus terdefinisi, sedangkan tipe variabel Obyek tidak bisa menahan nilai tersebut. Dapat didefinisikan sendiri dengan menggunakan kata kunci class. Pada pendeklarasian properti kelas dalam terdapat tiga macam cara: konstanta dapat didefinisikan dengan kata kunci const, variabel didefinisikan dengan kata kunci var, dan pengambil dan penyetel property didefinisikan dengan menggunakan get dan set atribut dalam sebuah deklarasi metode. Metode tersebut juga dapat dideklarasikan dengan fungsi kata kunci.
2.2.2 Paket dan Namespace
2.2.3 Variabel dan Konstanta
Sejak pemrograman terutama melibatkan perubahan potongan informasi dalam memori komputer, perlu ada suatu cara untuk mewakili potongan informasi dalam program. Variabel adalah nama yang mewakili nilai dalam memori komputer. Ketika menulis laporan untuk memanipulasi nilai, nama variabel ditulis di tempat nilai, dan komputer setiap saat akan melihat nama variabel dalam program serta menggunakan nilai yang ditemukan sana. Dalam ActionScript 3.0, variabel terdiri dari atas tiga bagian yang berbeda yaitu:
a. Nama variabel
b. Jenis data yang dapat disimpan dalam variabel. c. Nilai aktual disimpan dalam memori computer
2.2.4 Tipe Data
Dalam ActionScript, terdapat banyak jenis data yang dapat digunakan sebagai tipe data dari variabel-variabel yang dibuat. Beberapa dapat dianggap sebagai "sederhana" atau "fundamental" tipe data:
a. String : nilai tekstual, seperti nama atau teks dari bab buku
b. Numeric : ActionScript 3,0 mencakup tiga jenis data khusus untuk data numerik.
c. Number : setiap nilai numerik, termasuk nilai-nilai dengan atau tanpa fraksi.
d. Int : integer (bilangan bulat tanpa pecahan).
f. Boolean : nilai benar atau salah, seperti apakah saklar adalah pada atau apakah dua nilai yang sama.
Sebagian besar built-in tipe data, serta jenis data yang didefinisikan oleh programmer, adalah jenis data yang kompleks. Beberapa jenis data yang kompleks yang mungkin dikenal adalah:
a. MovieClip : simbol klip video.
b. TextField : dinamis atau bidang input teks. c. SimpleButton : lambang tombol.
d. Date : informasi tentang satu saat dalam waktu (tanggal dan waktu).
PHP 2.3
PHP adalah bahasa pemrograman script yang paling banyak dipakai saat ini. PHP banyak dipakai untuk memrogram situs web dinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian lain. Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs Personal).
2.3.1 Sejarah PHP
Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.
Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP dirubah menjadi akronim berulang PHP: Hypertext Preprocessing.
Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek.
Protokol RTMP(Real Time Messaging Protocol) 2.4
data yang bisa berupa AMF (ActionScript Message Format) atau audio / video seperti Flash Video (FLV).
Sebuah single connection menggunakan protocol RTMP mampu melakukan banyak multiplexing net stream menggunakan saluran atau channel yang berbeda. Yang di dalam client tersebut paket-paket yang dikirim dipecah menjadi beberapa
chunk yang memiliki ukuran yang sama.
Ada beberapa perkembangan dari protocol RTMP sendiri yaitu : RTMP (protokok RTMP standart, default port 1935)
RTMPT(tunneling via http,port 80) RTMPS(RTMP port 443 via https)
RMTPT pada dasarnya adalah HTTP wrapper pada protocol RTMP yang dikirim menggunakan permintaan POST dari clinet ke server. Karena sifat non-persistent dari koneksi HTTP, sehingga RTMP membutuhkan client untuk mengecek secara berkala untuk mendapatkan dapat mengetahui event yang terjadi pada server atau pada client lain. Sedangkan RTMPS adalah RTMP yang menggunakan SSL protocol sehingga data yang di kirim lebih aman karena terenkripsi. Pada Gambar 2.5 diberikan contoh koneksi menggunakan protocol RTMP.
private var connection:NetConnection;
public function onCreationComplete(event:FlexEvent) : void {
connection = new NetConnection();
connection.connect("rtmp://192.168.56.101/red5vchat"); connection.addEventListener(NetStatusEvent.NET_STATUS,o nConnectionNetStatus);
connection.client = this;
}
2.4.1 Spesifikasi Protokol RTMP
RTMP chunk stream merupakan sebuah protocol pada application level yang didesain intuk menyediakan multiplexing dan packetizingpada paket
multimedia streaming.
RTMP chunk stream bertugas menangani setiap protocol yang mengirimkan pesan streaming. Setiap pesan nantinya akan berisi timestamp dari pesan tersebut dan payload dari pesan RTMP chunk stream dan RTMP cocok untuk berbagai jenis aplikasi audio-video, dari satu-ke-satu dan satu-ke-banyak
video broadcasting.
Pada protocol TCP RTMP chunk stream memberikan jaminan
timestamp-ordered end-to-end untuk semua pengiriman pesan dibeberapa layanan prioritas
terhadap sesuatu pesan atau paket yang dikirim.
Action Message Format(AMF) 2.5
Action Message Format adalah format binary yang bersifat loosely pada
Simple Object Access Protocol (SOAP). AMF digunakan khususnya untuk
pertukaran data antara sebuah aplikasi Adobe Flash dan database, yang menggunakan remote prosedur call.
AMF memiliki jenis data inti yang mempunyai setiap langkah cara untuk
serializing data. Ini berbeda dengan jenis data ActionScript AMF. Jenis data inti
Long Double UTF8 LongUTF8
Extensible Markup Language(XML) 2.6
XML (Extensible Markup Language) diklasifikasikan sebagai bahasa
extensible, karenan memungkinkan client untuk menentukan elemen yang
digunakan. XML sediri tidak digunakan untuk men-display data namun digunakan untuk melakukan transportasi data atau sharing data. Dapat dikatakan bahwa XML adalah data plain text yang dibuka dan diakhiri oleh tag-tag atau elemen yang ditentukan client, sehingga dibutuhkan aplikasi khusus untuk mem-parsing data dari sebuah XML.
XML memiliki 2 standar :
Well-formed : Document XML aturan sintaks, misalnya jika mulai-tag
(<>) muncul tanpa sesuai akhir tag (</>) itu maka berkas xml tersebut tidak well-formed. Dokumen yang tidak well-formed maka tidak dapat dikatakan adalah dokumen XML.
Valid : dokumen XML yang valid harus mengikuti aturan semantic, baik
client ditentukan atau dalam skema XML terutama DTD dan jika dokumen
berisi elemen undefined maka hal itu tidak berlaku.
<!--WRONG NOT WELL-FORMED XML! -->
<title>Laskar Pelangi<author>Andrea Hirata</title></author>
Gambar 2. 6 Contoh not well formed
Gambar 2.7 adalah contoh dari xml yang valid
<!--WRONG NOT WELL-FORMED XML! -->
<title>Laskar Pelangi</title><author>Andrea Hirata</author>
Gambar 2. 7 Contoh well formed XML
Action Script 2.7
ActionScript adalah bahasa pemrograman yang dipakai oleh Adobe Flash
untuk mengendalikan objek-objek ataupun movie yang terdapat dalam flash. Sebenarnya flash juga bisa tidak menggunakan ActionScript dalam pemakaiannya, namun untuk menghasilkan interaktifitas dan kemampuan yang lebih komplek dari flash yang dihasilkan maka ActionScript ini dibutuhkan.
Pada awal pengembangannya ActionScript hanya memiliki beberapa perintah yang dapat dijalankan, namun seiring dengan perkembangan dan meluasnya penggunaan flash dan ActionScript didalamnya, sehingga ActionScript menjadi lebih kompleks seperti halnya bahasa permrograman pada umumnya.
ActionScript 3.0 adalah varian terbaru dari bahasa pemrograman
ActionScript memiliki cukup perbedaan dengan bahasa pendahulunya
ActionScript 2.0 namun tentunya memiliki fitur yang lebih komplek dan performa
package com.example
{
import flash.text.TextField;
import flash.display.Sprite;
public class Greeter extends Sprite
{
Public function Greeter()
{
var txtHello:TextField = new TextField();
txtHello.text = “Hello World”;
addChild(txtHello);
}}}
Gambar 2. 8 Contoh Action Script 3.0
Red5 2.8
Red5 adalah sebuah flash media server yang ditulis dengan bahasa pemrograman java yang dapat melakukan streaming audio maupun video, shared
object,recorded client stream dll. Red5 menjembatani antara flash dengan sebuah
oriented server menggunakan protocol RTMP (real time messaging protocol).
Red5 menggunakan Spring Framework, Jetty Embeddable Http Server dan Servlet container. Spring Framework yang merupakan JAVA Framework menyediakan hook (konfigurasi) metadata terdapat pada form atau dalam bentuk
yang digunakan untuk mengontrol perilaku berbagai aplikasi JAVA, object atau
framework (missal Jetty, Acegi, Hibernate)
2.8.1 Struktur Direktori Red5
Sebuah standalone Red5 server memiliki beberapa direktori yang mengatur cara kerja dari server Red5 itu sendiri antara lain conf, lib dan webapps. Selain itu dalam pembuatan aplikasinya setiap aplikasi yang ingin dikembangkan diletakkan di direktori webapps dan harus memiliki struktur tertentu sehingga jika dirunut maka struktur direktori yang terdapat dalam Red5 adalah seperti Gambar 2.9.
WEBAPPS LIB CONF
SAMPLE WEB-INF LIB
CLASSES
SRC
Gambar 2. 9 Struktur Direktori Red5
Red5 Merupakan root direktori dari Red5.
Lib. Direktori yang berisi file-file JAR(Java Archive) yang merupakan
class yang nantinya dapat digunakan dalam pengembangan aplikasi Red5.
Webapps. Merupakan root direktori bagi file aplikasi yang nantinya akan
dikembangkan.
Sample. Mewakili direktori aplikasi yang dikembangkan di server Red5.
WEB-INF Setiap aplikasi nantinya harus memiliki direktori WEB-INF
ini, berkas-berkass konfigurasi dari aplikasi tersebut diletakkan di direktori ini.
Src Direktori ini menampung direktori-direktori dari package yang
digunakan dan pada direktori terdalam terdapat file .java dari aplikasi yang sudah dibuat.
Classes Direktori ini juga menampung direktori-direktori dari package
yang gunakan dan pada direktori terdalam terdapat file .class dari aplikasi yang sudah dibuat.
Lib Direktori dimana file JAR dari aplikasi yang sudah dibuat diletakkan
di sini.
2.8.2 Berkas-berkas konfigurasi
Setiap aplikasi yang terdapat di direktori webapps dari sebuah Red5 harus memiliki sebuah direktori WEB-INF yang berisi berkas-berkas konfigurasi dari aplikasi tersebut, berkas-berkas tersebut antara lain :
web.xml : Merupakan file yang pertama kali dibaca oleh Jetty / tomcat
standar descriptor deployment yang digunakan oleh servlet engine, yang akan digunakan 3 berkas konfigurasi lainya.
Red5-web.properties : File ini diimpor ke dalam Red5-web.xml. File
ini digunakan untuk mengubah konfigurasi seperti contextPath (yakni nama dari scope aplikasi) atau arah virtualHosts.
log4j.properties : File ini digunakan untuk mengkonfigurasi logging
property dari aplikasi library log4j.
Red5-web.xml : File konfigurasi yang digunakan untuk men-load
konfigurasi scope/context handler, virtual host dan konfigurasi aplikasi itu sendiri. Ini adalah file yang digunakan oleh Spring Framework IOC
beans ketika ketergantungan Injecting servlet sehingga dapat
diinstantiate dengan benar di dalam red5 server. File ini juga mendefinisaikan handlers yang digunakan handlers adalah metode yang dipanggil ketika sebuah flash dari client terhubung ke apalikasi.
2.8.3 Komunikasi Red5
Ada beberapa cara yang dapat dilakukan untuk melakukan pertukaran data dari sebuah red5 server dengan aplikasi client yang dikembangkan, perlu dicatat bahwa dalam tugas akhir ini digunakan Adobe Flash Builder sebagai builder untuk mengembangkan aplikasi disisi client, berikut adalah beberapa teknik pertukaran data antara flex dengan red5 :
Remote SharedObject
tersebut akan diteruskan kepada setiap client yang terhubung dengan
SharedObject tersebut.
Remote Procedure Call (RPC), Flex ke Red5
Remote Procedure Call pada sisi client adalah proses pemanggilan
fungsi yang terdapat pada server. Contoh penggunaan RPC pada sisi
client yang dikembangkan ada pada proses pengambilan data clientlist.
Remote Procedure Call (RPC),Red5 ke Flex
Kebalikan dari RPC pada sisi client, RPC pada sisi server adalah proses pemanggilan fungsi yang terdapat pada client. Contoh penggunaan RPC pada sisi server yang dikembangkan penulis ada pada proses invoke fungsi setClientID.
Perangkat Multimedia 2.9
Perangkat lunak multimedia dalam pembuatan video conference yang dibangun adalah komponen-komponen atau peripheral yang digunakan dan dibutuhkan untuk berinteraksi dengan system video konferensi, ada beberapa perangkat yang dibutuhkan antara lain :
Web camera : berupa kamera sebagai pengambil citra/gambar dan
microphone (optional) sebagai pengambil suara/audio yang dikendalikan oleh
sebuah computer atau oleh jaringan computer. Gambar yang diambil oleh web
camera ditampilkan ke layar monitor, karena dikendalikan oleh computer
maka ada interface atau port yang digunakan untuk menghubungkan web
Speaker : Pengeras suara atau loudspeaker atau speaker adalah alat yang
mengubah sinyal elektrik ke frekuensi audio (suara) dengan cara menggetarkan komponennya yang berbentuk selaput. Pada dasarnya speaker merupakan mesin penterjemah akhir. Speaker membawa sinyal elektrik dan mengubahnya kembali menjadi getaran untuk gelombang suara. Speaker menghasilkan getaran yang hampir sama dengan yang dihasilkan oleh mikrofon yang direkam dan dikodekan pada tape, CD, LP dan lain-lain.
Speaker tradisional melakukan proses ini dengan menggunakan satu drivers
atau lebih.
Microphone : microphone adalah alat mengubah suara menjadi sinyal listrik.
Microphone dipakai pada banyak alat seperti telepon, tip rekorder, alat bantu
BAB III
PERANCANGAN SISTEM
Pada bab ini akan dijelaskan hal-hal yang berkaitan dengan perancangan sistem yang akan dibuat pada karya tugas akhir ini, dimulai dengan deskripsi umum mengenai aplikasi yang akan dibuat, perancangan proses-proses yang ada dan alur proses serta implementasinya.
Deskripsi umum 3.1
Pengerjaan tugas akhir ini akan membangun system yang memungkinkan
client untuk melakukan video conference antar sesama client menggunakan
sebuah server Red5. Jadi dengan adanya aplikasi ini, client dapat melakukan video
conference dengan client lain yang tentunya sedang terhubung dan
ter-authentifikasi oleh server.
Agar client dapat melakukan video conference dengan anggota lain di server Red5, maka dibangun aplikasi yang dikembangkan disisi server dan disisi client. Pada sisi server akan meng-handle beberapa fungsi seperti koneksi dari aplikasi
client, client manajemen dan beberapa fungsi lain. Pada sisi client akan
meng-handle authentifikasi yang berhubungan dengan sebuah database server,sisi client
juga meng-handle sinkronisasi daftar client dan client.
sukses maka client akan dapat melihat list dari client lain yang sudah terauthentifikasi oleh server. Client dapat melakukan video conference dengan
client lain dengan mengklik nama dari client tersebut.
Arsitektur sistem 3.2
Implementasi system ini sehingga dapat digunakan sebagai media video
conference menggunakan beberapa teknologi seperti Red5 dan flash di sisi client,
memanfaatkan keistimewaan Red5 sebagai flash media server yang akan menghandle video stream dari client. System Red5 sendiri dikembangkan dengan bahasa java dan ruby dan menggunakan protocol RTMP (Real Time Messaging
Protocol) dan AMPC (Action Message Formal) dan tentu mendukung sepenuhnya
terhadap kebutuhan penulis untuk mengembangkan sebuah system video
conference. Arsitektur dari system videoconference yang dibangun digambarkan
seperti Gambar 3.1
Web Server
Web Server
http rtmp
Client
Client
Red5
Red5
Send swf
rtmp Send swf
Client dengan web browser yang mendukung flash player membuka
alamat dari aplikasi yang disediakan.
Selanjunya komukasi terjadi antara flash player dengan server stream yaitu server Red5.
Red5 sebagai server stream akan menghandle proses pengiriman dan penerimaan data stream dari client.
Gambar 3.2 adalah gambaran arsitektur dari system yang dikembangkan.
Client 1
Client 1 Red5Red5 Client 2Client 2
Gambar 3. 2 Arsitektur Sistem Red5
Perancangan Proses 3.3
Dalam perancangan aplikasi nantinya akan menggunakan beberapa service yang dibangun antara lain, webserver, database server dan flash media server. Webservernya digunakan untuk menjalankan aplikasi client yang nantinya akan berjalan menggunakan web browser, sedangkan database server akan digunakan untuk melakukan authentifikasi dan registrasi client baru. Sedangkan flash media
server atau Red5 akan menghandle streamdan beberapa fungsi yang berada di sisi
Start
Gambar 3. 3 Flowchart Sistem Video Conference
Desain aplikasi 3.4
Pada bagian ini akan membahas tentang desain dari aplikasi yang dibuat.
3.4.1 Desain Form Login
Form login digunakan untuk user login masuk ke dalam aplikasi utama.
Keterangan :
1. Textbox username diisi dengan nama user dari pengguna video conference.
2. TextBox password diisi dengan password dari user.
3. Tombol Login, digunakan untuk masuk ke aplikasi utama. 4. Digunakan untuk mendaftarkan user baru.
3.4.2 Form Register
Form ini digunakan untuk mendaftar user baru agar bisa menggunakan aplikasi video konferensi
Gambar 3. 5 Form Register Keterangan :
1. TextBox username,diisi dengan username untuk login ke aplikasi.
2. TextBox password,diisi dengan password user.
3. TextBox password2, diisi dengan password user. Harus sama dengan
password yang di atas.
3.4.3 Tampilan Utama
Ini adalah tampilan utama dari aplikasi video konferensi.
Gambar 3. 6 Tampilan Utama Aplikasi Keterangan :
1. Panel Video 1 untuk menampilkan video stream dari user yang online. 2. Panel Video 2 untuk menampilkan video stream dari user yang online. 3. Panel Video 3 untuk menampilkan video stream dari user yang online. 4. Panel Video 4 untuk menampilkan video stream dari user yang online. 5. Panel Video 5 untuk menampilkan video dari user.
6. Keterangan dari jumlah user yang sedang online. 7. UserList dari user yang online.
Desain Uji Performa 3.5
Pada bagian ini akan dijelaskan tentang bagaimana uji performa yang akan digunakan dan mengenai rumus yang digunakan dalam pengujian performa sistem yang akan dibuat. Uji performa akan dilakukan dalam dua hal yaitu :
3.5.1 Uji Performa Traffic In, Out dan Memory Usage Client yang tehubung tanpa melakukan Video Conference dalam Koneksi Kabel dan Nirkabel
Untuk mengetahui performa program aplikasi yang akan dibuat dilakukan dengan menggunkan aplikasi iftop yang sebelumnya telah diinstall di server. aplikasi ini digunakan untuk memonitoring traffic in,out dan memory usage saat program dijalankan, untuk itu dilakukan uji coba terhadap aplikasi sebanyak 10 kali. Untuk mendapatkan rata-rata dari penggunaan memori komputer digunakan rumus, total penggunaan memori dibagi jumlah percobaan.
3.5.2 Uji Performa Memory Usage dan CPU Usage Client yang Terhubung dan Melakukan Video Conference
Sama dengan uji performa traffic in,out dan memory usage uji performa ini dilakukan sebanyak 10 kali percobaan. Aplikasi yang digunakan untuk melakukan uji performa ini menggunakan aplikasi top yang telah disediakan oleh server. Untuk melakukan perhitungan digunakan rumus :
BAB IV
IMPLEMENTASI PERANGKAT LUNAK
Pada bab ini akan membahas tentang implementasi program dari hasil analisa dan perancangan sistem yang ada pada bab III, serta bagaimana cara sistem tersebut dijalankan.
Alat yang digunakan 4.1
Pada implementasi program, alat-alat yang digunakan yaitu perangkat keras (hardware) dan perangkat lunak (software) yang dijabarkan sebagai berikut:
4.1.1 Perangkat Lunak
Perangkat lunak (software) yang digunakan dalam pembuatan dan menjalankan aplikasi ini adalah sebagai berikut :
a. Microsoft Windows 7 b. Linux Ubuntu Server 10.04
c. Eclipse IDE For Java EE Developers d. Adobe Flash Builder 4 Eclipse Plug-in
e. Java Virtual Machine: Sun JRE 1.6.3 atau yang lebih baru f. Red5 0.9.1 sebagai media server
4.1.2 Perangkat Keras
Perangkat keras (hardware) yang digunakan seperangkat komputer dengan spesifikasi sebagai berikut :
a. Processor Intel® Pentium Dual-Core CPU T4500 2.30GHz b. RAM 2GB
c. Hardisk 320GB d. Mouse
e. Keyboard f. Webcam
Implementasi Sistem Video Konverensi 4.2
KonverensiUntuk lebih mudah dipahami operasi-operasi dalam system video konferensi ini akan dibedakan menjadi dua, yang pertama adalah operasi-operasi yang berada di sisi client dan kedua adalah operasi-operasi-operasi-operasi yang berada di
server. Berikut adalah operasi-operasi yang berada di client :
a. Login
b. Register
c. Membuat koneksi ke sever serta handlernya
d. Set client ID, Set client indetifier dan manajemen client
e. Inisialisasi sharedObject dan Userlist synchronization f. GetCamera, microphone dan stream video
g. Attachment client stream
Berikut adalah operasi-operasi yang berada di server :
4.2.1 Operasi Login dan Authentifikasi Login
Operasi Login merupakan pengiriman data username dan password dari
client ke server, setelah data dikirim dan server telah menerima data. Server akan
melakukan pengecekan apakah username dan password yang dimasukkan oleh
client valid atau tidak, client akan mengirim string username dan password
miliknya, lalu server merespon dengan mengirimkan value xml antara success dan
failed yang akan diproses kembali oleh client, berikut ini adalah implementasi dari
proses login.
Gambar 4.1 merupakan fungsi handler login untuk mengirim data ke server.
private function checkValidity():void
{
if(txtUsername.length==0||txtPassword.length==0)
{
Alert.show("Please Fill in your Username & Password","Warning Message");
Gambar 4.2 merupakan fungsi yang mengangani hasil yang didapat dari server.
public function checkUser(evt:ResultEvent):void
{
var status:String=evt.result.user.login_result;
var uname:String=evt.result.user.login_name;
vidusername = uname;
//status failed akan muncul apabila login mengalami kesalahan
if(status=='failed')
{
Alert.show("Wrong User Name or Password, Please
contact web administrator","Login Error"); }
else
{
txtUsername.text = ""; txtPassword.text = "";
nc = new NetConnection();
Gambar 4. 2 Operasi Login Handler
Operasi autentifikasi login akan menerima kiriman data dari operasi
checkValidity dan melakukan pengecekan ke database apakah data yang dikirim
valid atau tidak, bila data valid atau ada di database maka server akan mengembalikan nilai success dan jika tidak akan mengembalikan nilai failed. Gambar 4.3 merupakan fungsi authenfikasi login disisi server dan Gambar 4.4 adalah flowchart dari proses login.
Login Cek username
<?php
$execquery = mysql_query($sqlquery) or die("Error in connecting to server database");
$count=mysql_num_rows($execquery); $return = "";
if($count==1) {
while($result = mysql_fetch_array($execquery)) {
Gambar 4. 4 Operasi Authentifikasi Login di Server
4.2.2 Operasi Register
Operasi register merupakan operasi untuk mengani client baru yang akan mendaftar di system video converence. Dalam operasi ini data username dan
password baru bagi client yang mendaftar akan dikirim ke server yang akan
Fungsi checkValidity akan melakukan pengecekan apakah semua inputan sudah terisi dan atau kolom konfirmasi password tidak sama, jika semua kolom inputan telah terisi semua dan konfirmasi password bernilai sama, maka data-data tersebut akan dikirim ke server.
Gambar 4.5 merupakan fungsi register dan Gambar 4.6 adalah flowchart dari proses register.
private function checkValidityData():void
{
if(txtDusername.length==0||txtDpassword1.length==0
||txtDpassword2.length==0) {
Alert.show("Please Fill in your Username & Password","Warning Message");
}
else if(txtDpassword1.text!=txtDpassword2.text)
{
Alert.show("Password1 dan Password2 tidak
sama!!","Warning Message"); }
Gambar 4. 5 Operasi Register
Start Daftar End
Gambar 4. 6 Flowchart Operasi Register
4.2.3 Operasi Membuat Koneksi ke Server dan Handlernya
selajutnya jika login sukses maka akan dibuat koneksi ke server dengan cara mengirimkan username sebagai parameter untuk dimasukkan ke dalam clientList yang ada di sisi server. Langkah untuk melakukan hal ini adalah dengan membuka koneksi dengan aplikasi server yang ada di Red5 server menggunakan protocol RTMP, berikut Gambar 4.7 adalah implementasi dari membuat koneksi ke server: public function checkUser(evt:ResultEvent):void
{
Alert.show("Wrong User Name or Password, Please contact web
administrator","Login Error"); }
else
{
txtUsername.text = ""; txtPassword.text = "";
nc = new NetConnection();
Gambar 4. 7 Operasi untuk Membuka Koneksi ke Server
pada Gambar 4.8 adalah handler dari operasi koneksi ke server dan Gambar 4.9 adalah flowchart dari proses koneksi ke server.
public function onConnectionNetStatus(event:NetStatusEvent) : void
{
// did we successfully connect
if(event.info.code == "NetConnection.Connect.Success") { currentState = "LoggedIn";
connectComponent();
setupVideo();
} else {
currentState = "";
Alert.show("Unsuccessful Connection", "Information"); }
}
Gambar 4. 8 Operasi Handler untuk Koneksi ke Server
Start Open koneksi ke server End
Operasi connectComponent dan ke State Loged
In
Gambar 4. 9 Flowchart Koneksi ke Server
4.2.4 Operasi Set client ID, Set client identifier dan Manajemen client
Untuk urutan-urutan proses yang dilakukan pada operasi ini dijelaskan pada Gambar 4.10.
Start New User SetClient Identifier Push to Array End userList
Gambar 4. 10 Flowchart Operasi SetClientID
Gambar 4.11 merupakan implementasi dari client manajemen yang ada di server.
public boolean appStart(IScope scope){
clientlist = new ArrayList<String>();
return true;
}
public boolean connect(IConnection conn, IScope
scope,Object[] params){
if(params == null || params.length == 0){
rejectClient("No username passed."); }
if(!super.connect(conn, scope, params)){
return false;
}
String username = params[0].toString();
String uid = conn.getClient().getId();
clientlist.add(username);
clientMgr.addClient(scope, username, uid);
ServiceUtils.invokeOnConnection(conn,
"setClientID",new Object[]{uid});
return true;
Gambar 4.12 merupakan implementasi operasi getUserList di sisi server.
public ArrayList<String> getUserList(){
return clientlist;
}
Gambar 4. 12 Operasi GetUserList di Server
Operasi setClientID yang ada di sisi client digunakan untuk memanggil fungsi getClientList yang ada di sisi server, fungsi ini mengembalikan nilai array dan akan di handle oleh fungsi onResult, fungsi ini akan memasukkan nilai yang di dapat dari getUserList ke dalam sebuah array, implementasinya pada Gambar 4.13.
public function setClientID(val:*):void
{
nc.call("getUserList", new Responder(onResult,onFault)); }
private function onResult(obj:Object):void
{
mylist = new ArrayCollection(obj as Array);
}
Gambar 4. 13 Operasi SetClientID
4.2.5 Operasi Inisialisasi SharedObject dan Userlist Synchronization pada Client Manajemen
