Analisis dan Perancangan Kiosk Informasi Berbasis Multimedia pada Pondok Indah Mall 1 dan 2

(1)

UNIVERSITAS BINA NUSANTARA Jurusan Teknik Infromatika

Skripsi Sarjana Komputer Semester Genap tahun 2007 / 2008

Analisis dan Perancangan Kiosk Informasi Berbasis Multimedia

pada Pondok Indah Mall 1 dan 2

Beri Ferdianto Pradita 0800766462

Bagus Satri Hutomo 0800766960

Bintang Laksono Endro Putro 0800770264 Kelas / Kelompok : 08PAT / 2

Abstrak

Tujuan Penelitian ini ialah menganalisis dan merancang suatu aplikasi Kiosk informasi berbasis multimedia yang dapat memberikan kemudahan dalam mendapatkan informasi yang cepat, lengkap, dan akurat kepada para pengunjung yang direpresentasikan dalam sebuah aplikasi piranti lunak. Metode Penelitian yang digunakan dalam membuat aplikasi Kiosk informasi ini adalah metode analisis dan perancangan. Dalam metode analisis dilakukan pengidentifikasian piranti lunak yang digunakan untuk menunjang pembuatan aplikasi Kiosk informasi ini, dan melakukan wawancara serta melakukan survei dengan pembagian kuisioner untuk mendapatkan informasi yang diperlukan. Sedangkan dalam perancangan dilakukan pembuatan struktur menu berupa perancangan hierarki menu, pembuatan statechard, spesifikasi proses, dan perancangan layar. Hasil yang dicapai dari penelitian ini adalah bahwa pengunjung masih banyak mengalami kesulitan dalam mencari informasi di Pondok Indah Mall 1 dan 2. Hal ini dikarenakan besarnya wilayah Pondok Indah Mall dan kurang menariknya papan directory yang disediakan oleh pihak pengelola mall. Aplikasi Kios informasi ini berbasis multimedia yang didukung dengan teks, gambar, suara serta animasi sehingga memberikan tampilan yang lebih menarik dan interaktif. Kesimpulan yang dapat diambil adalah dengan adanya aplikasi kios informasi pada Pondok Indah Mall 1 dan 2 yang berbasiskan multimedia ini adalah para pengunjung Pondok Indah Mall bisa mendapatkan informasi tentang toko - toko serta fasilitas umum yang berada di Mal Metropolitan secara lengkap, menarik dan interaktif.

Kata Kunci : Pondok Indah Mall 1 dan 2, Kiosk informasi, Multimedia

(2)

PRAKATA

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa atas segala rahmat, berkat dan karunia-Nya, sehingga penulis dapat menyelesaikan penulisan skripsi ini dengan baik dan tepat pada waktunya.

Pada kesempatan ini, penulis ingin mengucapkan terima kasih yang sedalam-dalamnya atas bantuan baik secara moral maupun secara materiil dari berbagai pihak baik secara langsung maupun tidak langsung selama penulisan skripsi ini. Untuk itu penulis ingin mengucapkan terima kasih kepada:

1. Kepada orang tua serta keluarga penulis yang selalu memberikan perhatian, doa, dan motivasi baik secara moril maupun materil selama penyusunan skripsi ini.

2. Prof. DR. Gerardus Polla, M.App. Sc., selaku Rektor Universitas Bina Nusantara.

3. Ir. Sablin Yusuf, M.Sc, M.CompSc., selaku Dekan Universitas Bina Nusantara.

4. Freddy Purnomo, S.Kom, M.Kom selaku Ketua Jurusan Teknik Informatika Universitas Bina Nusantara.

5. Henny, S.kom M SoftSysEng selaku Sekrtaris Jurusan Teknik Informatika Universitas Bina Nusantara.

6. Elidjen, S.Kom., MInfoCommTech. selaku dosen pembimbing yang dengan sabar memberikan bimbingan, pengarahan dan saran-saran yang sangat bermanfaat dalam penyusunan skripsi ini.

(3)

7. Segenap staf pengajar Fakultas Ilmu Komputer Universitas Bina Nusantara, yang telah memberikan pengetahuan dan pendidikan kepada kami selama kami mengikuti perkuliahan.

8. Seluruh staff Pondok Indah Mall yang telah membantu kami dalam mengerjakan penelitian ini.

9. Orang tua dan seluruh keluarga yang telah memberikan dukungan moril maupun materiil selama menjalani perkuliahan dan penulisan skripsi ini. 10. Rekan-rekan mahasiswa dan berbagai pihak yang tidak dapat disebutkan satu

persatu yang telah membantu baik secara langsung maupun tidak langsung selama penulisan skripsi ini.

Penulis menyadari sepenuhnya bahwa dalam penulisan skripsi ini masih jauh dari kesempurnaan karena adanya keterbatasan waktu, pengetahuan dan pengalaman. Oleh karena itu, penulis sangat mengharapkan adanya saran dan kritik yang membangun untuk menyempurnakan karya tulis skripsi ini.

