Halaman Judul
PEMBUATAN ETALASE SIMULASI BERBASIS MULTIMEDIA DINAMIS UNTUK MEMPERMUDAH DALAM PEMBELIAN BUSANA MENGGUNAKAN ADOBE FLASH
Naskah Publikasi
disusun oleh Endah Saputri 07.12.2082
JURUSAN SISTEM INFORMASI SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA 2011
i
Lembar Pengesahan Naskah Publikasi
ii
Daftar Isi
Halaman Judul............................................................................................................................ i Lembar Pengesahan Naskah Publikasi ...................................................................................... ii Daftar Isi ..................................................................................................................................iii Abstraksi ...................................................................................................................................iv 1.
Pendahuluan ................................................................................................................... 1
2.
Perancangan Sistem ..................................................................................................... 1
3.
2.1
Merancang Konsep ................................................................................................ 1
2.2
Merancang Isi ......................................................................................................... 1
2.3
Merancang Naskah ................................................................................................ 3
2.4
Merancang Grafik ................................................................................................... 5
Analisis ............................................................................................................................. 8 3.1
4.
Analisis Kebutuhan Sistem ................................................................................... 8
Pembahasan ................................................................................................................. 11 4.1
Import Image ......................................................................................................... 11
4.2 Pembuatan Animasi ................................................................................................. 11 4.3 Pembuatan Tombol .................................................................................................. 12 4.4 Pembuatan Basis Data ............................................................................................. 12 4.5 Uji Coba Sistem ........................................................................................................ 13 4.6 Manual Program ....................................................................................................... 14 5.
Kesimpulan.................................................................................................................... 16
DAFTAR PUSTAKA............................................................................................................. 17
iii
Abstraksi
DEVELOPMENT OF SIMULATION-BASED MULTIMEDIA SHOWCASE TO SIMPLIFY IN DYNAMIC PURCHASE OF CLOTHING TO USE ADOBE FLASH PEMBUATAN ETALASE SIMULASI BERBASIS MULTIMEDIA DINAMIS UNTUK MEMPERMUDAH DALAM PEMBELIAN BUSANA MENGGUNAKAN ADOBE FLASH
Endah Saputri Jurusan Sistem Informasi STMIK AMIKOM YOGYAKARTA
ABSTRACT The development of the fashion world for men and women is growing rapidly at this time, as well as the development of the boutique or clothing store. Today, nearly every clothing store or boutique, do not yet have a system that can help consumers in the mix and match clothing. Usually consumers have to choose clothes that you want and need quite a long time to mix and match clothing. Multimedia is used also in education and business. In education, multimedia is used as medium of instruction, either in class or individually. In the world of business, multimedia is used as a media company profile, product profile, even as the media information kios and training in e-learning system. Therefore, boutiques and multimedia development as well as the rapid, then the research is to construct a system of multimedia-based simulation window. This system is a client server based systems, where multimedia is built using Adobe Flash is used as a consumer interface and the system is using the website to simplify the admin in the input data or change data. Implementation of this system later in the form of an intranet. In addition to Adobe Flash also used the MySQL Database Server as the database server and PHP as the scripts used to build the website as the admin interface. Keywords : multimedia, fashion, simulation, client server based systems
iv
1. Pendahuluan Perkembangan dunia mode untuk pria dan wanita saat ini sangat berkembang pesat, demikian pula semakin berkembangnya usaha butik atau toko busana. Saat ini, hampir setiap toko busana atau butik, belum memiliki suatu sistem yang dapat membantu konsumen didalam memadupadankan busana. Biasanya para konsumen harus memilih busana yang diinginkan dan membutuhkan waktu yang cukup lama untuk memadupadankan busana. Perkembangan komputer sekarang semakin cepat, hampir semua bidang pekerjaan telah dikendalikan oleh komputer. Multimedia
dimanfaatkan
juga
dalam
dunia pendidikan dan bisnis.
Di
dunia pendidikan, multimedia digunakan sebagai media pengajaran, baik dalam kelas maupun secara sendiri-sendiri. Di dunia bisnis, multimedia digunakan sebagai media
profil perusahaan,
profil
produk,
bahkan
sebagai
media kios
informasi dan pelatihan dalam sistem e-learning. Oleh karena perkembangan butik dan multimedia yang juga sama pesatnya, maka dalam penelitian ini akan dibangun suatu sistem etalase simulasi berbasis multimedia. Berdasarkan dari uraian di atas, maka akan dibuat simulasi dalam bentuk aplikasi multimedia dengan judul “Pembuatan Etalase Simulasi Berbasis Multimedia Dinamis Untuk Mempermudah Dalam Pembelian Busana Menggunakan Adobe Flash”
2. Perancangan Sistem 2.1 Merancang Konsep Merancang konsep merupakan dasar sebuah simulasi multimedia karena disini diperlukan dasar pemikiran dan kreatifitas yang sesuai dengan tujuan dibuatnya simulasi tersebut, simulasi yang dibuat bertujuan agar dapat mempermudah dalam mempadupadankan busana. Pengguna multimedia ini adalah para konsumen yang akan membeli busana. Multimedia yang dirancang atau ditawarkan adalah berbentuk gambar dan animasi. Dimana akan disimulasikan memadupadankan busana sehingga diperoleh busana yang diinginkan oleh user.
2.2 Merancang Isi Struktur rancangan dari isi multimedia yang akan ditampilkan dari tiap menu dan sub-sub menu adalah sebagai berikut :
1
1
2
2a
2b 2a1
2b1
2a2
2b2
2a3
2b3
2a4
2b4
2a5
2b5
Struktur Hierarki Keterangan : 1
=intro merupakan halaman pertama yang akan di temui pengunjung pada saat menjalankan aplikasi mulltimedia
2
=menu utama berisikan menu tombol-tombol yang disediakan untuk mengantarkan pengunjung ke tampilan berikutnya, diantaranya menu busana wanita, busana pria.
2a
=kategori wanita 2a1 =kaos 2a2 =kemeja 2a3 =jaket 2a4 =sweter 2a5 =celana
2b
=kategori pria 2b1 = kaos 2b2 = kemeja
2
2b3 = jaket 2b4 =jacket sweter 2b5 = celana 2.3 Merancang Naskah Tahapan ini merupakan tentang naskah dan rencana yang telah disusun. Dengan naskah atau teks, suatu aplikasi akan mudah dipahami maksud dan tujuannya. Penulisan naskah dalam aplikasi ini dibuat secara sistematis dan diurutkan menurut pendekatan diagram untuk mendesain aplikasi agar tiap tampilan dapat terbaca dan bisa menyediakan informasi maka disusunlah suatu struktur yang mengatur semuanya. Tabel Perancangan Naskah No 2a
Menu Kategori wanita
Deskripsi Kaos Kemeja Jaket Sweter Celana
2a1
Kaos
Ukuran Harga Warna Bahan ( Data dapat diubah)
2a2
Kemeja
Ukuran Harga Warna Bahan ( Data dapat diubah)
2a3
Jaket
Ukuran Harga Warna Bahan
3
( Data dapat diubah) 2a4
Sweter
Ukuran Harga Warna Bahan ( Data dapat diubah)
2a5
Celana
Ukuran Harga Warna Bahan ( Data dapat diubah)
2b
Kategori pria
Ukuran Harga Warna Bahan ( Data dapat diubah)
2b1
Kaos
Ukuran Harga Warna Bahan ( Data dapat diubah)
2b2
Kemeja
Ukuran Harga Warna Bahan ( Data dapat diubah)
2b3
Jaket
Ukuran Harga Warna Bahan ( Data dapat diubah)
4
2b4
Sweter
Ukuran Harga Warna Bahan ( Data dapat diubah)
2b5
Celana
Ukuran Harga Warna Bahan ( Data dapat diubah)
2.4 Merancang Grafik A) Menu Halaman Admin 1. Menu Login
ADMIN LOGIN Username
Password
OK
5
Cancel
2. Menu Type
BANNER
TYPE
Input Type
KATEGORI
Type
ITEM
OK
IMAGE LOGOUT
Data Type ID TYPE
TYPE
ACTION
1
Pria
EDIT | DELETE
2
Wanita
EDIT | DELETE
3. Kategori BANNER
TYPE
Input Kategori
KATEGORI
Type
ITEM
Kategori
IMAGE
OK
LOGOUT
Data Kategori ID KATEGORI
TYPE
1 2
KATEGORI
ACTION
Pria
Kemeja
EDIT | DELETE
Wanita
Celana
EDIT | DELETE EDIT | DELETE
3
Pria
Kaos
4. Item BANNER
TYPE
Input Item
KATEGORI
Kategori
ITEM
Nama Item
IMAGE
Warna
LOGOUT
Bahan Ukuran Harga OK Data Item Id Item
Type
Kategori
6
Nama Item
Warna
Bahan Ukuran
Harga
Action
5. Image BANNER
TYPE KATEGORI ITEM
Input Item Nama Item Browse
Image
IMAGE
OK
LOGOUT Data Image Id Image
Nama Item
B) Menu Halaman User 1. Rancangan Intro
Background animasi
2. Menu Utama
Banner
Masuk Etalase
animasi
7
Image
Action
3. Menu Busana Pria
Busana Pria
Item
Busana Wanita
Etalase
Kategori
Manequen Manequen Pria Pria
Kaos Kemeja Jaket Sweter Celana Detail Barang Tambah Item
Hapus Item
4. Menu Busana Wanita
Busana Pria
Item
Busana Wanita
Etalase
Kategori Kaos Kemeja Jaket Sweter Celana
Detail Barang Tambah Item
Hapus Item
3. Analisis 3.1 Analisis Kebutuhan Sistem A. Kebutuhan Fungsional
8
ManequenWanita Pria Manequen
Kebutuhan Fungsional adalah jenis kebutuhan yang berisi proses-proses apa saja yang nantinya dilakukan oleh sistem. Aplikasi yang dibuat memiliki kebutuhan fungsional sebagai berikut: 1. Sistem harus dapat melakukan pemasukan kategori busana yang berhubungan dengan pendataan kategori busana Administrator dapat memasukkan kode kategori dan kategori busana Administrator dapat mengubah data kategori Administrator dapat menghapus data kategori 2. Sistem harus dapat melakukan entri item busana yang berhubungan dengan pendataan item busana Administrator dapat memasukkan kode item dan item busana Administrator dapat mengubah data item Administrator dapat menghapus data item 3. Sistem harus dapat melakukan entri image busana yang berhubungan dengan pendataan image busana Administrator dapat memasukkan kode image dan image busana Administrator dapat mengubah data image Administrator dapat menghapus data image 4. Sistem harus dapat menampilkan busana berdasarkan kategori dan sistem mampu manampilkan detail barang 5. Plattform yang digunakan yaitu Windows 7 6. Arsitektur aplikasi yang digunakan adalah arsitektur client server B. Kebutuhan Non Fungsioanal Bagian ini akan menganalisis kebutuhan sistem baru yang akan dipakai obyek. a. Perangkat Keras ( Hardware ) Perangkat Keras yang disini adalah alat yang digunakan untuk pembuatan program aplikasi. Konfigurasi perangkat keras yang dibutuhkan adalah seperangkat komputer yang biasa menjalankan internet. Berikut merupakan spesifikasi komputer yang diusulkan : AMD Turion X2 Dual Core Mobile RM-72 2.10 GHz, 2.75 GB of RAM NVIDIA GeForce 9100MG 512 MB DDR2 160 GB HDD Untuk user : Procecor P3- 600 MHZ Motherboard standart P3 Memory 128 MB
9
Harddisk 7 GB, CDROM VGA 64 MB SHARE
b. Perangkat Lunak ( Software ) Adapun perangkat lunak yang digunakan dalam pengembangan sistem adalah sebagai berikut : Komputer Server -
My SQL
-
Adobe Flash CS3
-
Adobe Photoshop
-
Macromedia Dreamweaver
-
PHP
-
Xampp
Komputer User
c.
-
Windows
-
Flash player
Sumber Daya Manusia ( Brainware ) Sumber daya manusia merupakan hal yang utama dalam pengembangan suatu sistem informasi, karena manusia yang akan mengoperasikan dan memperbaiki sistem tersebut jika mengalami kerusakan. Manusia sebagai pencipta dan pengguna sistem sehingga sistem ini bisa digunakan, perlu adanya pemeliharaan sistem, untuk itu diperlukan sumber daya manusia yang berkualitas. Sumber daya manusia yang dibutuhkan untuk membangun sistem baru ini adalah: 1. Animator / desain grafis Adalah seorang yang mebuat aplikasi multimedia 2. Admin Admin adalah seseorang yang mengatur web, admin berhak melakukan apa saja yang berhubungan dengan website Toko. Admin dapat mengakses halamannya sendiri yang berisi tentang informasi dari database yang membangun website ini. Admin bertugas mengupdate berbagai informasi produk yang berkaitan dengan Butik, mengontrol terhadap berbagai kesalahan dan keamanan yang ada pada sistem . 3. User User adalah pengguna biasa yang bisa melihat informasi mengenai produkproduk yang dijual.
10
4. Pembahasan 4.1 Import Image Untuk membuat background, karena pembuatannya di Photoshop maka di Adobe Flash ini cukup dengan mengimport hasil olahan photoshop yg sudah ber format *.JPG. Adapun cara mengimport file yang digunakan untuk kepentingan pembuatan background aplikasi ini adalah seperti berikut : 1. Pada Adobe Flash CS3 pilih menuFile>Import > import to Library 2. Kemudian pilih file yang akan digunakan kemudian tekan import to Library atau Open
4.2 Pembuatan Animasi Animasi adalah perubahan bentuk, tempat atau ukuran dari bentuk aslinya, pada Flash CS3 proses penganimasian dapat kita lakukan dengan langkah – langkah sebagai berikut : 1. Buatlah atau importlah suatu objek yang akan dianimasikan. 2. Kemudian akan muncul titik hitam pada layer yang merupakan keyframe objek yang
kita
buat,
pada
penganimasian
ini
keyframe
berfungsi
untuk
mengindentifikasi objek yang akan di buat. 3. Untuk menganimasikan objek ini pilihlah insert kemudian create
motion tween,
motion tween disini digunakan untuk membantu memperhalus suatu gerakan pada animasi. 4. Untuk memulai proses perubahan letak berilah keyframe pada frame dengan memilih insert kemudian keyframe, frame disini digunakan untuk mengontrol kecepatan gerakan pada animasi dengan catatan semakin panjang keyframe yang diletakkan pada frame objek animasi akan menjadi semakin pelan
11
4.3 Pembuatan Tombol Adapun cara pembuatan tombol pada aplikasi ini dapat dilakukan dengan langkah – langkah sebagai berikut : a) Pilih Insert, New Simbol b) Klik Button kemudian OK. c) Kemudian buatlah objek tombol.
4.4 Pembuatan Basis Data Database yang digunakan untuk website ini bernama fortuna_fashion, terdiri dari 4 tabel dan dibuat dengan PHPmyadmin. Dapat diakses dengan cara mengetikkan http://localhost/phpmyadmin pada browser. Langkah-langkah cara membuat database dan tabel yaitu: 1. Buka browser, lalu ketikkan pada address bar http://localhost/phpmyadmin
12
2. Untuk membuat database, isikan nama database yang akan dibuat pada bagian create new database, misalnya fortuna_fashion, lalu klik tombol create. 3. Maka akan terbentuk sebuah database dengan nama fortuna_fashion, untuk mengetahui nama databasenya dapat dilihat pada bagian jendela kiri dibawah text home. Setelah membuat database maka langkah selanjutnya adalah membuat tabel pada database fortuna_fashion.
4.5 Uji Coba Sistem Testing Pada Pengguna Pengetesan sistem pada pengguna dilakukan untuk memastikan apakah aplikasi multimedia ini cocok atau bisa di gunakan untuk mensimulasika busana sehingga diperoleh busana yang diinginkan oleh user. Program ini cukup menarik untuk memudahkan user dalam mempadupadankan busana.
Testing Pada Hardware Sistem pengetesan adalah mengetes untuk mengetahui apakah berfungsi atau
tidaknya sistem multimedia secara keseluruhan. Pengetesan sistem merupakan langkah setelah aplikasi multimedia diproduksi. Fungsi dari pengetesan adalah memastikan bahwa hasil produksi aplikasi multimedia sesuai dengan yang direncanakan. Aplikasi multimedia ini dibuat pada komputer dengan spesifikasi berikut: 1. AMD Turion X2 Dual Core 2. Mobile RM-72 3. 2.10 Hz, 2.75 GB of RAM 4. NVIDIA GeForce 9100MG 5. 512 DDR2 6. 160 GB HDD Pengujian selanjutnya, setelah dilakukan penginstalan maupun dijalankan melalui CD secara langsung akan diketahui oleh pengguna apakah aplikasi yang dibuat telah sesuai dengan informasi ang dibutuhkan yaitu menarik untuk digunakan, mudah dipahami oleh pengguna, dan aplikasi ini mudah digunakan dalam arti pengguna tidak merasa bingung pada saat menjalankan aplikasi.
13
Adapun langkah-langkah pengetesan adalah sebagai berikut : a) Nyalakan komputer atau Laptop yang digunakan sebagai media untuk melakukan pengetesan aplikasi multimedia. b) Lakukan penginstalan terlebih dahulu beberapa software pendukung aplikasi multimedia, seperti software Adobe Flash CS 3 Professional. c) Cari folder dimana aplikasi disimpan, jika sudah berbentuk CD masukan CD ke dalam komputer atau laptop kemudian double klik file *.exe. d) Setelah aplikasi berjalan pilihlah menu yang telah tersedia sesuai dengan kebutuhan pengguna. Hasil pengujian menunjukkan bahwa sistem ini dapat berjalan dengan baik CD-ROM maupun dari harddisk. Begitu juga dengan user sangat menyukai dan lebih menarik sehingga tidak ada permasalahan untuk pemakaian sistem tersebut. 4.6 Manual Program a) Halaman Administrator
Halaman Login
Halaman Type
Halaman Kategori
14
Halaman Item
Halaman Image
b) Halaman User
Halaman Simulasi
15
Halaman Etalase
5. Kesimpulan Dari uraian dan penjelasan serta pembahasan keseluruhan materi pada bab-bab sebelumnya, maka diambil beberapa kesimpulan yaitu : 1. Adanya penyampaian etalase katalog busana di toko Fortuna Fashion dengan menggunakan sistem aplikasi berbasis multimedia menjadi lebih menarik. 2. Sistem yang dibuat merupakan media pendukung yang dapat membantu konsumen Fortuna Fashion dalam memadupadankan busana.
16
DAFTAR PUSTAKA Hanif
Al
Fatta.”Analisis
&
Perancangan
Sistem
Informasi”.Penerbit
ANDI
Yogyakarta.2007, Hal 25 Laura Lemay, John M. Duff dan James L. Mohler, Desain Grafik dan halaman Web. Jakarta. PT Elex Media Komputindo. 1997, Hal 142-143 Suyanto,
M.
2003.
MULTIMEDIA
Alat
untuk
Meningkatkan
Keunggulan
Bersaing. Penerbit ANDI. Yogyakarta. Hal 20-21 Suyanto, M. 2003. MULTIMEDIA Alat untuk Meningkatkan Keunggulan Bersaing. Penerbit ANDI. Yogyakarta. Hal 19 Suyanto, M. 2003. MULTIMEDIA Alat untuk Meningkatkan Keunggulan Bersaing. Penerbit ANDI. Yogyakarta. Hal 255-287 Syafrizal, Melwin.2005. Pengantar Jaringan Komputer, Penerbit ANDI. Yogyakarta http://www.wikipedia.org/internet diakses pada tanggal 20 oktober 2010 http://www.wikipedia.org/WWW diakses pada tanggal 20 oktober 2010 http://www.wikipedia.org/Web_browser diakses pada tanggal 20 oktober 2010 http://www.wikipedia.org/Web_server diakses pada tanggal 20 oktober 2010 http://www.wikipedia.org Adobe_Photoshop diakses Maret 2010 http://www.wikipedia.org/macromedia-dreamweaver diakses Maret 2010
17
