1 BAB III PERANCANGAN SISTEM Pada bab ini dijelaskan perancangan aplikasi dimulai dengan gambaran sistem, desain arsitektur dari sistem, perancangan d...
Pada bab ini dijelaskan perancangan aplikasi dimulai dengan gambaran sistem, desain arsitektur dari sistem, perancangan database, perancangan aplikasi User Interface website, perancangan aplikasi website data Audio streaming, dan perancangan aplikasi website live streaming radio, perancangan broadcasting radio.
3.1. Gambaran Sistem Aplikasi website streaming radio ini bertujuan untuk memudahkan para pengguna dalam menikmati fasilitas radio tanpa terbatas jarak, dengan menggunakan fasilitas internet, dan juga bertujuan untuk memudahkan para broadcaster radio dalam menyiarkan acara mereka. Sistem dibangun berbasis website sehingga dapat diakses oleh pengguna yang memiliki fasilitas internet. Sistem dibagi menjadi dua bagian yaitu dibagian aplikasi client website streaming yang digunakan oleh pengguna komputer client dan aplikasi administrator komputer server yang digunakan oleh administrator dan broadcaster radio.
3.1.1. Aplikasi Client Website Streaming Aplikasi client website streaming digunakan oleh para pengguna internet untuk dapat menikmati fasilitas streaming Audio dan juga on demand streaming radio secara real time. Use case untuk pengguna dalam menggunakan aplikasi dapat dilihat pada Gambar 3.1
Gambar 3.1 Use Case diagram Pengguna 30
Penjelasannya adalah sebagai berikut: 1. Melihat jadwal Pengguna dapat melihat berita acara dari website. 2. Memutar data Audio Pengguna dapat memutar data Audio yang sudah disiapkan. 3. Memutar on demand streaming radio Pengguna dapat memutar radio secara real time 4. Memilih kualitas suara Pengguna dapat memilih kualitas suara yang ingin didengar sehingga dapat menyesuaikan dengan bandwidth pengguna. 5. Melihat panduan Pengguna dapat melihat informasi dari halaman panduan serta pengumuman.
Diagram alir halaman aplikasi client website streaming dapat dilihat pada Gambar 3.2. Penjelasan untuk Gambar 3.2 adalah sebagai berikut: 1. Ketika website dibuka, maka halaman yang pertama muncul adalah halaman home, dimana pengguna dapat melihat informasi seputar mengenai website, dibagian atas ada beberapa pilihan untuk menuju ke halaman – halaman website lainnya. 2. Ketika pengguna memilih tab halaman music, maka akan ditampilkan halaman website dimana terdapat beberapa pilihan judul serta tombol kualitas yang ingin dipilih dan juga terdapat audio player yang disediakan fitur play, pause, volume control, serta navigator bar dan juga kontrol waktu. Dimana pengguna dapat melakukan control suara, pause, serta fast forward maupun rewind. 3. Jika pengguna menekan salah satu tombol dari dua pilihan kualitas suara, maka aplikasi akan menampilkan notifikasi judul serta kualitas yang telah dipilih. 4. Data Audio serta kualitas yang telah dipilih nantinya dapat langsung diputar dengan Audio player yang sudah disediakan. 5. Ketika pengguna memilih tab halaman live stream, maka akan ditampilkan halaman website dimana terdapat dua pilihan server radio yang ingin diputar. 6. Jika pengguna menekan salah satu dari dua pilihan server, maka player applet akan memutar radio secara realtime. 7. Ketika pengguna memilih tab halaman panduan, maka akan ditampilkan halaman website yang berisi panduan dalam menggunakan aplikasi.
31
8. Ketika pengguna memilih tab pengumuman, maka akan ditampilkan halaman website yang berisi pengumuman - pengumuman serta informasi acara.
Start
Tampilan Home
no
LQ
no
HQ
Tampilkan halaman music
yes
Pilih tab Music
yes
no
no
yes
Pilih tab Live Stream
Play
ya
Tampilkan halaman Live Stream
HQ
no
LQ
yes
no Tampilkan halaman Panduan
yes
Pilih tab Panduan
yes
no Tampilkan halaman Pengumuman
yes
Pilih tab Pengumum an
End
Gambar 3.2 Diagram alir client website streaming
Untuk spesifikasi kebutuhan sistem dapat dilihat pada surat tugas dan surat perubahan spesifikasi yang dilampirkan pada bendel ini. 3.1.2. Aplikasi Administrator Komputer Server Aplikasi administrator komputer server adalah aplikasi yang digunakan oleh administrator untuk mengelola data audio yang disediakan, serta pengelolaan dan maintenance website dan juga digunakan oleh broadcaster dalam menyiarkan radio. Aplikasi ini hanya diinstal di komputer server. Use case untuk administrator dapat dilihat pada Gambar 3.3 32
Play
Gambar 3.3 Use Case diagram Administrator
Penjelasannya adalah sebagai berikut: 1. Transmit Radio Administrator dapat menyiarkan siaran radio sendiri. 2. tambah database Administrator dapat menambahkan data ke dalam database. 3. ubah database Administrator dapat mengubah data yang sudah ada di dalam database. 4. hapus database Administrator dapat menghapus data yang sudah ada di dalam database.
Diagram alir halaman aplikasi Administrator komputer Server dapat dilihat pada Gambar 3.4. Penjelasan untuk Gambar 3.4 adalah sebagai berikut: 1. Ketika halaman dibuka, maka akan tertampil halaman home, dimana akan tampil keseluruhan data yang ada pada database, terdapat fitur tambah database, ubah database serta hapus database. 2. Ketika admin melakukan broadcast radio, maka microphone mulai merekam masukan suara dan bisa melakukan siaran radio. 3. Ketika admin memilih tambah database, maka akan ditampilkan form – form yang dapat diisi oleh admin untuk menambahkan data ke dalam database, dan juga terdapat tombol konfirmasi untuk menambahkan data ke dalam database. 4. Ketika admin memilih ubah database, maka akan ditampilkan daftar database, yang isinya bisa diubah oleh admin, dan juga terdapat tombol konfirmasi untuk mengubah data dari dalam database 33
5. Ketika admin memilih hapus database, maka akan keluar notifikasi bahwa data sudah dihapus dari database Start
Tampilan Home
Server Aktif
yes
Pilih Broadcast Radio
no Pilih tambah database
no Halaman tambah database
yes
Tambah data
yes
Update database
no no
yes Halaman ubah database
Pilih ubah no database
yes ubah data
yes no Halaman hapus database
Pilih hapus database
Hapus data
yes
End
Gambar 3.4 Diagram Alir Aplikasi Administrator Komputer Server
3.2. Desain Arsitektur Sistem Sistem yang dibangun terdiri dari aplikasi client website streaming sebagai client untuk menampilkan halaman – halaman website serta memutar data Audio maupun live radio dan aplikasi administrator komputer server yang dapat mengubah database serta broadcasting radio. Arsitektur dari sistem website streaming radio dapat dilihat pada Gambar 3.5
34
Website PC KLIEN Aplikasi data audio streaming
Aplikasi streaming Live radio
RTP -User Interface
Webserver
-Play audio
Gambar 3.5 Arsitektur website streaming radio
Gambar 3.5 menunjukkan arsitektur website streaming radio, ada tiga bagian penting dengan penjelasan sebagai berikut: 1. Website dan Webserver Website bertugas menampilkan User Interface yang berisi konten-konten dan berita yang memudahkan user dalam mengunakan aplikasi. Webserver bertugas untuk menjembatani dari data – data serta tampilan User Interface dari komputer server ke komputer client, webserver bertugas menerima permintaan dari user dan kemudian permintaan tersebut diolah dan dikirimkan hasilnya kembali ke client user. 2. Aplikasi data Audio streaming Aplikasi ini menyediakan layanan streaming Audio dengan Audio player menggunakan HTML5, dimana user dapat memilih dua kualitas suara yang disediakan masing masing Audio, hal ini bertujuan untuk mengatasi permasalahan bandwidth pada user. 3. Aplikasi on demand streaming radio Aplikasi ini menyediakan layanan pemutar streaming on demand live radio secara langsung melalui protocol RTP, data hasil capture
dikompresi dan data
mentah/RAW dikirim langsung dan nantinya dapat didengarkan oleh user melalui aplikasi website yang dilengkapi dengan applet player sebagai pemutar radionya.
3.3. Perancangan Database Database yang digunakan pada aplikasi website streaming radio adalah MYSQL. Database terletak di komputer server, sedangkan pada komputer client tidak diperlukan database.
35
3.3.1. Database Server Data yang yang disimpan adalah data pada web server. Di dalam database mobile terdapat sebuah tabel untuk menyimpan data yaitu t_audio. Tabel t_audio berisi informasi mengenai data judul data audio serta alamat sumber media untuk dua kualitas yang berbeda. Atribut masing-masing tabel dapat dilihat pada Tabel 3.1. Nama Kolom
Tipe Data
Allow Nulls
Primary Keterangan Key
id
int(11)
No
Yes
nama_file
varchar(50)
No
Nama file
lokasi_file
varchar(50)
No
sumber media file asli
lokasi_filelq
varchar(50)
No
sumber media file low quality
descripsi
varchar(50)
No
informasi dan keterangan
tanggal_upload varchar(50)
No
tanggal data diupdate
id
Tabel 3.1 Atribut database
3.4. Perancangan Aplikasi Website on demand Streaming Radio Sistem yang dibangun terdiri dari aplikasi administrator komputer server yang berfungsi sebagai server untuk broadcasting radio serta pemeliharaan data, dan aplikasi website streaming radio yang berfungsi sebagai client yang dapat memutar data serta radio yang sudah ditransmisikan oleh server. Aplikasi server dirancang menggunakan PHP serta bahasa pemprograman java JDK 1.6, Java Media Framework dengan Eclipse Galileo IDE, sedangkan Aplikasi website client dirancang dengan PHP, HTML5 serta JRE 1.6 yang terhubung pada webserver WAMP5 1.7.2.
3.4.1. Aplikasi Administrator Komputer Server 3.4.1.1.Capturing Audio device Capturing Audio device merupakan salah satu fungsi utama aplikasi ini yaitu untuk mentransmisikan langsung data mentah yang ditangkap oleh perangkat keras, Karena aplikasi ini menggunakan fitur – fitur perangkat keras yang didapat dari masukan komputer, maka sistem harus memiliki informasi mengenai perangkat keras yang sudah terhubung. Dapat dilihat dari Kode 3.1 36
public static synchronized Vector getDeviceList(Format format) { if (devices == null) { return null; } if (format == null) { return devices; } Vector newList = new Vector(); Enumeration enum = devices.elements(); while (enum.hasMoreElements()) { CaptureDeviceInfo cdi = (CaptureDeviceInfo)enum.nextElement(); Format[] formats = cdi.getFormats(); for (int i = 0; i < formats.length; i++) { if (formats[i].matches(format)) { newList.addElement(cdi); break; } } } if (newList.size() > 0) { return newList; } return null; }
Kode 3.1 Daftar perangkat keras yang terhubung
Contoh Kode 3.1 adalah fungsi untuk mendapatkan informasi daftar masukan perangkat keras yang nantinya akan dipakai sebagai medialocator sebagai data sumber rekaman radio.
3.4.1.2.
Capturing Audio
Capturing Audio digunakan untuk menangkap dan mentransmisikan secara langsung data masukan dari capture device yang didapat. Dalam skripsi ini perangkat yang digunakan adalah microphone yang sudah terkoneksi melalui soundcard. Perangkat ini nantinya dipanggil melalui mediasender.class yang diset sebagai media information, dapat dilihat pada Kode 3.2 CaptureDeviceInfo webcamInfooo =new CaptureDeviceInfo("DirectSoundCapture", new MediaLocator ("javasound://44100"),null);
Kode 3.2 media info sebagai data sumber
37
Contoh pada Kode 3.2 javasound://44100 menunjukan bahwa sumber masukan suara diambil dari perangkat keras yang terdeteksi, dan di sampling sebesar 44100hz per detiknya. Setelah informasi tentang perangkat didapat, maka perangkat tersebut akan digunakan sebagai data sumber lokasi media sehingga masukkan dapat diproses. Kode untuk lokasi media dapat dilihat pada Kode 3.3 MediaLocator camDeviceMediaLocator =webcamInfooo.getLocator(); DataSource source = Manager.createDataSource(camDeviceMediaLocator); Processor mediaProcessor = Manager.createRealizedProcessor( new ProcessorModel(source,FORMATS, CONTENT_DESCRIPTOR));
Kode 3.3 lokasi media sebagai data sumber
3.4.1.3.
Encoding Masukan Audio
Data audio dari masukan microphone di-encoding terlebih dahulu sebelum dikirim ke protokol RTP, dalam skripsi ini encoding yang digunakan adalah format µ-law atau dikenal juga dengan G.711 dan GSM, yang sudah ada dalam Library
Java JMFlib.
3.4.1.4.
Transmisi data Audio
data audio yang sudah diproses selanjutnya akan dibawa melalui Java Media Framework ke protocol RTP sebagai output dari transmisi radio, lokasi output dalam skripsi ini dapat dilihat pada Kode 3.4 dan pada Kode 3.5
MediaLocator outputMediaLocator = new MediaLocator("rtp://192.168.1.255:10005/audio");
Kode 3.4. Lokasi Output streaming radio server 1 MediaLocator outputMediaLocator = new MediaLocator("rtp://192.168.1.255:10000/audio");
Kode 3.5. Lokasi Output streaming radio server 2
38
Pada Kode 3.4 dan Kode 3.5 dapat dilihat bahwa ip yang digunakan merupakan ip broadcast, yaitu ip dengan akhiran 255, sedangkan port yang digunakan adalah port 10005 yaitu port yang digunakan pada server 1 yang memiliki metode encoder GSM, sedangkan pada server 2 menggunakan port 10000 yang memiliki metode encoder G.711. penggunaa port berbeda bertujuan agar data yang diterima tidak menabrak data lainnya. Dibelakang port terdapat keterangan menggunakan protokol RTP dan tipe data audio
3.4.1.5.
Website
Website dibangun dengan bahasa HTML5, dan PHP serta pengaturan layout menggunakan CSS dan Javascript yang berfungsi untuk pengaturan database dan pemanggilan class-class.
3.4.1.6.
Webserver
Webserver digunakan untuk menjembatani serta menerima permintaan dari client dan diproses pada server, webserver yang digunakan dalam skripsi ini adalah WAMP yang sudah dilengkapi dengan database MYSQL. Diperlukan beberapa konfigurasi yang terletak pada httpd.conf pada WAMP agar website dapat terkoneksi oleh jaringan yaitu dengan kode listen server terletak pada ip dan port WAMP server.
3.4.1.7.
Database Administrator Database Administrator berfungsi untuk memberikan informasi-informasi
serta menambah, mengubah, maupun menghapus data dari database yang nantinya akan ditampilkan pada halaman-halaman aplikasi website, administrator dapat menambah, mengubah dan menghapus data yang digunakan sebagai informasi serta daftar media sumber dari streaming data Audio. Kode dari menu utama, tambah, ubah serta hapus data menggunakan fungsi PHP yang dilengkapi dengan SqlScript sebagai pengatur koneksi dan eksekusi pengubahan data dalam database lokal. Kode Database Administrator dapat dilihat pada Kode 3.6 hingga Kode 3.9
39
$con = mysql_connect("localhost","root",""); mysql_select_db("db_audio",$con); $Query = "SELECT id, nama_file, lokasi_file, lokasi_file_lq, deskripsi, tgl_upload FROM t_audio ORDER BY id DESC LIMIT ".$offset.",".$dataPerPage.";";
Kode 3.6. Pengambilan dan Penampilan seluruh data dari Database $sql1="insert into t_audio (id, nama_file, lokasi_file, lokasi_file_lq, deskripsi, tgl_upload) values ('$Unique','$getNamaAudio','$lokasiFile','$lokasiFileL','$getDeskripsi', '$getTanggalUpload')"; $res=mysql_query($sql1) or die (mysql_error());
Kode 3.7. Penambahan data kedalam Database
$result = mysql_query("SELECT id, nama_file, lokasi_file, lokasi_file_lq, deskripsi, tgl_upload FROM t_audio WHERE id ='".$ids."'"); $obj = mysql_fetch_object($result); $getIDS = $obj->id; $JUDULAUDIO = $obj->nama_file;
Kode 3.8. Ubah data dari Database $deleterequest = mysql_query("DELETE FROM t_audio WHERE id = '$IDS'")or die("Gagal :".mysql_error());
Kode 3.9. Hapus data dari Database
3.4.2. Aplikasi Website Streaming Radio Aplikasi website streaming radio merupakan aplikasi client yang dapat diakses oleh pengguna dimanapun juga yang terkoneksi pada jaringan yang sama, meskipun merupakan aplikasi client, aplikasi ini tetap terinstal pada komputer server, dimana client dapat mengaksesnya dengan cara dijembatani oleh webserver, dalam skripsi ini menggunakan WAMP5 1.7.2 3.4.2.1.
User Interface User Interface berfungsi untuk memudahkan pengguna dalam mendapatkan
informasi-informasi serta memudahkan pengguna dalam menggunakan aplikasi website streaming radio.
40
1. Halaman tab home menu Merupakan halaman home dimana hanya terdapat informasi-informasi serta garis besar mengenai website. 2. Halaman tab Music Halaman berfungsi sebagai halaman aplikasi data Audio streaming. disini terdapat berbagai macam judul dan informasi yang dapat diputar oleh pengguna, dan terdapat dua tombol button HQ dan LQ untuk pemilihan kualitas yang akan diputar, HQ merupakan kualitas asli data audio yang memiliki tipe streo, sedangkan LQ merupakan penurunan dari setengah kualitas asli dan tipe suara mono yang dapat diputar dengan HTML5 Audio player. Saat pengguna memilih salah satu button, maka browser akan mengirimkan method POST dan memanggil fungsi music.js. Pada halaman ini akan ditampilkan semua judul, beserta playernya dengan mode prepend. Dimana data terbaru akan muncul di bagian atas. Diagram alir halaman Music sebagai halaman data Audio streaming dapat dilihat pada Gambar 3.6
41
Gambar 3.6 Diagram Alir Aplikasi Streaming Data Audio
3. Halaman tab Live Stream Halaman ini merupakan halaman dari aplikasi on demand streaming radio yang digunakan untuk memutar radio secara real-time, dengan sumber media yang didapat dari protokol RTP. Pada halaman ini terdapat dua pilihan server yatu server1 yag menggunakan codec G-711 dan server2 yang menggunakan codec GSM, dimana halaman ini dilengkapi oleh applet player sebagai pemutar radionya. Radio yang diputar berbasis on demand streaming, yang artinya hanya disediakan fitur play dan pause pada player.
42
4. Halaman tab Panduan Halaman ini berisi panduan mengenai website serta ketentuan dan informasi yang dibutuhkan untuk menangani apabila terjadi error yang terjadi pada website, juga terdapat link untuk mengunduh kebutuhan sistem. 5. Halaman tab Pengumuman Halaman ini hanya berisi pengumuman-pengumuman serta informasi jadwal acara untuk live streaming radio.
3.4.2.2.
HTML5 Player HTML5 Player merupakan player yang dibuat dengan tata bahasa HTML
yang memungkinkan untuk memutar Audio, apabila pengguna memilih salah satu dari kualitas yang disediakan pada halaman music, maka akan mengundang fungsi yang ada pada music.js. yang berfungsi untuk mengubah lokasi sumber data Audio sesuai pilihan kualitas yang nantinya dapat diputar dengan player Audio HTML5. Contoh Audio player HTML5 dapat dilihat pada Kode 3.10
Kode 3.10 Player Audio HTML5 Kode 3.10 adalah kode untuk membuat player audio HTML5, source src merupakan lokasi sumber media yang akan diputar, dalam skripsi ini sumber media didapat dari db_audio yang sudah diproses melalui music.js sebagai penentu media sumber kualitas yang telah dipilih oleh pengguna.
3.4.2.3.
Applet Player
Applet Player digunakan sebagai player untuk memutar radio streaming yang sudah ditransmisikan oleh server dengan protocol RTP, untuk memasukkan applet player ke dalam browser, dalam skripsi ini menggunakan kode yang dapat dilihat di Kode 3.11
