Institutional Repository | Satya Wacana Christian University: Pemodelan Audio Player Berbasis Web dengan Menggunakan HTML 5
Pemodelan Audio Player Berbasis Web
Dengan Menggunakan HTML 5
Skripsi
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Oleh :
Albertus Sugianto
NIM : 672004059
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Januari 2012
i
ii
Pernyataan
Tugas akhir yang berikut ini :
Judul
: Rancang Bangun Audio Player Berbasis
Web dengan menggunakan HTML 5.
Pembimbing
: 1. Suprihadi, S.Si., M.Kom.
2. Yos Richard Beeh, ST., MCs.
adalah benar hasil karya saya :
Nama
: Albertus Sugianto
NIM
: 672004059
saya menyatakan tidak mengambil sebagian atau seluruhnya dari
hasil karya orang lain kecuali sebagaimana yang tertulis pada daftar
pustaka.
Pernyataan ini dibuat dengan sebenar-benarnya sesuai dengan
ketentuan yang berlaku dalam penulisan karya ilmiah.
Salatiga, Januari 2012
(Albertus Sugianto)
iii
iv
Kata Pengantar
Puji syukur kepada Tuhan Yang Maha Esa, atas berkat dan
rahmat-Nya, sehingga dapat menyelesaikan laporan Tugas Akhir
yang berjudul “Membangun Audio Player Berbasis Web dengan
menggunakan HTML 5”.
Tujuan penyusunan Tugas Akhir ini yaitu guna memenuhi
salah satu syarat kelulusan mahasiswa Fakultas Teknologi Informasi
Program Studi Teknik Informatika untuk memperoleh Gelar Sarjana
Komputer.
Penulis juga berterima kasih kepada seluruh pihak yang telah
mendukung Tugas Akhir ini, sehingga penulis dapat menyelesaikan
Tugas Akhir dan menulis laporan Tugas akhir tanpa suatu halangan
apapun. Pihak tersebut antara lain :
1. Bapak Andeka Rocky Tanaamah, S.E., M.Cs., selaku Dekan
Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
Salatiga.
2. Bp. Dian W. Chandra, S.Kom., M.Cs., selaku Ketua Program
Studi Teknik Informatika, Fakultas Teknologi Informasi,
Universitas Kristen Satya Wacana.
3. Bapak Suprihadi, S.Si., M.Kom., selaku Dosen Pembimbing 1
yang telah memberikan bimbingan dan arahan sehingga penulis
dapat menyelesaikan tugas akhir ini.
4. Bapak
Yos
Richard
Beeh,
ST.,
M.Cs.,
selaku
Dosen
Pembimbing 2 yang telah memberikan bimbingan dan motivasi
sehingga penulis dapat menyelesaikan tugas akhir.
v
5. Seluruh Staff Pengajar Fakultas Teknologi Informasi yang telah
memberikan pengetahuan dan saran selama belajar di Fakultas
Teknologi Informasi Universitas Kristen Satya Wacana.
6. Ayah dan ibu tersayang yang telah memberikan dukungan serta
menyediakan sarana dan prasarana kepada penulis sehingga
penulis dapat menyelesaikan tugas akhir ini dengan baik.
7. Kakak tersayang (Lina Novena). Terima kasih buat dukungan
dan bantuannya selama menyusun skripsi.
8. Teman-teman terbaikku yang telah memberikan saran dan
dukungan sehingga penulis dapat menyelesaikan tugas akhir ini.
9. Semua pihak yang telah membantu dalam proses penulisan
Tugas Akhir ini yang tidak dapat disebutkan satu persatu.
Salatiga, Januari 2012
Albertus Sugianto
Penulis
vi
Daftar Isi
Hal
Halaman Judul ...........................................................................
Halaman Pengesahan .................................................................
Halaman Pernyataan ..................................................................
Halaman Persetujuan Publikasi ..................................................
Kata Pengantar ...........................................................................
Daftar Isi ....................................................................................
Daftar Gambar ...........................................................................
Daftar Kode Program .................................................................
Daftar Tabel ................................................................................
Abstract ......................................................................................
Bab 1 Pendahuluan ...................................................................
1.1 Latar Belakang Masalah ..........................................
1.2 Rumusan Masalah ...................................................
1.3 Batasan Masalah .....................................................
1.4 Tujuan Penelitian ....................................................
1.5 Manfaat Penelitian ...................................................
1.6 Metode Penelitian ....................................................
1.7 Sistematika Penulisan .............................................
Bab 2 Landasan Teori ...............................................................
2.1 Penelitian Terdahulu ...............................................
2.2 HTML .....................................................................
2.3 Multimedia ..............................................................
2.4 JavaScript .................................................................
2.5 MP3 .........................................................................
Bab 3 Metode dan Rancangan Sistem ......................................
3.1 Metode Rancangan Sistem ......................................
3.1.1 Pengumpulan Kebutuhan (Requirements) .....
3.1.2 Rancangan (Design) .......................................
3.1.3 Evaluasi Prototype .........................................
3.2 Rancangan Sistem ...................................................
3.2.1 Use Case Diagram .........................................
3.2.2 Activity Diagram ...........................................
3.2.3 Sequence Diagram ........................................
3.3 Rancangan antar muka .............................................
Bab 4 Hasil dan Pembahasan ...................................................
4.1 Implementasi Sistem ...............................................
4.1.1 User Interface Web Audio Player .................
vii
i
ii
iii
iv
v
vii
ix
x
xi
xii
1
1
2
2
3
3
4
5
7
7
8
9
10
11
13
13
14
15
16
16
16
19
22
24
27
27
27
4.1.2 User Interface Upload lagu ...........................
4.1.3 User Interface hasil upload ...........................
4.1.4 User Interface Audio Library to Playlist.......
4.1.5 User Interface play audio ..............................
4.2 Hasil dan Pembahasan ............................................
4.2.1 Upload file MP3 ............................................
4.2.2 Memuat file MP3 di Server ke AudioLibrary
4.2.3 Memainkan file MP3 yang ada di Playlist ...
4.2.4 Menghapus file MP3 dari Playlist..................
4.2.5 Sync audio library to server ...........................
4.3 Pengujian Sistem ......................................................
Bab 5 Simpulan dan Saran .......................................................
5.1 Simpulan .................................................................
5.2 Saran ........................................................................
Daftar Pustaka
viii
28
29
30
32
33
33
37
40
43
45
45
49
49
49
Daftar Gambar
Hal
Gambar 3.1
Gambar 3.2
Gambar 3.3
Gambar 3.4
Gambar 3.5
Gambar 3.6
Gambar 3.7
Gambar 4.1
Gambar 4.2
Gambar 4.3
Gambar 4.4
Gambar 4.5
Gambar 4.6
Gambar 4.7
Gambar 4.8
Gambar 4.9
Prototype Model .................................................
Use Case Diagram .............................................
Activity Diagram Upload Data ...........................
Activity Diagram Play Music .............................
Sequence Diagram Upload data .........................
Sequence Diagram Play Music ..........................
Rancangan antarmuka Web Audio Player ...........
User Interface Web Audio Player .......................
User Interface Drag and Drop upload lagu .......
User Interface Pilih berkas .................................
User Interface Hasil upload ...............................
User Interface Drag and Drop to playlist ...........
User interface Hasil Drag and Drop to playlist .
User Interface Add selcted item to playlist ..........
User Interface Hasil Add selcted item to playlist
User Interface Play audio ...................................
ix
13
17
20
21
22
23
25
27
28
29
29
30
31
31
32
32
Daftar Kode Program
Hal
Kode Program 4.1
Kode Program 4.2
Kode Program 4.3
Kode Program 4.4
Kode Program 4.5
Kode Program 4.6
Kode Program 4.7
Kode Program 4.8
Kode Program 4.9
Upload File MP3 ....................................
Update File XML ....................................
Generate Item Audio ..............................
Mengambil Nilai Id Item Audio Library .
Refresh File .............................................
Drag and Drop Library to Playlist .........
Play File MP3 .........................................
Menghapus File MP3 dari Playlist ..........
Sinkronisasi Audio Library to Server ......
x
34
35
36
37
38
39
42
44
45
Daftar Tabel
Hal
Tabel Uji coba sistem beradasarkan user friendly ......................... 45
Tabel Uji coba sistem berdasarkan penggunaan memory ............. 46
Tabel Pengujian Validitas Proses Sistem ...................................... 47
xi
Abstract
The development of technological information and computer encouraged the
appearance of new application in the society. As an example audio system player.
The audio player system that based on web is using HTML5 and
JavaScript. The methodology used in this application program system based on
black box testing method, it focused on the needs of fungtional application. This
methodology / this research made by giving and produce output which
appropriate to each function in every module. Because of the appropriate between
the input and the output this program expected to suite the specification
Keywords : HTML5, JavaScript, Audio Player.
Abstrak
Perkembangan teknologi informasi dan komputer yang pesat telah memacu
munculnya berbagai aplikasi baru dalam berbagai bidang kehidupan masyarakat.
Seperti contohnya sistem audio player berbasis web. Sistem audio player
berbasiskan web ini dirancang dengan menggunakan HTML5 dan JavaScript.
Pengujian hasil rancangan program aplikasi sistem audio player berbasis web ini
menggunakan metode black box testing yang menitikberatkan pada kebutuhan
fungsional aplikasi. Pengujian ini dilakukan dengan memberikan masukan dan
menghasilkan keluaran yang sesuai dengan fungsi-fungsi dari tiap-tiap modul.
Karena dengan adanya kesesuaian antara masukan dan keluaran, maka program
yang dirancang telah sesuai dengan spesifikasi yang diharapkan.
Kata Kunci : HTML5, JavaScript, Audio Player.
xii
Dengan Menggunakan HTML 5
Skripsi
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Oleh :
Albertus Sugianto
NIM : 672004059
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
Januari 2012
i
ii
Pernyataan
Tugas akhir yang berikut ini :
Judul
: Rancang Bangun Audio Player Berbasis
Web dengan menggunakan HTML 5.
Pembimbing
: 1. Suprihadi, S.Si., M.Kom.
2. Yos Richard Beeh, ST., MCs.
adalah benar hasil karya saya :
Nama
: Albertus Sugianto
NIM
: 672004059
saya menyatakan tidak mengambil sebagian atau seluruhnya dari
hasil karya orang lain kecuali sebagaimana yang tertulis pada daftar
pustaka.
Pernyataan ini dibuat dengan sebenar-benarnya sesuai dengan
ketentuan yang berlaku dalam penulisan karya ilmiah.
Salatiga, Januari 2012
(Albertus Sugianto)
iii
iv
Kata Pengantar
Puji syukur kepada Tuhan Yang Maha Esa, atas berkat dan
rahmat-Nya, sehingga dapat menyelesaikan laporan Tugas Akhir
yang berjudul “Membangun Audio Player Berbasis Web dengan
menggunakan HTML 5”.
Tujuan penyusunan Tugas Akhir ini yaitu guna memenuhi
salah satu syarat kelulusan mahasiswa Fakultas Teknologi Informasi
Program Studi Teknik Informatika untuk memperoleh Gelar Sarjana
Komputer.
Penulis juga berterima kasih kepada seluruh pihak yang telah
mendukung Tugas Akhir ini, sehingga penulis dapat menyelesaikan
Tugas Akhir dan menulis laporan Tugas akhir tanpa suatu halangan
apapun. Pihak tersebut antara lain :
1. Bapak Andeka Rocky Tanaamah, S.E., M.Cs., selaku Dekan
Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
Salatiga.
2. Bp. Dian W. Chandra, S.Kom., M.Cs., selaku Ketua Program
Studi Teknik Informatika, Fakultas Teknologi Informasi,
Universitas Kristen Satya Wacana.
3. Bapak Suprihadi, S.Si., M.Kom., selaku Dosen Pembimbing 1
yang telah memberikan bimbingan dan arahan sehingga penulis
dapat menyelesaikan tugas akhir ini.
4. Bapak
Yos
Richard
Beeh,
ST.,
M.Cs.,
selaku
Dosen
Pembimbing 2 yang telah memberikan bimbingan dan motivasi
sehingga penulis dapat menyelesaikan tugas akhir.
v
5. Seluruh Staff Pengajar Fakultas Teknologi Informasi yang telah
memberikan pengetahuan dan saran selama belajar di Fakultas
Teknologi Informasi Universitas Kristen Satya Wacana.
6. Ayah dan ibu tersayang yang telah memberikan dukungan serta
menyediakan sarana dan prasarana kepada penulis sehingga
penulis dapat menyelesaikan tugas akhir ini dengan baik.
7. Kakak tersayang (Lina Novena). Terima kasih buat dukungan
dan bantuannya selama menyusun skripsi.
8. Teman-teman terbaikku yang telah memberikan saran dan
dukungan sehingga penulis dapat menyelesaikan tugas akhir ini.
9. Semua pihak yang telah membantu dalam proses penulisan
Tugas Akhir ini yang tidak dapat disebutkan satu persatu.
Salatiga, Januari 2012
Albertus Sugianto
Penulis
vi
Daftar Isi
Hal
Halaman Judul ...........................................................................
Halaman Pengesahan .................................................................
Halaman Pernyataan ..................................................................
Halaman Persetujuan Publikasi ..................................................
Kata Pengantar ...........................................................................
Daftar Isi ....................................................................................
Daftar Gambar ...........................................................................
Daftar Kode Program .................................................................
Daftar Tabel ................................................................................
Abstract ......................................................................................
Bab 1 Pendahuluan ...................................................................
1.1 Latar Belakang Masalah ..........................................
1.2 Rumusan Masalah ...................................................
1.3 Batasan Masalah .....................................................
1.4 Tujuan Penelitian ....................................................
1.5 Manfaat Penelitian ...................................................
1.6 Metode Penelitian ....................................................
1.7 Sistematika Penulisan .............................................
Bab 2 Landasan Teori ...............................................................
2.1 Penelitian Terdahulu ...............................................
2.2 HTML .....................................................................
2.3 Multimedia ..............................................................
2.4 JavaScript .................................................................
2.5 MP3 .........................................................................
Bab 3 Metode dan Rancangan Sistem ......................................
3.1 Metode Rancangan Sistem ......................................
3.1.1 Pengumpulan Kebutuhan (Requirements) .....
3.1.2 Rancangan (Design) .......................................
3.1.3 Evaluasi Prototype .........................................
3.2 Rancangan Sistem ...................................................
3.2.1 Use Case Diagram .........................................
3.2.2 Activity Diagram ...........................................
3.2.3 Sequence Diagram ........................................
3.3 Rancangan antar muka .............................................
Bab 4 Hasil dan Pembahasan ...................................................
4.1 Implementasi Sistem ...............................................
4.1.1 User Interface Web Audio Player .................
vii
i
ii
iii
iv
v
vii
ix
x
xi
xii
1
1
2
2
3
3
4
5
7
7
8
9
10
11
13
13
14
15
16
16
16
19
22
24
27
27
27
4.1.2 User Interface Upload lagu ...........................
4.1.3 User Interface hasil upload ...........................
4.1.4 User Interface Audio Library to Playlist.......
4.1.5 User Interface play audio ..............................
4.2 Hasil dan Pembahasan ............................................
4.2.1 Upload file MP3 ............................................
4.2.2 Memuat file MP3 di Server ke AudioLibrary
4.2.3 Memainkan file MP3 yang ada di Playlist ...
4.2.4 Menghapus file MP3 dari Playlist..................
4.2.5 Sync audio library to server ...........................
4.3 Pengujian Sistem ......................................................
Bab 5 Simpulan dan Saran .......................................................
5.1 Simpulan .................................................................
5.2 Saran ........................................................................
Daftar Pustaka
viii
28
29
30
32
33
33
37
40
43
45
45
49
49
49
Daftar Gambar
Hal
Gambar 3.1
Gambar 3.2
Gambar 3.3
Gambar 3.4
Gambar 3.5
Gambar 3.6
Gambar 3.7
Gambar 4.1
Gambar 4.2
Gambar 4.3
Gambar 4.4
Gambar 4.5
Gambar 4.6
Gambar 4.7
Gambar 4.8
Gambar 4.9
Prototype Model .................................................
Use Case Diagram .............................................
Activity Diagram Upload Data ...........................
Activity Diagram Play Music .............................
Sequence Diagram Upload data .........................
Sequence Diagram Play Music ..........................
Rancangan antarmuka Web Audio Player ...........
User Interface Web Audio Player .......................
User Interface Drag and Drop upload lagu .......
User Interface Pilih berkas .................................
User Interface Hasil upload ...............................
User Interface Drag and Drop to playlist ...........
User interface Hasil Drag and Drop to playlist .
User Interface Add selcted item to playlist ..........
User Interface Hasil Add selcted item to playlist
User Interface Play audio ...................................
ix
13
17
20
21
22
23
25
27
28
29
29
30
31
31
32
32
Daftar Kode Program
Hal
Kode Program 4.1
Kode Program 4.2
Kode Program 4.3
Kode Program 4.4
Kode Program 4.5
Kode Program 4.6
Kode Program 4.7
Kode Program 4.8
Kode Program 4.9
Upload File MP3 ....................................
Update File XML ....................................
Generate Item Audio ..............................
Mengambil Nilai Id Item Audio Library .
Refresh File .............................................
Drag and Drop Library to Playlist .........
Play File MP3 .........................................
Menghapus File MP3 dari Playlist ..........
Sinkronisasi Audio Library to Server ......
x
34
35
36
37
38
39
42
44
45
Daftar Tabel
Hal
Tabel Uji coba sistem beradasarkan user friendly ......................... 45
Tabel Uji coba sistem berdasarkan penggunaan memory ............. 46
Tabel Pengujian Validitas Proses Sistem ...................................... 47
xi
Abstract
The development of technological information and computer encouraged the
appearance of new application in the society. As an example audio system player.
The audio player system that based on web is using HTML5 and
JavaScript. The methodology used in this application program system based on
black box testing method, it focused on the needs of fungtional application. This
methodology / this research made by giving and produce output which
appropriate to each function in every module. Because of the appropriate between
the input and the output this program expected to suite the specification
Keywords : HTML5, JavaScript, Audio Player.
Abstrak
Perkembangan teknologi informasi dan komputer yang pesat telah memacu
munculnya berbagai aplikasi baru dalam berbagai bidang kehidupan masyarakat.
Seperti contohnya sistem audio player berbasis web. Sistem audio player
berbasiskan web ini dirancang dengan menggunakan HTML5 dan JavaScript.
Pengujian hasil rancangan program aplikasi sistem audio player berbasis web ini
menggunakan metode black box testing yang menitikberatkan pada kebutuhan
fungsional aplikasi. Pengujian ini dilakukan dengan memberikan masukan dan
menghasilkan keluaran yang sesuai dengan fungsi-fungsi dari tiap-tiap modul.
Karena dengan adanya kesesuaian antara masukan dan keluaran, maka program
yang dirancang telah sesuai dengan spesifikasi yang diharapkan.
Kata Kunci : HTML5, JavaScript, Audio Player.
xii