pembuatan profile company d3-teknik informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id...

48
perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS SEBELAS MARET SURAKARTA TUGAS AKHIR Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya Program Diploma III Teknik Informatika Disusun oleh : DANANG SETIAWAN SADONO NIM. M3108086 PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET 2012

Upload: dangkhanh

Post on 25-Mar-2019

229 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

i

PEMBUATAN

COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA

UNIVERSITAS SEBELAS MARET SURAKARTA

TUGAS AKHIR

Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya

Program Diploma III Teknik Informatika

Disusun oleh :

DANANG SETIAWAN SADONO

NIM. M3108086

PROGRAM DIPLOMA III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SEBELAS MARET

2012

Page 2: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

ii

HALAMAN PERSETUJUAN

Page 3: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

iii

HALAMAN PENGESAHAN

Page 4: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

iv

ABSTRACT

Danang Setiawan Sadono, 2012. CREATING AN INTERACTIVE

COMPANY PROFILE OF THE INFORMATION TECHNOLOGY

DIPLOMA PROGRAM OF SEBELAS MARET UNIVERSITY SURAKARTA.

Information Technology Diploma Program of Faculty Mathematics and Natural

Sciences Sebelas Maret University Surakarta.

One of the many ways to introduce an educational institution to the society

is by delivering information concerning kinds of program, teaching and learning

method, instructors as well as sorts of facilities available. Multimedia applications

made up of texts, sounds, drawings and animations will be more enjoyable for the

users. In addition, use of a flash -formatted interactive multimedia will make the

information delivery more interesting. The objective of this assignment is to make

the information presented enjoyable to the society.

The interactive company profile was created using several design and

animation software such as Adobe Photoshop, Adobe Flash, Pinnacle Studio and

Corel Draw. This application was designed and developed based on literature review,

got references related to the subject.

This research resulted in an interactive multimedia application giving any

information concerning the Information Technology Diploma Program of Sebelas

Maret University Surakarta: the instructors, facilities, organization structure, vision&

mission as well as its educational competence

keyword : company profile, interaktif, multimedia, flash

Page 5: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

v

ABSTRAK

Danang Setiawan Sadono, 2012. PEMBUATAN COMPANY PROFILE

INTERAKTIF DIII- TEKNIK INFORMATIKA UNIVERSITAS SEBELAS

MARET SURAKARTA. Program Diploma III Teknik Informatika Fakultas

Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta.

Penyampaian informasi mengenai jenis pembelajaran, cara pembelajaran,

dosen pengampu dan juga fasilitas yang disediakan merupakan salah satu cara

menginformasikan suatu lembaga pendidikan agar dapat diketahui oleh masyarakat.

Aplikasi multimedia yang merupakan penggabungan dari berbagai komponen seperti

teks, suara, gambar, dan animasi akan membuat pengguna menjadi nyaman dalam

menikmati informasi yang disajikan. Penggunaan multimedia interaktif berformat

flash akan membuat penyampaian informasi lebih menarik. Tujuan dari proyek tugas

ini adalah untuk memberikan kenyamanan kepada masyarakat dalam memahami

informasi yang ditampilkan.

Pembuatan company profile interaktif DIII-Teknik Informatika Universitas

Sebelas Maret Surakarta dilakukan menggunakan beberapa software desain dan

animasi seperti Adobe Photoshop, Adobe Flash, Pinnacle Studio dan CorelDraw.

Aplikasi company profile interaktif DIII-Teknik Informatika Universitas Sebelas

Maret Surakarta dirancang dan dikembangkan menggunakan metode studi pustaka

yaitu mencari referensi dan materi yang berhubungan dengan penelitian yang

dilakukan.

Penelitian ini menghasilkan aplikasi multimedia interaktif yang akan

memberikan informasi mengenai DIII-Teknik Informatika Universitas Sebelas Maret

Surakarta. Informasi yang diberikan adalah informasi mengenai dosen pengajar,

fasilitas, struktur organisasi, visi&misi, dan kompetensi pendidikan.

Kata kunci : company profile, interaktif, multimedia, flash

Page 6: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

vi

MOTTO

"Tak ada kata gagal, yang ada hanya kesuksesan yang tertunda.”

“Sebuah pilihan terbesar dalam kehidupan tidak mungkin semudah

membalikkan telapak tangan.”

" Semua permasalahan pasti bisa diatasi, tergatung kita mau

menghadapinya atau bersembunyi dibaliknya."

Page 7: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

vii

PERSEMBAHAN

Laporan Tugas Akhir ini saya persembahkan kepada:

1. Ayah dan Ibu yang telah mendidik dan menyayangi hingga sekarang ini.

2. Kakakku tercinta yang selalu memberikan dukungannya.

3. Sahabatku, Adhimas surya kusuma dan Nur Rohmad isnaini.

4. Pacarku widia yang selalu mendukung sejak pembuatan tugas akhir ini.

5. Teman-teman D3 Teknik Informatika, khususnya Teknik Infomatika B (TIB)

2008, khususnya team 7.

6. Dosen - Dosen serta staff yang berada di DIII–Teknik Informatika

Universitas Sebelas Maret Surakarta.

Page 8: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

viii

KATA PENGANTAR

Puji Syukur penulis haturkan kepada Tuhan Yang Maha Esa atas segala

karunia dan rahmat-Nya, sehingga penulis dapat menyelesaikan Laporan Tugas

Ahkir ini sebagai salah satu syarat wajib untuk kelulusan dari pendidikan Diploma

III Teknik Informatika Universitas Sebelas Maret Surakarta.

Tema yang penulis angkat adalah tentang company profile DIII – Teknik

Informatika Universitas Sebelas Maret Surakarta, yang mana lembaga ini merupakan

lembaga pendidikan IT yang berdiri dibawah naungan Universitas Sebelas Maret

Surakarta.

Penulis meyadari bahwa laporan Tugas Akhir ini masih banyak kekurangan

dan belum sepenuhnya sempurna. Oleh karena itu dengan segala kerendahan hati,

penulis mengharapkan petunjuk, saran, dan kritiknya demi hasil yang lebih baik

dikemudian hari.

Penulis mengucapkan terima kasih untuk bantuannya selama penulisan

laporan Tugas Ahkir ini kepada :

1. Allah SWT atas berkat dan rahmatnya hingga penulis dapat menyelesaikan

laporan tugas ahkir ini dengan baik.

2. Ibu dan Ayah yang tercinta, serta Kakakku yang telah memberikan semangat

dan juga support baik materi maupun spiritual.

3. Bapak Taufiqurrakhman NH, S.Kom selaku pembimbing tugas ahkir dan

