rancang bangun library web untuk pembacaan low level...

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


Universitas Kristen SatyaWacana

Salatiga

Juli 2013

Rancang Bangun Library Web untuk Pembacaan Low

Level Programming Language untuk Manipulasi

Multimedia

1) Gregoryan Billy Hananda Deva, 2) Hendry


Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

Email: 1) [email protected], 2) [email protected]

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

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

2

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

3

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.

4

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.

5

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.

6

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.

7

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<root-layout width=\""+lebar+"\"

3. height=\""+tinggi+"\"/>";

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. <input type="button" value="Layout" onclick="set_layout('400','300');" />

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. <root-layout 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<region id=\""+id+"\"

3. width=\""+lebar+"\" height=\""+tinggi+"\"

4. left=\""+kiri+"\" top=\""+atas+"\" />";

5. }

8


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. <input type="button" value="Region"

2. onclick="region('vid','400','300','0','0');" />

Hasil pemanggilan fungsi region pada Kode Program 5 dalam script SMIL


Kode Program 6 Hasil Pemanggilan Function Region 1. <region id="vid" width="200" height="300" left="0" top="0" />

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<video src=\""+nama+"\" region=\""+reg+"\"";

3. if(begin!=null){

4. tempBody += " begin=\""+begin+"\"";

5. }

6. if(dur!=null){

7. tempBody += " dur=\""+dur+"\"";

8. }

9. tempBody += "/>";

10. }


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. <input type="button" value="Video1"

2. onclick="add_video('Im Yours.mp4','vid');" />

9

3. <input type="button" value="Video2"

4. onclick="add_video('Sad Korean Love Story.mp4',

5. 'vid','0s','5s');" />

Hasil pemanggilan fungsi add video pada Kode Program 8 dalam script SMIL


Kode Program 9 Hasil Pemanggilan Function Add Video 1. <video src="Im Yours.mp4" region="vid"/>

2. <video src="Sad Korean Love Story.mp4" region="vid2" dur="15s"/>

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. }


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. <input type="button" value="Par" onclick="par('25s');" />

Hasil pemanggilan fungsi par pada Kode Program 11 dalam script SMIL


Kode Program 12 Hasil Pemanggilan Function Par 1. <par dur="25s"></par>

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.

10

Kode Program 13 Function Add MP3 1. function add_mp3(nama,begin,dur){

2. tempBody += "\n<audio src=\""+nama+"\"";

3. if(begin!=null){

4. tempBody += " begin=\""+begin+"\"";

5. }

6. if(dur!=null){


8. }


10. }


dan mengisikan parameternya yaitu nama atau path MP3, waktu mulai (begin),

dan durasi, contoh pemanggilan dalam button dapat dilihat pada Kode Program

14. Pemanggilan fungsi ini bisa dilakukan lebih dari satu kali tergantung pada

berapa MP3 yang akan ditambahkan dan tidak selalu harus dipanggil dalam

button. Parameter begin dan duration tidak harus diisi apabila MP3 akan

ditampilkan penuh seperti aslinya, tetapi bisa diisi apabila MP3 akan dipotong

durasinya atau tidak dimulai dari awal.

Kode Program 14 Pemanggilan Function Add MP3 1. <input type="button" value="MP3"

2. onclick="add_mp3('SUMMER PARADISE.mp3',

3. '0s','25s');" />

Hasil pemanggilan fungsi add MP3 pada Kode Program 14 dalam script

SMIL dapat dilihat pada Kode Program 15.

Kode Program 15 Hasil Pemanggilan Function Add MP3 1. <audio src=" SUMMER PARADISE.mp3" begin="0s" dur="25s"/>

Function Add Picture

Function add picture adalah fungsi untuk menambahkan gambar dalam file

SMIL yang akan digunakan untuk membuat slideshow dengan mengeset nama

atau path gambar dan durasi, dapat dilihat pada Kode Program 16. Fungsi add

picture ini menghasilkan script untuk menambahkan gambar dalam SMIL yang

ditampung dalam variabel tempBody sebelum nantinya dibentuk ke dalam file

SMIL.

Kode Program 16 Function Add Picture 1. function add_picture(nama,dur){

2. tempBody += "\n<img src=\""+nama+"\"";

3. if(dur!=null){


5. }


7. }


dan mengisikan parameternya yaitu nama atau path gambar dan durasi, contoh

pemanggilan dalam button dapat dilihat pada Kode Program 17. Pemanggilan

11

fungsi ini bisa dilakukan lebih dari satu kali tergantung pada berapa gambar yang

akan ditambahkan dan tidak selalu harus dipanggil dalam button.

Kode Program 17 Pemanggilan Function Add Picture 1. <input type="button" value="Img"

2. onclick="add_picture('I Love This Game.jpg',

3. '5s');" />

4. <input type="button" value="Img"

5. onclick="add_picture('scorn.jpg','5s');" />

6. <input type="button" value="Img"

7. onclick="add_picture('skull n crossbones.jpg',

8. '5s');" />

Hasil pemanggilan fungsi add picture pada Kode Program 17 dalam script

SMIL dapat dilihat pada Kode Program 18.

