## RANCANG BANGUN APLIKASI RADIO ONLINE BERBASIS WEB
Baby Lolita Basyah 1 ,Hustinawati 2 , Eldianisa Adesita 3
Fakultas Ilmu Komputer Universitas Gunadarma Jl. Margonda Raya No 100, Pondok Cina, Depok 16424 Email: b_lolita@staff.gunadarma.ac.id,hustina@staff.gunadarma.ac.id

## Abstrak
Radio  Online  merupakan  pengembangan  dari  radio  konvensional  dengan  penyiaran  secara  online. Aplikasi  Radio  Online  bertujuan  untuk  memudahkan  masyarakat  khususnya  pencinta  musik  agar dapat menikmati beraneka ragam jenis musik yang dapat dijangkau dari berbagai wilayah manapun yang  tentunya  memiliki  jaringan  internet  yang  memadai.Fitur  aplikasi  ini  meliputi  menu entertainment,  menu  chart,  dan  menu  contact  me.  Pada  menu  entertainment  berisikan  pilihan  jenis hiburan  yang  disediakan,  yaitu  streaming  radio  dan  music.  Pilihan  streaming  radio  untuk mendengarkan siaran radio, sedangkan pilihan music khusus untuk pendengar agar dapat mengakses website  meskipun  dalam  keadaan  offline  atau  tidak  siaran.Pada  menu  chart  pendengar  dapat mengetahui informasi mengenai daftar urutan lagu-lagu yang disort berdasarkan dari seringnya lagu yang  diminta  oleh  para  pendengar  radio  online.  Menu  contact  me  dapat  digunakan  oleh  user  yang ingin  berinteraksi  dengan  admin.Aplikasi  ini  juga  dilengkapi  dengan  fasilitas  chat  yang  digunakan user  untuk  merequest  lagu  kepada  admin.  Rancang  bangun  aplikasi  ini  melalui  beberapa  tahapan, yaitu  analisis  kebutuhan  data  dari  aplikasi  serta  perangkat  lunak  yang  dibutuhkan,  perancangan struktur  navigasi,  perancangan  tampilan  antar  muka  dan  pembuatan  aplikasi  menggunakan  PHP sebagai  bahasa  pemrograman,  note  pad  sebagai  teks  editor.  Untuk  radio  itu  sendiri  dibuat  dengan menggunakan Shoutcast sebagai stream radio dan Sam Broadcaster sebagai media penyiarannya .
Kata kunci : radio online , website,aplikasi

## 1. PENDAHULUAN

## 1.1 Latar Belakang
Radio merupakan salah satu media yang dapat digunakan untuk menyiarkan informasi maupun sarana hiburan bagi masyarakat umum. Jarak yang jauh dan kondisi cuaca yang  buruk dapat  menyebabkan frekwensi radio tersebut kurang terjangkau oleh pendengar radio, sehingga suara radio yang diterima kurang jelas. Selain itu  radio  tidak  dapat  dinikmati  jika  radio  tersebut  dalam  keadaan  offline  atau  sedang  tidak  ada  siaran.Hal tersebut merupakan kendala yang dapat terjadi pada penggunaan radio secara konvensional

## 1.2 Tujuan Penulisan
Aplikasi  radio  online  berbasis  web  dapat  menjadi  alternatif  teknologi  yang  dapat  memudahkan masyarakatk agar dapat menikmati beraneka ragam jenis musik dari berbagai wilayah  dengan suara yang jelas melalui  web  radio online yang  dapat  dijangkau  dimana  pun  berada  tentunya  dengan  jaringan  internet  yang memadai .

## 2. METODOLOGI PENELITIAN
Metodologi yang dilakukan dalam penyusunan aplikasi ini melalui tahapan analisis dan  perancangan. 2.1 Analisis Menentukan kebutuhan data dari aplikasi serta perangkat lunak yang dibutuhkan. 2.2 Perancangan
Merancang  struktur  navigasi  dari  aplikasi,  merancang  tampilan  antar  muka  aplikasi.,  pembuatan  radio, pembuatan website.

## 3. PEMBAHASAN

## 3.1 Gambaran  Aplikasi
Dalam pembuatan website radio online diperlukan perancangan sebuah website yang user friendly agar user mendapatkan kenyamanan dan kemudahan dalam mengakses web. Website ini melalui beberapa tahapan untuk  mempermudah  dalam  perancangan  dan  pembuatannya.  Tahapan  dimulai  dari  pembuatan  struktur navigasi,  storyboard,  perancangan  tampilan,  langkah  pembuatan  radio,  langkah  pembuatan  web.  Website radio online ini  terdiri dari beberapa menu utama  yang berisi  menu  home, profile, entertainment, chart dan contact me .