telah memberikan banyak sekali masukan dan ide kepada penulis.

4. Bapak Drs.YS.Palgunadi,M.Sc sebagai Ketua Program Studi DIII – Teknik

Informatika Universitas Sebelas Maret Surakarta.

Page 9: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

ix

5. Seluruh Staff dan Dosen DIII – Teknik Informatika Universitas Sebelas

Maret Surakarta karena telah memberikan perhatian dan bimbingan kepada

penulis selama menjalani perkuliahan di Universitas Sebelas Maret.

6. Teman-teman DIII – Teknik Informatika 2008 Kelas B karena telah

memberikan ide dan masukan pada penulis.

Terima Kasih,

Surakarta, Desember 2011

Penulis

Page 10: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

x

DAFTAR ISI

Halaman

HALAMAN JUDUL ..................................................................................................... i

HALAMAN PERSETUJUAN ..................................................................................... ii

HALAMAN PENGESAHAN .................................................................................... iii

ABSTRACT ................................................................................................................ iv

ABSTRAK ................................................................................................................... v

HALAMAN MOTTO ................................................................................................. vi

HALAMAN PERSEMBAHAN ................................................................................. vii

KATA PENGANTAR .............................................................................................. viii

DAFTAR ISI ................................................................................................................ x

DAFTAR GAMBAR................................................................................................. xiv

BAB I PENDAHULUAN ............................................................................................ 1

1.1 Latar Belakang .................................................................................................... 1

1.2 Perumusan Masalah ............................................................................................ 2

1.3 Batasan Masalah ................................................................................................. 2

1.4 Tujuan dan Manfaat ............................................................................................ 2

1.5 Metodelogi Penelitian ......................................................................................... 2

1.6 Sistematika Penulisan ......................................................................................... 3

BAB II LANDASAN TEORI ...................................................................................... 5

2.1 Definisi Company Profile ................................................................................... 5

2.2 Definisi Multimedia ............................................................................................ 5

2.2.1 Definisi Text ................................................................................................. 6

2.2.2 Definisi Image / Grafik / Gambar ................................................................ 7

Page 11: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xi

2.2.3 Definisi Animasi .......................................................................................... 8

2.2.4 Definisi Audio / Sound ................................................................................. 9

2.2.5 Definisi Video ............................................................................................... 9

2.3 Definisi Interaktif .............................................................................................. 10

2.4 Multimedia Interaktif ........................................................................................ 10

2.5 Konsep Dasar Flash dan Animasi SWF ............................................................ 11

2.6 Action Script ..................................................................................................... 11

BAB III DESAIN DAN PERANCANGAN .............................................................. 12

3.1 Analisis Kebutuhan Perangkat .......................................................................... 12

3.1.1 Kebutuhan Perangkat Lunak ...................................................................... 12

3.1.2 Kebutuhan Prangkat Keras ......................................................................... 12

3.2 Langkah Pengembangan Aplikasi .................................................................... 13

3.2.1 Merancang Konsep Aplikasi ...................................................................... 13

3.2.2 Membuat Aplikasi Informasi profile company .......................................... 13

3.2.3 Melakukan Pengujian ................................................................................. 13

3.2.4 Perbaikan .................................................................................................... 14

3.2.5 Proses Finishing ......................................................................................... 14

3.3 Perancangan Aplikasi ....................................................................................... 15

3.3.1 Content ....................................................................................................... 15

3.3.2 Struktur Aplikasi ........................................................................................ 15

3.4 Rancangan Desain Antarmuka Aplikasi ........................................................... 16

3.4.1 Desain Opening .......................................................................................... 16

Page 12: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xii

3.4.2 Desain Tampilan Utama dan Beranda ........................................................ 17

3.4.3 Desain Sertifikasi ....................................................................................... 17

3.4.4 Desain Galeri .............................................................................................. 18

3.4.5 Desain Film ................................................................................................ 18

3.4.6 Desain Keluar ............................................................................................. 19

3.4.6 Desain Update Informasi ........................................................................... 19

BAB IV IMPLEMENTASI DAN ANALISA ............................................................ 23

4.1 Detail Aplikasi .................................................................................................. 23

4.2 Tampilan Antar Muka ....................................................................................... 23

4.2.1 Opening ...................................................................................................... 23

4.2.2 Menu Utama dan Beranda .......................................................................... 24

4.2.3 Menu Sertifikasi ......................................................................................... 26

4.2.4 Menu Galeri ............................................................................................... 27

4.2.5 Menu Film .................................................................................................. 28

4.2.6 Keluar ......................................................................................................... 29

4.2.7 Update Informasi ....................................................................................... 30

4.2.8 Jenis Update Informasi .............................................................................. 30

4.2.9 Update Isi content ...................................................................................... 31

4.2.9 Update Gallery ........................................................................................... 31

BAB V PENUTUP ..................................................................................................... 33

Kesimpulan ............................................................................................................. 33

Page 13: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xiii

Saran ....................................................................................................................... 33

DAFTAR PUSTAKA ................................................................................................. 34

Page 14: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xiv

DAFTAR GAMBAR

Halaman

Gambar 3.1 Bagan langkah pengembangan aplikasi .................................................. 14

Gambar 3.2 Site Map Aplikasi ................................................................................... 16

Gambar 3.3 Desain Opening ...................................................................................... 17

Gambar 3.4 Desain Tampilan Utama ......................................................................... 17

Gambar 3.5 Desain Sertifikasi .................................................................................... 18

Gambar 3.6 Desain Galeri .......................................................................................... 18

Gambar 3.7 Desain Film............................................................................................. 19

Gambar 3.8 Desain keluar .......................................................................................... 19

Gambar 3.9 Diagram Konteks Update Informasi ....................................................... 20

Gambar 3.10 DFD Level 0 ......................................................................................... 20

Gambar 3.11 DFD Level 1 Kelola Data ..................................................................... 21

Gambar 4.1 Opening .................................................................................................. 23

Gambar 4.2 Pilih Bahasa ............................................................................................ 24

Gambar 4.3 Menu Utama ........................................................................................... 24

Gambar 4.4 Submenu Beranda dan Home ................................................................. 26

Gambar 4.5 Menu Sertifikasi ..................................................................................... 26

Gambar 4.6 Menu Galeri ............................................................................................ 28

Gambar 4.7 Menu Film .............................................................................................. 29

Gambar 4.8 Keluar ..................................................................................................... 29

Gambar 4.9 Update Infrormasi ................................................................................... 30

Gambar 4.10 Jenis Update ......................................................................................... 30

