BAB III PERANCANGAN SISTEM Gambaran...
Transcript of BAB III PERANCANGAN SISTEM Gambaran...
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);
}