Institutional Repository | Satya Wacana Christian University: Sistem Pemesanan Dan Pemutaran Lagu Melalui Website Dalam Jaringan Lokal

SISTEM PEMESANAN DAN PEMUTARAN LAGU MELALUI WEBSITE
DALAM JARINGAN LOKAL
Oleh
Christophorus Dwicella Marino
NIM: 622007016

Skripsi
Untuk melengkapi salah satu syarat memperoleh
Gelar Sarjana Teknik
Program Studi Sistem Komputer
Fakultas Teknik Elektro dan Komputer
Universitas Kristen Satya Wacana
Salatiga

Januari 2015

SISTEM PEMESANAN DAN PEMUTARAN LAGU MELALUI WEBSITE
DALAM JARINGAN LOKAL

Oleh
Christophorus Dwicella Marino

NIM : 622007016

Skripsi ini telah diterima dan disahkan
Untuk melengkapi salah satu syarat memperoleh
Gelar Sarjana Teknik
dalam
Konsentrasi Sistem Komputer
Progam Studi Sistem Komputer
Fakultas Teknik Elektronika dan Komputer
Universitas Kristen Satya Wacana
Salatiga

Disahkan oleh:

Pembimbing I

Pembimbing II

Saptadi Nugroho, M.Sc.


Darmawan Utomo, M.Eng.

Tanggal :

Tanggal :

PERNYATAAN BEBAS PLAGIAT
Saya, yang bertanda tangan di bawah ini:
NAMA

: Christophorus Dwicella Marino

NIM

: 622007016

JUDUL SKRIPSI

: Sistem Pemesanan dan Pemutaran Lagu Melalui
Website dalam Jaringan Lokal


Menyatakan bahwa skripsi tersebut di atas bebas plagiat. Apabila ternyata
ditemukan unsur plagiat di dalam skripsi saya, maka saya bersedia mendapatkan
sanksi apapun sesuai aturan yang berlaku.

Salatiga,

Januari 2013

Materai Rp,
6000,Christophorus Dwicella Marino

INTISARI
Pada skripsi ini dibuat sebuah sistem yang dapat menerima pemesanan dan
pemutaran lagu dari user pada sebuah café atau restaurant dengan antarmuka web
yang dapat diakses menggunakan jaringan lokal melalui laptop atau smartphone.
Sistem ini memungkinkan setiap user dengan login yang berbeda memiliki
playlist lagu yang berbeda antara satu user dengan user lainnya.
Terdapat satu buah modul server dan beberapa modul client, dengan cara
kerja sistem adalah modul Cubieboard2 berperan sebagai modul server yang

berfungsi menjadi webserver dan penyimpanan database lagu, sedangkan
Raspberry Pi berperan sebagai modul client yang berfungsi memutar lagu dan
menyimpan playlist lagu yang telah dipilih oleh user. User memesan lagu melalui
tampilan web yang kemudian diterima oleh webserver. Data url dari lagu yang
dipesan akan dikirim ke client untuk diputar dan dimasukkan ke dalam playlist.
Pada hasil pengujian keseluruhan sistem, pemesanan dan pemutaran lagu
berhasil dilakukan melalui laptop dan smartphone dengan tingkat keberhasilan
100%. Pengujian ini dilakukan melalui user dengan login meja yang berbeda,
serta lagu yang dipesan berjumlah lebih dari satu. Pada saat user memilih lagu,
webpage kembali ke pemilihan kategori lagu dan pada saat perpindahan ke lagu
berikutnya, lagu tetap diputar, tetapi webpage harus direfresh agar menampilkan
lagu yang sedang diputar. Untuk lama buffering, terjadi buffering selama sekitar
11 detik. Buffering terjadi pada saat server pertama kali melakukan koneksi
dengan client dan pada saat lagu distop selama sekitar 31 detik.
Kata Kunci : Cubieboard2, Raspberry Pi, dan Pemutar Lagu

ABSTRACT

This system can handle request and play songs from a user at café or
restaurant through website interfaces that can be accessed using local network

with laptop or smartphone.
There is a server module and several client modules. As a server,
Cubieboard2 functions as a web server and storage of the song database. As a
client, Raspberry Pi functions as a media player and save the song playlist that has
been choosen by the user. All user requests are sent to the web server, and then
the web server sends the song url to the client to be played and to be listed on the
playlist.
On the result of testing, the entire system performs the request and plays
songs using local network via laptop and smatphone in which the succes rate is
100%. This testing uses different users and different login at the same time with
more than one song. When the users choose a song, the webpage back to the song
category and when there is a shift from one song to another, the webpage has to be
refreshed to show the status of the song that played. There is buffering about 11
seconds when the client first connects to the server and when the song stops for
about 31 seconds.
Keyword : Cubieboard2, Raspberry Pi, and Song Player

KATA PENGANTAR
Puji dan syukur penulis ucapkan kepada Tuhan Yang Maha Esa atas segala
rahmat yang diberikan kepada penulis sehingga dapat menyelesaikan perancangan