Gambar 4.11 Update isi content ................................................................................. 31

Page 15: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xv

Gambar 4.12 Tambah gambar gallery ........................................................................ 32

Gambar 4.13 Edit gallery ........................................................................................... 32

Page 16: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Multimedia sebenarnya sudah lama digunakan dalam bidang

periklanan sebelum pengenalan komputer. Pada masa itu, multimedia merujuk

pada media promosi seperti radio, televisi, proyektor dan film. Setelah

berkembangnya teknologi komputer, secara berangsur-angsur multimedia

terintegrasi dengan komputer. Kemajuan teknologi di bidang komputer yang

begitu pesat telah mendorong semakin berkembangnya sebuah informasi yang

berbasis pada multimedia. Salah satunya Company Profile berbasis multimedia

interaktif yang mengintegrasikan antara gambar, suara, teks, dan animasi.

Company Profile merupakan penjelasan mengenai detail dan selling

point dari sebuah perusahaan, lembaga, atau instansi. Penyajian company

profile dapat dilakukan dengan beberapa cara, diantaranya dengan

menggunakan website, booklet, teks, presentasi, dan video. Dilihat dari

perkembangan yang ada, terlihat website mulai mendominasi pembuatan

company profile dibandingkan dengan alternatif lain seperti booklet, teks,

presentasi, dan video. Penulis akan membuat company profile DIII-Teknik

Informatika Universitas Sebelas Maret berbasis multimedia interaktif.

Kelebihan company profile dengan multimedia interaktif adalah tampilan

menarik yang akan menambah minat masyarakat untuk membaca info dan

memahami hal -hal dalam DIII-Teknik Informatika Universitas Sebelas Maret.

Pembuatan company profile yang berbasis pada flash dan xml akan

lebih memudahkan pengguna untuk mengupdate informasi company profile.

Penambahan ataupun pengurangan informasi dapat dilakukan tanpa harus

membuka file master dari aplikasi ini, pengguna dapat menggunakan web

browser untuk melakukan pengubahan informasi. Dengan desain yang aplikatif

dan interaktif akan membuat masyarakat menjadi lebih nyaman dalam

Page 17: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

2

membaca dan melihat company profile yang ada. Company profile berbasis

multimedia interaktif yang didukung dengan gambar dan suara akan lebih bisa

diterima karena akan mempermudah masyarakat dalam memahami informasi

yang telah disediakan. Integrasi antara gambar, suara, animasi, teks maka

aplikasi berbasis multimedia akan menjadi sebuah company profile yang

interaktif dan aplikatif.

1.2 Perumusan Masalah

Berdasarkan latar belakang masalah tersebut maka dapat diuraikan

perumusan masalah yang terjadi adalah : “Bagaimana cara membuat aplikasi

multimedia company profile interaktif DIII- Teknik Informatika Universitas

Sebelas Maret Surakarta dengan tampilan yang menarik dan perubahan data

informasi yang dapat dilakukan tanpa membuka file project.”

1.3 Batasan Masalah

Agar lebih terfokus dan tidak melebar, maka pokok bahasan dibatasi

pada isi dari Company Profile DIII-Teknik Informatika diantaranya

menjelaskan gambaran singkat mengenai Fasilitas, Informasi Akademik, Profil

DIII-Teknik Informatika serta animasi dalam menu penyajian.

1.4 Tujuan dan Manfaat

Tujuan dari pembuatan Tugas Akhir ini adalah membuat Company

Profile interaktif DIII-Teknik Informatika Universitas Sebelas Maret yang

berbasis multimedia interaktif.

Manfaat dari pembuatan aplikasi ini adalah dapat digunakan sebagai

sarana publikasi DIII–Teknik Informatika Universitas Sebelas Maret Surakarta.

1.5 Metodelogi Penelitian

Metode penelitian yang digunakan dalam proses pembuatan company

profile interaktif DIII-Teknik Informatika Universitas Sebelas Maret Surakarta

antara lain:

Page 18: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

3

1. Observasi

Metode observasi adalah metode pengumpulan data dengan cara

melakukan pengamatan dan pencatatan data-data serta berbagai hal yang akan

dibutuhkan dalam proses penelitian. Observasi yang dilakukan dalam

penyusunan tugas akhir ini dengan cara mencari contoh dan referensi mengenai

Company Profile yang pernah ada. Observasi juga dilakukan dengan mencari

booklet yang diterbitkan DIII –Teknik Informatika.

2. Studi Pustaka

Studi pustaka merupakan metode pencarian dan pengumpulan data

dengan cara mencari referensi, literatur, atau bahan-bahan teori yang

diperlukan dari berbagai sumber wacana yang berkaitan dengan penyusunan

tugas akhir yaitu dengan teknik pengumpulan data melalui internet, mencari

buku-buku referensi yang berhubungan dengan masalah mengenai tema dalam

penyusunan tugas akhir ini dan buku-buku mengenai flash.

1.6 Sistematika Penulisan

1. BAB I PENDAHULUAN

Menguraikan latar belakang, perumusan masalah, batasan masalah,

tujuan dan manfaat penelitian, serta metodologi penelitian yang

digunakan.

2. BAB II LANDASAN TEORI

Berisi landasan teori dari permasalahan yang diambil, juga

landasan teori dari multimedia dan bahasa pemrograman yang dipakai.

3. BAB III DESAIN DAN PERANCANGAN

Merupakan analisis rencana, data, dan rancangan yang akan

diterapkan pada pembuatan company profile interaktif.

4. BAB IV IMPLEMENTASI DAN ANALISA

Merupakan hasil dari pembuatan company profile interaktif dengan

gambar serta pembahasan masalah dari pembuatan company profile

interaktif.

Page 19: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

4

5. BAB V PENUTUP

Menguraikan kesimpulan yang merupakan hasil penjabaran dari

tujuan pembuatan system serta saran yang berkaitan dengan

penggembangan program yang lebih baik lagi.

Page 20: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

5

BAB II

LANDASAN TEORI

2.1 Definisi Company Profile

Pengertian company profile penulis artikan menjadi 2 bagian yaitu

company dan juga profile, dikutip dari Kamus Besar Bahasa Indonesia oleh

Departemen Pendidikan dan Kebudayaan bahwa Company dapat diartikan

sebagai perusahaan dan profile adalah grafik atau ikhtisar yang memberikan

fakta tentang hal-hal yang khusus.

Dengan demikian pengertian dari dua kata tersebut adalah grafik atau

ikhtisar yang memberikan fakta tentag hal-hal yang khusus dari sebuah

perusahaan / lembaga untuk menunjukkan identitas dan ciri dari perusahaan /