Kode Program 18 Hasil Pemanggilan Function Add Picture 1. <img src="I Love This Game.jpg" dur="5s"/>

2. <img src="scorn.jpg" dur="5s"/>

3. <img src="skull n crossbones.jpg" dur="5s"/>

Function Create SMIL

Function create SMIL adalah fungsi untuk melempar script SMIL yang sudah

terbentuk dari fungsi-fungsi yang ada dan ditampung dalam variabel tempLayout,

tempRegion, tempPar, tempBody, tempImg untuk membangunnya menjadi file

SMIL dengan memasukkan parameter nama file SMIL yang akan dibuat, dapat

dilihat pada Kode Program 19.

Kode Program 19 Function Create SMIL 1. function create_smil(nama){

2. var command = "file.php?nama="+nama+"&tempLayout="+tempLayout+

3. "&tempRegion="+tempRegion+"&tempPar="+tempPar+

4. "&tempBody="+tempBody;

5. setTimeout(document.location=command,1000);

6. }


dan mengisikan parameternya yaitu nama file yang akan dibentuk, contoh

pemanggilan dalam button dapat dilihat pada Kode Program 20. Fungsi ini tidak

selalu harus dipanggil dalam button.

Kode Program 20 Pemanggilan Function Create SMIL 1. <input type="button" value="Create" onclick="create_smil('coba');" />

Script SMIL yang sudah ditampung dalam variabel dan nama file yang akan

dibentuk dilempar ke halaman file.php yang akan mengambil value dari operan

yang dilempar dari function create SMIL dan membentuknya menjadi satu script

SMIL utuh. Script SMIL yang sudah digabungkan dan disusun utuh akan dibentuk

ke dalam satu file SMIL yang namanya sesuai dengan isi dari parameter pada

function create SMIL ke komputer user atau server, dapat dilihat pada Kode

Program 21.

12

Kode Program 21 Halaman file.php 1. <?php

2. $atas = "<smil>\n<head>\n<layout>\n";

3. $tempLayout = $_GET['tempLayout'];

4. $tempRegion = $_GET['tempRegion'];

5. $head = "\n</layout>\n</head>\n<body>\n";

6. if($_GET['tempPar']!=""){

7. $parBuka = $_GET['tempPar'];

8. $parTutup = "</par>";

9. }else{

10. $parBuka = "";

11. $parTutup = "";

12. }

13. $tempBody = $_GET['tempBody'];

14. $bawah = "\n</body>\n</smil>";

15.

16. $myFile = "smi/".$_GET['nama'].".smi";

17. $fh = fopen($myFile, 'w') or die("can't open file");

18. $stringData = $atas.$tempLayout."\n".$tempRegion.$head.$parBuka.

19. $tempBody.$parTutup.$bawah;

20. fwrite($fh, $stringData);

21. fclose($fh);

22. ?>

Hasil dari file.php adalah file SMIL bernama sesuai dengan parameter yang

diisikan pada pemanggilan fungsi create SMIL, dapat dilihat pada Gambar 4.

Gambar 4 File SMIL yang Terbentuk

Pengujian Library Web dengan Pengujian Alpha

Pengujian library web dengan pengujian alpha dilakukan untuk memeriksa

semua fungsi yang ada dalam library web apakah telah berjalan dengan baik atau

belum. Pengujian alpha dilakukan pada setiap fungsi yang ada pada library web .

Pemberian tanda () apabila fungsi berfungsi dengan baik dan tanda () apabila

fungsi tidak berfungsi dengan bail. Hasil dari pengujian alpha dapat dilihat pada

Tabel 1. Tabel 1 Pengujian Library Web

API Skenario Output Validity

set_layout Memanggil fungsi set layout

dalam kode program

Script layout SMIL

region Memanggil fungsi region dalam

kode program

Script region SMIL

par Memanggil fungsi par dalam

kode program

Script par SMIL

add_video Memanggil fungsi add_video

dalam kode program

Script video SMIL

13

add_mp3 Memanggil fungsi add_mp3

dalam kode program

Script audio SMIL

add_picture Memanggil fungsi add_picture

dalam kode program

Script img SMIL

create_smil Memanggil fungsi create_smil

dalam kode program

Membentuk file SMIL

yang berisi script

manipulasi multimedia dari

pemanggilan fungsi-fungsi

sebelumnya ke dalam

komputer

Pengujian pada Tabel 1 terlihat bahwa semua fungsi yang ada dalam library

web telah berhasil dan bekerja dengan baik sesuai yang diharapkan.

Pengujian Library Web dengan Pengujian Beta

Pengujian beta dilakukan untuk menguji manfaat library web yang telah

dibangun terhadap beberapa programmer yang merupakan mahasiswa di

Universitas Kristen Satya Wacana Salatiga. Programmer akan menggunakan

library web untuk memanipulasi multimedia dalam membuat presentasi

multimedia berbasis web, kemudian dilakukan pengujian dengan menggunakan

kuisioner. Daftar pertanyaan pada kuisioner dapat dilihat pada Tabel 2 dan hasil