Akhir kata, penulis berharap agar skripsi yang telah dibuat ini dapat bermanfaat bagi Universitas Bina Nusantara dan pihak-pihak yang membutuhkan sebagai pedoman penelitian maupun pengembangan lebih lanjut.

Jakarta, 2008

Penulis

(4)

DAFTAR ISI

Halaman Judul Luar ... i

Halaman Judul Dalam ... ii

Halaman Persetujuan Hardcover... iii

Halaman Pernyataan Dewan Penguji ... iv

Abastrak ... vii

Prakata... viii

Daftar Isi ... x

Daftar Table ... xv

Daftar Gambar... xvii

Daftar Lampiran ... xx

BAB 1 ... 1

PENDAHULUAN ... 1

1.1. Latar Belakang ... 1

1.2. Ruang Lingkup... 2

1.3. Tujuan dan Manfaat ... 2

1.4. Metodologi Penelitian ... 3

1.4.1 Metode Analisis ... 3

1.4.2 Metode Perancangan ... 4

(5)

BAB 2 ... 6

LANDASAN TEORI ... 6

2.1. Multimedia ... 6

2.1.1. Elemen dan Komponen Multimedia ... 7

2.2. Aplikasi Multimedia ... 13

2.3. Kiosk Informasi... 14

2.3.1. Komponen Kiosk Informasi... 15

2.4. Interaksi Manusia Dan Komputer ... 15

2.4.1. Definisi Interaksi Manusia dan Komputer ... 16

2.4.2. Aturan Umum Interaksi Manusia dan Komputer... 17

2.4.3 Teori perancangan layar... 19

2.4.4 Teori Warna ... 20

2.5. Rekayasa Piranti Lunak... 21

2.5.1. Pengertian Piranti Lunak... 21

2.5.2. Karakteristik Piranti Lunak ... 22

2.6. IMSDD... 23

2.7. Sistem Basis Data... 26

2.7.1. Definisi Sistem Basis Data... 26

2.7.2. Komponen Basis Data... 28

2.8. UML ... 29 2.8.1. Pengertian UML... 29 2.8.2. Karakteristik UML ... 29 2.8.3. Klasifikasi UML... 29 2.9. State Diagram ... 32 xi

(6)

2.10. Mall ... 34

BAB 3 ... 35

ANALISIS DAN PERANCANGAN... 35

3.1. Sejarah Perusahaan... 35

3.2. Strukrtur Organisasi ... 36

3.3. Sistem yang Sedang Berjalan... 38

3.3.1. Analisa Sistem yang Sedang Berjalan... 38

3.3.2. Identifikasi Kebutuhan Informasi ... 39

3.4. Analisa Hasil Kusioner ... 42

3.5. Masalah yang Dihadapi... 55

3.6. Usulan Pemecahan Masalah... 55

3.7. Perancangan Kiosk Informasi ... 56

3.7.1. Struktur Menu ... 56

3.7.2. Statechart... 56

3.7.3. Perancangan layar ... 62

3.7.3.1 Perancangan layar front-end... 62

3.7.3.2 Perancangan layar pemeliharaan data ... 70

3.7.4. Perancangan Database... 75

3.7.5. Spesifikasi proses ... 81

BAB 4 ... 88

EVALUASI DAN IMPLEMENTASI... 88

4.1. Implementasi kiosk Informasi... 88

(7)

4.2. Implementasi Jaringan Kiosk Informasi Pondok Indah Mall 1 dan 2... 91

4.3. Implementasi Penempatan dan Rancangan Kiosk Informasi Pondok Indah Mall 1 dan 2 ... 92

4.4. Tampilan Layar User (Front End) Pada Kiosk Informasi Pondok Indah Mall 1 dan 2 ... 93

4.4.1 Layar Directory ... 93

4.4.2 Layar Search... 95

4.4.3 Layar Event ... 96

4.4.5 Layar Cinema ... 97

4.5. Tampilan Layar Backend Pada Kiosk Informasi Pondok Indah Mall 1 dan 2 99 4.5.1. Layar Login... 99

4.5.2. Layar Editor Toko ... 100

4.5.3. Layar Editor Detail Toko ... 100

4.5.4. Layar Editor Kategori ... 101

4.5.5. Layar Editor Cinema ... 102

4.5.6. Layar Editor Event ... 103

4.6. Evaluasi ... 104

4.6.1 Konsistensi ... 104

4.6.2 Penggunaan Shortcut... 105

4.6.3 Umpan balik (feedback) yang informatif ... 107

4.6.4 Dialog yang menghasilkan keadaan akhir... 107

4.6.5 Pencegahan dan penanganan kesalahan sederhana ... 109

4.6.6 Pembalikan aksi ... 110

4.6.7 Pusat kendali internal (internal locus of control)... 110

(8)

4.6.8 Mengurangi beban ingatan jangka pendek... 111

BAB 5 ... 113

SIMPULAN DAN SARAN ... 113

5.1. Simpulan ... 113

5.2. Saran... 113

DAFTAR PUSTAKA ... 115

