ANALISIS DAN PEMBUATAN APLIKASI MULTIMEDIA DINAMIS UNTUK MEDIA INFORMASI KATALOG BUSANA BAYI

DI VINOLIA BABY & KIDS YOGYAKARTA

SKRIPSI

diajukan oleh

Maya Fitrianingrum 07.12.2306

kepada JURUSAN SISTEM INFORMASI

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM

YOGYAKARTA 2012

ANALYSIS AND DEVELOPMENT OF A DINAMIC MULTIMEDIA APPLICATIONS FOR MEDIA INFORMATION CATALOG BABY CLOTHING

VINOLIA BABY & KIDS IN YOGYAKARTA

ANALISIS DAN PEMBUATAN APLIKASI MULTIMEDIA DINAMIS UNTUK MEDIA INFORMASI KATALOG BUSANA BAYI

DI VINOLIA BABY & KIDS YOGYAKARTA

Maya Fitrianingrum Jurusan Sistem Informasi

STMIK AMIKOM YOGYAKARTA

ABSTRACT

The rapid development of information technologi and produce new innovations along with the development of human thought patterns constantly changing towards the better. One of the very rapid development today is particularly information technology and computer multimedia. Mutimedia can now be used as a media campaign, media information for a company, the media information in explaining science.

Product catalog in a company is very important. Product catalog can be either web-based information systems and multimedia. The development of mutlimedia applications has led to the current dynamic multimedia. The intergration between Adobe Flash applications with MySql database to be able to create dynamic multimedia meaningful information submitted can be updated without having to replace the raw file. This intergration can create a richer multimedia applications (Rich Multimedia Application).

This multimedia development using waterfall methods. In building this multimedia, authors only limiting problems in specific areas such as how to build a catalog of products such as baby clothing based Rich Multimedia Application. User in this system is the consumer and the administrator has privileges to update the data baby clothing. The software that will be used to create application that Adobe Flash and MySql Database Server and PHP to make the admin interface. Keywords: Application, Multimedia, Showcase, fashion

1. PENDAHULUAN

Perkembangan teknologi informasi sangat pesat dan menghasilkan inovasi-inovasi

baru seiring dengan perkembangan pola pikir manusia yang senantiasa terus berubah ke

arah yang lebih baik. Salah satu perkembangan yang sangat pesat saat ini adalah

teknologi informasi dan komputer khususnya multimedia. Multimedia saat ini dapat

digunakan sebagai media promosi, media informasi bagi suatu perusahaan, media

informasi dalam menjelaskan ilmu pengetahuan.

Melalui sebuah aplikasi multimedia, konsumen dapat mencari model produk yang

diinginkan, ukuran-ukuran produknya, dan berapa banyak stok produk yang ada. Hal ini

mempercepat waktu dan menghemat tenaga saat membeli suatu produk. Mengatasi hal

ini, maka penulis mengambil kasus penjualan pada Vinolia Baby & Kids Yogyakarta ini

dengan menerapkan perkembangan multimedia secara dinamis. Yang mempermudah

konsumen untuk mencari pakaian atau produk yang diinginkan tanpa memakan waktu

untuk mencari-cari pakaian ada mencoba pakaian tersebut.

Katalog produk pada suatu perusahaan sangat penting. Katalog produk dapat berupa

website maupun sistem informasi berbasis multimedia. Perkembangan aplikasi

multimedia saat ini sudah mengarah pada multimedia yang bersifat dinamis. Integrasi

antara aplikasi Adobe Flash dengan database MySql mampu membuat multimedia

menjadi dinamis yang berarti informasi yang disampaikan dapat di-update tanpa harus

mengganti file mentahnya. Integrasi ini dapat membuat aplikasi multimedia yang lebih

kaya (Rich Multimedia Application). Maksudnya Rich Multimedia Application disini adalah

content yang terdapat pada aplikasi multimedia yang telah dibuat sewaktu-waktu dapat di

edit atau di update sesuai dengan kebutuhan user, tidak seperti pembelajaran interaktif.