lembaga tersebut.(Budiman, 2008)

2.2 Definisi Multimedia

Multimedia adalah media yang menggabungkan dua unsur atau lebih

media yang terdiri dari teks, grafis, gambar, foto, audio, video dan animasi

secara terintegrasi. Multimedia terbagi menjadi dua kategori, yaitu:

multimedia linier dan multimedia interaktif (Juhaeri, 2007).

1. Multimedia linier adalah suatu multimedia yang tidak dilengkapi

dengan alat pengontrol apapun yang dapat dioperasikan oleh

pengguna. Multimedia ini berjalan sekuensial (berurutan).

Contoh multimedia linear : TV dan film.

2. Multimedia interaktif adalah suatu multimedia yang dilengkapi

dengan alat pengontrol yang dapat dioperasikan oleh pengguna,

sehingga pengguna dapat memilih apa yang dikehendaki untuk proses

selanjutnya. Contoh multimedia interaktif adalah: multimedia

pembelajaran interaktif, aplikasi game, aplikasi peta.

Page 21: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

6

2.2.1 Definisi Text

Teks merupakan elemen paling awal dan sederhana dalam

multimedia, yang biasanya mengacu pada kata, kalimat dan alenia atau

segala sesuatu yang tertulis atau ditayangkan. Sebagian besar multimedia

menggunakan teks karena teks sangat efektif untuk menyampaikan ide dan

panduan kepada pengguna.

Macam -macam text dalam multimedia ada 3, yaitu :

1. Static text

Merupakan teks yang dalam pengoperasiannya tidak akan mengalami

perubahan secara dinamis.

2. Dynamic text

Merupakan teks yang dalam pengoperasiannya akan mengalami

perubahan secara dinamis.

3. Input text

Merupakan teks yang memungkinkan user memberikan masukan teks.

Selanjutnya masukan tersebut akan ditindaklanjuti dengan aksi tertentu

sesuai dengan script yang dimasukkan (Yudhiantoro Dhani.2003).

Plain Text (Unformatted Text)

Plain text adalah data dalam bentuk karakter. Teks dalam hal ini

adalah kode ASCII (American Standard Code for Information Interchange)

dan ASCII extension seperti UNICODE murni.

HTML (Hypertext Markup Language)

HTML merupakan standart bahasa yang digunakan untuk

menampilkan dokumen web.

XML (eXtensible Markup Language)

XML kependekan dari eXtensible Markup Language, dikembangkan

mulai tahun 1996 dan mendapatkan pengakuan dari W3C pada bulan

Februari 1998. Teknologi yang digunakan pada XML sebenarnya bukan

Page 22: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

7

teknologi baru, tapi merupakan turunan dari SGML yang telah

dikembangkan pada awal 80-an dan telah banyak digunakan pada

dokumentasi teknis proyek-proyek berskala besar. Ketika HTML

dikembangkan pada tahun 1990, para penggagas XML mengadopsi bagian

paling penting pada SGML dan dengan berpedoman pada pengembangan

HTML menghasilkan markup language yang tidak kalah hebatnya dengan

SGML.

Seperti halnya HTML, XML juga menggunakan elemen yang

ditandai dengan tag pembuka (diawali dengan '<' dan diakhiri dengan '>'),

tag penutup (diawali dengan '</ 'diakhiri '>') dan atribut elemen(parameter

yang dinyatakan dalam tag pembuka misal <form name=”isidata”>). Hanya

bedanya, HTML medefinisikan dari awal tag dan atribut yang dipakai

didalamnya, sedangkan pada XML kita bisa menggunakan tag dan atribut

sesuai kehendak kita. (Jubilee.2009)

Keunggulan dan keuntungan XML adalah:

1. Simple, karena XML tidak serumit HTML, strukturnya jelas dan

sederhana

2. Intelligence, karena XML mampu menangani beerbagai

komplesitas markup bertingkat-tingkat.

3. Portable, karena memisahkan data dan presentasi.

4. Fast, pencarian data cepat.

5. Extensible, dapat ditukar/digabung dengan dokumen XML lain.

6. Linking, XML dapat melakukan linking yang lebih baik dari pada

HTML, bahkan dapat melink satu atau lebih poin dari dalam

maupun dari luar data.

7. Maintenance, XML mudah untuk diatur dan dipelihara, karena

hanya berupa data, stylesheet dan link terpisah dari XML.

2.2.2 Definisi Image / Grafik / Gambar

Gambar merupakan suatu representasi spatial dari suatu obyek, dan

pandangan 2D dan 3D. Gambar digital merupakan suatu fungsi dengan

Page 23: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

8

nilai-nilai yang berupa intensitas cahaya pada tiap-tiap titik pada bidang

yang telah di quantisasikan

Ada dua jenis grafik:

1. Raster

Dimana setiap pixel didefinisikan secara terpisah.

2. Vector

Dimana formula matematika digunakan untuk menggambar graphics

primitives (garis, kotak, lingkaran, elips, dan lain-lain) dan menggunakan

atributnya. Gambar vektor biasanya berukuran lebih kecil, gambar tidak

pecah, semua manipulasi dilakukan melalui rumus. (Juhaeri, 2007)

Grafik tidak hanya terdiri dari gambar-gambar statis. Grafik tersebut

dapat dimanipulasi secara dinamis:

1. Motion dynamics yaitu obyek / background bergerak

2. Update dynamics yaitu obyek berubah bentuk, warna, ukuran.

Jenis -jenis format gambar yaitu :

1. Bitmap (*.BMP)

