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 vii Hal Halaman Judul... i Halaman Pengesahan... ii Halaman Pernyataan... iii Halaman Persetujuan Publikasi... iv Kata Pengantar... v Daftar Isi... vii Daftar Gambar... ix Daftar Kode Program... x Daftar Tabel... xi Abstract... xii Bab 1 Pendahuluan... 1 1.1 Latar Belakang Masalah... 1 1.2 Rumusan Masalah... 2 1.3 Batasan Masalah... 2 1.4 Tujuan Penelitian... 3 1.5 Manfaat Penelitian... 3 1.6 Metode Penelitian... 4 1.7 Sistematika Penulisan... 5 Bab 2 Landasan Teori... 7 2.1 Penelitian Terdahulu... 7 2.2 HTML... 8 2.3 Multimedia... 9 2.4 JavaScript... 10 2.5 MP3... 11 Bab 3 Metode dan Rancangan Sistem... 13 3.1 Metode Rancangan Sistem... 13 3.1.1 Pengumpulan Kebutuhan (Requirements)... 14 3.1.2 Rancangan (Design)... 15 3.1.3 Evaluasi Prototype... 16 3.2 Rancangan Sistem... 16 3.2.1 Use Case Diagram... 16 3.2.2 Activity Diagram... 19 3.2.3 Sequence Diagram... 22 3.3 Rancangan antar muka... 24 Bab 4 Hasil dan Pembahasan... 27 4.1 Implementasi Sistem... 27 4.1.1 User Interface Web Audio Player... 27
4.1.2 User Interface Upload lagu... 28 4.1.3 User Interface hasil upload... 29 4.1.4 User Interface Audio Library to Playlist... 30 4.1.5 User Interface play audio... 32 4.2 Hasil dan Pembahasan... 33 4.2.1 Upload file MP3... 33 4.2.2 Memuat file MP3 di Server ke AudioLibrary 37 4.2.3 Memainkan file MP3 yang ada di Playlist... 40 4.2.4 Menghapus file MP3 dari Playlist... 43 4.2.5 Sync audio library to server... 45 4.3 Pengujian Sistem... 45 Bab 5 Simpulan dan Saran... 49 5.1 Simpulan... 49 5.2 Saran... 49 Daftar Pustaka viii
Daftar Gambar Hal Gambar 3.1 Prototype Model... 13 Gambar 3.2 Use Case Diagram... 17 Gambar 3.3 Activity Diagram Upload Data... 20 Gambar 3.4 Activity Diagram Play Music... 21 Gambar 3.5 Sequence Diagram Upload data... 22 Gambar 3.6 Sequence Diagram Play Music... 23 Gambar 3.7 Rancangan antarmuka Web Audio Player... 25 Gambar 4.1 User Interface Web Audio Player... 27 Gambar 4.2 User Interface Drag and Drop upload lagu... 28 Gambar 4.3 User Interface Pilih berkas... 29 Gambar 4.4 User Interface Hasil upload... 29 Gambar 4.5 User Interface Drag and Drop to playlist... 30 Gambar 4.6 User interface Hasil Drag and Drop to playlist. 31 Gambar 4.7 User Interface Add selcted item to playlist... 31 Gambar 4.8 User Interface Hasil Add selcted item to playlist 32 Gambar 4.9 User Interface Play audio... 32 ix
Daftar Kode Program Hal Kode Program 4.1 Upload File MP3... 34 Kode Program 4.2 Update File XML... 35 Kode Program 4.3 Generate Item Audio... 36 Kode Program 4.4 Mengambil Nilai Id Item Audio Library. 37 Kode Program 4.5 Refresh File... 38 Kode Program 4.6 Drag and Drop Library to Playlist... 39 Kode Program 4.7 Play File MP3... 42 Kode Program 4.8 Menghapus File MP3 dari Playlist... 44 Kode Program 4.9 Sinkronisasi Audio Library to Server... 45 x
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