serta penulisan skripsi sebagai syarat untuk menyelesaikan studi di Fakultas
Teknik Elektronika dan Komputer Universitas Kristen Satya Wacana.
Pada kesempatan ini penulis juga hendak mengucapkan terima kasih
kepada berbagai pihak yang baik secara langsung maupun tidak telah membantu
penulis dalam menyelesaikan skripsi ini :
1. Tuhan Yesus dan Bunda Maria terima kasih atas nafas kehidupan,
penyertaan, cobaan, dan rejeki yang telah diberikan, sehingga penulis
mampu untuk menyelesaikan studi demi meraih gelar ST.
2. Papi (almarhum) dan Mami, terima kasih atas semua tetes keringat dan
darah kalian untuk mengkuliahkan anak – anak mu demi menggapai
masa depan. Keringat dan darah yang telah Papi dan Mami keluarkan
akan Rino balas dengan gelar ST. Mbak Icha, Riki, Riko atas doa dan
dukungannya selama ini.
3. Bapak Saptadi Nugroho, M.Sc dan Bapak Darmawan Utomo, M.Eng
selaku pembimbing I dan pembimbing II, terima kasih untuk bimbingan
dan masukannya selama pembuatan skripsi ini.
4. Keluarga besar Bapak Yohanes Susanto terima kasih atas doa dan
dukungannya dan untuk Theresia Setianingtyas terima kasih atas
dukungan dan doanya selama 6 tahun dan selalu menemani selama
penulis membuat skripsi ini.

5. “Pembimbing 3”, Mas Wani ’04, Mas DK ‘04, Mas Daniel ’05, terima
kasih banyak atas saran, masukan, dan bantuannya. Skripsi ini tidak bias
selesai tanpa bantuan kalian.
6. Seluruh staff dosen, karyawan, dan laboran FTEK, Mbak Rista, Mbak
Dita, Mbak Vera.
7. Keluarga besar FTEK angkatan 2007, kenangan kita tidak akan lekang
dimakan waktu hingga ajal menjemput.

8. Penghuni lab skripsi yang tidak dapat penulis sebut satu persatu yang
selalu menemani penulis di hari – hari akhir perjuangan di FTEK.
9. Seluruh keluar besar mahasiswa FTEK atas dukungannya selama penulis
berkuliah di FTEK.
10. Berbagai pihak yang tidak dapat dituliskan satu persatu, penulis
mengucapkan terima kasih.
Penulis menyadari bahwa skripsi ini masih jauh dari kata “sempurna”, oleh
karena itu penulis sangat mengharapkan kritik maupun saran dari pembaca
sekalian sehingga skripsi ini dapat berguna bagi kemajuan teknik elektronika.
Salatiga, Januari 2014

Penulis


DAFTAR ISI
INTISARI ........................................................................................................... i
ABSTRACT ...................................................................................................... ii
KATA PENGANTAR ...................................................................................... iii
DAFTAR ISI ..................................................................................................... v
DAFTAR GAMBAR ....................................................................................... vii
DAFTAR TABEL ............................................................................................ ix
DAFTAR SINGKATAN ................................................................................... x
BAB I

PENDAHULUAN ............................................................................ 1
1.1. Tujuan ..................................................................................... 1
1.2. Latar Belakang ......................................................................... 1
1.3. Spesifikasi Sistem .................................................................... 2
1.4. Sistematika Penulisan .............................................................. 3

BAB II

DASAR TEORI ................................................................................ 4

2.1 Cubieboard2 ............................................................................ 4
2.2 Raspberry Pi ............................................................................ 5
2.3 Web Server .............................................................................. 6
2.4 Apache Web Server ................................................................. 7
2.5 HyperText Markup Language ( HTML ) .................................. 8
2.6 PHP: HyperText Prepocessor ( PHP ) ...................................... 9
2.7 Transmission Control Protocol/Internet Protocol ( TCP/IP ) ..... 10

BAB III PERANCANGAN SISTEM ........................................................... 12
3.1 Gambaran Sistem ................................................................... 12
3.2 Perancangan Perangkat Keras ................................................ 13
3.2.1 Perangkat Keras Modul Server ................................... 13
3.2.2 Perangkat Keras Modul Client .................................... 16
3.3 Perancangan Perangkat Lunak ............................................... 17
3.3.1 Perangkat Lunak Modul Server .................................. 17
3.3.1.1 Perancangan Database .................................. 17
3.3.1.2 Perancangan Tampilan Halaman Web .......... 22

BAB IV PENGUJIAN DAN ANALISIS ...................................................... 26
4.1 Pengujian Web Server ............................................................ 26

4.2 Pengujian Halaman Web ........................................................ 27
4.2.1 Pengujian Halaman “admin.php” ................................ 27
4.2.2 Pengujian Halaman “meja.php” .................................. 29
4.3 Pengujian Pemutaran Lagu ..................................................... 42
4.4 Pengujian Buffering Lagu ....................................................... 43
BAB V