DAFTAR RIWAYAT HIDUP ... 117 LAMPIRAN... L1 FOTOCOPY SURAT SURVEY

(9)

DAFTAR TABEL

Tabel 2.1 Komponen State Diagram ... 33

Tabel 3.1 Maksud dan Tujuan Pertanyaan Kuisioner ... 39

Tabel 3.2 Persentase Kuisioner Awal Pengunjung Pertanyaan Nomor 1 ... 42

Tabel 3.15 Tabel Toko_Kategori ... 75

Tabel 3.16 Tabel Toko ... 75

Tabel 3.17 Tabel Kavling... 76

Tabel 3.18 Tabel Kategori... 76

Tabel 3.19 Tabel Film ... 77

Tabel 3.20 Tabel Event ... 78

Tabel 3.21 Tabel User ... 78

(10)

Tabel 3.22 Tabel Jam Tayang ... 79 Tabel 3.23 Tabel cinema_jamTayang ... 79

(11)

DAFTAR GAMBAR

Gambar 2.1 Kiosk Informasi... 15

Gambar 2.2 Siklus IMSDD... 24

Gambar 3.1 Struktur Organisasi ... 37

Gambar 3.2 Diagram Hasil Kuisioner Pengunjung Pertanyaan Nomor 1 ... 42

Gambar 3.15 Struktur Menu Layar Directory ... 56

Gambar 3.16 Statechart Directory... 57

Gambar 3.17 Statechart Search... 58

Gambar 3.18 Statechart Event... 59

Gambar 3.19 Statechart Cinema... 60

Gambar 3.20 Statechart Pemeliharaan Data ... 61

(12)

Gambar 3.21 Perancangan Layar Search... 62

Gambar 3.22 Perancangan Layar List Search... 64

Gambar 3.23 Perancangan Layar Directory... 65

Gambar 3.24 Perancangan Layar Shop Detail ... 66

Gambar 3.25 Perancangan Layar Event... 67

Gambar 3.26 Perancangan Layar Cinema... 68

Gambar 3.27 Perancangan Layar Editor kategori... 70

Gambar 3.28 Perancangan Layar Editor Toko ... 71

Gambar 3.29 Perancangan Layar Editor kavling ... 72

Gambar 3.30 Perancangan Layar Editor Event... 73

Gambar 3.31 Perancangan Layar Editor Cinema ... 73

Gambar 3.32 Perancangan Layar Toko kategori ... 74

Gambar 3.33 ERD Kiosk informasi Pondok Indah Mall 1 dan 2 ... 80

Gambar 4.1 Jaringan LAN Kiosk Informasi Pondok Indah Mall 1 dan 2 ... 91

Gambar 4.2 Rancangan Box Kiosk Informasi ... 92

Gambar 4.3 Tampilan Layar Directory... 93

Gambar 4.4 Tampilan Directory yang di zoom ... 94

Gambar 4.5 Tampilan layar Shop Detail pada Directory... 95

Gambar 4.6 Tampilan Menu Search... 95

Gambar 4.7 Tampilan Menu Event... 96

Gambar 4.8 Tampilan Menu Cinema... 97

Gambar 4.9 Tampilan Menu Sinopsis Cinema... 98

Gambar 4.10 Tampilan Menu Trailer Cinema... 98

(13)

Gambar 4.12 Tampilan Layar Editor Toko... 100

Gambar 4.13 Tampilan Layar Editor Detail Toko... 100

Gambar 4.14 Tampilan Layar Editor Kategori ... 101

Gambar 4.15 Tampilan Layar Editor Cinema... 102

Gambar 4.16 Tampilan Layar Editor Event... 103

Gambar 4.17 Konsistensi Font, Warna, Tata Letak, dan Desain Antar Layar ... 105

Gambar 4.18 Shortcut Utama pada Kiosk Informasi Pondok Indah Mall ... 105

Gambar 4.19 Umpan Balik dari Sebuah Pemilihan Tag pada Fasilitas Search... 106

Gambar 4.20 Tampilan Editor Kategori yang Menampilkan Preview dari Input.. 107

Gambar 4.21 Tampilan dialog box yang Memberikan Keadaan Akhir... 108

Gambar 4.22 Tampilan Pencegahan Kesalahan Berupa Petunjuk Pengisian Data Kategori Baru. ... 109

Gambar 4.23 Tampilan Layar ketika User Mengembalikan Tag yang Salah Dipilih ... 110

Gambar 4.24 Tampilan layar Seluruh Akses Kiosk Informasi ... 110

Gambar 4.25 Penggunaan Tampilan yang Mengurangi Beban Ingatan Jangka Pendek ... 111

Gambar 4.26 Penggunaan Warna pada Tombol Navigasi untuk Mengurangi Beban Ingatan Jangka Pendek... 112

(14)

DAFTAR LAMPIRAN

Kuisioner Pengunjung PIM1 dan 2 ... L-1 Kuisioner untuk pengunjung setelah aplikasi di uji coba ... L-5 Pertanyaan Wawancara I... L-6 Hasil Wawancara I ... L-6