## 3.2 Struktur Navigasi
Struktur navigasi website radio online ini adalah struktur navigasi campuran, yang dapat dilihat pada gambar 1
Setelah  itu  membuat  rancangan  struktur  navigasi  admin  yang  akan  digunakan  oleh  admin  dalam Shoutcast,  yaitu  pada  streaming  radionya.  Pada  struktur  navigasi  admin  ini,  digunakan  struktur  navigasi hirarki .
Index Home Profile Entertainment Music Streaming Radio Gambar 1 Struktur Navigasi Website radio online Contact Me Chart

## 3.3 Rancangan Antar Muka Aplikasi

## a. Rancangan Halaman Home
Halaman  ini  adalah  halaman  yang  pertama  kali  diakses  oleh  user  dimana  pada  halaman  ini  terdapat gambar header web radio online, text yang berisi mengenai beberapa info dan berita. Maka pada tampilan utama halaman ini user dapat mengakses menu profile, entertainment, chart, dan contact me. Di halaman utama ini pun terdapat aplikasi chatting. Rancangan tampilannya ada pada gambar 3 di bawah ini.

## Keterangan:
Logo: berupa gambar atau simbol dan nama website. Image1: gambar atau header untuk memperindah tampilan website. Image2: gambar yang berfungsi sama untuk memperindah tampilan website. Text: kotak teks ini berisi beberapa info dan berita.
Gambar 2 Struktur Navigasi Admin pada Shoutcast Index Admin Login Home
Listeners Tail Logfile View Logfile Ban List Reserve Ip List Logout Home Profile Chart Entertainment Contact  Me Gambar 3 Rancangan Halaman Home Image2 Logo Image1 Text Chat
Chat: kotak ini berisi aplikasi chat. Alat untuk berkomunikasi antara user dengan admin yang berfungsi untuk request lagu.

## b. Rancangan Halaman Profile
Halaman  ini  berisi  tampilan  yang  memberisi  mengenai  kilasan  pembuat  radio  online  dan  keterangan singkat mengenai radio. Rancangan tampilannya seperti pada gambar 4
t.
Pada halaman ini yang berbeda hanya pada text Text: kotak teks ini berisikan mengenai profil penulis dan radio online-nya.

## c. Rancangan Halaman Entertainment
Pada halaman  entertainment terdapat dua menu dropdown, yaitu streaming radio dan music. Di bawah ini  merupakan  rancangan  tampilan  yang  akan  muncul  jika  user  mengklik  menu  entertainment.  Rancangan tampilannya pada gambar 5
Link 1
Home Profile Chart Entertainment Contact  Me Gambar 4  Rancangan Halaman Profile Image2 Logo Image1 Text Chat Home Profile Chart Entertainment Contact  Me Link 1 Gambar 5 Rancangan Halaman Entertainment Image2 Link2 Logo Image1 Text Chat
Keterangan: Logo: berupa gambar atau simbol dan nama website. Image1: gambar atau header untuk memperindah tampilan website. Image2: gambar untuk memperindah tampilan website. Text: kotak teks ini berisikan penjelasan dan informasi mengenai hiburan apa saja yang diberikan oleh website ini pada user.
Link1: link ini dapat menghubungkan ke salah satu hiburan yang disediakan oleh website ini, yaitu link untuk menuju ke halaman music.
Link2: link ini dapat menghubungkan ke salah satu hiburan yang disediakan oleh website ini, yaitu link untuk menuju ke halaman streaming radio.
Chat: kotak ini berisi aplikasi chat. Alat untuk berkomunikasi antara user dengan admin yang berfungsi untuk request lagu.

## d. Rancangan Halaman Streaming Radio
Pada tampilan rancangan streaming radio berikut terdapat aplikasi radio yang digunakan langsung oleh user  untuk  mengakses,  mendengarkan  radio.  Berikut  rancangan  tampilan  streaming  radio,  dapat  dilihat  pada gambar 6
Keterangan:
Radio: kotak radio di atas menampilkan aplikasi radio yang dapat langsung dinikmati oleh user.

