30

BAB III

PERANCANGAN SISTEM

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

31

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.

32

8. Ketika pengguna memilih tab pengumuman, maka akan ditampilkan halaman

website yang berisi pengumuman - pengumuman serta informasi acara.

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

Tampilan

Home

Pilih tab

Music

Tampilkan

halaman

music

Pilih tab

Live

Stream

Tampilkan

halaman Live

Stream

Pilih tab

Panduan

Tampilkan

halaman

Panduan

Pilih tab

Pengumum

an

Tampilkan

halaman

Pengumuman

HQ

Play

LQ

HQ LQ Play

yes

yes

yes

ya

yes

yes

yes

yes

no

no

no

no

nono

no

Start

End

33

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

34

5. Ketika admin memilih hapus database, maka akan keluar notifikasi bahwa data

sudah dihapus dari database

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

Tampilan

Home

Pilih

Broadcast

Radio

Pilih

tambah

database

Pilih ubah

database

Pilih hapus

database

yes

no

no

no

Server Aktif

Halaman

tambah

database

Tambah

data

Update

database

Halaman

ubah

database

ubah data

Halaman

hapus

database

Hapus data

Start

End

yes

yes

yes

yes

yes

yes

no

no

no

35

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.

Website

Aplikasi data

audio streaming

Aplikasi

streaming Live

radio

RTP

PC KLIEN

-User Interface

-Play audio

Webserver

36

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.

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

Nama Kolom Tipe Data Allow

Nulls

Primary

Key

Keterangan

id int(11) No Yes id

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

37

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

Kode 3.2 media info sebagai data sumber

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; }

CaptureDeviceInfo webcamInfooo =new

CaptureDeviceInfo("DirectSoundCapture", new MediaLocator

("javasound://44100"),null);

38

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

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

Kode 3.4. Lokasi Output streaming radio server 1

Kode 3.5. Lokasi Output streaming radio server 2

MediaLocator outputMediaLocator = new

MediaLocator("rtp://192.168.1.255:10005/audio");

MediaLocator camDeviceMediaLocator =webcamInfooo.getLocator();

DataSource source =

Manager.createDataSource(camDeviceMediaLocator);

Processor mediaProcessor = Manager.createRealizedProcessor( new

ProcessorModel(source,FORMATS, CONTENT_DESCRIPTOR));

MediaLocator outputMediaLocator = new

MediaLocator("rtp://192.168.1.255:10000/audio");

39

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

40

Kode 3.6. Pengambilan dan Penampilan seluruh data dari Database

Kode 3.7. Penambahan data kedalam Database

Kode 3.8. Ubah data dari Database

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.

$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.";";

$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());

$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;

$deleterequest = mysql_query("DELETE FROM t_audio WHERE id = '$IDS'")or

die("Gagal :".mysql_error());

41

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

42

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.

43

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

<Audio controls>

<source src=" " type="Audio/mpeg">

<source src=" " type="Audio/ogg">

Your browser does not support this Audio format.

</Audio></li>

44

Kode 3.11 Menggundang applet player

applet code="receiver.StreamingApplet adalah fungsi untuk menggundang

applet player yang terletak pada StreamingApplet.class. Kode 3.12 menjabarkan

mengenai pembuatan class applet

Kode 3.12 Pembuatan class StreamingApplet

<section id="content">

<h2 class="indent">NOW PLAYING LIVE RADIO</h2>

<applet code="receiver.StreamingApplet" width="200" height="50">

<param name="rtp" value="rtp://192.168.1.255:10000/audio"/>

</ul>

</section>

public void start()

{

if (this.mediaLocator != null) this.player.start();

}

public void stop()

{

this.player.stop();

this.player.deallocate();

}

public void destroy()

{

this.player.stop();

this.player.close();

}

public void createPlayer()

throws NoPlayerException, IOException, MalformedURLException

{

this.player = Manager.createPlayer(this.mediaLocator);

this.player.addControllerListener(this);

}