2. LANDASAN 2.1 PENGERTIAN MULTIMEDIA Istilah multimedia merupakan perpaduan dari dua kata, yaitu multi dan media. Kata

multi berarti banyak atau lebih dari satu, sedangkan media berarti sarana atau piranti

untuk berkomunikasi. Jadi multimedia berarti suatu sistem yang terdiri dari perangkat

keras, lunak, dan alat-alat lain guna mendukung proses informasi.

2.2 PENGERTIAN MULTIMEDIA DINAMIS

Definisi untuk multimedia dinamis adalah multimedia yang mempunyai kemampuan

mengolah data atau memproses data (mengambil, menyimpan, mengubah) yang sudah

bisa mengedit atau mengupdate data langsung dari aplikasi tersebut tanpa membongkar

programnya.

2.3 ADOBE FLASH CS3 Adobe Flash merupakan sarana untuk merancang animasi, Flash juga memiliki

sarana image editing program, kebanyakan dari sarana yang tersedia pada flash adalah

untuk membuat gambar berbasis vector, format file yang dihasilkan flash berbasis vector,

hal ini yang menyebabkan file animasi yang dibuat dengan flash berukuran lebih kecil

karena dengan image vector pada masing-masing frame hanya menyimpan definisi

lokasi titik dan garis obyek tersebut.

2.4 ADOBE PHOTOSHOP CS3 Adobe photoshop merupakan program pengolah grafik yang mampu bekerja pada

dua tipe yaitu bitmap dan vektor. Oleh sebab itu, file kerja pada Adobe Photoshop dapat

berupa gambar bitmap maupun vektor. Hal ini merupakan keunggulan dari program

Adobe Photoshop karena dengan kemampuan tersebut akan memudahkan anda

membuat obyek, mengolah foto maupun pengeditan foto lebih lanjut.

2.5 ADOBE SCRIPT 2.0 Action Script adalah bahasa pemrograman yang digunakan dalam program flash.

Action Script cukup banyak digunakan di dalam animasi flash, navigasi, presentasi,

animasi web, dan game. Script di masukan dengan cara mengetiknya pada panel Action

yang dapat kita munculkan dengan mengklik window > Action atau cukup menekan F9

pada keyboard kita.

2.6 ADOBE DREAMWEAVER SC3 Adobe Dreamweaver adalah software professional untuk desain dan manajemen

situs web dengan tingkat fleksibilitas yang tinggi yang memungkinkan user dengan

keahlian tingkat lanjut (advance) untuk membuat situs web dengan cara menuliskan kode

HTML pada tombol pemograman yang terintergrasi pada software ini atau

memungkinkan user tingkat awal (beginner) membuat situs web dengan menggunakan

lingkungan visual edtting pada menu-menu yang sudah disediakan. Dreamweaver juga

mendukung program-program web yang lain, seperti PHP, VB Script, Coldfusion, ASP,

Perl, Java script, XML, CSS dan lain-lain.

2.7 XAMPP Xampp berisi 3 program yang sangat dibutuhkan untuk membuat aplikasi ini bisa

dieksekusi. Ketiga program tersebut adalah : web server apache, PHP, database server

Mysql.

2.8 PHP PHP adalah bahasa server side programming yang lebih powerful untuk membuat

halaman web menjadi dinamis dan interaktif. Syntax PHP mirip dengan syntax bahasa

perl dan C. 3. ANALISIS DAN PERANCANGAN 3.1 ANALISIS SWOT Untuk mengidentifikasi masalah yang ada, yaitu bagaimana membuat aplikasi

multimedia dinamis untuk media informasi katalog busana bayi di Vinolia Baby & Kids,

jenis analisis yang digunkan yaitu analisi SWOT (strenghts, weaknes, ppportunity,

threats) yang merupakan analisis terhadap kekuatan, kelemahan, kesempatan, dan

ancaman.

3.2 KONSEP Urutan pertama kali jika pengguna membuka aplikasi ini adalah melihat jendela menu