KESIMPULAN DAN SARAN ....................................................... 45
5.1 Kesimpulan ............................................................................ 45
5.2 Saran Pengembangan ............................................................. 46

DAFTAR PUSTAKA ...................................................................................... 47
LAMPIRAN .................................................................................................... 48

DAFTAR GAMBAR

Gambar 2.1.

Cubieboard2 ............................................................................... 4


Gambar 2.2.

Raspberry Pi ............................................................................... 6

Gambar 2.3.

Proses request dari pengguna dan response dari server ............... 7

Gambar 2.4.

Contoh Program PHP di dalam script HTML ............................ 10

Gambar 3.1.

Gambaran keseluruhan sistem yang dirancang .......................... 12

Gambar 3.2.

Aplikasi Win32 Disk Imager ..................................................... 14

Gambar 3.3.

Pengaturan alamat IP dan jaringan internet ............................... 15

Gambar 3.4.

Login ke MYSQL server ........................................................... 18

Gambar 3.5.

ERD Database Music ............................................................... 19

Gambar 3.6.

Membuat Database ................................................................... 19

Gambar 3.7.

Berpindah ke database MUSICS .............................................. 20

Gambar 3.8.

Melihat kolom dari setiap tabel ................................................. 21

Gambar 3.9.

Melihat data tabel ..................................................................... 22

Gambar 3.10. Tampilan halaman login.php ..................................................... 23
Gambar 3.11. Peringatan nomor meja atau password salah .............................. 23
Gambar 3.12. Tampilan halaman meja.php ..................................................... 24
Gambar 3.13. Tampilan halaman admin.php ................................................... 25
Gambar 4.1.

Tampilan halaman web yang muncul pertama kali
yang diakses melalui komputer ................................................. 26

Gambar 4.2.

Halaman admin.php .................................................................. 27

Gambar 4.3.

Coding rand(int A, int B) .......................................................... 29

Gambar 4.4.

Tampilan halaman awal meja.php ............................................. 30

Gambar 4.5.

Coding tag dan ................................................ 30

Gambar 4.6.

Coding PHP pemilihan kategori ................................................ 31

Gambar 4.7.

Coding koneksi database .......................................................... 32

Gambar 4.8.

Coding query dan penampilan daftar artis ................................. 32

Gambar 4.9.

Daftar artis berdasarkan kategori yang dipilih ........................... 33

Gambar 4.10. Coding javascript untuk menampilkan daftar lagu ..................... 34
Gambar 4.11. Coding PHP untuk menampilkan daftar lagu ............................. 35

Gambar 4.12. Daftar lagu berdasarkan artis...................................................... 35
Gambar 4.13. Fungsi javascript penambahan lagu ke dalam playlist ............... 36
Gambar 4.14. Pemilihan lagu dan penambahan ke dalam playlist .................... 37
Gambar 4.15. Tag yang digunakan dalam pemilihan jenis pencarian ............... 38
Gambar 4.16. Coding javascript untuk pemilihan jenis pencarian .................... 38
Gambar 4.17. Coding XML untuk mengirim passingan inputan ke halaman
pencarian .................................................................................. 39
Gambar 4.18. Coding pada halaman pencarian ................................................ 40
Gambar 4.19. Pencarian berdasarkan artis dan lagu ......................................... 41
Gambar 4.20. Sampel lima buah lagu dengan lagu assign key 0 sedang
diputar ...................................................................................... 42
Gambar 4.21. Pemberitahuan proses instalasi .................................................. 48
Gambar 4.22. Tampilan default halaman web saat pertama kali
pemasangan web server ............................................................ 49
Gambar 4.23. Proses inisialisasi keygen ssh .................................................... 50
Gambar 4.24. Koneksi ssh berhasil ................................................................. 51
Gambar 4.25. Pengecekan mpd pada modul client .......................................... 53

DAFTAR TABEL
Tabel 4.1.

Hasil pengujian pengacakan password ...................................... 28

Tabel 4.2.

Pemutaran jumlah lagu ............................................................. 42

Tabel 4.3.

Pengujian lama buffering .......................................................... 43

Tabel 4.3.

Pengujian lama buffering (lanjutan ) ......................................... 44

DAFTAR SINGKATAN
HTML

HyperText Markup Language

PHP

PHP: HyperText Prepocessor

TCP/IP

Transmission Control Protocol/Internet Protocol

PC

Personal Computer

SoC

System on Chip

CPU

Central Processing Unit

GPU

Grapichs Processing Unit

RAM

Random Access Memory

IC

Integrated Circuit

OS

Operating System

SD

Secure Digital

USB

Universal Serial Bus

HTTP

HyperText Transfer Protocol

HTTPS

HyperText Transfer Protocol Secure

SSL

Secure Socket Layer

SSH

Secure Shell

MPD

Music Player Daemon

ERD

Entity Relationship Diagram

XML

Extended Markup Language