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

Christophorus Dwicella Marino

Materai Rp,

6000,-

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 <form> dan <input> ................................................ 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