1 Rancang Bangun Library Web untuk Pembacaan Low Level Programming Language untuk Manipulasi Multimedia Artikel Ilmiah Diajukan kepada Fakultas Teknol...
Rancang Bangun Library Web untuk Pembacaan Low Level Programming Language untuk Manipulasi Multimedia
Artikel Ilmiah
Diajukan kepada Fakultas Teknologi Informasi untuk Memperoleh Gelar Sarjana Komputer
Peneliti : Gregoryan Billy Hananda Deva (672009071) Hendry, M. Kom.
Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen SatyaWacana Salatiga Juli 2013
Rancang Bangun Library Web untuk Pembacaan Low Level Programming Language untuk Manipulasi Multimedia Gregoryan Billy Hananda Deva, 2) Hendry Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Jl. Diponegoro 52-60, Salatiga 50711, Indonesia Email: 1) [email protected], 2) [email protected] 1)
Abstract Multimedia is a way used to present information more interesting and easy to understand Multimedia also became very important in information technology because users need something exciting and easy to use. Now the technology is growing very rapidly with the internet very easily accessible by various people. It can be used to create a web-based multimedia presentation needed for the dissemination of information can be done quickly without relying time and place. Web-based multimedia presentation requires manipulation of multimedia in it, this is usually done by using the Synchronized Multimedia Integration Language (SMIL). SMIL is a low-level programming language that is generally difficult to understand. a web library is designed to help the programmer in term of manipulating multimedia through its function. To use the functions, the programmer only need to call the functions within the system that is being made. Keywords : Library, Web, HLWDL, SMIL Abstrak Multimedia adalah suatu cara yang digunakan untuk mempresentasikan informasi agar lebih menarik dan mudah dimengerti. Multimedia juga menjadi sangat penting dalam teknologi informasi karena user butuh sesuatu yang menarik dan mudah digunakan. Sekarang ini teknologi sudah berkembang sangat pesat dengan adanya internet yang sangat mudah diakses oleh berbagai kalangan masyarakat. Hal ini dapat dimanfaatkan untuk membuat sebuah presentasi multimedia berbasis web yang dibutuhkan agar penyebaran informasi dapat dilakukan dengan cepat tanpa bergantung waktu dan tempat. Presentasi multimedia berbasis web membutuhkan manipulasi multimedia di dalamnya yang biasa dilakukan dengan menggunakan Synchronized Multimedia Integration Language (SMIL). SMIL merupakan bahasa pemrograman tingkat rendah yang umumnya sulit dipahami. Berdasarkan hal tersebut maka dirancang sebuah library web yang berisi fungsi-fungsi manipulasi multimedia untuk memudahkan programmer dalam memanipulasi multimedia yang akan dipresentasikan ke dalam konten web yang dibangunnya hanya dengan memanggil fungsi-fungsi yang sudah disediakan dalam library web. Kata Kunci : Library, Web, HLWDL, SMIL 1) Mahasiswa Fakultas Teknologi Informasi Program Studi Teknik Informatika, Universitas Kristen Satya Wacana 2) Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana
1. Pendahuluan Perkembangan Teknologi Informasi sekarang ini telah berkembang dengan pesat. Hal ini berpengaruh pula pada perkembangan bahasa pemrograman yang dapat digunakan untuk membangun suatu aplikasi atau software. Low level programming language adalah bahasa pemrograman yang masih menggunakan bahasa mesin, sehingga sulit dimengerti bahkan oleh developer. Hal ini menyebabkan low level programming language jarang dipakai dan mulai ditinggalkan. Bahasa pemgrograman terus dikembangkan agar lebih mudah dimengerti manusia dengan pendekatan pada bahasa sehari-hari, sehingga menghasilkan bahasa pemrograman baru yaitu high level programming language yang jauh lebih mudah dipahami daripada low level programming language. High level programming language inilah yang sampai saat ini digunakan developer untuk membangun sebuah sistem atau aplikasi baik yang berbasis desktop, mobile, atau web. High level programming language biasanya berisi sekumpulan fungsi low level programming language, karena low level programming language banyak akses untuk fungsi-fungsi dasar. High level programming language di dalam aplikasi web dikenal dengan high level web definition language yang dirancang untuk user supaya dapat melakukan perancangan dari web yang mereka inginkan berdasarkan pada bahasa tingkat tinggi, yang lebih mudah dipahami oleh user. High level web definition language ini diharapkan mempermudah user dalam membuat halaman web tanpa harus tahu bahasa tingkat rendah [1]. High level web definition language ini juga memiliki beberapa keterbatasan seperti memanipulasi multimedia untuk membuat presentasi multimedia berbasis web yang biasa dibangun dengan menggunakan Synchronized Multimedia Integration Language (SMIL). SMIL merupakan Extensible Markup Language (XML) yang termasuk dalam bahasa tingkat rendah [2]. Berdasarkan masalah yang ada, maka dalam penelitian ini dibangun sebuah library web untuk pembacaan low level programming language yang digunakan untuk memanipulasi multimedia. 2. Kajian Pustaka Pada penelitian yang berjudul High Level Web Definition Language Incorporating Weighted Tree Similarity Algorithm diperoleh hasil bahwa high level web definition language merupakan bahasa pemrograman tingkat tinggi yang dapat menggerakkan bahasa pemrograman dengan tingkatan yang lebih rendah. High level web definition language mengembangkan bahasa di bawahnya untuk mempermudah user dalam membangun suatu program tanpa harus mempelajari low level programming language yang umumnya sulit untuk dimengerti [1]. Pada penelitian yang berjudul Presentasi Multimedia Berbasis Web menggunakan SMIL, PHP dan MySQL diperoleh hasil bahwa presentasi multimedia berbasis web melalui internet sangat membantu dalam memenuhi kebutuhan informasi dan komunikasi yang mudah diakses dan dikonfigurasi tanpa bergantung pada waktu dan tempat. Penggunaan SMIL, PHP, dan MYSQL
1
memberikan kemudahan dalam pembuatan dan konfigurasi dalam presentasi multimedia berbasis web yang menarik dan interaktif [2]. Penelitian ini menggabungkan penelitian-penelitian sebelumnya dengan membuat library web yang berisi fungsi-fungsi untuk membuat presentasi multimedia berbasis web dengan SMIL. Library web ini memungkinkan user cukup hanya memanggil fungsi-fungsi dalam library web ini dengan high level web definition language, sehingga user tidak perlu mempelajari SMIL untuk dapat membuat presentasi multimedia berbasis web. Library adalah kumpulan fungsi atau prosedur atau modul [3]. Library di dalamnya tersedia beberapa fungsi yang bisa langsung digunakan oleh programmer dengan cara memanggil fungsi yang akan digunakan di dalam kode program yang dibangun. Library ini berisi fungsi-fungsi low level programming language yang bisa digunakan oleh programmer dengan memanggilnya menggunakan high level programming language. Penggunaan library ini akan memudahkan programmer dalam pembuatan program dan mempercepat waktu pengerjaan, karena dengan adanya library ini, programmer tidak perlu mempelajari low level programming language dalam mengembangkan suatu aplikasi atau sistem. Low level programming language dikenal juga sebagai bahasa rakitan (assembly). Bahasa assembly adalah bahasa pemrograman dengan korespondensi satu-satu antara perintah-perintah/pernyataannya dan bahasa mesin komputer [4]. Bahasa pemrograman tingkat rendah ini sulit untuk dipahami karena masih berupa bahasa mesin, sehingga saat ini mulai ditinggalkan. Kelebihan bahasa pemrograman tingkat rendah ini banyak akses untuk fungsi-fungsi dasar seperti fungsi untuk memanipulasi multimedia. Manipulasi multimedia dalam web biasanya dibangun menggunakan SMIL. SMIL merupakan bagian dari XML untuk membuat presentasi multimedia, XML ini tergolong dalam low level programming language. Pengembangan sistem atau aplikasi dapat dimudahkan dengan dibangunnya suatu library yang berisi fungsi-fungsi low level programming language untuk diakses dengan high level programming language, sehingga programmer dapat menggunakan fungsi-fungsi low level programming language tanpa perlu mempelajari low level programming language secara mendalam. Synchronized Multimedia Integration Language (SMIL) memungkinkan pengolahan/manipulasi sederhana dalam presentasi audio visual yang interaktif. SMIL biasanya digunakan untuk presentasi multimedia yang mengintegrasikan audio, video, gambar, atau jenis media lainnya [5]. High level programming language adalah bahasa pemrograman yang mempunyai perintah-perintah handal yang diterjemahkan ke dalam berbagai instruksi mesin [4]. Bahasa pemrograman tingkat tinggi ini sudah dikembangkan dengan pendekatan pada bahasa sehari-hari manusia, sehingga bahasa pemrograman ini mudah dipahami. Bahasa pemrograman tingkat tinggi ini
2
digunakan dalam pembangunan sistem atau aplikasi hingga saat sekarang ini. Bahasa pemrograman tingkat tinggi ini memiliki keterbatasan seperti untuk manipulasi multimedia, karena itu dibutuhkan fungsi-fungsi dalam bahasa pemrograman tingkat rendah untuk melakukan manipulasi multimedia dalam bahasa pemrograman tingkat tinggi. High Level Web Definition Language adalah bahasa tingkat tinggi didalam menghasilkan suatu halaman web [1]. High Level Web Definition Language dirancang untuk mempermudah pembentukan web dengan menggunakan bahasa tingkat tinggi, sehingga user tidak perlu mempelajari bahasa tingkat rendah (javascript, XML dan ruleML) yang sulit untuk dipahami. High Level Web Definition Language menggabungkan kemudahan dari web environment dan compiler optimizer sehingga dapat menghasilkan halaman web dengan kemampuan yang lebih baik. High Level Web Definition Language dikembangkan dengan struktur tree matching parse tree, dan struktur compiler dengan menggunakan struktur dokumen XML untuk pembentukan ruleML, yang berguna untuk menghasilkan dokumen XML dari user menjadi sebuah halaman HTML, yang saat ini banyak disebut sebagai XHTML (Extended Hyper Text Markup Language). 3. Metode dan Perancangan Metode penelitian yang digunakan dalam rancang bangun library web untuk pembacaan low level programming language untuk manipulasi multimedia adalah Modified Waterfall Model. Metode ini mempunyai tahapan pengembangan yang sama dengan metode Waterfall, yakni definisi masalah, analisis kebutuhan, desain purwarupa, implementasi, integrasi dan pengujian, dan pemeliharaan. Modified Waterfall Model biasa disebut juga Whirlpool Model memiliki perbedaan dibandingkan dengan Waterfall Model yaitu pada Whirlpool Model ini dilakukan perulangan pada tahap definisi masalah dan analisis kebutuhan untuk lebih memahami kebutuhan user sehingga berbentuk menyerupai pusaran air (whirlpool) [6]. Modified Waterfall Model/Whirlpool Model dapat dilihat pada Gambar 1.
3
Gambar 1 Bagan Modified Waterfall Model/Whirlpool Model [6]
Tahap-tahap yang dilakukan dalam rancang bangun library web untuk pembacaan low level programming language untuk manipulasi multimedia dengan menggunakan Whirlpool Model adalah : Definisi Masalah Definisi masalah merupakan tahap awal yang dilakukan dalam permodelan whirlpool, pokok masalah apa yang menjadi sebab diperlukannya library web untuk pembacaan low level programming language untuk manipulasi multimedia. Masalah di sini adalah high level web definition language memiliki keterbatasan seperti dalam melakukan manipulasi multimedia yang biasanya dilakukan dengan menggunakan SMIL. SMIL merupakan bagian dari XML untuk presentasi multimedia berbasis web, XML ini tergolong dalam low level programming language yang pada dasarnya mendekati bahasa mesin dan sulit untuk dipahami. Analisis Kebutuhan Analisis kebutuhan merupakan tahap akan dilakukannya analisis kebutuhan apa saja yang dibutuhkan user. Dalam tahapan ini dilakukan pengamatan perkembangan teknologi sampai pada saat ini, serta kebutuhan-kebutuhan dalam memanipulasi multimedia untuk membuat presentasi multimedia berbasis web. Yang dibutuhkan di sini adalah bagaimana membuat presentasi multimedia berbasis web dengan mudah menggunakan high level web definition language.
4
Desain Purwarupa Desain purwarupa merupakan tahap akan dilakukannya perancangan library web untuk pembacaan low level programming language untuk manipulasi multimedia. Desain sistem pada Gambar 2 menggambarkan tindakan yang dapat dilakukan oleh user yaitu programmer. Programmer dapat menggunakan library web dimana di dalamnya terdapat fungsi-fungsi low level programming language yang dapat diakses dengan high level web definition language. Library web membentuk hasil dari manipulasi multimedia dalam file SMIL yang disimpan pada komputer user. User menampilkan hasil dari manipulasi multimedia ke dalam halaman web dengan memuat file SMIL yang sudah terbentuk.
Gambar 2 Desain Sistem
Activity diagram dari perancangan library web untuk pembacaan low level programming language untuk manipulasi multimedia, digunakan untuk menggambarkan aktifitas yang dapat dilakukan oleh aktor dari mulainya aktifitas sampai dengan berakhirnya aktifitas. Aktor pada library web untuk pembacaan low level programming language untuk manipulasi multimedia ini adalah programmer. Activity diagram programmer dapat dilihat pada Gambar 3. Pada Gambar 3 menjelaskan aktifitas yang dapat dilakukan oleh programmer. Programmer dapat memanggil fungsi set_layout, region, par, add_picture, add_mp3, atau add_video. Proses aktifitas akan berhenti apabila programmer memanggil fungsi create_smil.
5
Gambar 3 Activity Diagram Programmer
Implementasi Tahap ini merupakan implementasi dari tahap desain yang sudah dirancang. Untuk dapat dimengerti oleh komputer, maka desain tadi harus diubah ke dalam bahasa pemrograman melalui proses pengkodean. Bahasa pemrograman yang digunakan adalah PHP Hypertext Preprocessor dan Javascript. Integrasi dan Pengujian Tahap integrasi dan pengujian ini merupakan tahap akhir sebelum library web diserahkan kepada user. Fungsi-fungsi dalam library web yang dibuat harus diujicobakan agar terbebas dari error dan hasilnya benar-benar sesuai dengan kebutuhan yang sudah didefinisikan sebelumnya. Setelah uji coba selesai dilakukan, maka library web siap digunakan dan diserahkan kepada user. Pemeliharaan Pemeliharaan diperlukan karena ketika library web digunakan mungkin saja masih ada error kecil yang tidak ditemukan dalam pengujian sebelumnya. Pemeliharaan ini termasuk di dalamnya pengembangan, karena dengan semakin berkembangnya teknologi, maka kebutuhan juga semakin bervariasi. Kebutuhan yang semakin bervariasi ini perlu dipenuhi dengan penambahan fungsi-fungsi lain dalam library web yang telah dibuat.
6
4. Hasil dan Pembahasan Function Set Layout Function set layout adalah fungsi untuk menambah layout dalam file SMIL yang akan dibuat dengan mengeset lebar (width) dan tinggi (height) layout, dapat dilihat pada Kode Program 1. Layout dalam SMIL berfungsi untuk mendefinisikan tempat suatu klip SMIL akan dimunculkan [7]. Fungsi set layout ini menghasilkan script untuk menambahkan layout dalam SMIL yang ditampung dalam variabel bernama tempLayout sebelum nantinya dibentuk ke dalam file SMIL. Kode Program 1 Function Set Layout 1. function set_layout(lebar,tinggi){ 2. tempLayout += "\n"; 4. }
Untuk menggunakan fungsi ini user cukup memanggil dalam kode program dan mengisikan parameternya yaitu lebar (width) dan tinggi (height), contoh pemanggilan dalam button dapat dilihat pada Kode Program 2. Pemanggilan fungsi ini bisa dilakukan lebih dari satu kali tergantung pada berapa layout yang akan dibuat dan tidak selalu harus dipanggil dalam button. Kode Program 2 Pemanggilan Function Set Layout 1.
Hasil pemanggilan fungsi set layout pada Kode Program 2 dalam script SMIL dapat dilihat pada Kode Program 3. Kode Program 3 Hasil Pemanggilan Function Set Layout 1.
width="400" height="300"/>
Function Region Function region adalah fungsi untuk menambahkan region dalam file SMIL yang akan dibuat dengan mengeset id, lebar (width), tinggi (height), batas kiri (left), dan batas atasnya (top), dapat dilihat pada Kode Program 4. Region dalam SMIL berfungsi untuk mengatur posisi, besar, dan skala klip SMIL yang akan ditampilkan [7]. Fungsi region ini menghasilkan script untuk menambahkan region dalam SMIL yang ditampung dalam variabel bernama tempRegion sebelum nantinya dibentuk ke dalam file SMIL. Kode Program 4 Function Region 1. function region(id,lebar,tinggi,kiri,atas){ 2. tempRegion += "\n"; 5. }
7
Untuk menggunakan fungsi ini user cukup memanggil dalam kode program dan mengisikan parameternya yaitu id, lebar (width), tinggi (height), batas kiri (left), dan batas kanan (right), contoh pemanggilan dalam button dapat dilihat pada Kode Program 5. Pemanggilan fungsi ini bisa dilakukan lebih dari satu kali tergantung pada berapa region yang akan dibuat dan tidak selalu harus dipanggil dalam button. Kode Program 5 Pemanggilan Function Region 1.
Hasil pemanggilan fungsi region pada Kode Program 5 dalam script SMIL dapat dilihat pada Kode Program 6. Kode Program 6 Hasil Pemanggilan Function Region 1.
Function Add Video Function add video adalah fungsi untuk menambahkan video dalam dalam region yang sudah dibuat dengan mengeset nama atau path video, id region, waktu mulai (begin), dan durasi, dapat dilihat pada Kode Program 7. Fungsi add video ini menghasilkan script untuk menambahkan video dalam SMIL yang ditampung dalam variabel tempBody karena video ini akan masuk dalam konten body dalam SMIL sebelum nantinya dibentuk ke dalam file SMIL. Video dalam SMIL bisa ditambahkan apabila layout dan region telah ditambahkan sebelumnya, karena video akan ditampilkan di dalam region yang sudah ada dalam SMIL. Kode Program 7 Function Add Video 1. function add_video(nama,reg,begin,dur){ 2. tempBody += "\n"; 10. }
Untuk menggunakan fungsi ini user cukup memanggil dalam kode program dan mengisikan parameternya yaitu nama atau path video, id region, waktu mulai (begin), dan durasi, contoh pemanggilan dalam button dapat dilihat pada Kode Program 8. Pemanggilan fungsi ini bisa dilakukan lebih dari satu kali tergantung pada berapa video yang akan ditampilkan dan tidak selalu harus dipanggil dalam button. Parameter begin dan duration tidak harus diisi apabila video akan ditampilkan penuh seperti aslinya, tetapi bisa diisi apabila video akan dipotong durasinya atau tidak dimulai dari awal. Kode Program 8 Pemanggilan Function Add Video 1.
8
3.
Hasil pemanggilan fungsi add video pada Kode Program 8 dalam script SMIL dapat dilihat pada Kode Program 9. Kode Program 9 Hasil Pemanggilan Function Add Video 1. 2.
Function Par Function par adalah fungsi untuk menambahkan par atau kelompok dalam file SMIL yang akan dibuat dengan mengeset durasi, dapat dilihat pada Kode Program 10. Par dalam SMIL berfungsi untuk mendefinisikan waktu pengelompokan sederhana untuk memutar beberapa elemen dalam waktu yang sama, misalnya menggabungkan slideshow gambar dan MP3 atau memutar dua video secara bersamaan dalam satu layar [7]. Fungsi par ini menghasilkan script untuk menambahkan par dalam SMIL yang ditampung dalam variabel tempPar sebelum nantinya dibentuk ke dalam file SMIL. Kode Program 10 Function Par 1. function par(dur){ 2. tempPar += "\n<par dur=\""+dur+"\">"; 3. }
Untuk menggunakan fungsi ini user cukup memanggil dalam kode program dan mengisikan parameternya yaitu durasi, contoh pemanggilan dalam button dapat dilihat pada Kode Program 11. Pemanggilan fungsi ini bisa dilakukan lebih dari satu kali tergantung pada berapa par yang akan dibuat dan tidak selalu harus dipanggil dalam button. Kode Program 11 Pemanggilan Function Par 1.
Hasil pemanggilan fungsi par pada Kode Program 11 dalam script SMIL dapat dilihat pada Kode Program 12. Kode Program 12 Hasil Pemanggilan Function Par 1. <par dur="25s">
Function Add MP3 Function add MP3 adalah fungsi untuk menambahkan MP3 dalam file SMIL yang akan dibuat dengan mengeset nama atau path MP3, waktu mulai (begin), dan durasi, dapat dilihat pada Kode Program 13. Fungsi add MP3 ini menghasilkan script untuk menambahkan MP3 dalam SMIL yang ditampung dalam variabel tempBody karena MP3 ini akan masuk dalam konten body dalam SMIL sebelum nantinya dibentuk ke dalam file SMIL.
9
Kode Program 13 Function Add MP3 1. function add_mp3(nama,begin,dur){ 2. tempBody += "\n