## e. Rancangan Halaman Music
Rancangan  berikut  ini  merupakan  rancangan  halaman  music,  yang  menampilkan  berbagai  macam music yang telah disediakan oleh admin untuk para pendengar pengunjung website radio online. Dalam halaman music  ini  terdapat  aplikasi  music  yang  bisa  langsung  dimainkan  oleh  user.  Halaman  music  ini  dibuat  khusus bagi para pendengar yang bertujuan agar user dapat bisa mengakses meskipun website ini dalam keadaan offline atau tidak siaran. Rancangan tampilan halaman music dapat dilihat pada gambar 7.
Gambar 6 Rancangan Halampilan Streaming Radio Streaming Radio  Radio
Keterangan:
List  Music: berisikan  judul  lagu  beserta  nama  penyanyi  yang  disertai  dengan  aplikasi  music  yang  dapat langsung dinikmati oleh user.

## f. Rancangan Halaman Chart
Pada halaman ini berisi mengenai daftar urutan lagu-lagu yang disortir berdasarkan dari seringnya lagu yang dipinta oleh para pendengar pengunjung website radio online., dapat dilihat pada gambar 8
.
Keterangan:
Logo: berupa gambar atau simbol dan nama website. Image1: gambar atau header untuk memperindah tampilan website.
Gambar 8 Rancangan Tampilan Chart
Gambar 7 Rancangan Halaman Music Music    List Music  
Home Profile Chart Entertainmen t Contact  Me Image2 Logo Image1 Text Chat
Image2: gambar untuk memperindah tampilan website. Teks: kotak teks ini berisikan mengenai daftar lagu-lagu yang disusun secara terurut berdasarkan dari lagu yang paling sering direquest dan daftar lagu-lagu terbaru.
Chat: kotak ini berisi aplikasi chat. Alat untuk berkomunikasi antara user dengan admin yang berfungsi untuk request lagu.

## g. Rancangan Halaman Contact Me
Halaman ini digunakan untuk user yang ingin berinteraksi dengan admin. Pada halaman ini berisi form yang  terdiri  email  user,  subject  dan  message  yang  telah  disediakan  dan  dapat  diisi  langsung  oleh  user. Rancangan tampilan contact me seperti terlihat pada gambar 9

## Keterangan :
Logo: berupa gambar atau simbol dan nama website. Image1: gambar atau header untuk memperindah tampilan website. Image2: gambar untuk memperindah tampilan website. Text Box1: kotak teks ini berisikan email user. Text Box2: kotak teks ini berisikan subjek email. Text Box3: kotak teks ini berisikan isi pesan. Button: merupakan button send. Chat: kotak ini berisi aplikasi chat. Alat untuk berkomunikasi antara user dengan admin yang berfungsi untuk request lagu.
Entertainment Contact Me Logo Home Chart Profile Gambar 9 Rancangan Halaman Contact Me Text Box2 Text Box3 Text Box1 Button Image2 Image1 Chat

## Gambar 10 Tampilan Halaman Home

## 3.4 Pembuatan Radio
Langkah  pertama  yang  dilakukan  adalah  mengunduh  software  Putty  yang berfungsi  sebagai penghubung  ke  virtual  private  server  bertujuan  untuk  menginstall  Shoutcast  di  dalam  server. Langkah selanjutnya bila software Putty telah berhasil login adalah mengunduh aplikasi untuk system radio online yaitu Shoutcast  yang  menyediakan  free  aplikasi  untuk  radio  online.  Kemudian  tahap  berikutnya  adalah  mengunduh shoutcast ke VPS (virtual private server) . Shoutcast yang berhasil diunduh tampilannya dapat langsung dilihat menggunakan  browser . Langkah s elanjutnya  yang  dilakukan  adalah  mengunduh  Sam  Broadcaster  sebagai pemutar file musiknya. Dengan Sam Broadcaster ini kita bisa melakukan pembicaraan seperti layaknya penyiar
radio pada umumnya dengan modal microphone, karena Sam Broadcaster ini dilengkapi dengan fitur FX Audio . Sam  Broadcaster  dan  Shoutcast  yang  telah  selesai  dikoneksikan  dan  diatur  pengaturannya  ke  virtual  private server dengan baik, sudah dapat digunakan. Siaran yang dilakukan dengan mengguakan Sam Broadcaster juga sudah dapat didengar oleh user dengan mengetikkan alamat pada bagian address di browser.