utama, jendela menu utama tersebut merupakan pusat dari aplikasi ini sebab jendela

menu utama mempunyai isi jendela-jendela sub menu yang dapat di link kejendela

tujuan dan penyajian informasi dengan bantuan tombol. Begitu juga dengan jendela sub-

menu akan menyediakan informasi yang ada jika pengguna memanfaatkan tombol untuk

membuka informasi tersebut.

3.4 STORYBOARD

scene gambar Deskripsi audio link

1 Merupakan

halaman intro

ketika aplikasi

dijalankan

pertama kali

intro.wav 2

INTRO

tekan sembarang tombol

2 Merupakan menu

utama dari

aplikasi. Terdapat

logo toko dan

link-link navigasi

menu_uta

ma.wav

3

4

5

6

3

Halaman ini

digunakan untruk

mencoba pakaian

bayi kedalam

simolator dengan

cara pengguna

mengklik katagori

pakaian yang

akan diklik

kemudian pilih

2

6

Menu Utama

Logo Toko

Coba

bantuan (2)

tentang kami

keluar (4)

4 Halaman untuk

bantuan

menjalankan

aplikasi.

2

6

5 Halaman untuk

about

menjalankan

aplikasi.

2

6

6 Halaman

konfirmasi untuk

keluar dari

aplikasi.

7

2

7

END

SELESAI

Konfirmasi Keluar

Apakah Anda yakin

akan keluar?

Ya Tidak

(teks)

About

(teks)

Bantuan

3.5 STRUKTUR NAVIGASI Struktur navigasi dapat memberikan gambaran link dari halaman satu ke halaman

lainnya. Adapun struktur navigasi pada aplikasi ini adalah:

Gambar 3.1 Struktur Navigasi

3.6 PERANCANGAN GRAFIK

Bagian ini merupakan bentuk kegiatan yang meliputi pemilihan grafik yang

mendukung dialog dan latar belakang fasilitas aplikasi multimedia yang digunakan.

1. Grafik Intro Digunakan untuk halaman intro aplikasi. Di halaman ini, user dapat menekan

sembarang tombol untuk mulai masuk ke menu utama.

Gambar 3.2 Grafik Intro

Gambar 3.2 Grafik Intro

Background : biru muda.

INTRO

Tekan sebarang tombol

Animasi Teks : animasi bertuliskan Vinolia Baby & Kids.

Font : Comic Sans MS.

Font color : pink.

2. Grafik Menu Utama

Menu utama merupakan menu terpenting yang memuat tombol navigasi untuk

melanjutkan ke halaman berikutnya. Adapun tombol-tombol yang tersedia pada menu

utama adalah:

(1) Tombol yang digunakan untuk menuju halaman coba pakaian.

(2) Tombol yang digunakan untuk menuju halaman bantuan.

(3) Tombol yang digunakan untuk menuju halaman about.

(4) Tombol yang digunakan untuk keluar dari aplikasi.

Animasi : gambar logo Vinolia Baby & Kids bergerak.

Background : biru muda

Font : Comic Sans MS.

Font color : pink.

Gambar 3.3 Menu Utama

Gambar 3.3 Menu Utama

3.Grafik Coba Pakaian

Halaman ini digunakan untruk mencoba pakaian bayi kedalam simolator dengan cara

pengguna mengklik katagori pakaian yang akan diklik kemudian pilih, maka item tersebut

akan digunakan dimodel bayi yang bisa ditentukan warnanya melalui palet warna yang

tersedia dan juga bias menentukan ukuran melalui file yang tersedia.

Menu Utama

Logo Toko

Coba pakaian (1)

bantuan (2)

about (3)

keluar (4)

Gambar 3.4 Coba Pakaian

Animasi : gambar logo Vinolia Baby & Kids bergerak

Background : biru muda

Font : Comic Sans MS.

Font color : pink

4. Grafik Bantuan

Keterangan:

Bantuan berisi tentang keterangan aplikasi, dan keterangan simbol dari program atau

aplikasi.