2. Joint Photographic Expert Group (*.JPEG/*.JPG)

3. Graphics Interchange Format (*.GIF)

4. Portable Network Graphics (*.PNG)

2.2.3 Definisi Animasi

Animasi adalah “illusion of motion” yang dibuat dari image statis

yang ditampilkan secara berurutan. Pada video atau film, animasi merancu

pada teknik dimana setiap frame dalam film dibuat secara terpisah. Frame

bisa dihasilkan dari komputer, dari fotografi atau dari gambar lukisan.

Ketika frame-frame tersebut digabungkan, maka terdapat ilusi perubahan

gambar, sesuai dengan teori yang disebut dengan "persistance of vision"

(Juhaeri, 2007).

Macam -macam animasi yang telah ada saat ini yaitu :

1. Animasi Cel

2. Animasi Frame

Page 24: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

9

3. Animasi Sprite

4. Animasi Path

5. Animasi Spline

6. Animasi Vektor

7. Animasi Karakter

2.2.4 Definisi Audio / Sound

Audio berarti “suara” atau “reproduksi suara”. Dalam ilmu fisika,

suara adalah bentuk energi yang dikenal sebagai energi akustik. Secara

khusus, mengacu pada rentang frekuensi yang dapat dideteksi oleh telinga

manusia – sekitar 20Hz to 20kHz. Frekuensi 20Hz merupakan nada suara

terendah (bassiest) yang kita bisa dengar, dan 20kHz merupakan nada

tertinggi yang kita bisa dengar. (TechTarget, 2000).

Macam -macam format suara yang sudah ada antara lain :

1. AAC (Advanced Audio Coding) [*.m4a]

2. Waveform Audio [*.wav]

3. Audio CD [*.cda]

4. Mpeg Audio Layer 3 [*.mp3]

2.2.5 Definisi Video

Video adalah teknologi untuk menangkap, merekam, memproses,

mentransmisikan dan menata ulang gambar bergerak. Biasanya

menggunakan film seluloid, sinyal elektronik, atau media digital. Berkaitan

dengan “penglihatan dan pendengaran” Aplikasi video pada multimedia

mencakup banyak aplikasi (Juhaeri, 2007).

1. Entertainment: roadcast TV, VCR/DVD recording

2. Interpersonal: video telephony, video conferencing

3. Interactive: windows

Digital video adalah jenis sistem video recording yang bekerja

menggunakan sistem digital dibandingkan dengan analog dalam hal

representasi videonya. Biasanya digital video direkam dalam tape, kemudian

Page 25: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

10

didistribusikan melalui optical disc, misalnya VCD dan DVD. Salah satu

alat yang dapat digunakan untuk menghasilkan video digital adalah

camcorder, yang digunakan untuk merekam gambar-gambar video dan

audio, sehingga sebuah camcorder akan terdiri dari camera dan recorder.

2.3 Definisi Interaktif

Pengertian interaktif adalah saling melakukan aksi, antar hubungan,

dan saling aktif. Pengertian interaktif terkait dengan komunikasi dua arah

atau lebih dari komponen-komponen komunikasi yaitu hubungan antara

manusia (sebagai user/pengguna produk) dan computer

(software/aplikasi/produk dalam format file tertentu). Dengan demikian

produk/CD/aplikasi yang diharapkan memiliki hubungan dua arah antara

aplikasi dengan penggunanya (Harto, 2009). Elemen interaktif hanya dapat

ditampilkan di komputer karena elemen ini benar-benar memanfaatkan

kemampuan komputer sepenuhnya. Penambahan elemen ini juga menambah

efektivitas multimedia. Pada multimedia biasa, pengguna hanya

menyaksikan secara pasif dan runtun suatu penyampaian informasi.

Sedangkan pada multimedia interaktif, penggunanya aktif menggali

informasi dalam urutan dan bentuk yang cocok dengan masing-masing

individu yang kemudian membentuk pengetahuan dan informasi tersebut.

Aspek interaktif pada multimedia dapat berupa navigasi, simulasi,

permainan, dan latihan soal.

2.4 Multimedia Interaktif

Sekarang ini multimedia interaktif telah menjadi salah satu kebutuhan

utama manusia dalam memberikan berbagai macam informasi kepada orang

lain. Dengan media ini pengguna dapat secara aktif berinteraksi dengan

sumber informasi dan membuat pengguna menjadi lebih memahami apa saja

yang terdapat dalam informasi tersebut. Awal mulanya multimedia interaktif

hanya sebatas 2D (dua dimensi) saja, akan tetapi seiring perkembangan

jaman multimedia interaktif 2D mulai tergantikan dengan multimedia

Page 26: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

11

interaktif 3D. Berikut ini adalah beberapa contoh untuk multimedia

interaktif 2D : Website , 2D flash animation, dan lain-lain. Sedangkan untuk

contoh multimedia interaktif 3D : Virtual gallery, game 3D, dan lain-lain.

(Hendi, 2008)

2.5 Konsep Dasar Flash dan Animasi SWF

Animasi dapat ditambahkan ke dalam halaman website dalam bentuk

animasi GIF atau video embedded. Format yang paling populer untuk

animasi website adalah Shockwave Flash (SWF), biasanya digenerate

menggunakan adobe Flash, yang berupa animasi vektor.

Flash lebih dari sekedar program animasi. Flash mendukung scripting

language, yang disebut Action Script, sehingga dimungkingkan untuk

membuat animasi yang interaktif dan membuat aplikasi website dengan

user-interface berupa Flash (Juhaeri, 2007).

2.6 Action Script

Action Script adalah bahasa pemrograman action pada flash, Jenis

script yang dipakai serupa dengan bahasa pemograman JAVA, oleh karena

itu kebanyakan orang yang telah ahli java atau setidaknya kenal tidak akan

kesulitan mengintegrasikan pada Flash, untuk terciptanya sebuah animasi

dengan Action yang sangat bermanfaat dalam Internet Communication, yang

lebih atraktif dan lebih efisien (Sanjaya, 2006).

Action Script memadukan Animasi Keyframing dengan bahasa

pemrograman yang hasil dari perpaduan keduanya, diantaranya dapat:

1. Menghemat Ukuran file

2. Kolaborasi dengan Database

a. MsAccess

b. MySql

c. ADO

d. XML

Page 27: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

12

BAB III

DESAIN DAN PERANCANGAN

3.1 Analisis Kebutuhan Perangkat

Dalam penyusunan tugas ahkir ini, alat yang dipergunakan dibagi

menjadi dua yaitu kebutuhan menggenai perangkat lunak dan perangkat

keras. Adapun rincian kebutuhan alat digunakan dalam pembuatan aplikasi

ini sebagai berikut:

3.1.1 Kebutuhan Perangkat Lunak

Dalam pembuatan aplikasi digunakan beberapa perangkat lunak

yang berfungsi sebagai dasar peralatan untuk membangun aplikasi.

Perangkat lunak yang digunakan diantaranya :

a. Adobe Photoshop dan CorelDraw : digunakan untuk

membuat dan juga melakukan editing image yang akan

digunakan untuk company profile.

b. Pinacle Studio 14 : digunakan untuk pembuatan Film yang

nantinya menjadi salah satu content yang ada di company

profile.

c. Adobe Flash : dipergunakan untuk membuat animasi 2D

yang nantinya berisikan content-content yang akan

ditampilkan di company profile.

3.1.2 Kebutuhan Prangkat Keras

Kebutuhan perangkat keras terbentuk dari kebutuhan perankat

lunak yang akan dipergunakan nantinya. Oleh karena itu dalam

membangun aplikasi ini dibutuhkan perangkat dengan spesifikasi

minimum :

a. Intel Dual Core 1.66 GHz or higher.

b. Microsoft® Windows® XP Service Pack 2 or later.

Page 28: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

13

d. 512 Mb of RAM.

e. 128 Mb of VGA.

f. 80 Gb of available hard-disk.

g. DVD-ROM drive.

h. Speaker / Headset.

3.2 Langkah Pengembangan Aplikasi

Ada beberapa langkah dalam pengembangan aplikasi company profile

DIII-Teknik Informatika Universitas Sebelas Maret Surakarta. Bagan

langkah pengembangan aplikasi bisa dilihat pada gambar 3.1. Adapun

langkah tersebut adalah:

3.2.1 Merancang Konsep Aplikasi

Perancangan konsep aplikasi dilakukan agar pembuatan aplikasi

dapat sesuai dengan kebutuhan dan tujuan yang telah ditentukan.

Perancangan juga akan memudahkan proses pembuatan aplikasi

semua kebutuhan telah ditentukan, sehingga tidak tejadi kebingungan

dalam menentukan kebutuhan aplikasi.

3.2.2 Membuat Aplikasi Informasi profile company

Pembuatan aplikasi merupakan proses utama dalam pembuatan

profile company berbasis multimedia dan xml ini. Pembuatan aplikasi

dilakukan menggunakan software adobe flash CS4, Corel Draw X5

dan Photoshop CS5. Sistem Operasi yang digunakan adalah Windows

7 Ultimate.

3.2.3 Melakukan Pengujian

Aplikasi yang dibuat harus melalui proses evaluasi sebelum

digunakan oleh pengguna. Testing dilakukan oleh pembimbing dan

dewan penguji tugas akhir yang telah ditentukan oleh panitia tugas

akhir. Testing juga dilakukan oleh masyarakat yang menjadi objek

dari pembuatan profile company berbasis multimedia ini.

Page 29: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

14

3.2.4 Perbaikan

Aplikasi multimedia diperbaiki sesuai dengan koreksi yang

diperoleh dari hasil pengujian. Jika seluruh koreksi selesai diperbaiki

maka aplikasi dites kembali.

3.2.5 Proses Finishing

Proses finishing merupakan proses pengemasan produk. Produk

yang sudah melalui proses evaluasi dan perbaikan akan dikemas pada

CD.

Gambar 3.1 Bagan langkah pengembangan aplikasi

Page 30: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

15

3.3 Perancangan Aplikasi

3.3.1 Content

Aplikasi ini nantinya akan menampilkan beberapa content yang

nantinya berguna sebagai isi dari company profile DIII – Teknik

Informatika Universitas Sebelas Maret Surakarta. Di dalam content-

content tersebut dibagi menjadi beberapa jenis content yang berbeda.

Mengenai content dapat dilihat di tabel 3.1.

Table 3.1 Tabel Content

3.3.2 Struktur Aplikasi

Pembuatan aplikasi Company Profile DIII – Teknik Informatika

Universitas Sebelas Maret Surakarta dibagi menjadi 5 content utama,

untuk masing-masing menu tersebut memiliki isi content yang berbeda.

Struktur navigasi yang digunakan adalah model site map. Lihat gambar

3.2 Site Map Aplikasi.

Beranda Sertifikasi

Galeri Film Keluar

Pro

fil

Visi &

Misi

Stru

ktu

r Org

anisasi

Fasilitas

Dosen

Pen

gajar

Pen

gen

alan

Kontak

Fasilitas

JEN

I

CIS

CO

Page 31: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

16

Gambar 3.2 Site Map Aplikasi

3.4 Rancangan Desain Antarmuka Aplikasi

Sebelum membuat aplikasi company profile DIII– Teknik Informatika

Universitas Sebelas Maret Surakarta terlebih dahulu dibuat rancangan

mengenai desain antarmuka aplikasi. Rancangan desain antarmuka aplikasi

terdiri dari : Opening, Menu Utama, Sertifikasi, Galeri, Film dan Keluar.

Berikut adalah rancangan desain antarmuka company profile.

3.4.1 Desain Opening

Dalam pembuatan company profile DIII–Teknik Informatika

Universitas Sebelas Maret Surakarta pertama-tama user akan disambut

dengan opening program. Opening ini berupa animasi gambar dan

tulisan mengenai DIII–Teknik Informatika Universitas Sebelas Maret

Surakarta. Berikut gambar desain Opening dapat dilihat di Gambar 3.3

Desain Opening.

Page 32: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

17

Gambar 3.3 Desain Opening

Dalam desain opening disediakan juga menu pilihan untuk memilih

bahasa yang dipakai dalam menjalankan company profile DIII-Teknik

Komputer.

3.4.2 Desain Tampilan Utama dan Beranda

Desain Tampilan Utama disini merupakan tampilan yang nantinya

akan diisi dengan menu beserta animasi agar menjadi lebih menarik dan

elegan. Berikut adalah gambaran desain Tampilan Utama dan Beranda.

Lihat Gambar 3.4 Desain Tampilan Utama.

Gambar 3.4 Desain Tampilan Utama

3.4.3 Desain Sertifikasi

Sertifikasi merupakan salah satu content utama dalam company

profile DIII – Teknik Informatika Universitas Sebelas Maret Surakarta.

Didalam content tersebut terdapat beberapa sub content yaitu :

Pengenalan, Kontak, Fasilitas, Jeni dan CISCO. Berikut gambar desain

sertifikasi dapat dilihat pada Gambar 3.5 Desain Sertifikasi.

Page 33: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

18

Gambar 3.5 Desain Sertifikasi

3.4.4 Desain Galeri

Dalam company profile ini terdapat content galeri yang berfungsi

sebagai tempat foto-foto dokumentasi mengenai DIII-Teknik

Informatika Universitas Sebelas Maret Surakarta. Berikut Desain

tampilan antarmuka galeri dapat dilihat di Gambar 3.6.

Gambar 3.6 Desain Galeri

3.4.5 Desain Film

Salah satu content yang menarik dari company profile DIII–Teknik

Informatika Universitas Sebelas Maret Surakarta adalah terdapat juga

film dari company profile. Menu film ini nantinya berisikan beberapa

video berformat .flv dengan komponen berupa pemutar video dan

playlist video. Video yang digunakan nantinya menjadi external file

dalam company profile interaktif. Dalam hal ini desain tampilan untuk

menu film dapat dilihat pada gambar 3.7.

Page 34: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

19

Gambar 3.7 Desain Film

3.4.6 Desain Keluar

Saat mengahkiri aplikasi, nantinya pengguna akan diberikan

tampilan closing berupa animasi flash. Nantinya ini merupakan bagian

ahkir dari company profile interaktif DIII– Teknik Informatika

Universitas Sebelas Maret Surakarta. Desain untuk keluar dapat dilihat

di gambar 3.8.

Gambar 3.8 Desain keluar

3.4.6 Desain Update Informasi

Salah satu menu tambahan untuk company profile adalah Update

informasi. Dalam pembuatan menu tambahan Update informasi

menggunakan php. Didalamnya tersedia menu edit informasi untuk

submenu beranda, submenu sertifikasi dan tambah gambar pada galeri

dalam company profile.

Dalam rancangan desain dari Gallery informasi pemakaiaan php

digunakan untuk memperoleh inputan informasi baru yang digunakan

untuk mengUpdate informasi yang ada pada xml. diagram konteks untuk

Update informasi dapat dilihat pada gambar 3.9.

Page 35: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

20

Gambar 3.9 Diagram Konteks Update Informasi

Keterangan :

1. Kelola data Informasi

2. Lihat data Informasi

3. Lihat data Informasi

4. Request data Informasi

DFD Level 0

Gambar 3.10 DFD Level 0

Keterangan :

1. Kelola data Beranda, Sertifikasi, Gallery

2. Lihat data Beranda, Sertifikasi, Gallery

3. data Beranda_new

4. data Beranda

5. data Sertifikasi_new

Page 36: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

21

6. data Sertifikasi

7. data Gallery_new

8. data Gallery

9. data Beranda_new

10. data Beranda

11. data Sertifikasi_new

12. data Sertifikasi

13. data Gallery_new

14. data Gallery

15. Request data Beranda, data Sertifikasi, data Gallery

16. Lihat data Beranda, data Sertifikasi, data Gallery

DFD Level 1 untuk Kelola Data

Gambar 3.11 DFD Level 1 Kelola Data

Keterangan :

1. Update data Beranda, Sertifikasi, Gallery

2. data Beranda, Sertifikasi, Gallery

3. Update data Beranda_new

4. data Beranda

5. Update data Sertifikasi_new

Page 37: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

22

6. Data Sertifikasi

7. Update data Gallery_new

8. data Gallery

9. data Gallery_new

10. data Gallery

11. Edit data Gallery_new

12. data Gallery

13. data Gallery_new

14. data Gallery

15. Delete data Gallery_new

16. data Gallery

Page 38: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

23

BAB IV

IMPLEMENTASI DAN ANALISA

4.1 Detail Aplikasi

Aplikasi multimedia ini merupakan aplikasi yang berisi company

profile DIII – Teknik Informatika berbasis multimedia interaktif. Aplikasi

dibuat berbasis multimedia interaktif yaitu penggabungan dari berbagai media

penyampaian pesan seperti teks, gambar, suara, animasi dan peran aktif dari

pengguna aplikasi. Data yang ditampilkan berupa teks yang bersifat dinamis

bisa diedit melalui file xml yang menjadi file penyimpanan data informasi

aplikasi ini. Pada aplikasi ini terdapat 5 content utama yaitu : Beranda,

Sertifikasi, Galeri, Film dan Keluar. Aplikasi multimedia ini ditujukan kepada

mahasiswa DIII – Teknik Informatika dan masyarakat pada umumnya sebagai

media promisi.

4.2 Tampilan Antar Muka

4.2.1 Opening

Opening merupakan tampilan yang pertama kali keluar dalam

sebuah aplikasi. Sebelum inti dari aplikasi di munculkan, opening

memberikan tampilan pembuka sebagai perwakilan singkat dari aplikasi

utama. Opening dalam aplikasi ini dibuat dengan beberapa motion image

dan pilihan menu bahasa indonesia atau inggris sehingga terlihat menarik

dan elegan. lihat gambar 4.1.

Gambar 4.1 Opening

Implementasi

Page 39: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

24

Dalam intro menu pilihan untuk bahasa digunakan untuk masuk

kedalam menu utama. Menu pilihan bahasa dapat dilihat pada gambar 4.2

Gambar 4.2 Pilih Bahasa

4.2.2 Menu Utama dan Beranda

Menu Utama adalah content utama dalam aplikasi company profile

DIII – Teknik Informatika Universitas Sebelas Maret Surakarta. Di

dalam menu utama akan langsung terhubung dengan menu beranda.

Didalam Beranda terdapat beberapa submenu, diantaranya : Profil, Visi

& Misi, Struktur Organisasi, Fasilitas dan Dosen Pengajar. Lebih

jelasnya silahkan lihat gambar 4.3.

Gambar 4.3 Menu Utama

Implementasi

Page 40: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

25

Dapat dilihat dari gambar 4.3 Menu Utama, user dapat

menggunakan pemilihan secara interaktif sesuai dengan submenu yang

ingin user lihat. Dalam pembuatan company profile terdapat 2 bahasa,

yaitu Indonesia dan Inggris. Tetapi untuk penjelasan submenu dari menu

beranda tidak berbeda, Hanya dalam aplikasinya informasi yang

ditampilkan menggunakan bahasa yang berbeda.

Penjelasan mengenai submenu yang ada di menu Beranda atau

menu Home yaitu :

a. Profil/Profile : Berisi tentang sejarah berdirinya DIII –

Teknik Informatika Universitas Sebelas Maret Surakarta.

b. Visi & Misi/Vision & Mision : Berisi mengenai Visi &

Misi yang dimiliki oleh DIII – Teknik Informatika Universitas

Sebelas Maret Surakarta.

c. Struktur Organisasi/Organization : Berisi informasi mengenai

struktur organisasi yang ada di dalam DIII – Teknik

Informatika Universitas Sebelas Maret Surakarta.

d. Fasilitas/Fasilities : Berisi tentang segala sesuatu

mengenai fasilitas yang ditawarkan oleh DIII – Teknik

Informatika Universitas Sebelas Maret Surakarta.

e. Dosen Pengajar/Lectures : Berisi mengenai Dosen yang

mengajar di DIII – Teknik Informatika.

Dalam menggunakan fasilitas dua bahasa maka tampilan mengenai

submenu dari menu beranda/home dapat dilihat pada gambar 4.4

Page 41: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

26

Gambar 4.4 Submenu Beranda dan Home

4.2.3 Menu Sertifikasi

Sertifikasi adalah salah satu menu yang ada di dalam company

profile DIII – Teknik Informatika Universitas Sebelas Maret Surakarta.

Dalam menu ini akan terdapat beberapa submenu yaitu : Pengenalan,

Kontak, Fasilitas, CISCO dan JENI. Agar lebih jelas lihat gambar 4.5

Menu Sertifikasi.

Gambar 4.5 Menu Sertifikasi

Implementasi

Page 42: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

27

Dapat dilihat dari gambar 4.5 Menu Sertifikasi. Penggunaan dua

bahasa dalam company profile menghasilkan dua tampilan yang berbeda

untuk menu sertifikasi, dalam bahasa indonesia dan dalam bahasa

inggris. Tetapi untuk penjelasan dari informasi yang disediakan tetap

sama, hanya perbedaan terdapat pada pemakaian bahasa dalam tampilan

di company profile DIII – Teknik Informatika Universitas Sebelas Maret

Surakarta.

Penjelasan mengenai submenu yang ada di menu Sertifikasi atau

menu Certification yaitu:

a. Pengenalan/ Introduction : Berisi informasi penjelasan secara

umum mengenai lab sertifikasi.

b. Kontak/ Contacts : Berisi informasi mengenai alamat ,

telephone, website, dan fax lab sertifikasi.

c. Fasilitas/ Fasilities : Berisi informasi mengenai berbagai

macam fasilitas yang ada di dalam lab sertifikasi.

d. CISCO : Dalam submenu ini akan menampilkan

informasi mengenai CISCO

e. JENI : Dalam submenu ini akan terdapat informasi

mengenai JENI.

4.2.4 Menu Galeri

Galeri adalah salah satu content yang terdapat di aplikasi Company

Profile DIII – Teknik Informatika Universitas Sebelas Maret Surakarta.

Dalam content ini teerdapat kumpulan berbagai macam hasil publikasi

foto. Agar lebih jelasnya hasil tampilan dapat dilihat pada gambar 4.6.

Page 43: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

28

Gambar 4.6 Menu Galeri

Dapat dilihat dari gambar 4.6 Menu Galeri, pada galeri user tinggal

mengklik navigasi yang telah disediakan dan photo akan tampil langsung

dalam jendela photo yang telah disediakan beserta keterangan gambar

yang berada di bawah foto.

4.2.5 Menu Film

Menu film adalah menu yang berisikan beberapa video singkat

hasil buatan mahasiswa DIII – Teknik Informatika Universitas Sebelas

Maret Surakarta. Dalam menu ini terdapat pemutar video dan playlist

video. Pemutaran video dengan memilih video dari playlist kemudian

akan di tampilkan di pemutar video yang berada di samping kiri. Video

-video yang ditampilkan akan disajikan dengan format .flv. Supaya

lebih jelas lihat gambar 4.7 Menu Film.

Implementasi

Page 44: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

29

Gambar 4.7 Menu Film

4.2.6 Keluar

Keluar adalah content terahkir dalam aplikasi company profile DIII

– Teknik Informatika Universitas Sebelas Maret Surakarta. Di content

ini nantinya berupa penutupan aplikasi. Hasil implementasi dapat

dilihat di gambar 4.8 Keluar.

Gambar 4.8 Keluar

Implementasi

Implementasi

Page 45: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

30

4.2.7 Update Informasi

Untuk mempermudah pengeditan informasi pada company profile

DIII-Teknik Informatika disediakan aplikasi tambahan untuk

mengUpdate informasi berupa komponen tambahan yang berbasis php.

Informasi yang bisa diUpdate adalah submenu home, submenu

sertifikasi dan menu gallery. Didalam company profile DIII-Teknik

Informatika terdapat dua bahasa maka pada proses update informasi

juga disediakan dalam dua jenis, yaitu Update informasi untuk bahasa

indonesia dan bahasa inggris. Tampilan bisa dilihat pada gambar 4.9

Gambar 4.9 Update Infrormasi

4.2.8 Jenis Update Informasi

Didalam Update informasi terdapat dua jenis Update yaitu Update

isi content dan Update gallery. masing -masing digunakan untuk

mengedit informasi yang ada pada company profile DIII-Teknik

Informatika. Lihat gambar 4.10

Gambar 4.10 Jenis Update

Page 46: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

31

4.2.9 Update Isi content

Pada Update isi content terdapat pilihan menu yang akan di

Update, yaitu menu Home dan menu Sertifikasi. Didalamnya terdapat

informasi yang sudah ada dan yang bisa diedit. Pengeditan

menggunakan sebuah text area sebagai area Update informasi. lihat

gambar 4.11

Gambar 4.11 Update isi content

Setelah melakukan Update informasi, informasi baru akan

disimpan kedalam xml dan ditampilkan menggunakan aplikasi flash yang

sudah dibuat.

4.2.9 Update Gallery

Pada Update gallery disediakan menu edit gambar dan tambah

gambar pada gallery. Untuk menu tambah gambar disediakan pilihan

kategori gallery yang akan ditambah foto, didalamnya disediakan

Page 47: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

32

komponen upload foto utama dan foto thumbnile beserta keterangan dari

gambar. Lihat gambar 4.12

Gambar 4.12 Tambah gambar gallery

Selain menu tambah gambar gallery terdapat juga menu edit

gallery yang digunakan untuk mengubah gambar yang ada di galeri.

Didalamnya disediakan tampilan gambar-gambar yang sudah ada dalam

galeri beserta keterangannya, Untuk menu pengeditan tersedia dua

pilihan pengeditan, yaitu edit dan delete. Lihat gambar 4.13

Gambar 4.13 Edit gallery

Page 48: Pembuatan Profile Company D3-Teknik Informatika... · perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN COMPANY PROFILE INTERAKTIF DIII-TEKNIK INFORMATIKA UNIVERSITAS

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

33

BAB V

PENUTUP

Kesimpulan

Dari hasil penelitian dan analisa yang telah dilakukan, maka

penulis dapat mengambil kesimpulan bahwa sudah dapat dibuatnya

Company Profile Interaktif DIII-Teknik Informatika Universitas Sebelas

Maret Surakarta yang berbasis multimedia interaktif dan nantinya dapat

diimplementaskan langsung di DIII–Teknik Informatika Universitas

Sebelas Maret Surakarta.

Saran

Saran – saran yang dapat penulis sampaikan adalah sebagai berikut

:

a. Aplikasi ini kedepannya masih bisa dimasukkan database

yang lebih lengkap didalamnya, sehingga apabila terjadi

perubahan content cukup mengganti databasenya saja.

b. Pengembangan berikutnya adalah melalui penambahan link

external untuk dapat langung mengakses info dari sumber

seperti pada menu sertifikasi dan galeri.

c. Penambahan menu upload untuk film yang terintegrasi

dengan website agar dapat langsung masuk kedalam tag

HTML sebagai komponen dari playlist.