## 3.5 Pembuatan Website
Setelah  pembuatan  radio  dan  semua  aplikasi  yang  mendukung  radio  online  telah  terkoneksi  dengan baik, dilanjutkan dengan tahap pembuatan tampilan websitenya. Penulis membuat halaman website radio online dengan menggunakan notepad. Cara dalam penggunaannya terbagi menjadi 2, yaitu untuk pembuatan halaman script  html  dengan  menggunakan  notepad  dan  untuk  menampilkan  halaman  yang  telah  dibuat  dapat  dilihat dengan  menggunakan  browser.  Website  radio  online  ini  menggunakan  PHP  sebagai  bahasa  pemrograman pembantu untuk mengkoneksikan halaman dengan database di dalam SQL agar dapat saling terintegrasi. Untuk menuliskan script PHP, digunakan notepad dan untuk mendesain gambar yang terdapat pada website digunakan Adobe Photoshop CS5. Hasil dari implementasi rancangan tersebut adalah:

## Gambar 11 Tampilan Halaman Profile
Gambar 12 Tampilan Halaman Entertainment
Gambar 13 Tampilan Halaman Streaming Radio
Gambar 14 Tampilan Halaman Musik
Gambar 15  Tampilan Halaman Chart

## Gambar 16  Tampilan Halaman Contact Us

## 3.6 Perangkat Pendukung
Pada  pembuatan website  radio  online ini,  dibutuhkan  komponen-komponen  yang  memadai  agar hardware beserta software yang  akan  digunakan  dapat  berjalan  dengan  baik.  Adapun  kebutuhan  perangkat pendukung yang diperlukan adalah sebagai berikut :
a. Perangkat Pendukung Hardware
 Memory 3072MB RAM.
 Procesoor Intel ® Core ™ 2Duo CPU T6400 @2.00GHz (2 CPUs), ~2.0GHz.
 Operating System Windows 7 Ultimate 32-bit.
b. Perangkat Pendukung Software
 PHP untuk pemilihan bahasa pemrograman.
 Adobe Photoshop sebagai editor grafis.
 XAMPP sebagai server yang berdiri sendiri (localhost).
 Putty sebagai penghubung computer dengan remote server.
 VPS  adalah  server  yang  berguna  untuk  menampilkan  segala  sesuatu  kepada  user  yang  terhubung  ke internet.
 Shoutcast sebagai stream audio.
 Sam Broadcaster sebagai media siaran radio

## 4. PENUTUP

## 4.1 Kesimpulan
Berdasarkan  uraian  dalam  bab-bab  sebelumnya,  maka  dapat  ditarik  kesimpulan  bahwa  website  radio online ini dibuat untuk dapat mengembangkan teknologi radio yang dulunya disajikan secara konvensional yang sekarang dapat dinikmati secara online
Pembuatan website radio online ini memiliki keunggulan dapat memudahkan para pencinta musik agar bisa  mendengarkan  radio  dimana  pun  pendengar  berada  tanpa  harus  mengalami  kendala  dengan  suara  yang kurang  begitu  jelas,  tersedianya  aplikasi  chat  untuk  memesan  lagu  dan  radio  online  ini  tetap  bisa  dinikmati meskipun sedang dalam keadaan offline atau sedang tidak ada siaran, pengunjung tetap bisa mendengarkan lagu yang dapat pengunjung pilih  berdasarkan lagu  yang sudah  disediakan di  website tersebut. Ada pun kelemahan dari website radio online ini, yaitu masih sedikitnya fitur yang disediakan oleh website ini dan tampilan website yang masih sederhana 4.2 Saran
Aplikasi  radio  online  ini  masih  kurang  sempurna.  Oleh  sebab  itu,  penulis  berharap  agar  aplikasi  ini dapat  dikembangkan  lebih  baik  lagi,  supaya  memiliki  fitur  yang  lebih  lengkap,  kinerja  web  radio  yang  lebih baik, dan tampilan yang lebih menarik untuk ke depannya

## 5. DAFTAR PUSTAKA
[1] Johan Saputra. “Photoshop Urban Style”. Elex Media Komputindo. Jakarta. 2010 [2] Lukmanul Hakim. “Bikin Website Super Keren dengan PHP & JQuery”. Lokomedia. Yogyakarta. 2010 [3] Rosihan Ari Yuana,. “67 Trik & Ide Brilian Master PHP”. Lokomedia. Yogyakarta. 2010 [4] Wardana. ”Menjadi Master PHP dengan Framework Codeigniter”, Elex Media Komputindo. Jakarta. 2010 [5] Wiwit Siswoutomo, “PHP Enterprise: Kiat jitu membangun web skala besar, PT.  Elex Media Komputindo. Jakarta. 2005 [6] Sam Broadcaster. http://www.mkwingzero.com . 5 Mei 2011
[7] Shoutcast. http://prikik.wordpress.com . 12 Mei 2011
[8] Putty. http://ibasbloger.blogspot.com . 12 Mei 2011