Teks : Keterangan Penggunaan Aplikasi:

Keterangan Simbol:

adalah tombol untuk menuju halaman berikutnya.

adalah tombol untuk menuju halaman sebelumnya.

Background : biru muda.

Fond : comic sans MS.

Font color : pink.

Gambar 3.5 Bantuan

Gambar 3.5 Bantuan

(teks)

Bantuan

5.Grafik About

Keterangan:

Aplikasi ini memberikan info yang berhubungan dengan Vinolia Baby & Kids.

Teks : Keterangan Penggunaan Aplikasi:

adalah tombol untuk menuju halaman berikutnya.

adalah tombol untuk menuju halaman sebelumnya.

Background : biru muda.

Fond : comic sans MS.

Font color : pink.

Gambar 3.6 About

Gambar 3.6 About

6. Grafik Konfirmasi Keluar

Keterangan:

Pengguna dapat memilih akan keluar dari aplikasi atau tidak. Jika “Ya” maka yang terjadi

pengguna akan langsung keluar dari aplikasi, namun jika “Tidak” maka user akan

kembali ke menu utama.

Background : biru muda.

Fond : comic sans MS.

Font color : pink.

Gambar 3.7 Konfirmasi Keluar

Gambar 3.7 Konfirmasi Keluar

Konfirmasi Keluar

Apakah Anda yakin

akan keluar?

Ya Tidak

(teks)

About

7. Grafik Selesai

Keterangan:Keluar dari aplikasi.

Gambar 3.8 Selesai

Gambar 3.8 Selesai

3.7 DFD Level 0

Gambar 3.9 DFD Level 0

3.8 DFD Level 1

Gambar 3.10 DFD Level

SELESAI

4. IMPLEMENTASI DAN PEMBAHASAN 4.1 PRODUKSI SISTEM MULTIMEDIA Dalam memproduksi sistem multimedia, melibatkan tiga tahap, yaitu tahap pra

produksi, tahap produksi dan pasca produksi. Masing-masing tahap saling

mempengaruhi. Tahap pra produksi adalah tahap semua pekerjaan dan aktifitas yang

terjadi sebelum multimedia diproduksi secara nyata. Tahap produksi adalah periode

selama multimedia diproduksi. Tahap pasca produksi adalah semua periode semua

pekerjaan dan aktifitas yang terjadi setelah multimedia diproduksi secara nyata.

Dalam bagian ini merupakan kegiatan memproduksi sistem salah satunya adalah

pembuatan desain grafik yang mendukung semua aplikasi, mulai dari teks sebagai

penyampaian pesan, memasukan suara dan animasi yang semua elemen tersebut

digabungkan ke dalam Adobe Flash CS3 sebagai software utama.

4.2 HASIL PENGETESAN SISTEM Cara pengujiannya adalah dengan menguji kesesuaian struktur link/menu dengan

menekan tombol dan melihat hasilnya langsung.

No Antarmuka Yang diuji/Aktifitas

testing

Input Output Status

1. Form Login Tombol login

diklik atau tombol

enter ditekan

Halaman

administrator :

User ID :

Password :

Menu utama

untuk

administrator

terbuka

Benar

User ID :

(kosong) atau

Password :

(kosong)

Muncul pesan

‘masukan

identitas login

anda dengan

benar!’

Benar

2. Form input

data barang

Pada produk isi id_produk, kategori, nama, gambar, ukuran, warna dan terisi data, ketika diklik tombol simpan, data yang diisikan sudah ada pada record database

id_produk : 8

kategori : 8

nama : 35

gambar : 35

ukuran : 10

warna : 20

Record yang ada

pada database

dengan kode

sesuai input,

akan di update

dengan data baru

Benar

Field id produk,

kategori, nama,

gambar,

ukuran, warna

salah satunya

tidak terisi

lengkap

Muncul pesan

‘isikan kode

dengan lengkap!’

Benar

Pada field

id_produk,

kategori, nama,

gambar, ukuran,

warna dan terisi

data lengkap,

ketika diklik