keseluruhan kuisioner dapat dilihat pada Tabel 3. Tabel 2 Daftar Pertanyaan Kuisioner

No Soal

Skor Jawaban

1 2 3 4 5

1 Apakah library web ini mudah

untuk digunakan?

Sangat

mudah

Mudah Cukup

mudah

Sulit Sangat

sulit

2 Apakah library web ini dapat

membantu anda dalam proses

manipulasi multimedia dalam

membuat presentasi

multimedia berbasis web?

Sangat

mem-

bantu

Mem-

bantu

Cukup

mem-

bantu

Tidak

mem-

bantu

Sangat

tidak

mem-

bantu

3 Apakah fungsi-fungsi di dalam

library web ini sudah lengkap?

Sangat

lengkap

Leng-

kap

Cukup

lengkap

Tidak

lengkap

Sangat

tidak

lengkap

4 Apakah anda paham cara

menggunakan fungsi-fungsi

dalam library web ini?

Sangat

paham

Paham Cukup

paham

Tidak

paham

Sangat

tidak

paham

5 Apakah anda tertarik untuk

menggunakan library web ini?

Sangat

tertarik

Tertarik Cukup

tertarik

Tidak

tertarik

Sangat

tidak

tertarik

14

Tabel 3 Hasil Keseluruhan Kuisioner

Skor

Soal 1 2 3 4 5

1 4 8 16 2 0

2 8 10 11 0 1

3 5 13 11 1 0

4 3 18 5 3 1

5 9 12 6 1 2

Jumlah 29 61 49 7 4

Berdasarkan Tabel 3, dapat diketahui kesimpulan dari beberapa pertanyaan

yang diberikan.

Responden yang terdiri dari beberapa programmer yang merupakan

mahasiswa Universitas Kristen Satya Wacana Salatiga, 13,33% menjawab library

web sangat mudah digunakan, 26,67% menjawab library web mudah digunakan,

53,33% menjawab library web cukup mudah digunakan, 6,67% menjawab library

web sulit digunakan. Berdasarkan proses manipulasi multimedia 26,67%

menjawab library web sangat membantu proses manipulasi multimedia, 33,33%

menjawab library web membantu proses manipulasi multimedia, 36,67%

menjawab library web cukup membantu proses manipulasi multimedia, 3,33%

menjawab library web sangat tidak membantu proses manipulasi multimedia.

Berdasarkan kelengkapan fungsi dalam library web 16,67% menjawab sangat

lengkap, 43,33% menjawab lengkap, 36,67% menjawab cukup lengkap, 3,33%

menjawab tidak lengkap. Berdasarkan cara penggunaan fungsi-fungsi yang ada

dalam library web 10% menjawab sangat paham, 60% menjawab paham, 16,67%

menjawab cukup paham, 10% menjawab tidak paham, 3,33% menjawab sangat

tidak paham. Berdasarkan ketertarikan untuk menggunakan library web 30%

menjawab sangat tertarik, 40% menjawab tertarik, 20% menjawab cukup tertarik,

3,33% menjawab tidak tertarik, 6,67% menjawab sangat tidak tertarik.

5. Simpulan

Berdasarkan penelitian yang telah dilakukan, maka dapat ditarik kesimpulan

bahwa: 1) Library web untuk pembacaan low level programming language untuk

manipulasi multimedia ini cukup mudah untuk digunakan oleh programmer

dalam membuat presentasi multimedia berbasis web; 2) Library web ini

membantu dalam proses manipulasi multimedia dalam membuat presentasi

multimedia berbasis web; 3) Library web ini memiliki fungsi-fungsi untuk

memanipulasi multimedia yang lengkap dan mudah digunakan; 4) Programmer

tidak perlu memahami low level programming language secara mendalam, karena

bisa dilakukan dengan memanggil fungsi-fungsi dalam library web dengan high

level web definition language.

15

6. Daftar Pustaka

[1] Hendry, Riyanarto Sarno, 2009, High Level Web Definition Language

Incorporating Weighted Tree Similarity Algorithm, Institut Teknologi

Sepuluh November, Surabaya.

[2] Rakhmadi, Aris, Swetika Eko Saptiyono, 2004, Presentasi Multimedia

Berbasis Web Menggunakan SMIL, PHP dan MySQL, Teknik Elektro

Universitas Muhammadiyah, Surakarta.

[3] Febrian, Jack, 2004, Pengetahuan Komputer dan Teknologi Informasi,

Informatika Bandung, Bandung.

[4] Abdurohman, Maman, 2002, Buku Ajar Bahasa Pemrograman Tingkat

Rendah, Sekolah Tinggi Telkom, Bandung.

[5] Michel, Thierry, 2012, http://www.w3.org/AudioVideo, Diakses tanggal 26

Juni 2013.

[6] Powell, Thomas A., David L. Jones, Dominique C. Cutts, 1998, Web site

engineering: beyond Web page design, Prentice Hall PTR.

[7] Michel, Thierry, 2005, http://www.w3.org/TR/SMIL2/layout.html, Diakses

tanggal 26 Juni 2013.

rancang bangun library web untuk pembacaan low level...

Documents