tombol jika record

dalam database

tidak ditemukan

sesuai inputan

atau pada form

belum di klik

maka tombol edit

tidak akan aktif

Input data pada

form tidak

sesuai dengan

record dalam

database atau

pada form

belum di klik

tombol cari

Tombol edit

disable atau non

aktif

benar

Pada field

id_produk,

kategori, nama,

gambar, ukuran,

warna dan terisi

data lengkap,

ketika diklik

tombol jika record

dalam database

ditemukan sesuai

inputan atau

pada form ada

kemudian data

ditampilkan di

form, maka

Pada field id

produk,

kategori, nama,

gambar,

ukuran, warna

serta field

lainnya dalam

form interface

terisi data.

Kemudian jika

tombol simpan

diklik,

kemudian

tombol hapus

di klika

Record yang ada

pada database

dengan kode

sesuai input,

akan terhapus

Benar

tombol hapus

aktif

3. Form

kategori

Pada field isi id

kategori, nama

produk terisi data

kemudian klik

simpan data diklik

Id kategori

Nama kategori

Aksi edit atau

hapus

Interface di resert

(semua field

menjadi seperti

semula/kosong)

Benar

Tabel 4.4 Black-Box Testing 5. PENUTUP 5.1 KESIMPULAN

Setelah diuraikan dan dibahas pada bab-bab sebelumnya, mulai dari pengajuan

beberapa masalah sehingga mencapai tahap pembahasan yang penyusun lakukan

dalam penyusunan skripsi, maka dapat diambil beberapa kesimpulan yaitu :

a. Aplikasi multimedia dinamis dibangun dengan menggunakan MySQL Database

Server untuk menampung informasi produk sehingga informasi yang ditampilkan

pada aplikasi multimedia dapat berubah-ubah.

b. Aplikasi ini menggunakan menu-menu navigasi yang sederhana dan menarik

sehingga pemakai tidak akan mengalami kesulitan dalam pengakses aplikasi.

Dibuktikan dengan pendapat pengunjung dari hasil observasi percobaan aplikasi di

Vinolia Baby & Kids.

5.2 SARAN Dengan adanya sistem informasi berbasis multimedia ini diharapkan Vinolia Baby &

Kids dapat meningkatkan kemampuan bersaing.

a. Aplikasi multimedia berikutnya dapat menambahkan fitur-fitur yang masih kurang

pada aplikasi ini guna penyempurnaan, seperti penggunaan dua bahasa.

b. Aplikasi multimedia berikutnya diharapakan terdapat 2 upload gambar berbeda

folder, untuk keperluan katalog dan etalase.

c. Diharapkan pada masa mendatang, pemgembangan aplikasi etalase katalog produk

berbasis multimedia Vinolia Baby & Kids dapat diakses melalui internet. Dimaksud

agar pemakai dapat mengakses aplikasi ini dari mana saja tanpa harus ke Vinolia

Baby & Kids.

d. Diharapkan pada masa mendatang, pengembangan aplikasi etalase katalog produk

berbasis multimedia Vinolia Baby & Kids dapat digunakan untuk melakukan

pembelian secara online.

DAFTAR PUSTAKA Anggra. 2008. Memahami Teknik Dasar Pembuatan Game Berbasis Flash. Yogyakarta :

Gava Media.

Fatta, Hanif Al. 2007. Analisis & Perancangan Sistem Informasi. Yogyakarta : Andi

Offset.

M.Arief. 2006. Pemrograman Basis Data Menggunakan Transact-SQL dengan Microsoft

SQL Server 2000. Yogyakarta : Andi Offset.

Sutopo, Ariesto Hadi. 2003. Multimedia Interaktif dengan Flash. Yogyakarta : Graha Ilmu.

Suyanto, M. 2003. Multimedia Alat Untuk Meningkatkan Keunggulan Bersaiang.

Yogyakarta : Andi Offset.

Wahana Komputer. 2008. Menguasai Adobe Photoshop CS3. Yogyakarta : Andi Offset.